hello.js

var please = require('share');
console.log('thank you');

Monday, 30 April, 2018 UTC

Communicating Between Recursive Components in Vue.js

Communicating Between Recursive Components in Vue.js

In the Recursive Components in Vue.js post we’ve seen how to build a recursive Tree component, but we didn’t have to communicate any action across the tree. Let’s tackle that problem in this post. What do you Mean by Communication? Imagine that you want ... more


Monday, 30 April, 2018 UTC

Write Element-Based Responsive Components in Vue.js

Write Element-Based Responsive Components in Vue.js

CSS Media Queries are great. They allow you to change the styles of your components based on the size of the browser viewport. But they’re not always what you need. Sometimes you want to change your components’ styles based on the width of the components ... more


Saturday, 28 April, 2018 UTC

How to integrate ESLint with Vue.js and Vetur in Visual Studio Code

How to integrate ESLint with Vue.js and Vetur in Visual Studio Code

If you don’t know ESLint, it’s a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs, checking the code formatting, unused variables, etc. Through this tool, ... more


Thursday, 26 April, 2018 UTC

Native Modals on the Web Using the HTML Dialog Element

Native Modals on the Web Using the HTML Dialog Element

The HTML 5.2 spec introduced a dialog element that makes it easy to implement native modals and pop-ups. Modals are an important part of almost any non-trivial web app, so it’s promising to think that there’s finally a way to implement one without re-inventing ... more


Tuesday, 24 April, 2018 UTC

Understanding the React Context API

Understanding the React Context API

With React 16.3 we now have access to a brand new context API. With React’s old context API, the official recommendation was for developers to avoid using it, but now the new context API is a first-class citizen. While not meant as a replacement for ... more


Monday, 23 April, 2018 UTC

Creating a Recursive Tree Component in Vue.js

Creating a Recursive Tree Component in Vue.js

Recursion has been always a pain to learn in algorithmics. In some cases however, using recursion feels more natural than using iteration. Traversing a tree is one of them. We can create recursive components in Vue.js and any other framework by following ... more


Monday, 23 April, 2018 UTC

Linting TypeScript Vue.js Components with Wotan

Linting TypeScript Vue.js Components with Wotan

TypeScript is a special language. People tend to either love it or vehemently hate it (though it seems like most of those who’ve tried it, love it). Regardless of your opinion, TypeScript can be quite convenient at times. But, it can be a pain to get ... more


Thursday, 19 April, 2018 UTC

Code Splitting in React Using React Loadable

Code Splitting in React Using React Loadable

Code splitting is a technique used more in more with modern web app development that allows to load chunks of code only when needed. For example, with route-based code splitting, a user can be navigating to different routes of an app and behind the scenes ... more


Thursday, 19 April, 2018 UTC

Easy State Management in React Using Unstated

Easy State Management in React Using Unstated

Another day, another way to manage your application state in React! Unstated is a new library by @jamiebuilds that uses the React’s new context API to allow for a really simple way to manage your state. Let’s go over how to use Unstated, and don’t worry, ... more


Wednesday, 18 April, 2018 UTC

Making Elements Stick in CSS Using position: sticky

Making Elements Stick in CSS Using position: sticky

There’s a new value in town for the CSS position property: sticky . It allows us to make elements stick when the scroll reaches a certain point. An element with position: sticky will behave like a relatively-positioned element until it reaches a specified ... more


Monday, 16 April, 2018 UTC

Getting Started with Server-Side Rendering Using Nuxt.js

Getting Started with Server-Side Rendering Using Nuxt.js

Nuxt.js is a powerful and simple framework built to create universal, server-side rendered applications using Vue.js. It was inpsired by Next; React’s server-side rendering (SSR) framework. Nuxt was created by Alex & Sébastien Chopin and has gained ... more


Monday, 16 April, 2018 UTC

An Introduction to VuePress

An Introduction to VuePress

You may have heard of VuePress recently, it appeared almost overnight and shortly thereafter became Product of the Day on ProductHunt. What is it about VuePress that makes it so special? What is VuePress? Well, it’s effectively a static site generator. ... more


Sunday, 15 April, 2018 UTC

File Upload in Vue.js Using vue-dropzone

File Upload in Vue.js Using vue-dropzone

vue-dropzone is a vue component implemented on top of Dropzone.js that provides drag’n’drop functionality for file uploads with image previews. It’s quite powerful and has many options, although it gives you a great deal of functionality out-of-the-box ... more


Thursday, 12 April, 2018 UTC

Animations in React Using React Motion

Animations in React Using React Motion

React Motion is a popular library for animations in React. It makes use of physics to create animations that feel natural. All we have to do to create realistic animations is provide values for stiffness and damping and React Motion takes care of the ... more


Tuesday, 10 April, 2018 UTC

Displaying Content Placeholders in Vue.js with vue-content-loader

Displaying Content Placeholders in Vue.js with vue-content-loader

You might not have noticed yet, but several major apps are migrating away from the indefinite loading circle indicator paradigm (say that five times fast). Why? Because, while it’s better than nothing, it still makes users feel impatient waiting for ... more


Monday, 9 April, 2018 UTC

Performant Lists and Tables in Vue.js with vue-virtual-scroller

Performant Lists and Tables in Vue.js with vue-virtual-scroller

As a developer, you’ve probably had to implement a big list or table for an app, either by loading lots of data without pagination, or using an infinite scroll pagination and scrolling several times through it. These lists or tables can become slow, ... more


Thursday, 5 April, 2018 UTC

An Introduction to Redux's Core Concepts

An Introduction to Redux's Core Concepts

Redux is a predictable state container for JavaScript apps, and a very valuable tool for organizing application state. It’s a popular library to manage state in React apps, but it can be used just as well with Angular, Vue.js or just plain old vanilla ... more


Tuesday, 3 April, 2018 UTC

Implementing an Infinite Scroll with Vue.js

Implementing an Infinite Scroll with Vue.js

Infinite scrolls have their place on the web, but it aren’t for every website or application. They’re especially useful when you need to load large amounts of data or images when the user needs them rather than at all once. Social media outlets like ... more


Sunday, 1 April, 2018 UTC

Integrating and Using CSS Frameworks with Vue.js

Integrating and Using CSS Frameworks with Vue.js

CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step and more part of the development process. Generally speaking, integrating each framework ... more


Friday, 30 March, 2018 UTC

An Easy Way to Get Started with the MERN Stack

An Easy Way to Get Started with the MERN Stack

The MERN stack consists of MongoDB, Express, React / Redux, and Node.js. Given the popularity of React on the frontend and of Node.js on the backend, the MERN stack is one of the most popular stack of technologies for building a modern single-page app. ... more


Friday, 23 March, 2018 UTC

Detecting Breakpoints Using the Angular CDK

Detecting Breakpoints Using the Angular CDK

The Angular CDK has a layout package with services that make it easy to detect viewport sizes and matches against media queries. This allows you full control over the UI and to adapt to different screen sizes. Let’s quickly go over how to use the CDK’s ... more


Friday, 23 March, 2018 UTC

Intro to GraphQL in React Using React Apollo & Apollo Boost

Intro to GraphQL in React Using React Apollo & Apollo Boost

The Apollo GraphQL client is a very popular way to interface with a GraphQL API on the client-side. In this post we’ll go over how to setup Apollo in a React app using Apollo Boost and React Apollo 2.1 . What are these two for, you ask? Apollo Boost ... more


Wednesday, 21 March, 2018 UTC

Guide Users Through Your Vue.js App with vue-tour

Guide Users Through Your Vue.js App with vue-tour

Developing web apps is hard. There are so many things to think about. Way, way, waaay too many. It’s easy to get caught up in the details and forget one important little thing: How will users know how to use your app once it’s done? The simplest way ... more


Tuesday, 20 March, 2018 UTC

Creating a Vue.js File Reader Component Using the FileReader API

Creating a Vue.js File Reader Component Using the FileReader API

Sometimes we need to read data from files. In old times, you’d need to send it to a server and for it to then return the data needed. The thing is, nowadays we can also access files directly in the browser using the FileReader API. If we just want to ... more


Monday, 19 March, 2018 UTC

How to Use Custom SVG Icons in Angular Material

How to Use Custom SVG Icons in Angular Material

The Angular Material library offers a suite of Angular components styled with Material Design. One such component is the <mat-icon> component. There are a wide range of ready-made Material icons which we can use readily. But what if we want to ... more


Friday, 16 March, 2018 UTC

Accessing Rails APIs in JavaScript Clients Using Rails Ranger

Accessing Rails APIs in JavaScript Clients Using Rails Ranger

Rails Ranger is a library I wrote that’s focused on leveraging on the defaults of Ruby on Rails APIs to make your life easier when writing javascript clients for them. It’s essentially a thin layer wrapping the powerful Axios library, while still exposing ... more


Tuesday, 13 March, 2018 UTC

Formatting Vue.js Code with ESLint & Prettier

Formatting Vue.js Code with ESLint & Prettier

Prettier roared to life last year as the solution to all your code formatting problems. It takes the code you write, transforms it into an AST, then prints that AST in a, well, prettier format. Its goal is to automate the work of formatting code to be ... more


Tuesday, 13 March, 2018 UTC

Build a Reusable Pagination Component with Vue.js

Build a Reusable Pagination Component with Vue.js

Paginating resources in web applications can be very helpful not only performance-wise but also from a user experience perspective. In this article you’ll learn how to create a dynamic and reusable Vue.js pagination component. Base Structure A pagination ... more


Sunday, 11 March, 2018 UTC

Progressive Image Rendering in Vue.js with v-lazy-image

Progressive Image Rendering in Vue.js with v-lazy-image

Often, you come across web pages which have lots of images, and with most of them out of the viewport, the browsers still loading them even thought they’re not visible. There’s lazy loading, but the downside is that while the images are loading you see ... more


Saturday, 10 March, 2018 UTC

Implementing a Simple Modal Component in React

Implementing a Simple Modal Component in React

​ Modals are one of the most ubiquitous UI elements on the web. In this post we’re going to implement a basic modal component in React. ​ Here’s a summary of the steps we’ll take: Create a Dashboard component which holds state and an open button Create ... more