#404 — August 14, 2019

Read on the Web

Frontend Focus

Time to First Byte: What It Is and Why It Matters — Just how much does TTFB matter when it comes to frontend performance? Ultimately, "If you’re slow out of the gate, you’ll spend the rest of the race playing catchup."

Harry Roberts

The Differing Perspectives on 'CSS-in-JS' — Some people outright hate the idea of CSS-in-JS, thinking it muddies the water of what each is meant to be, whereas others outright love the convenience it offers. Here, Chris Coyier runs through some of the varying stances, linking through to more detailed thoughts on the practice.

CSS Tricks

New Introduction to Gatsby Course with Jason Lengstorf — Build blazing 🔥 fast websites by default with Gatsby. In this course, you'll build up a blog from scratch and deploy your brand new blog to Netlify for the world to see.

Frontend Masters sponsor

The History and Legacy of jQuery — jQuery may have fallen somewhat out of favor in web development, but it still powers an estimated 74 percent of sites and paved the way for modern web frameworks. (In recent polls we've done, many people are still actively chosing to use it too. Long live jQuery!)

Danny Guo

Truths About Digital Accessibility — Things to keep in mind when creating, maintaining, or evaluating accessible technology.

Eric Bailey

Minify Your SVGs — How one software engineer optimizes SVGs for his blog and “why you probably should, too”.

Victor Zhou

   🖥  A Focus on 404s

As it's issue 404 we thought it appropriate to highlight some of the web's most inventive, useful or just amusing error pages:

When it comes to building your own 404 error page, it's worth giving the user any help that you can. So including things like a search bar, a list of useful/popular links and a way to report the error are just a few best practices worth considering.

💻 Jobs

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world's leading brands.


Frontend Developers Are in Demand on Vettery — Ready for a bold career move? Make a free profile, name your salary, and connect with hiring managers from top employers today.


📙 Articles, Tutorials & Opinion

Design Principles for Developers: Processes and CSS Tips for Better Web Design — Knowing the ingredients of Web design is one thing, but putting them together into excellent Web sites is another. Andrew looks at three areas.

Andrew Spencer

Native Lazy Loading Has Arrived — A software engineer at the British Broadcasting Corporation (BBC) talks through Chrome’s new native lazy loading feature and his experience of using it at the corporation.

Andy Potts

Using scrollIntoView() to Show Added Elements to a Container with Overflow — A great example of one of those times when you see something in the docs you didn’t realize existed and it makes an existing task much easier.

Christian Heilmann

▶  Make It Move: Create A Web Animation From Scratch — How to create and structure graphics for web animation (using SVG and JS) plus how to make and balance creative and technical decisions.

Chris Gannon

Handling Unused CSS In Sass To Improve Performance — Explores a Sass-oriented solution for dealing with unused CSS, avoiding the need for complicated dependencies involving headless browsers, and DOM emulation.

Luke Harrison

Introduction to Tailwind CSS — A brief introductory look into Tailwind CSS, the popular utility-based CSS library.

Joshua Hall

How Agile Is Your Web Team? Get Your Score and Custom Roadmap

Pantheon sponsor

The Birth of Inter — How the new open source typeface used by GitHub and Mozilla came to be. (I really like this font.)

Carmel DeAmicis (Figma)

Reducing Motion to Improve Accessibility

Lindsey Kopacz

How to Make Responsiveness Super Simple with CSS Variables

Per Harald Borgen

🔧 Code, Tools & Resources

Lottie: Render Adobe After Effects Animations on the Web — Parses effects created in Adobe After Effects and renders them natively. Here’s a basic demo.


JustGage: A Way to Draw and Animate Dashboard-Style 'Gauges' — An older library that’s just had its first release in 3 years. Uses Raphaël for the rendering.

Bojan Djuricic

Want a Better Way to Store and Serve Images and Videos? — Join a community of over 450K web and mobile developers dynamically managing rich media with Cloudinary. Try it free.

Cloudinary sponsor

UI Faces: Avatars for Design Mockups — If you need to populate your UI with real user avatars this aggregated collection may prove helpful.

Aleksandar Tasevski

Five CSS Grid Generators for Your Layouts

Maria Antonietta Perna

   🗓 Upcoming Events

Front Conference, August 29-30 — Zurich, Switzerland — A two-day double-track conference for everyone involved from concept to implementation.

Web Unleashed 2019, September 13-14 — Toronto, Canada — Covers a variety of front-end topics leaving you 'informed, challenged and inspired'.

State of the Browser, September 14 — London, UK — A one-day, single-track conference with widely varying talks about the modern web.

CSSConf, September 25 — Budapest, Hungary — A community conference dedicated to the designers and developers who love CSS.

Accessibility Scotland, October 25 — Edinburgh, UK — One day of talks. Friendly, open discussion about accessibility.