Get the Ultimate Web Development Beginner Bundle for Only $29

So you’ve dreamed of being a web dev, but don’t know where to start? Well have we got good news for you? For 48 hours only you can get our ultimate beginner bundle in web development for just $29 (that’s a saving of $435 BTW!)
What Are You Waiting For? Go Follow Your Dream!
Kick start your front end web developer journey with our ultimate bundle. In it you’ll get lifetime access to 7 of our best selling books and over 21 hours of video courses, so you can:

Learn to design beautiful and responsive websites
Level up your productivity with Bootstrap 4 and Sass
Learn JavaScript and in-demand frameworks from the ground up

Have We Piqued Your Interest?
You can find out more or get yourself a great deal here. But you better hurry up, this $29 kickstart to your web development career only lasts 48 hours!
Continue reading %Get the Ultimate Web Development Beginner Bundle for Only $29%


Redux: A Practical Tutorial

TL;DR:  Shows through practical, short examples how Redux works and what are its main pieces. To find the final code that we are going to create in this article, please check this GitHub repository.
What Is Redux?
Mostly used with React, Redux is a storage facility that helps JavaScript applications to manage state. Note that I started the introductory sentence with “Mostly used." What I mean is that we do not have to use Redux with React. We don’t even need a browser to use Redux. We can use it to control the state of a Node.js backend application, for example.


5 Benefits of React.js to Brighten a Cloudy Day

The JavaScript ecosystem is very dynamic. New tools and libraries pop up regularly, each one a little different from the rest, and the user has a wide selection to pick from. Frameworks are no exception.
React has already hit the point of being mainstream and is used by a number of large companies including, of course, Facebook, but also Netflix, AirBNB, DropBox, IMDb, PayPal, Tesla Motors, Walmart, and many others. Pretty good company to keep! There is a robust ecosystem to support it with tools, support, and experienced developers. And, of course, there is its Facebook parentage.


Using Recharts in React Native project

1. Introduction to Recharts
Recharts is a chart library built with React and D3. Recharts supports many kinds of charts such as Area Chart, Bar Chart, Line Chart, and Pie Chart. The strength of Recharts is easy to extend and customize. For example, we can change the active cursor, legend, and tick in Axises to our own component and styling. The following is an example of how to customize a tick on the X Axis:
const CustomizedAxisTick = React.createClass({
render () {
const {x, y, stroke, payload} = this.props;
<text x={0} y={0} dy={16} textAnchor=”end"
fill="#666" transform="rotate(-35)">

const SimpleLineChart = React.createClass({
render () {
return <LineChart>
<XAxis dataKey="name" tick={<CustomizedAxisTick/>}/>
<CartesianGrid />
<Line type="monotone" dataKey="pv" />
Find more examples here and the full Recharts API here.


How to Build a Simple Blog Using React and GraphQL

This article was sponsored by Cosmic JS. Thank you for supporting the partners who make SitePoint possible.
In this tutorial I’m going to show you how to create a simple blog using React, GraphQL and Cosmic JS. This is going to be the fastest and most light-weight blog built on a modern technology stack. Let’s get started.
View the demo
Install the Simple React Blog on Cosmic JS
View the codebase on GitHub

Getting Started
Make sure that you have Node.js and NPM installed on your machine, if not, visit the Node.js website to install the latest version.
Let’s start by creating a folder for our app. In your favorite terminal run the following commands:
mkdir simple-react-blog
cd simple-react-blog

Now let’s add a package.json file to import all of our dependencies for our app:
vim package.json

Add the following to our package.json file:
“scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next build; NODE_ENV=production node server.js"
"dependencies": {
"axios": "^0.16.2",
"express": "^4.16.2",
"lodash": "^4.17.4",
"next": "^4.0.3",
"next-routes": "^1.1.0",
"react": "^16.0.0",
"react-dom": "^16.0.0"

It’s a pretty light dependency list for a pretty light app. So what we will install is:

Axios for our promise-based HTTP client to get content from to the Cosmic JS GraphQL API.
Next.js as our React Universal framework.
Next routes for dynamic routes.
Express for our server-side web app framework.
React to handle our user interface.

Our scripts are necessary for starting our app in production and development.
Run the following command to install our dependencies:
npm i

Building Our Blog
Next, let’s begin building our blog pages. Create a pages folder and add the index.js file:
vim index.js

and add the following to index.js:
import axios from ‘axios’
import _ from ‘lodash’
import Footer from ‘./partials/footer’
import Header from ‘./partials/header’
import helpers from ‘../helpers’
import config from ‘../config’

export default class extends React.Component {
static async getInitialProps({ req }) {
const query = `{
objects(bucket_slug: "${config.bucket.slug}") {
return await``, { query })
.then(function (response) {
return {
cosmic: {
posts: _.filter(, { type_slug: ‘posts’ }),
global: _.keyBy(_.filter(, { type_slug: ‘globals’ }), ‘slug’)
.catch(function (error) {
render() {
if (!this.props.cosmic)

return (
<Header cosmic={ this.props.cosmic }/>
<main className="container">
this.props.cosmic.posts && => {
const friendly_date = helpers.friendlyDate(new Date(post.created_at))
post.friendly_date = friendly_date.month + ‘ ‘ +
return (
<div className="card" data-href={`/${post.slug}`} key={post._id}>
post.metadata.hero.imgix_url &&
<a href={`/${post.slug}`} className="blog-post-hero blog-post-hero–short" style={{ backgroundImage: `url(${post.metadata.hero.imgix_url})`}}></a>
<div className="card-padding">
<h2 className="blog__title blog__title–small">
<a href={`/${post.slug}`}>{post.title}</a>
<div className="blog__author">
<a href={`/author/${}`}>
<div className="blog__author-image" style={{ backgroundImage: `url(${[0].imgix_url}?w=100)`}}></div>
<div className="blog__author-title">by <a href={`/author/${}`}>{}</a> on {post.friendly_date}</div>
<div className="clearfix"></div>
<div className="blog__teaser droid" dangerouslySetInnerHTML=></div>
<div className="blog__read-more">
<a href={`/${post.slug}`}>Read more…</a>
<Footer />

Continue reading %How to Build a Simple Blog Using React and GraphQL%


WordPress + React

I posted just 2 months ago about Foxhound and how I found it pretty cool, but also curious that it was one of very few themes around that combine the WordPress JSON API and React, even though they seem like a perfect natural fit. Like a headless CMS, almost.

Since then, a few more things have crossed my desk of people doing more with this idea and combination.
Maxime Laboissonniere wrote Strapping React.js on a WordPress Backend: WP REST …

WordPress + React is a post from CSS-Tricks


Progressive Web Apps: A Crash Course

Progressive Web Apps (PWAs) try to overlap the worlds of the mobile web apps and native mobile apps by offering the best features of each to mobile users.
They offer an app-like user experience (splash screens and home screen icons), they’re served from HTTPS-secured servers, they can load quickly (thanks to page load performance best practices) even in low quality or slow network conditions, and they have offline support, instant loading and push notifications. The concept of PWAs was first introduced by Google, and is still supported by many Chrome features and great tools, such as Lighthouse, an open-source tool for accessibility, performance and progressiveness auditing which we’ll look into a bit later.
Throughout this crash course, we’ll build a PWA from scratch with ES6 and React and optimize it step by step with Lighthouse until we achieve the best results in terms of UX and performance.
The term progressive simply means that PWAs are designed in a such a way that they can be progressively enhanced in modern browsers where many new features and technologies are already supported but should also work fine in old browsers with no cutting-edge features.
Native vs Mobile = Progressive
A native app is distributable and downloadable from the mobile OS’s respective app store. Mobile web apps, on the other hand, are accessible from within a web browser by simply entering their address or URL. From the user’s point of view, launching a browser and navigating to an address is much more convenient than going to the app store and downloading, installing, then launching the app. From the developer/owner’s point of view, paying a one-time fee for getting an app store account and then uploading their apps to become accessible to users worldwide is better than having to deal with the complexities of web hosting.
A native app can be used offline. In the case of remote data that needs to be retrieved from some API server, the app can be easily conceived to support some sort of SQLite caching of the latest accessed data.
A mobile web app is indexable by search engines like Google, and through search engine optimization you can reach more users. This is also true for native apps, as the app stores have their own search engines where developers can apply different techniques — commonly known as App Store Optimization — to reach more users.
A native app loads instantly, at least with a splash screen, until all resources are ready for the app to execute.
These are the most important perceived differences. Each approach to app distribution has advantages for the end user (regarding user experience, availability etc.) and app owner (regarding costs, reach of customers etc.). Taking that into consideration, Google introduced PWAs to bring the best features of each side into one concept. These aspects are summarized in this list introduced by Alex Russell, a Google Chrome engineer. (Source: Infrequently Noted.)

Responsive: to fit any form factor.
Connectivity independent: progressively-enhanced with service workers to let them work offline.
App-like-interactions: adopt a Shell + Content application model to create appy navigations & interactions.
Fresh: transparently always up-to-date thanks to the service worker update process.
Safe: served via TLS (a service worker requirement) to prevent snooping.
Discoverable: are identifiable as “applications” thanks to W3C Manifests and service worker registration scope allowing search engines to find them.
Re-engageable: can access the re-engagement UIs of the OS; e.g. push notifications.
Installable: to the home screen through browser-provided prompts, allowing users to “keep” apps they find most useful without the hassle of an app store.
Linkable: meaning they’re zero-friction, zero-install, and easy to share. The social power of URLs matters.

Lighthouse is a tool for auditing web apps created by Google. It’s integrated with the Chrome Dev Tools and can be triggered from the Audits panel.
You can also use Lighthouse as a NodeJS CLI tool:
npm install -g lighthouse

You can then run it with:

Lighthouse can also be installed as a Chrome extension, but Google recommends using the version integrated with DevTools and only use the extension if you somehow can’t use the DevTools.
Please note that you need to have Chrome installed on your system to be able to use Lighthouse, even if you’re using the CLI-based version.
Building your First PWA from Scratch
In this section, we’ll be creating a progressive web app from scratch. First, we’ll create a simple web application using React and Reddit’s API. Next, we’ll be adding PWA features by following the instructions provided by the Lighthouse report.
Please note that the public no-authentication Reddit API has CORS headers enabled so you can consume it from your client-side app without an intermediary server.
Before we start, this course will assume you have a development environment setup with NodeJS and NPM installed. If you don’t, start with the awesome Homestead Improved, which is running the latest versions of each and is ready for development and testing out of the box.
We start by installing Create React App, a project boilerplate created by the React team that saves you from the hassle of WebPack configuration.
npm install -g create-react-app
create-react-app react-pwa
cd react-pwa/

The application shell architecture
The application shell is an essential concept of progressive web apps. It’s simply the minimal HTML, CSS and JavaScript code responsible for rendering the user interface.

This app shell has many benefits for performance. You can cache the application shell so when users visit your app next time, it will be loaded instantly because the browser doesn’t need to fetch assets from a remote server.
For building a simple UI we’ll use Material UI, an implementation of Google Material design in React.
Let’s install the package from NPM:
npm install material-ui –save

Next open src/App.js then add:
import React, { Component } from ‘react’;
import MuiThemeProvider from ‘material-ui/styles/MuiThemeProvider’;
import AppBar from ‘material-ui/AppBar’;
import {Card, CardActions, CardHeader,CardTitle,CardText} from ‘material-ui/Card’;
import FlatButton from ‘material-ui/FlatButton’;
import IconButton from ‘material-ui/IconButton’;
import NavigationClose from ‘material-ui/svg-icons/navigation/close’;

import logo from ‘./logo.svg’;
import ‘./App.css’;

class App extends Component {

constructor(props) {

this.state = {
posts: []

render() {
return (

title={<span >React PWA</span>}

iconElementLeft={<IconButton><NavigationClose /></IconButton>}
iconElementRight={<FlatButton onClick={() => this.fetchNext(‘reactjs’, this.state.lastPostName)} label=”next" />

{ (el, index) {
return <Card key={index}>

actAsExpander={ === true}

<CardText expandable={ === true}>
<FlatButton label="View" onClick={() => {;
}} />


<FlatButton onClick={() => this.fetchNext(‘reactjs’, this.state.lastPostName)} label="next" />


export default App;

Next we need to fetch the Reddit posts using two methods fetchFirst() and fetchNext():
fetchFirst(url) {
var that = this;
if (url) {
fetch(‘’ + url + ‘.json’).then(function (response) {
return response.json();
}).then(function (result) {

that.setState({ posts:, lastPostName:[ – 1] });

fetchNext(url, lastPostName) {
var that = this;
if (url) {
fetch(‘’ + url + ‘.json’ + ‘?count=’ + 25 + ‘&after=’ + lastPostName).then(function (response) {
return response.json();
}).then(function (result) {

that.setState({ posts:, lastPostName:[ – 1] });
componentWillMount() {


You can find the source code in this GitHub Repository.
Before you can run audits against your app you’ll need to make a build and serve your app locally using a local server:
npm run build

This command invokes the build script in package.json and produces a build in the react-pwa/build folder.
Now you can use any local server to serve your app. On Homestead Improved you can simply point the nginx virtual host to the build folder and open in the browser, or you can use the serve package via NodeJS:
npm install -g serve
cd build

With serve, your app will be served locally from http://localhost:5000/.

You can audit your app without any problems, but in case you want to test it in a mobile device you can also use services like to deploy it with one command!
npm install –global surge

Next, run surge from within any directory to publish that directory onto the web.
You can find the hosted version of this app from this link.
Now let’s open Chrome DevTools, go to Audits panel and click on Perform an audit.

From the report we can see we already have a score of 45/100 for Progressive Web App and 68/100 for Performance.
Under Progressive Web App we have 6 failed audits and 5 passed audits. That’s because the generated project already has some PWA features added by default, such as a web manifest, a viewport meta and a <no-script> tag.
Under Performance we have diagnostics and different calculated metrics, such as First meaningful paint, First Interactive, Consistently Interactive, Perceptual Speed Index and Estimated Input Latency. We’ll look into these later on.
Lighthouse suggests improving page load performance by reducing the length of Critical Render Chains either by reducing the download size or deferring the download of unnecessary resources.
Please note that the Performance score and metrics values can change between different auditing sessions on the same machine, because they’re affected by many varying conditions such as your current network state and also your current machine state.
Continue reading %Progressive Web Apps: A Crash Course%


Save 15% or More on Car Insurance by Switching to Plain JavaScript

Satire disclaimer: This article is as much satire as it is serious insight if there is even any of that at all. Don’t take it too seriously, but do tell all your friends. Also, the bit about Taco Bell is 100% true. I wouldn’t joke about something like that.
My day usually begins like this: I wake up at 6:15 a.m. (kill me) to get the kids ready for school. They’re mad. I’m mad. Everyone is on the brink of …

Save 15% or More on Car Insurance by Switching to Plain JavaScript is a post from CSS-Tricks


Using TypeScript With Redux

This article is featured in the new DZone Guide to Web Development. Get your free copy for more insightful articles, industry statistics, and more!
Redux is a library that provides a way to manage application state in one place. Not every application needs help with this, but for many applications, it can simplify access to this global state without causing incidental complexity by restricting the ways it can be updated and accessed.


Best Practices With React and Redux Web Application Development, Part 2

Welcome back! If you missed Part 1, check it out here! 
Consider the Fetch API Instead of jQuery Ajax. Also, Be Aware of Failed to Fetch
The fetch API is the latest standard for making asynchronous calls in the browser. It’s very nice in that it uses the Promise API and provides a much cleaner experience for the developer. See MDN for an overview. We use this GitHub repo in which we have wrapper functions to call fetch where we generically type the calls and verify authentication.