Frontend  Focus

#473 — January 13, 2021 | Read on the web

Front-End Performance Checklist 2021 — This annual front-end performance checklist (available as PDF, Apple Pages, MS Word) returns, updated with everything you need to know to create fast experiences on the web today, from metrics to tooling and CSS/JavaScript techniques.

Smashing Magazine

Web History: Web Design — Another excellent entry in Jay Hoffman’s series on web history, this time looking at the design side of things in the early days of the web. “Interest in the early web required tenacity and personal drive, so it sometimes came from unusual places”.

CSS-Tricks

How to Accelerate Development with Artificial Intelligence — Join us to learn about the benefits of AI in application development and see how you can utilize AI-assisted development to deliver modern apps quickly and efficiently.

OutSystems sponsor

A Developer’s Perspective: The Problem with Screen Reader Testing — Jake asks what the baseline in terms of testing for screen readers should be, and what browser and screen reader combinations are the most important to cover in order to achieve the greatest level of WCAG compliance?

Jake Tracey

CMA to Investigate Google’s ‘Privacy Sandbox’ Browser Changes — The UK governments Competition and Markets Authority (CMA) has opened an investigation into Google’s proposals to remove third party cookies and other functionalities from its Chrome browser.

GOV.UK

? Tutorials, Articles & Opinion

Are These The Most Interesting Frontend Tools for 2021? — A roundup of the 60 most-clicked tools from the past year in Louis Lazaris’ newsletter, which might give some insight into the kinds of things devs are interested in for 2021.

Louis Lazaris

Frontend Predictions for 2021 and Beyond — Where is front-end development heading in 2021? Jay Freestone examines trends and technologies that will shape web development this year.

Browser London

Can Gaming Save Itself from Its Content Moderation Problems? — Twitch, Playstation, Xbox and other big players in the gaming industry face a treacherous future — but there is room for optimism.

Stream sponsor

Give your Eleventy Site Superpowers with Environment Variables — Leveraging the Node dotenv library within Eleventy for some standard and creative uses for environment variables.

Andy Bell

You Want overflow: auto, Not overflow: scroll — A quick explainer on the overflow property, and why using auto is the way to go as it lets a browser automatically determine if a scroll bar is needed — or not.

Kilian Valkhof

Ensuring The Correct Vertical Position of Large Text — In some cases, browsers display large text at different vertical positions across operating systems. Here’s a solution.

Tobi Reif

Styling console.log() Output Formatting with CSS — Like most of us, probably, Ben often forgets console.log output can be styled with CSS, so he sat down to write out a bunch of increasingly elaborate examples.

Ben Nadel

The navigator.clipboard API — Async read and write methods for managing clipboard data.

David Walsh

Custom Properties as State? — Thoughts about using CSS and custom properties as a sort of basic data API.

Chris Coyier

What’s Wrong with Web Assembly? Does WASM Have Any Future in Web Dev?

Fernando Doglio

How to Deploy a Front End Application with Netlify

Idris Olubisi

Using Sass with CSS Modules in Next.js

Colby Fayock

Create Animated, ‘Apple Music’ Style Cards with WebGL and Three.js

Johnny Simpson

? Jobs

Senior JavaScript Engineer – UX and Design Systems (Berlin, DE) — Help us shape the future of ResearchGate’s UX through our cross-platform design system and optimal dev-design-collaboration.

ResearchGate

Find Your Next Job Through Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired

? Code, Tools and Resources

Hypercolor: A Tailwind CSS Gradient Palette Collection — This curated collection of beautiful premade gradients use the default colors from the Tailwind palette along with a selection of custom gradients.

jordi hales & mark mead

JSitor: Another JavaScript, HTML and CSS Online Editor/Sandbox — I’m a big fan of tools like JSBin and CodePen for throwing together quick experiments or testing out a bit of code. This is a new alternative which has numerous layouts and iOS and Android apps too.

JSitor

Improve Your PageSpeed Insights Score for Images. Try These Techniques

ImageKit.io sponsor

Panelle: A Free Comic Book Layout Maker — This interactive tool lets you build SVG-based comic-book style graphics. You can create and resize the panels, drop images inside them, then download the completed SVG.

andrew fulrich

Glyphs: A Fully Editable & Open Source Design System — Includes thousands of editable icons designed in Figma, web components, a CLI to download the SVGs from Figma, all categorized and tagged for search.

Glyphs

Compiled: Build Time Atomic CSS-in-JS — Write your styles in JavaScript with the full power of CSS then have them compiled ahead of time. GitHub repo.

Atlassian

Weather Icons: 200+ Weather Themed Icons — These are CSS-based, so you just need to drop in the styles and add the appropriate HTML classes. Definitely not for every project, but a nice unique departure from the norm.

Erik Flowers