#373 — January 9, 2019

Read on the Web

Frontend Focus

Front-End Performance Checklist 2019 — This popular frontend performance checklist has been updated for the year ahead.

Smashing Magazine

The Most Liked CodePen Examples in 2018 — CodePen is a popular online frontend development tool that’s packed with interesting demos and experiments, so you’ll be sure to find something neat here. 100 are listed, so if you’re short of time, you might want to just see the top 10.

CodePen

Learn Angular: The “Batteries Included” Framework 🔋🔋 — Build a full app from scratch in this new Angular 7.x course. We will start from ground up and use the Angular CLI to quickstart our app, then build components, templates, routes, forms, and use ajax to build out a full master-detail web app.

Frontend Masters sponsor

'It’s 2019 and I Still Make Web Sites with my Bare Hands' — An opinionated write-up on doing things the ‘simple’ way, without frameworks or libraries as one cure for technical debt.

Matt Holt

Reader Mode: The Button to Beat — Some browsers (such as Safari and Firefox) come with special modes that strip away page elements other than content to improve the reading experience, but what can you do to stop readers having to resort to that?

Eric Bailey

How To Learn CSS — Covers the fundamentals of layout, flow and more. A good refresher or one to share with those starting out.

Rachel Andrew

Mozilla Announces Deal to Bring Firefox Reality to HTC VIVE Devices — Firefox Reality is a browser designed from the ground up to work on virtual reality headsets.

The Mozilla Blog

💻 Jobs

Front End Developer✌️ in Beautiful Norway 🎉 — Passion for React and GraphQL? Join our fast growing GraphQL e-commerce service Crystallize.

Crystallize

Find A Job Through Vettery — Vettery matches top tech talent with growing companies. Create your profile to get started.

Vettery

📘 Articles & Tutorials

▶  Variable Fonts and the Future of Web Design — Runs through how variable fonts can play a key role in design, performance, accessibility & usability.

Mandy Michael

New Bootstrap v5 Forms — A quick look at some of the major changes coming to form controls in Bootstrap 5.

Mark Otto

A Look Back At Frontend in 2018 — A review of key changes, including new browser features, CSS additions, framework updates and more.

Kaelan Cooter

Checking If An Input Is Empty with CSS — An experimental look at how to validate a form using only pure CSS.

Zell Liew

How to Do Functional Programming with JavaScript?

Progress Kendo UI sponsor

HTML5 SVG Fill Animation with CSS3 and Vanilla JavaScript

Marina Ferreira

Using SVG Instead of srcset for Responsive Images — A brief look at how using SVG (if possible) as an alternative to srcset can save you from exporting multiple resolutions and avoid extraneous build processes.

Thomas Yip

Chrome DevTools: The Five Most Popular DevTools Tips From 2018 — Umar regularly shares handy developer tips for when working in Chrome. Here, he shares some highlights from last year.

Umar Hansa

Speed Up Next-page Navigations with Prefetching — A quick look at how to improve next-page navigation speed using prefetching.

Addy Osmani

How to Create a Multi-Line Inline Gradient

Chris Coyier

Best Practices for Improving Page Load Speed Whitepaper. Download Now

Cloudinary sponsor

▶  Making Future Interfaces: Algorithmic Layouts — Creating CSS layouts that are self-governing, using both Flexbox and Grid.

Heydon Pickering

The Practical Value of Semantic HTML“Firstly, let’s reach a definition of ‘good’ HTML..”

Bruce Lawson

🔧 Code and Tools

Level Up Your GitHub Experience with These Chrome Extensions — And, if you missed it, GitHub now lets you have unlimited private repos for free.

Dave Brock

Blobmaker: Create Organic SVG Shapes

z creative labs

It Is 2019. Update Your Website Footer — A little New Year PSA: Here’s a couple of snippets to change your static timestamp over to an automatically updating one.

Build Real-Time Web Experiences with a Simple but Powerful Serverless Backend

Microsoft sponsor

Magic Grid: A Simple Library for Dynamic Grid Layouts — Has a slightly different use case than CSS Grid, but may be useful as explained in here.

Emmanuel Olaojo

Vue Glide: A Vue Component for the Glide.js Slider/Carousel

Anton Reshetov

Normalize.css: A Modern Alternative to CSS Resets — Not a new project but has been seeing some resurgence in popularity recently.

Nicolas Gallagher