One Simple Performance Tip to Optimize GatsbyJS Static Sites

In my article comparing Gatsby to Hexo, I talked about my experience switching writing this blog using Hexo and then later using Gatsby. In the process, the size of my initial page ballooned 5x.

In retrospect, I did not fully understand the abstraction that Gatsby provides. Fortunately, if you follow a simple rule of thumb, you can avoid bloating your network requests and maintain an ultra-performant website.

The Hidden Costs of PostgreSQL's JSONB Datatype

Postgres introduced the JSONB type in version 9.4 with considerable excitement. JSONB promised to marry a favorite relational database with the noSQL world, permitting data to be stored in the database as JSON without the need for re-parsing whenever a field is accessed. Moreover, the binary storage format permits indexing and complex queries against the stored JSON blobs. This data format embodies the flexible schema and was readily adopted at Fraight.

Ethical Engineering for the Average Engineer

Two months ago I purchased a GPS device and associated service plan from SPOT. Today, upon trying to cancel the service, the customer service representative informed me that I had accidentally enrolled myself into a 1 year, $250 contract and that I was unable to cancel. He told me that if I blocked the monthly charges against my credit card that they would report the debt to a collections agency. I was initially upset but soon realized it was a great opportunity to talk about ethics in software engineering.

Build Your Own Nested Query String Encoder/Decoder

The other day at work, one of my colleagues was frated that he was unable to encode nested objects in a query string and still maintain a readable URL. I went home that night and coded up a simple solution to this problem, and I thought I'd share it here today. This Github repo contains specs and the solution code.

You're Hiring Programmers Wrong: A Case for Interview Standardization

I've conducted about 100 technical interviews over the past 6 months for a software development recruiting company called Triplebyte. I've also been doing consulting work, which has required me to take numerous technical interviews. It's interesting contrasting the experiences to identify what works and what doesn't.

Every Triplebyte interview begins with the candidate coding a short game. We have a series of steps, and each step precisely defines simple requirements for the program to handle. I can generally tell a couple minutes into the 2 hour interview whether the candidate will be successful. There are certainly outliers (as well as mechanisms to prevent bias), but in general, I can quickly ascertain how well a candidate stacks up technically. So then, it begs the question, why is it so hard to hire engineers? The answer is, most of us are doing it wrong.

Scraping the Web with Puppeteer: Lessons Learned

I'm currently contracted to create a web service using some data from a third party Angular application. I worked off a proof of concept codebase that used Chrome's new Puppeteer API to scrape this site. I strongly regret not starting from scratch.

Regex And Automated Test Fuzzing

I posted my article Build Your Own Regex Engine on Reddit the other day, and one of the commenters claimed that the implementation should be trivial to break. Since I had already tested my program against a customized suite of tests, the remark got me thinking about how I could further increase my confidence in the correctness of my program. One extremely low cost however effective strategy for identifying faults in software is known as fuzzing.

Build a Regex Engine in Less than 40 Lines of Code

I stumbled upon an article the other day where Rob Pike implements a rudimentary regular expression engine in c. I converted his code to Javascript and added test specs so that someone can self-guide themselves through the creation of the regex engine. The specs and solution can be found in this GitHub repository. This blog post walks through my solution.

Write Your Own React-Redux Connect

My inspiration for this blog post came from this video where Dan Abramov walks through the source code to react-redux

As frontend web developers, it's not uncommon that we follow well-specified patterns - often blindly. The frontend landscape is changing rapidly, and sometimes there isn't time to investigate why we use a specific pattern; we just know we should.

One widely used pattern in react-redux applications looks like this

<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token function">connect</span><span class="token punctuation">(</span> mapStateToProps<span class="token punctuation">,</span> mapDispatchToProps <span class="token punctuation">)</span><span class="token punctuation">(</span>MyComponent<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>

I'll assume you know how to implement this pattern, but why do we use it and how does it work under the hood?

Using Reduce

My first introduction to functional programming was a couple years ago when I read through the famous SICP. As someone who had up to this point worked with mostly in object oriented and imperative languages, I had rarely seen <code class="language-text">map</code>, <code class="language-text">fitler</code>, and <code class="language-text">reduce</code> before that time. The purpose of the former two felt obvious; the latter one not so much. This blog post is geared for someone who knows how <code class="language-text">reduce</code> works but feels like they struggle to use it practically.

Leveraging Immutability in React

React has taken the web development community by a storm, and with it functional programming concepts have embedded themselves in the mainstream. One common statement you will often read is that all state in React should be immutable, and this practice is justified as necessary for performance reasons. This statement is entirely true, but it only tells half the truth. Immutability alone will not yield any performance gains in React (it'll actually make things slower).