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 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 Ben Nadel |
The 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?
|
How to Deploy a Front End Application with Netlify
|
Using Sass with CSS Modules in Next.js
|
Create Animated, 'Apple Music' Style Cards with WebGL and Three.js
|
💻 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 |
🧑💻 Looking to share your job listing in Frontend Focus? There's more info here.
🔧 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 |