Displaying Expo Snacks Gists in React and Gatsby

I'm still in the process of rebuilding my blog in GatsbyJS. The project so far is going really well. In last weeks post, I outlined how I was loading data into Gatsby and rendering the basic pages. This week I've been working on rendering the Gists and ... more

Displaying Expo Snacks Gists in React and Gatsby

I'm still in the process of rebuilding my blog in GatsbyJS. The project so far is going really well. In last weeks post, I outlined how I was loading data into Gatsby and rendering the basic pages. This week I've been working on rendering the Gists and ... more

Some notes on migrating my blog to Gatsby

I've been kicking around the idea of porting my blog to Gatsby. It's not that I'm unhappy with my current blog set up, it's more of an excuse to play with Gatsby. If you haven't heard of Gatsby, it's a React based static site generator that creates blazing ... more

Some notes on migrating my blog to Gatsby

I've been kicking around the idea of porting my blog to Gatsby. It's not that I'm unhappy with my current blog set up, it's more of an excuse to play with Gatsby. If you haven't heard of Gatsby, it's a React based static site generator that creates blazing ... more

Adding coverage reports to a React Create App using Coveralls.io

In my last post, we covered creating a CI pipeline using TravisCI and GitHub Pages. Now let's add coverage reports to the build setup. Setting up Coveralls.io We will use coveralls.io to provide the reporting. They provide this for free to any public ... more

Adding coverage reports to a React Create App using Coveralls.io

In my last post, we covered creating a CI pipeline using TravisCI and GitHub Pages. Now let's add coverage reports to the build setup. Setting up Coveralls.io We will use coveralls.io to provide the reporting. They provide this for free to any public ... more

Building and Deploying a React Create App to GitHub Pages Using TravisCI

It is surprisingly simple to deploy a public react-create-app built project on GitHub. In this post, we will look at how to set up a continuous integration pipeline using TravisCI and GitHub Pages. Setting up Continuous Integration Builds Continuous ... more

Building and Deploying a React Create App to GitHub Pages Using TravisCI

It is surprisingly simple to deploy a public react-create-app built project on GitHub. In this post, we will look at how to set up a continuous integration pipeline using TravisCI and GitHub Pages. Setting up Continuous Integration Builds Continuous ... more

Getting started with React Navigation

I recently had some time to try React Navigation. It's a very nice routing solution to use in your React Native applications. Let's walkthrough a simple example of using React Navigation in a project. Project Setup We will use create-react-native-app ... more

Getting started with React Navigation

I recently had some time to try React Navigation. It's a very nice routing solution to use in your React Native applications. Let's walkthrough a simple example of using React Navigation in a project. Project Setup We will use create-react-native-app ... more

Upgrading to react-router v4

My previous article on upgrading to react-router alpha4 is still getting a lot of traffic. Below is an updated version of that post for the release version of react-router v4. I decided to take a little bit of time and migrate my reactit demo app to ... more

Upgrading to react-router v4

My previous article on upgrading to react-router alpha4 is still getting a lot of traffic. Below is an updated version of that post for the release version of react-router v4. I decided to take a little bit of time and migrate my reactit demo app to ... more

Getting Started with React Native and Redux

It's been far too long that I've been saying to myself: "Brooks you really should give React Native a try" . So I've whipped up a quick 'how-to' article from my first foray into React Native. In this tutorial, we will create a new React Native ... more

Getting Started with React Native and Redux

It's been far too long that I've been saying to myself: "Brooks you really should give React Native a try" . So I've whipped up a quick 'how-to' article from my first foray into React Native. In this tutorial, we will create a new React Native ... more

Upgrading to react-router v4

About a month ago, the react-router team released version 4 of react-router. This version is a complete rewrite of how routing is handled. This new version has been mostly well received, with a few vocal complaints. I decided to take a little bit of ... more

Upgrading to react-router v4

About a month ago, the react-router team released version 4 of react-router. This version is a complete rewrite of how routing is handled. This new version has been mostly well received, with a few vocal complaints. I decided to take a little bit of ... more

Animations with React

I've been working on a demo app to keep my 'react fu' strong. You can check out the app here: https://github.com/brookslyrette/reactit/ The app is a react front end for Reddit. It uses a standard stack that includes react-router and redux. This week ... more

Animations with React

I've been working on a demo app to keep my 'react fu' strong. You can check out the app here: https://github.com/brookslyrette/reactit/ The app is a react front end for Reddit. It uses a standard stack that includes react-router and redux. This week ... more

Getting started with create-react-app

Setting up a react app has always been a little complex. I've joked about it on this blog and twitter. The react team knows this is a pain point for the community and have been awesome enough to provide us with create-react-app. Create-react-app differs ... more

Getting started with create-react-app

Setting up a react app has always been a little complex. I've joked about it on this blog and twitter. The react team knows this is a pain point for the community and have been awesome enough to provide us with create-react-app. Create-react-app differs ... more

Dependency Hell

It seems like every few years we recreate a new version of dependency hell. Old school linux users and coders know this pain well. Why do we keep doing this to ourselves? First some history; like a lot of developers in their 30's the first time I saw ... more

Dependency Hell

It seems like every few years we recreate a new version of dependency hell. Old school linux users and coders know this pain well. Why do we keep doing this to ourselves? First some history; like a lot of developers in their 30's the first time I saw ... more

Creating a videojs plugin

At Dotsub we work with a lot of video. For the last couple years we have been using videojs as our sites main video player. This week I've been updating some of our plugins to the latest videojs version (5.9.2) and also open sourcing them! This week ... more

Testing a NPM package locally

I ran into this today. I had a pain of a time figuring out how to install a local NPM package for testing. Here is a quick how to. From the local package you want to install, package the module. You can do this via npm pack . This will create a tgz file ... more

Star Wars into in CSS

In celebration of Star Wars day, I thought it'd be fun do walk-through how to recreate the movies intro with CSS animations. May the force be with you on this journey of learning. Parts of the intro We will focus on the three main parts of the into animation: ... more

What is planned for ES7?

Like all things javascript, things move fast. While a lot of us are just starting to get ES6 into production, ES7's draft is almost complete. ES6 was a small update, but ES7 looks to be a huge step forward. Here are some highlights on the goodness ES7 ... more

Linting in ES6

I've talked about linting before and it's benefits. After updating all our code to ES6 we had to update our linting rules. We are using the AirBnB style guide, which has also been updated with some nice ES6 defaults. There was a ton of updates to make, ... more

Porting React Components to ES6

I've been meaning to do this for a while, but we finally ported all our React code to ES6 classes. The migration was pretty simple, but I figured sharing my notes might help someone out there. Class creation We had been using React.createClass , but ... more

XKCD Substitutions [Chrome Extension]

XKCD was at it again with another funny substitutions comic. I figured it would be fun to create a Chrome extension that does this. Truth be told there are already a ton of extenstions that do this in the Chrome Store. XKCD even links to the most popular ... more

Building a Universal Translator

Earlier this year, some of us around the office were rather impressed with Skype Translator. It's a very cool feature that shows just how far realtime translation has come in the last few years. When I first saw this cool feature, I told my co-workers: ... more