hello.js

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

Thursday, 21 June, 2018 UTC

Form Handling Using Redux Form

Form Handling Using Redux Form

Handling the data and events related to forms and input fields in web apps is not most people’s idea of fun. Thankfully though, there are plenty of available libraries that abstract away some of the tedious work. If your React app already happens to ... more


Wednesday, 20 June, 2018 UTC

Add i18n Yourself in a React and Redux App

Add i18n Yourself in a React and Redux App

One thing that surprised me at first with React is how everything is a component. That may sound simple on the surface, but for the functional stuff (say form management, i18n ( internationalization ), routing, state…) it just doesn’t feel very natural ... more


Tuesday, 19 June, 2018 UTC

Asynchronous Redux Actions Using Redux Thunk

Asynchronous Redux Actions Using Redux Thunk

By default actions in Redux are dispatched synchronously, which is a problem for any non-trivial app that needs to communicate with an external API or perform side effects. Thankfully though, Redux allows for middleware that sits between an action being ... more


Monday, 18 June, 2018 UTC

Elegant UX in React with Material-UI

Elegant UX in React with Material-UI

Material Design is Google’s design language for the web centered around cards, grid-based layouts, and responsive animations. With Material-UI, a compact, customizable, and beautiful collection of components and utilities for React, putting the Material ... more


Friday, 15 June, 2018 UTC

Restart Your Node.js Apps Automatically Using nodemon

Restart Your Node.js Apps Automatically Using nodemon

So you’re working on a Node.js application and getting awfully tired of restarting the process every time you make a change? Enter nodemon, a CLI utility developed by @rem that wraps your Node app, watches the file system for changes and automatically ... more


Thursday, 14 June, 2018 UTC

Getting Started with Angular and Electron

Getting Started with Angular and Electron

Electron is a popular framework that makes it easy to build desktop apps for macOS, Linux or Windows using familiar web technologies (HTML, JavaScript and CSS). Some very popular desktop apps, such as Visual Studio Code and Slack, are built using Electron. ... more


Wednesday, 13 June, 2018 UTC

Connecting Redux to React Using React Redux

Connecting Redux to React Using React Redux

Redux is a separate entity from React and can be used with any JavaScript front-end framework or with vanilla JavaScript. Still though, it’s undeniable that React and Redux are very commonly used together, and for this the React Redux library provides ... more


Tuesday, 12 June, 2018 UTC

Scheduling Tasks in JavaScript Using setTimeout & setInterval

Scheduling Tasks in JavaScript Using setTimeout & setInterval

In browser environments, as well as with Node.js, we get two methods on the global object that make it easy to schedule tasks to be performed at a later time: setTimeout and setInterval . setTimeout : Calls a function once after a specified delay. setInterval ... more


Wednesday, 6 June, 2018 UTC

A Look at the JavaScript Console API

A Look at the JavaScript Console API

The JavaScript console is an invaluable tool to help develop and debug our apps. With the console object and its logging methods, long are the days of of calling alert() to debug and get a variable’s value. On top of that, thanks to a work in progress ... more


Monday, 4 June, 2018 UTC

Using React Router 4 with Server-Side Rendering

Using React Router 4 with Server-Side Rendering

Now that we’ve had a look at a basic setup for React server-side rendering (SSR), let’s crank things up a notch and look at how to use React Router v4 on both the client and the server. After all, most real apps need routing, so it only makes sense to ... more


Sunday, 3 June, 2018 UTC

Testing React / Redux Apps with Jest & Enzyme - Part 2: Testing React Components

Testing React / Redux Apps with Jest & Enzyme - Part 2: Testing React Components

This is part 2 of a 4-part series on testing React / Redux apps using both Jest and Enzyme for a robust testing solution. In this part we’ll cover some simple examples on how to test React components. The series Part 1 : Installation & Setup Part ... more


Wednesday, 30 May, 2018 UTC

Searchable, Async Dropdowns in React Using React-Select

Searchable, Async Dropdowns in React Using React-Select

React-Select is a highly configurable dropdown library for React that features dynamic search/filter, async option loading, accessibility, and fast render times. In this post we'll cover React-Select 2, and at the time of this writing, React-Select v2 ... more


Tuesday, 29 May, 2018 UTC

Simple Authorization in React

Simple Authorization in React

Most real world apps need authentication and authorization. While authentication identifies some entity as a valid user, authorization defines the actions that the user is allowed to perform, based on his/her roles and rights. We don’t usually need any ... more


Monday, 28 May, 2018 UTC

Managing What’s in Your Head Using React Helmet

Managing What’s in Your Head Using React Helmet

React Helmet is a simple component that makes it easy to manage and dynamically set what’s in the document’s head section. For example, you can use React Helmet to set the title, description and meta tags for the document. It comes-in especially handy ... more


Sunday, 27 May, 2018 UTC

An Introduction to React Server-Side Rendering

An Introduction to React Server-Side Rendering

Server-side rendering (SSR) is a popular technique for rendering a normally client-side only single page app (SPA) on the server and then sending a fully rendered page to the client. The client’s JavaScript bundle can then take over and the SPA can operate ... more


Wednesday, 23 May, 2018 UTC

Lightweight Charts in Vue.js with vue2-frappe

Lightweight Charts in Vue.js with vue2-frappe

When it comes to charting on the web, there are two main heavy-hitters: D3.js and Chart.js. But sometimes you don’t need a 500 pound gorilla. Sometimes you just want simple SVG charts that do exactly what you expect. That’s where Frappe Charts fits in. ... more


Wednesday, 23 May, 2018 UTC

Loading Vuex Modules Dynamically

Loading Vuex Modules Dynamically

Vuex is an easy to use and performant solution to handle state management. It makes it a breeze to manage large-scale Vue.js applications and ensures a predictable way to mutate the state by exposing a store. You may already know about Vuex, but if you ... more


Monday, 21 May, 2018 UTC

React Devtools: A Brief Introduction

React Devtools: A Brief Introduction

React Developer Tools (Devtools for short) is a browser extension for Chrome and Firefox that provides an extra set of React-specific inspection widgets to assist you with development. By installing React Devtools, you’ll get two main features: a view ... more


Monday, 21 May, 2018 UTC

Testing React / Redux Apps with Jest & Enzyme - Part 1: Installation & Setup

Testing React / Redux Apps with Jest & Enzyme - Part 1: Installation & Setup

In this four-part series learn how to test your React / Redux applications using both Jest and Enzyme for a robust testing solution. This series focuses on testing and assumes you have React / Redux knowledge. Recommended File Structure Leverage Default ... more


Sunday, 20 May, 2018 UTC

Creating Patterns Using CSS & the <css-doodle /> Web Component

Creating Patterns Using CSS & the <css-doodle /> Web Component

<css-doodle /> is a Web Component that makes it easy to create all kinds of patterns for your web designs. It’s a great example of what can be achieved using modern web technologies like custom elements, shadow DOM and CSS Grid. You can see an ... more


Friday, 18 May, 2018 UTC

Lazy Loading Components with vue-cli 3, webpack & Vue Router

Lazy Loading Components with vue-cli 3, webpack & Vue Router

SPAs (Single Page Applications) often consist of dozens or even hundreds of components that can be divided into several JavaScript bundle files. The goal of this post is to show one way to do this division and how to load each file asynchronously, only ... more


Wednesday, 16 May, 2018 UTC

Compile Vue.js templates on the Fly with v-runtime-template

Compile Vue.js templates on the Fly with v-runtime-template

I recently released v-runtime-template, a Vue component that makes it easy to compile and interpret a Vue.js template at runtime by using a v-html -like API. I had a problem in a project where I had to receive a template from the server. Why you say? ... more


Sunday, 13 May, 2018 UTC

A Quick Intro to React's Higher-Order Components

A Quick Intro to React's Higher-Order Components

When you pass a component to a function and it returns a new component, it’s called a higher-order component (HOC). If that sounds simple, it is! And your code will be simpler for using them. Over the course of this post, you’ll see how the higher-order ... more


Thursday, 10 May, 2018 UTC

Styling React Components Using glamorous

Styling React Components Using glamorous

💄 glamorous is a lightweight library for CSS-in-JS with a simple API that’s similar to styled-components’ and that makes use of glamor under the hood. Two of the main differences compared to styled-components is the use of JavaScript object literals ... more


Tuesday, 8 May, 2018 UTC

Tame the Vuex Beast with vuex-pathify

Tame the Vuex Beast with vuex-pathify

As far as Flux architecture implementations, Vue.js’ Vuex is one of the simplest, but most elegant. However, it still could be better. Trying to remember to write getters and mutations for every property in your store seems like a bit of unneeded cognitive ... more


Tuesday, 8 May, 2018 UTC

Working with Environment Variables in Vue.js

Working with Environment Variables in Vue.js

In this post, we’ll learn how to work with distinct configurations between development and production mode for Vue.js projects that use the CLI’s webpack template . In a web app, we most likely have to access a backend API server through a URL. This ... more


Friday, 4 May, 2018 UTC

Basic Express Server in Node.js

Basic Express Server in Node.js

Express is a web application framework for Node.js that allows you to spin up robust APIs and web servers in a much easier and cleaner way. It is a lightweight package that does not obscure the core Node.js features. In this post we’ll go over how to ... more


Thursday, 3 May, 2018 UTC

Angular 6: Upgrading & Summary of New Features

Angular 6: Upgrading & Summary of New Features

Angular 6 , was just released, and while the amount of new features is minimal, a lot has changed under the hood in terms of tooling. The new tooling additions are especially great for facilitating upgrading and adding new libraries to your apps. In ... more


Wednesday, 2 May, 2018 UTC

Accessing the Clipboard in JavaScript Using the Async Clipboard API

Accessing the Clipboard in JavaScript Using the Async Clipboard API

There’s a new JavaScript API for asynchronous clipboard access with a spec that’s currently in the works. The de facto way to copy text to the clipboard on the web has been to use document.execCommand, but a major caveat is that the operations are synchronous ... more


Tuesday, 1 May, 2018 UTC

A Look at the Resize Observer JavaScript API

A Look at the Resize Observer JavaScript API

Resize Observer is a new JavaScript API that’s very similar to other observer APIs like the Intersection Observer API. It allows for elements to be notified when their size changes. The most frequent reason for an element’s size to change is when the ... more