Top 10 React Libraries on GitHub to Follow

Created by Facebook, React has gone on to become a really powerful JavaScript framework, making the job of front-end development easier for programmers.
If you have spent some time working with React.js, you would agree that a couple of other libraries need to be used with React to get the best experience.


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%


Converting 600k Lines to TypeScript in 72 Hours

Users have been using Lucidchart for a long time to make their diagrams, since 2010 and IE6. And for nearly that long, Lucid has used Google’s Closure Compiler to manage its increasingly sophisticated code base. Closure Compiler is a typechecker and minifier that uses JSDoc annotations in comments to understand type information. As Lucid grew from 5 to 15 to 50 engineers, the tool proved enormously helpful for quality and productivity.Then in 2016, Lucid began experimenting with TypeScript. TypeScript offers more flexible and comprehensive type checking, cleaner syntax, and better IDE support than we could get with Closure-annotated JavaScript.
// Closure JavaScript

/** @const {!} */
lucid.model.DocumentEvents.PAGES_CONTENT_CHANGED =

* @constructor
* @extends {}
* @final
* @param {!Object<boolean>} pages
* @struct
lucid.model.DocumentEvents.PagesContentChanged = function(pages) {
this, ‘constructor’, lucid.model.DocumentEvents.PAGES_CONTENT_CHANGED
/** @const {!Object<boolean>} */
this.pages = pages;
is equivalent to


Why You Should Avoid Vue.js DOM Templates

It’s a common practice for a Vue app to use the DOM as its template, as it’s the quickest and easiest architecture to set up.
This practice comes with a few catches, however, that make it an undesirable choice for any serious project. For example, the markup you write for a DOM template is not always what you get when your app runs.


An Introduction to Node.js

Node.js is an application framework and sometimes is referred to as a runtime, through which applications are built using the JavaScript programming language. Node.js is well known for its speed, due to the fact that it is non-blocking. Further, being non-blocking means one request does not wait for the other request to finish (i.e it is asynchronous). The asynchronicity is what makes Node.js the framework that it is today in terms of throughput, unlike Java application servers which are mostly blocking each request that is bound to a thread and as soon as there are no more threads available the server almost always stops receiving requests.
In this article, we will discover some aspects of Node.js. We will do so by discussing some topics such as: uses cases of Node.js, how Node.js achieves concurrency, and its main design pattern.  


Getting to Know Custom CSS Properties

Today’s front-end developers have a plethora of tools to help them create and edit CSS. One of those tools are preprocessors, and one of the major perks of using a preprocessor is the ability to use variables within your styles. This eliminates the need for copying and pasting, which then makes refactoring easier.
When using preprocessor variables, developers tend to define them with colors, font sizes, layout details, etc. This is all fine and dandy, but preprocessor variables have some limitations:


Livecoding: How Newbie Mistakes Kill the Flow [Video]

We continued to work on GatsbyJS. That one feature I want to add: make links in markdown tables of contents absolute.
Instead of #some-title the link should be /page-slug#some-title. That way users can put tables of contents on their index pages and link into documents directly.


Dynamic Waveform Visualizations with wavesurfer.js

Waveform images are an awesome audition to boring audio widgets.  They can be functional as well as aesthetically pleasing, allowing users to navigate audio visually.  I recently found wavesurfer.js, an amazing waveform image utility that uses to Web Audio API to create super customizable waveform visualizations that take only a minute to implement. View Demo […]
The post Dynamic Waveform Visualizations with wavesurfer.js appeared first on David Walsh Blog.


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%