Performant Expandable Animations: Building Keyframes on the Fly
April 1st, 2020
Animations have come a long way, continuously providing developers with better tools. CSS Animations, in particular, have defined the ground floor to solve the majority of uses cases. However, there are some animations that require a little bit more work. You probably know that animations should run on the composite layer. (I won’t extend myself…
APIs and Authentication on the Jamstack
March 31st, 2020
The first “A” in the Jamstack stands for “APIs” and is a key contributor to what makes working with static sites so powerful. APIs give developers the freedom to offload complexity and provide avenues for including dynamic functionality to an otherwise static site. Often, accessing an API requires validating the authenticity of a request. This…
Creating an Editable Site with Google Sheets and Eleventy
March 27th, 2020
Remember Tabletop.js? We just covered it a little bit ago in this same exact context: building editable websites. It’s a tool that turns a Google Sheet into an API, that you as a developer can hit for data when building a website. In that last article, we used that API on the client side, meaning…
Consistent Backends and UX: How Do New Algorithms Help?
March 26th, 2020
In previous articles, we explained what consistency is, the difference between “strong” and “eventual” consistency, and why this distinction is more important than ever to modern application developers. We also introduced the notion of ‘consistency tax’: the extra time and effort that a development team needs to invest if they choose a system with only…
Version 9.1 of Angular Now Available — TypeScript 3.8, faster builds, and more
March 25th, 2020
Version 9.1 of Angular Now Available — TypeScript 3.8, faster builds, and more We just released Version 9.1 of Angular. This is a minor release of the framework and the CLI that is a drop-in replacement for 9.0 containing new features and bug fixes. Build Speed Improvements Today, the Angular libraries you use are made compatible with the Ivy…
An Introduction to MDXJS
March 25th, 2020
Markdown has traditionally been a favorite format for programmers to write documentation. It’s simple enough for almost everyone to learn and adapt to while making it easy to format and style content. It was so popular that commands from Markdown have been used in chat applications like Slack and Whatsapp as document applications, like Dropbox…
Building a Real-Time Chat App with React and Firebase
March 23rd, 2020
In this article, we’ll cover key concepts for authenticating a user with Firebase in a real-time chat application. We’ll integrate third-party auth providers (e.g. Google, Twitter and GitHub) and, once users are signed in, we’ll learn how to store user chat data in the Firebase Realtime Database, where we can sync data with a NoSQL…
React Suspense in Practice
March 19th, 2020
This post is about understanding how Suspense works, what it does, and seeing how it can integrate into a real web app. We’ll look at how to integrate routing and data loading with Suspense in React. For routing, I’ll be using vanilla JavaScript, and I’ll be using my own micro-graphql-react GraphQL library for data. If…
Build a Node.js Tool to Record and Compare Google Lighthouse Reports
March 16th, 2020
In this tutorial, I’ll show you step by step how to create a simple tool in Node.js to run Google Lighthouse audits via the command line, save the reports they generate in JSON format and then compare them so web performance can be monitored as the website grows and develops. I’m hopeful this can serve…
Considerations for Creating a Card Component
March 2nd, 2020
Here’s a Card component in React: const Card = props => { return( <div className=”card”> <h2>{props.title}</h2> <p>{props.content}</p> </div> ) } It might be pretty useful! If you end up using this thing hundreds of times, now you have the ability to refactor a little bit of HTML across your app very easily. You already have…