hello.js

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

Thursday, 12 July, 2018 UTC

Building an Accordion Component with React

Building an Accordion Component with React

Ahhhhh, the accordion. I’m not talking about Weird Al’s instrument of choice, but the graphical control element. Do you have too much content on a page? An accordion allows you to break things up into smaller chunks that your end-users can toggle open ... more


Wednesday, 11 July, 2018 UTC

Using Font Awesome 5 in React

Using Font Awesome 5 in React

In part one of this series we demoed reactstrap to create simple forms quickly and efficiently. In this installment, we’re going to use Font Awesome 5 to add some SVG icons and make our forms even more attractive. Note: Font Awesome 5.1 welcomed huge ... more


Wednesday, 11 July, 2018 UTC

Testing React / Redux Apps with Jest & Enzyme - Part 4: Testing Redux Reducers

Testing React / Redux Apps with Jest & Enzyme - Part 4: Testing Redux Reducers

This is part 4 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 Redux reducers. The series Part 1 : Installation & Setup Part 2 ... more


Tuesday, 10 July, 2018 UTC

Easy Parallax Effect in Vue.js

Easy Parallax Effect in Vue.js

As a frontend developer you often need to create different kind of interactions and animations, such as parallax : an effect that makes a background image scroll slower so it gives the illusion that it is deeper in the screen. We’ve already shown you ... more


Sunday, 8 July, 2018 UTC

Google Analytics on your React/Redux App with Redux Beacon

Google Analytics on your React/Redux App with Redux Beacon

Redux Beacon is an analytics middleware for Redux and ngrx that enables you to track actions as they are dispatched and send them to any number of analytics providers. Supported providers include Google Analytics, Segment, and Amplitude. In this article, ... more


Thursday, 5 July, 2018 UTC

Getting Started with React Native and Expo

Getting Started with React Native and Expo

In this article, we will learn how to make a React Native application with Expo and create-react-native-app and learn about some of the differences between React and React Native code and file structure. Thinking about making a phone app? Know React ... more


Wednesday, 4 July, 2018 UTC

Drag and Drop File Uploads in React with react-dropzone

Drag and Drop File Uploads in React with react-dropzone

Still using <input type="file" /> to handle file uploads in your React app? What if I told you there was a better way? react-dropzone is a simple (and HTML5-compliant) React.js component for handling the dragging and dropping of files. ... more


Tuesday, 3 July, 2018 UTC

Fancy Forms in React with Reactstrap

Fancy Forms in React with Reactstrap

Reactstrap provides prebuilt Bootstrap 4 components that allow a great deal of flexibility and prebuilt validation. This allows us to quickly build beautiful forms that are guaranteed to impress and provide an intuitive user experience. The series Part ... more


Thursday, 28 June, 2018 UTC

Git Basics - A Reintroduction to a Developer’s Best Friend

Git Basics - A Reintroduction to a Developer’s Best Friend

Being able to code is a wonderful skill that can open up a world of possibilities for employment, artistic expression, and thoughtful analysis. But an often-overlooked part of coding is the ability to effectively work with other people’s code, and one ... more


Wednesday, 27 June, 2018 UTC

Testing React / Redux Apps with Jest & Enzyme - Part 3: Testing Redux Actions

Testing React / Redux Apps with Jest & Enzyme - Part 3: Testing Redux Actions

This is part 3 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 Redux actions. The series Part 1 : Installation & Setup Part 2 ... more


Wednesday, 27 June, 2018 UTC

Improve Vue.js Accessibility with vue-announcer

Improve Vue.js Accessibility with vue-announcer

The defining characteristic of Single-Page-Applications, like those commonly made with Vue.js, is that they take over navigation inside the page with JavaScript instead of leaving it to the browser like normal websites. Unfortunately, when this happens, ... more


Monday, 25 June, 2018 UTC

Vue.js Component Hooks as Events

Vue.js Component Hooks as Events

Hi Vue developer! Surely you’ve already used lifecycle hooks in Vue in order to perform different actions when the component is created, mounted or destroyed. You’ve also probably used custom events for communication between a component and its parent. ... more


Monday, 25 June, 2018 UTC

Building a Tabs Component with React

Building a Tabs Component with React

If you’ve ever built a web app, there’s a good chance you’ve built a tabbed document interface at some point or another. Tabs allow you to break up complex interfaces into (presumably) more manageable subsections that a user can quickly switch between. ... more


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