Devin Clark

200OK Conference Wrap Up

Mon, 07 Oct 2013 19:52:36 GMT

200OK, Oklahoma's premier web dev conference, took place in Tulsa, Oklahoma on September 27th 2013. I had the pleasure of attending and I would like to share my experiences. It was an excellent conference, with a rock star (yeah I said it!) lineup of speakers. This was the first time (that I can remember) going to Tulsa. I live about two hours away.

Firefox OS and Web APIs

This talk was given by David Walsh. The slides are available at dwf.tw/200. I have followed David's blog for years and I was excited when I saw he was speaking.

Mobile Web at Etsy

This talk was given by Lara Swanson. Lara is an amazing speaker and obviously is a descendant of my personal hero, Ron Swanson.

I found this talk to be incredibly interesting because it combines two things that really fascinate me, mobile web development and performance.

Etsy has an alert set up that notifies the team when a page violates their performance SLA. I think that's a great idea.

They have an amazing device lab. You can read about it on Code as Craft.

The slides and some relevant resources for this talk, which I highly recommend you go through, are available on Lara's website.

Github Culture and Technology

This talk was given by Michael Gorsuch. I was surprised to hear we have a Githubber in Oklahoma City. One interesting thing Michale mentioned in the talk is how Github practices README driven development. The idea behind it is to write the blog post before the product and use the blog post to guide the product.

It was an excellent insight into the work environment of Github and I would definitely recommend you watch the video for this presentation when it becomes available. I will try to do a post or something when they videos from 200OK are available.

Brackets & Edge Code

This talk was given by Raymond Camden, a hilarious man and Adobe Evangelist. He is the man responsible for the daily Adobe Updates but I do not hold that against him. Raymond revealed the magic of the wonderful code editor, Brackets. It is certainly something I would consider using instead of Sublime Text for JavaScript editing.

Conclusion

A common theme between most of the companies who spoke was they use some sort of chat program, whether it is IRC at Etsy or Campfire + Hubot at Github, to effectively communicate between team members.

I look forward to attending next year!

Did you attend 200OK and have something you wish to add? Leave a comment.

Star Dates in JavaScript

Sun, 29 Dec 2013 19:13:21 GMT

While on my winter vacation, I began creating problems to solve out of boredom and to keep my JavaScript skills sharp. One evening, after an unknown amount of whiskey, I decided to look into converting dates into Stardates. TREKKIE ALERT! Don’t let this discourage you from reading. There still is a decent amount of information JavaScript Dates that can be extracted from this article.

After a bit of research I found that stardates don’t really exist (yet). That was a bit of a disappointing dead end but I found Julian Days to be about the closest equivalent. I assume we will use these in place of stardates in the future. Anyways, I started researching Julian Days, lots of Stack Overflowin’, and (SPOILER ALERT) I eventually got a working converter build.

The first hurdle I had to solve was figuring out the OMG MATH aspect of the formula I found. This was solved by finding a different formula that worked with seconds rather than ALL THE UNITS. This new formula also made conversion to UTC easier, because Julian Days are always calculated using UTC time.

var JD = EPOC_SECONDS / 86400000 - TIMEZONE_OFFSET / 1440 + 2440587.5;

Now, we have a working formula. Let’s plug it in as a JavaScript Date() method. Yes, before you get all up in arms, I am going to use Date.prototype.toStarDate. The day this causes a collision will be a very happy day for me, should that day ever come.

Date.prototype.toStarDate = function () {
  return this / 86400000 - this.getTimezoneOffset() / 1440 + 2440587.5;
};

I originally was rounding the result to two decimal places I later realized that would produce an incorrect Julian Day. I am still skeptical whether JavaScript floating point math is an issue here. It would probably be worth integrating something like BigDecimal.js but that seems out of scope for a whiskey-fueled “just for funzies” project.

Here is a possibly working demo link. If you made it this far, I salute you.

Quick Tip: npm CLI Shorthands

Wed, 09 Apr 2014 15:28:38 GMT

If you're like me, you spend a lot of time daily using npm, the official node package manager. Typing npm install whatever-package --save or npm install whatever-package --save-dev is very tedious.

I recently discovered there are aliases for --save and --save-dev. --save can be replaced with -S and --save-dev with -D.

There are a few others in the source link below but I felt those two are the most commonly used. I hope this speeds up your npm install-ing like it did mine!

Also, you can run npm i whatever-package instead of npm install whatever-package.

Source

Browserify: Rockin' the Wizard Hat

Tue, 15 Apr 2014 15:05:52 GMT

Jordan Rousseau recently gave a presentation at OKC.JS about Browserify. Jordan is the fearless leader of the web team, of which I happen to be a member, at Weather Decision Technologies.

Jordan spends the first 18 slides talking about bad ways to handle loading JavaScript. When I say "bad ways" I mean ways that are difficult to maintain and/or do not scale well. After a lot of investigation, we landed on Browserify.

Browserify is a utility that builds CommonJS modules into a single bundle browser code with Node.js-style requires. Just like node Browserify allows you to write modules in separate files and use module.exports to expose external methods and properties. You can also use (some) npm modules!

Getting Started #

To begin, simply install browserify using npm.

npm i browserify -g

This installs the CLI for Browserify. It can be a bit annoying to use at times so we use grunt-browserify. If you are dead set on using the CLI, I recommend you look into watchify. If you use Gulp, I believe you can use it with Browserify but I have never used Gulp so I can't speak to it personally.

Using with Grunt #

npm i grunt-browserify -D

This will install the grunt-browserify task and save it in the package.json file as a devDependency.

browserify: {
  dev: {
    files: {
      'js/bundle.js': ['js/app.js']
    },
    options: {
      transform: ['brfs'],
      alias: [
              './node_modules/lodash/dist/lodash.underscore:underscore'
      ],
      debug: false
    }
  }
}

Here is kind of the boilerplate code for the browserify task of our web projects. Nothing super special here. LoDash is being aliased to underscore because Backbone attempts to require Underscore and it will throw an error if we are using LoDash in place of Underscore.

Jordan has some interesting demos in his slides, available at the bottom of the post. They are definitely worth checking out.

Transforms #

Transforms in are essentially Browserify middleware that run source transformations on files before they are parsed by Browserify. An example of a transform is deAMDify, a module that converts AMD modules to CommonJS so they will play nice with Browserify. A few other transforms to check out are brfs, es6ify, and coffeeify (if you are that kind of person). For a more comprehensive list see the Browserify wiki on transforms.

Resources #

The slides for Jordan's talk are available on github. Hopefully, you now have everything you need to become a Browserify Wizard! Feel free to ask if you have any questions.

Quick Tip: Useful Npm Package Listing

Wed, 07 May 2014 16:14:07 GMT

We've all had to suffer through npm ls and it's endless trees of dependencies but there is a better way!

That way is the --depth flag. That's right, it was as easy as npm ls --depth=0. Now you can see the packages you actually installed.

That was easy... too easy... If you ran that command you probably noticed a bunch of these little buggers at the bottom of the output.

npm ERR! max depth reached: express@3.5.2, required by my-project@0.4.18

Let's fix this. Start by running sudo nano ~/.profile. If you would rather use vi for this, type alias vi='nano'; sudo vi ~/.profile. Then, add this line to the file, save, and reload ~/.profile by running source ~/.profile.

alias "npmls0"="npm ls --depth=0 2>/dev/null"

The key to this is 2>/dev/null. All it does it eat the errors.

Now you can just run npmls0 and see your npm packages and their associated versions.

Source

Quick Tip: Don't use Star (and not for the reason you think)

Sat, 24 May 2014 14:38:24 GMT

So, here at WDT we do a lot of the JavaScripts and the CSSes. We had an issue in two of our weather mapping applications where users could not type in text boxes in using Safari. We tried to ignore this bug until yesterday when Jordan, our resident code wizard, found the cause of this issue.

What does this have to do with the wildcard selection operator in CSS? We found that someone (not saying it was me, not saying it wasn't me) had * {user-select: none; } in the stylesheet. The intention was to make the app feel like less of a web app and solve issues with dragging. What's wrong with this? We are making the assumption browsers all have the same interpret the CSS specification in the same way. In this case, user-select on a text input in Safari does not allow users to type in the text input.

Discovering this issue also let to this awesome passive aggressive tweet.

What You Might Not Know about Chrome DevTools

Wed, 18 Jun 2014 18:28:03 GMT

Part One? Chrome's DevTools is a magical and mysterious beast. We can conquer this beast together! Josh Bavari recently gave a Lightning Talk on JS debugging. You should check it out. He is a great presenter.

Console API #

Let's start off with the Console API. Josh mentions a few in his presentation but there are so much more! The console object contains a lot more than just console.log().

Count #

There's a good chance you have done something like console.log(i + " Times") in a loop to count the number of iterations. Instead you could do console.count('My Loop Name') and you will get an output like this:

My Loop Name: 1
My Loop Name: 2
My Other Loop: 1
My Loop Name: 3
My Other Loop: 2

The number increments each time the function with that label runs. Each label has a counter so go wild creating as many as you need.

Formatting #

You can also format and even style some* of the console statements. By format I mean a printf kind of API. If you are familiar with printf then you are just curious what the format specifiers are.

Format Specifiers: #

%s - String.
%d or %i - Integer.
%f - Floating point number.
%o - DOM Element.
%O - Object.
%c - The secret to styling console statements.

How about an example?

console.log('My Array Name: %s Contents: %O Length: %i', 'stuff', stuff, stuff.length);

This example will output the following in the console: If you are wondering why I added stuff.length to my output string because it is in the %O, I needed an integer for my example. That is all.

Now let's talk about styling a little. I have never used it in a practical application. The styling uses CSS. All you have to do is add the %c format specifier to the output string and add some CSS as the value. An example would illustrate this better. I am just going to extend the previous example and make it pretty

console.log(
  '%cMy Array Name: %s Contents: %O Length: %i',
  'color: #663399; font-size: 2em;',
  'stuff',
  stuff,
  stuff.length
);

This example will output the following in the console: Look at that huge purple output. Hard to miss, huh?

Group #

You can also group console statements with methods like console.group() and console.groupCollapsed(). These methods will group any log statements between it and a console.groupEnd() method. This can be helpful if you are logging out a lot of data. A lot of times I will wrap the contents of a function I am debugging to make things easier to read. It is important to note that this does not work if there is an asynchronous call inside the group. It will appear outside of the group.

Time #

Need to time something? Look no further than console.time(label), console.timeline(label), or console.timeStamp([label]). Time and timeline have similar functionality; timeStamp is a little different. Time and timeline both have *End() methods. Time will output the time elapsed between the two method calls. Timeline starts the DevTools Timeline for the amount of time between start and end methods.

TimeStamp will just give you a marker at the current time on the Timeline with the specified label. This allows you to see what happening on the Timeline at that timestamp.

If you need a high precision time for profiling look into the Performance API. Also see this article about JavaScript Precision Timing.

Console Tab #

Right clicking on the Console section of DevTools to reveal two options. The first option is "Log XMLHttpRequests" and will output the HTTP method and the URL of the request. I can not express how much this has helped me while developing the SPA app that had heavy API integration. I have been working on the past few months.

The second option is "Preserve Log upon Navigation". This option allows you to debug issues where a redirect occurs. Recently, I used these on an issue was one of my API calls was throwing a 401 status code and causing a redirection to the login page. It was simple to track down which call using both of these options.

Global npm Install without Sudo

Mon, 26 Jan 2015 16:16:12 GMT

You should not have install global node modules with root! The default for directory global node modules is usually /usr/local/ when installing from the npmjs.com binary. This directory is not writable by users (as intended). I would like to preface this with I have only done this on a OS X. The instructions should be the same for Linux. Sorry Windows users, I can't help here.

The secret to fixing this problem is to change the directory npm uses to globally install. To do this we will change the prefix option in npm config. First, we can run npm config get prefix to see where packages are currently being installed. Next, make a directory where you would like the packages to be installed (and is user writeable). I use ~/npm.

Next, we need to tell npm to use the newly created directory by running npm config set prefix ~/npm.

You might think we are done now but now we will need to add ~/npm/bin to $PATH so we can use the executables. I store $PATH changes in ~/.bashrc. If you would like to store them in another file, feel free.

<troll type="fanboy">For speed I prefer to use the best command line text editor, nano. </troll> Anyways, just add this to the file then restart your Terminal window.

PATH=$PATH:$HOME/npm/bin

That's it! You will need to reinstall any global modules you had previously installed.

Also, my boss, Jordan uses this setup with nvm. He had a problem because nvm installs global packages in versioned directories. This would break all his npm link's on version updates. npm link is a big part of our Node development workflow.

More Information #

Nebraska JS Conference 2015

Thu, 27 Aug 2015 18:27:03 GMT

NebraskaJS Conf is a conference I had the pleasure of attending recently. It was held at the Omaha Henry Doorly Zoo, named the #1 Zoo in the World by TripAdvisor.

Responsive, Adaptive, and Responsible (codepo8) #

Web design was never meant to be done in pixels
"Are we OK with building and discarding everything we do over and over again?"
"Why do we build things we don't use in production?"
The environment we work in flows like water, there is a constant need for new ideas.
"Best practices are found, not defined".
-220k +300k LOC
Every HTTP request is a terrible thing
"Most speed increases are based on analyzing and fixing developer mistakes/sloppiness"
"Everything in ES6 is a syntax error in older browsers."
http://featuretests.io
Problems with transpiling:
- You don't run or debug the code you write.
- You are at the mercy of the transpiler to create efficient code.
- Browsers that support ES6 will never get any [ES6 code].
http://kpdecker.github.io/six-speed/
We can't use ES6 safely in the browser.
http://es6katas.org
- Learn es6 by viewing the ECMAScript unit test code
Blaming the tool is a sign of a bad craftsman, good craftsmen improve the tools by feeding back to the tool maker.

Streams (Pam Selle) #

Slides
Streams are the most awesome data structure you don't know enough about.
Comes from Unix
All glory to pipe
streams are delayed lists
Why?
- Can't/Don't want to hold everything in memory.
INFINITE DATA
- WIZARDS
Push and Pull Modes (flavors of streams)
Timeouts: 'Never ever block forever'
Node streams are push streams.
Generators!
- Pull streams
- ask for more when you want more (call next() on the generator)
BaconJS
- functional operators on events
HighlandJS
- single interface for many data types.
  - Arrays, Generators, Node streams, Events, Promises.
  - functional operations on these data types.
RxJS - Reactive programming
Trojan Horse for Reactive Programming.
PRESENTATION: Evan Czaplicki at Strangeloop
"Once you learn monads, you are unable to explain monads."
Intro to Rx by staltz.
Browser streams standard (worked on by the Node team).
Observable type proposal for es7
- Native type
Turing Incomplete http://turing.cool
- Pam's Podcast

Custom Elements (Mike Macaulay) #

Slides

My Laptop died around here so notes became sparse (Phone typing...)

Architecting Communities (Amanda Harlin) #

Slides
Amanda spoke about the practices and tooling we have put in place to make Techlahoma Community successful.

@amandaharlin at #nejsconf pic.twitter.com/1KZs9bNQdi
— The Jessinator (@SeeJessicaCode) August 7, 2015

#nejsconf pic.twitter.com/QXzrIiEAGt
— Devin Clark (@iDevinClark) August 7, 2015

High Performance in the Critical Rendering Path (@ponyfoo) #

Slides: High Performance in Critical Rendering Path

Measuring #

Devtools Audits
Measure early; Measure often.

Perf #

Optimize tcp
Gzip all text
Keep alive
Use nginx gzip. Everywhere. Now.
Defer font loading. Check slides for code. Very cool.
Penthouse for critical path css
So many more tools in the slides.

Universal JavaScript (Bruce Coddington) #

Slides
Nick's vimrc file
- Still working on making my way through this...
Server-side React

"I'm going to hurry up and finish my talk before they change things on me." @BruceCoddington #nejsconf
— Dave Reid (@davereid) August 7, 2015

Lily #

Lily is a surprise speaker who spoke about how she is learning to code using bitsbox.com.

Welcome our youngest speaker, Lily! @LilyNEJSConf pic.twitter.com/V2Q6OPOgvg
— NEJS CONF 2015 (@nejsconf) August 7, 2015

8 year old lily showing #nejsconf the JS game she coded using @BitsboxKids. Can't compete with that. I'm done. pic.twitter.com/QPJpotXVGF
— Christian Heilmann (@codepo8) August 7, 2015

Next speaker is Lilly who's going into the third grade. Presenting now on what's she's learned with JS. @nejsconf pic.twitter.com/3KCUAon30e
— amanda harlin (@amandaharlin) August 7, 2015

Final (Read: Random) Thoughts #

Drone group photo at #nejsconf! https://t.co/4hiwkreB4q
— Matt Steele (@mattdsteele) August 8, 2015

Wildlife at #nejsconf pic.twitter.com/PJmlSvaw4S
— Ryan Stille (@RyanStille) August 7, 2015

Nope'd the hell out around this time. I did almost get to touch a shark though. That was pretty cool.

How many other JS conferences can you pet a shark? Thats right, nowhere but #nejsconf pic.twitter.com/OteamIPnX6
— Justin Baker (@ezbakejustin) August 7, 2015

The SuperBytes played at the afterparty. They are really good. 8-bit punk rock band.

Testing React Components with Enzyme

Mon, 28 Mar 2016 21:44:31 GMT

We finally boarded the React train and it is great. I looked at Enzyme and Jest. Enzyme seems a lot easier to use so I chose it. I am impressed with how it turned out.

For this workflow, you will need to install these packages.

npm install enzyme babel-register babel-preset-react chai mocha react-addons-test-utils --save-dev

This is the relevant part of the package.json file. The first argument to the mocha command is a setup file for mocha. The second is a glob for all the test files. I am using an npm script for this but use whatever.

"scripts": {
  "test": "mocha website/test/.setup.js website/test/**/*-test.js"
}

Here is the .setup.js file. It adds babel-register with the react preset. This allows JSX to work in the tests.

require('babel-register')({
  presets: ['react'],
});

Here we have a small stateless react component that we are going to test. Stateless React components are pure functions without internal state or lifecycle methods. You should use these anywhere you are not using state or any of the component lifecycle methods. Pure functions are easier to test. Given the same input, a pure function always return the same output.

var React = require('react');

function Burrito(props) {
  'use strict';

  return (<div className={props.name}>{props.ingredients && props.ingredients.join(', ')}</div>);
}

Burrito.defaultProps = {
  name: 'burrito'
  ingredients: []
};

Burrito.propTypes = {
  name: React.PropTypes.string,
  ingredients: React.PropTypes.array
};

module.exports = Burrito;

Now, let's test this component. Enzyme allows us to shallow render a component, then exposes an API to get and set data on the rendered component. My favorite part is it doesn't use PhantomJS. We are going to use .text() and .hasClass(classname) in this example.

var wrapper = enzyme.shallow(<Burrito />);
expect(wrapper.text()).to.equal('');

We did it! In this test, we shallow render our Burrito component, then we expect (a chai function) the text of the rendered component to be empty.

We can also do something similar with hasClass.

var wrapper = enzyme.shallow(<Burrito />);
expect(wrapper.hasClass('burrito')).to.equal(true);

Here is a full example for testing the Burrito component we created.

var React = require('react');
var expect = require('chai').expect;
var enzyme = require('enzyme');
var Burrito = require('../js/components/Burrito');

describe('<Burrito />', function () {
  'use strict';

  describe('Text: ', function () {
    it('renders no text with no props', function () {
      var wrapper = enzyme.shallow(<Burrito />);
      expect(wrapper.text()).to.equal('');
    });

    it('renders no text with no props', function () {
      var wrapper = enzyme.shallow(<Burrito ingredients={['chicken', 'beans']} />);
      expect(wrapper.text()).to.equal('chicken, beans');
    });
  });

  describe('Name: ', function () {
    it("is named 'burrito' with no props", function () {
      var wrapper = enzyme.shallow(<Burrito />);
      expect(wrapper.hasClass('burrito')).to.equal(true);
    });

    it("is named 'the-james-mason' with 'the-james-mason' passed as name", function () {
      var wrapper = enzyme.shallow(<Burrito name="the-james-mason" />);
      expect(wrapper.hasClass('the-james-mason')).to.equal(true);
    });
  });
});

Test coverage is another cool thing I did. I used nyc to generate a coverage report after the tests run. The coverage report shows you what percentage of each file's statements, branches, and functions are tested. To run nyc, you can change the mocha npm script to look the code below.

"scripts": {
  "test": "nyc mocha website/test/.setup.js website/test/**/*-test.js"
}

It seems a bit magical to me but it did help me uncover missing paths in my tests.

Writing tests like these for all your components gives an incredible peace of mind. Generating test coverage will help ensure we are testing everything. I may try Ava instead of Mocha in the future.

A Simple Build Process for React and JSX

Tue, 28 Jun 2016 19:00:39 GMT

Unfortunately, build processes are a big part of JavaScript development. Build processes do not have to be complicated, despite what you may have heard. Let's jump in with my default for building React and JSX projects. I say "default" because if the project gets complicated I will move to using Gulp. An example of a more complicated project is one with multiple entry points.

Previously, I used the reactify transform but it has been deprecated in favor of babelify. We will use babelify.

First, we install these packages.

npm install browserify watchify babelify babel-preset-react --save-dev

Next, we add some configuration to our package.json file.

"browserify": {
  "transform": [
    [
      "babelify",
      {
        "presets": [
          "react"
        ]
      }
    ]
  ]
},

Here we are configuring browserify to use the babelify transform and using babel-preset-react to handle the JSX part.

Finally, we need to add some npm scripts so we can run this.

"scripts": {
  "build": "browserify index.js -o bundle.js",
  "watch": "watchify index.js -vo bundle.js"
},

Now we are able to run npm run watch and npm run build. Watch will watch our files and run browserify on change. We use this while working. Build will run browserify. This is really only used by our build server.

Deep Objects in Lodash

Mon, 17 Oct 2016 00:51:49 GMT

A quick introduction to two Lodash methods I found recently, _.get and _.set, to help work with deeply nested objects.

Let's say I have this object and I want to get the name.

var a = {
  b: [
    {
      c: {
        name: 'Arya',
      },
    },
  ],
};

Normally, we would be able to do a.b[0].c.name but what if one of the values turned out to be null? This is common when we are waiting for data from an HTTP request or another source. We usually solve this by constructing this big mess that checks for falsy values at each step.

var name = a && a.b && a.b[0] && a.b[0].c && a.b[0].c.name;
// => 'Arya'

Let's clean this up using Lodash's get method.

var name = _.get(a, 'b[0].c.name');
// => 'Arya'

We can also provide a default value as the third argument.

var name = _.get(a, 'b[0].c.name', 'A girl has no name');
// => 'Arya'

var name = _.get(a, 'b[1].c.name', 'A girl has no name');
// => 'A girl has no name'

I really like how much this cleans up the code.

We can also generate the object using _.set.

var a = {};

_.set(a, 'b[0].c.name', 'Arya');
// => {b: [{c: {name: 'Arya'}}]}

It is important to note that _.set mutates the passed object. To solve this, I would do something like this.

var a = {};

var new_a = _.set(Object.assign({}, a), 'b[0].c.name', 'Arya');
// => {b: [{c: {name: 'Arya'}}]}

To read more about these methods, check out the documentation for get and set.

Use Fetch

Wed, 30 Nov 2016 18:36:13 GMT

How do you make an HTTP request in JavaScript? Do you pull in jQuery? Write your own XMLHttpRequest? There's a better way.

Enter fetch.

function toJSON(response) {
  return response.json();
}

window
  .fetch('http://catfacts-api.appspot.com/api/facts')
  .then(toJSON)
  .then(function (response) {
    console.log(response);
    // => {facts: ["Cat families usually play best in even numbers. Cats and kittens should be acquired in pairs whenever possible."], success: "true"}
  });

This code will make a GET request to the catfacts API, parse the response as JSON, and log out the response to the console.

The bad news is support isn't super amazing with some browsers (as of November 2016). The good news is there are a handful of polyfills. whatwg-fetch by Github is a great one and it is a lot smaller than jQuery (and probably smaller than your XMLHttpRequest wrapper if it is feature-complete).

You can also use this in Node (and we do at WDT) using isomorphic-fetch.

The things I love about fetch is that it has the API of a lot of the ajax wrappers out there.

Virtualized Rendering in React

Mon, 27 Nov 2017 09:32:00 GMT

Virtual rendering (also known as virtualized rendering, windowing, and a number of other terms) is a method of only rendering the elements that need to be rendered to the DOM.

A common example of this is a list of a million items but only ten are visible at any time. Rendering the entire list would be incredibly inefficient, and slow, but rendering 10 to 15 items at a time and more as you scroll makes things much faster.

If your growth-driven startup has any chance of scaling, this is very important to consider.

There are a handful of existing libraries that you can use to render in this way. React Virtualized is my favorite. It also includes support for grids, tables, infinite scrolling, and even 'masonry-style' layouts.

If you are a VC-funded growth-driven startup, you probably don't want to use a library. You have the resources, the drive, and the overwhelming need to invent your own. Using a library is really more for bootstrap growth-driven startups.

Here is a quick implementation of a list, using React Virtualized. You can view this demo on Code Sandbox.

import { render } from 'react-dom';
import React from 'react';
import { List } from 'react-virtualized';

// Generate a big list.
// Ignore the man behind the curtain.
const list = Array.from({ length: 100000 }, function (v, i) {
  return i;
});

// Generate each row
function rowRenderer({ key, index, style }) {
  return (
    <div key={key} style={style}>
      Disruption Idea #{list[index]}
    </div>
  );
}

// Render our list
render(
  <List width={220} height={400} rowCount={list.length} rowHeight={30} rowRenderer={rowRenderer} />,
  document.getElementById('root')
);

In a later post, we are going follow in the footsteps of a VC-funded growth-driven startup and build our own basic version of a virtual list.

Slimmer Code Reviews with Husky

Thu, 15 Mar 2018 17:53:25 GMT

Husky is a simple tool for configuring Git hooks in a project. It really shines when you need to easily configure Git hooks for a project across a team. That is what we are going to do today.

First, we need to add a script to our package.json file. We already have an existing command for eslint configured (npm run lint), so all we need to do to get Husky configured is add a prepush script that runs the lint script.

{
  …
  "scripts": {
    "lint": "gulp lint",
    "prepush": "npm run lint"
  },
  …
}

Next, we can install husky into our project using the following command.

npm install husky --save-dev

It might seem like we should have done this first but Husky itself works by using an npm install lifecycle hook that fires after npm install is run. This means the husky setup we just did will take effect now.

Now you can commit and push these changes. You will see that it runs the linting script before the push runs. If the linting script fails, the push will not happen.

There is another tool called lint-staged that will run a given script only on staged files in Git. This is great if want if you are trying to slowly roll linting into a project and taking things a file at a time. It is not a replacement for Husky. It is really more of an enhancement to Husky. We can go over lint-staged in more detail in a later article.

JavaScript Styling with Feeling

Fri, 11 May 2018 09:32:00 GMT

This is a quick introduction to how I did CSS-in-JS on a recent project using Emotion and Preact.

To start, I need to install emotion and a Babel plugin. The Babel plugin generates source maps and optimizes style output. Emotion highly recommends this for production use.

npm install --save emotion
npm install --save-dev babel-plugin-emotion

Create a .babelrc file (or add the emotion parts to my existing babelrc file). Source maps will add a lot of weight to my bundle, so I am disabling them in production.

{
  "env": {
    "production": {
      "plugins": [["emotion", { "sourceMap": false }]]
    },
    "development": {
      "plugins": [["emotion", { "sourceMap": true }]]
    }
  }
}

Now, I can start making components. I've made a basic component to define a section with padding on the bottom. I prefer defining the styles as objects instead of template tags. It feels more natural in JavaScript to me. I wrap all the styles in a styles object. The individual items in the style object are wrapped in emotion's css function.

import { css } from 'emotion';
import { h } from 'preact';
import { GRID_UNIT } from '../constants/layout';

const styles = {
  container: css({
    paddingBottom: GRID_UNIT * 5,
  }),
};

export default function Section() {
  return <section className={styles.container}>{props.children}</section>;
}

GRID_UNIT is a constant I have defined with a value of 8. I make all my dimensions, margins, and padding a multiple of this number. Because of this I am able to get a very uniform interface without much effort.

To use the styles, I just pass the style I want to className. If I need to do any kind of composition I can use cx from emotion and pass an array of styles that are merged together. cx uses the classnames API.

import { css, cx } from 'emotion';
import { h } from 'preact';
import { GRID_UNIT } from '../constants/layout';

const styles = {
  container: css({
    fontSize: 20,
    paddingBottom: GRID_UNIT * 3,
  }),
};

export default function SectionHeading(props) {
  return <h2 className={cx(styles.container, props.className)}>{props.children}</h2>;
}

By passing props.className to cx I can override the default styles.

const styles = {
  specialHeading: css({
    fontSize: 22,
    color: 'blue',
  }),
};

<SectionHeading className={styles.specialHeading}>Very Special Heading</SectionHeading>;

Next, I use injectGlobal to do a simple CSS reset.

import { injectGlobal } from 'emotion';

injectGlobal({
  html: {
    boxSizing: 'border-box',
  },

  '*': {
    boxSizing: 'inherit',
    margin: 0,
    padding: 0,

    ':before': {
      boxSizing: 'inherit',
    },

    ':after': {
      boxSizing: 'inherit',
    },
  },
});

Being able to snapshot test the styles using jest-emotion is a big plus for me too. You can read more about that on the Emotion docs.

Knex and Postgres

Thu, 02 Jul 2020 00:00:00 GMT

An introduction to using Knex.js and Postgres originally appearing on Magistrate's blog.

Gravatars and Postgres 12 using Generated Columns

Wed, 08 Jul 2020 00:00:00 GMT

A quick look at an interesting use case for generated columns in Postgres originally appearing on Magistrate's blog.

Case-Insensitive Text Columns in Postgres with citext

Sat, 15 Aug 2020 00:00:00 GMT

A dive into Postgres' citext extension originally appearing on Magistrate's blog.

Storing Timezones in Postgres

Thu, 01 Oct 2020 00:00:00 GMT

A quick tip on storing a user's timezone in Postgres using build-in utilities originally appearing on Magistrate's blog.

Set Postgres System Timezone

Tue, 20 Oct 2020 00:00:00 GMT

A quick guide on how to set Postgres system timezone in a way that works across restarts originally appearing on Magistrate's blog.