This blog has moved

For anyone wanting to read newer articles, check out jonkuperman.com! I’m posting there a lot lately.

RxJS Contributor Days

This week I had the privilege of attending RxJS contributor days. It was a day long event attended by core contributors as well as companies using RxJS like Slack, Google, Facebook and Netflix. While there is going to be an awesome video detailing all the cool stuff that happened that day I thought I’d put……

Debugging JavaScript with the debugger statement

One of the most useful statements in JavaScript is debugger. It invokes any available debugging functionality from your application and has no effect if there is no functionality available. So, for example if you have some JavaScript running and you want to pause execution at a certain line you can do something like: Most of the……

Testing forms with React and Enzyme

Lately at Brave I’ve been adding unit tests for our React code. For our project we use: Mocha – our test framework Sinon – for spies Assert – for assertions Mockery – for mocks We also use React and ImmutableJS (not related to testing!) We also use ES6 Classes for our react code. So we’ll have……

Sharing Styles with React and Aphrodite

Lately I’ve been using Khan Academy’s Aphrodite in a lot of my projects. React and Aphrodite work very well together! (although React is not a requirement) and makes managing CSS a lot easier! Using React and Aphrodite together makes each component look something like this: import React, { Component } from ‘react’ import { StyleSheet, css……

image-set – CSS for retina displays

There are a few different ways to serve higher quality images to screens with retina displays. A new one I just found out about is the CSS image-set function.

At the time of this writing, image-set only works on Chrome and Safari.

How to create React components

There are now three ways to create React components in JavaScript. Let’s take a quick look at each of them and discuss the pros and cons! Create React Components with React.createClass The first way, and the way Facebook still uses is the createClass method. It looks something like this: var MyComponent = React.createClass({ render: function()……

substr vs. substring in JavaScript

The difference between substr vs. substring in JavaScript bites me more often than any other API confusion in the language. The only difference is in the second parameter. Do you know what each of these will return? var word = “The quick brown fox”; console.log(word.substr(5, 10)); console.log(word.substring(5, 10)); substr vs. substring String.prototype.substr() and String.prototype.substring() have identical looking APIs in……

Website speed test tools you should be using

Performance matters. There are a lot of great ways to make sure your website speed is good enough to not have a negative affect on your user base. These are my favorite tools for performing a website speed test. 1. Google Pagespeed Insights I think it’s a pretty good idea to listen to listen to……

What’s new in Chrome DevTools 2016

I just finished watching this awesome video from Google I/O in which Paul Irish and Sam Saccone profiled a few websites and talked about some great new Chrome DevTools features that are available now on Chrome Canary. If you want to watch the whole video, check it out below! Otherwise, here are the bullet points. Chrome……