Responsive Images Deep Dive
Responsive images seek to answer the following question: How can we incorporate images in responsive layouts that are appropriate for a device and its resolution without loading unnecessarily large...
Style Interaction
I've been working on a project where I want to convey the idea of pages spread out on a table or post-it notes pasted randomly against a wall or another surface. It took me a while to reason through...
Lazy loading images using intersection observers
Lazy loading allows you to delay loading images until the user actually scrolls the page to where the image or video is visible to the user. This post will describe why lazy loading is important, one...
Thoughts about front end best practices
I posted this as an answer to this question in Quora and I thought I would post it here and expand on it a little bit with things I thought about after I wrote the answer. This is not an exhaustive...
Defensive Coding: Default Parameters
When working with Javascript we can add default values to our function parameters so they will work if we forget to pass them when declaring the function. In this post, we'll discuss why we should and...
Starting a new Node Project
Most of the time, starting a Node project involves a lot of typing, copying and pasting and typing data into your repository. This post lists some ways to automate the process in the command line and...
Improving Font Performance: Work to control font loading
Because of their size fonts tend to be some of the largest components of any web pages. According to the HTTP Archive, the sum of the transfer size of all fonts (eot, ttf, woff, woff2, or otf...
Improving Font Performance: Use Resource Hints
If you're using a third party font service like Google Fonts or Typekit you should work on mitigating potential latency. Say you have a typical Google Font embed code in your <head>. You...
Improving Font Performance: CDNs and Service Workers
Serve through a Specialized CDN # Serving content through a CDN has always been a key to improve performance. The edge servers are in diverse geographical locations and they will route users to the...
Improving Font Performance: Subset fonts using Glyphhanger
Glyphhanger is a Node application that will help you reduce the size of your fonts by subsetting them. There are times when we use just a few characters from a given font. For example, if we use a...