#453 — August 12, 2020

Web Version

Frontend Focus

?? Mozilla Laying Off 250 Employees — Sad news from the folks behind Firefox — they’ve laid off a quarter of their entire workforce, which reportedly includes both the DevTools and MDN teams. A troubling and unfavourable sign for the future of a diverse web. There’s been extensive discussion on Hacker News about this.

Mitchell Baker

Rome: Unifying The Frontend Development Toolchain — This is an ambitious in-beta project that aims to replace Babel, ESLint, Webpack, Prettier, Jest, and more, to ostensibly simplify the frontend workflow. We’re all for it if it works. Here’s the introductory blog post.

Sebastian McKenzie

The Definitive Introduction to Svelte with Rich Harris — Learn how the Svelte framework works, write svelte components, and take a tour through the entire Svelte API in this detailed video course.

Frontend Masters sponsor

Web History — Chapter 1: Birth — The first in a long-form series about the history of the web. This initial entry looks at the work Sir Tim Berners-Lee carried out to make the web a reality.

Jay Hoffman

Some More CSS Comics — Julia is back with another batch of her excellent CSS explainer comics. There’s six to go through here, covering things such as compatibility, specificity, centering, flexbox and more.

Julia Evans

Enhancing User Experience With CSS Animations — How to build CSS animations and transitions in your interfaces that are inclusive, accesible and will enhance your users’ experience.

Stéphanie Walker

? Jobs

Our Design Team Is Looking for a Talented UX Content Strategist — We will be creating and publishing original UX thought leadership content that ties into Activity Feeds and Chat Messaging.

Stream

React JS Developer (Remote) — 13 million people and counting plan outdoor hiking and cycling routes with our apps. If you are smart and talented React Dev, join us to inspire more people to explore more of the great outdoors.

Komoot

Find a Job Through Vettery — Use Vettery to connect with hiring managers at startups and Fortune 500 companies. It’s free for job-seekers.

Vettery

? Tutorials, Stories & Opinion

content-visibility: The New CSS Property That Boosts Your Rendering Performance — The CSS content-visibility property enables web content rendering performance benefits by skipping rendering of off-screen content. Here’s how to leverage it for faster initial load times.

Una Kravets & Vladimir Levin

Optimizing CSS for Faster Page Loads — A look at just how CSS affects page load times and what you can do to improve it.

Tomas Pustelnik

How To Configure App Color Schemes with CSS Custom Properties — A modern approach on how to set up CSS Custom Properties that respond to application colors.

Artur Basak

The Remote Access Smart Lock That Works Without Wi-Fi — Share a PIN with family, friends, guests, and employees. Grant access any time, anywhere using our algoPIN™ technology.

igloohome sponsor

Supercharging — The number input type provides a nice control for working with numbers on most platforms, with min and max bounds, stepping up and down, etc. But what if you want to add more power to it with custom stepping types and controls? Kilian has a go at this here.

Kilian Valkhof

Modern CSS Solutions — We linked to this a few months back, but a lot has been added since. A great series of posts examining modern CSS solutions to annoying problems.

Stephanie Eckles

Laws of UX — A collection of the key maxims that designers must consider when building user interfaces.

Jon Yablonski

Nailing the Perfect Contrast Between Light Text and a Background Image

Yaphi Berhanu

Best Practices in CSS: Organization and Naming Conventions

Daniel Sipe

CSS Mistakes We Make Whilst on Autopilot

Ahmad Shadeed

? Code, Tools and Resources

Coolors: A Customizable and Flexible Color Scheme Generator — There are a number of tools like this one, but this one has quite a few features including palettes from photos, export in multiple formats, share palettes via URL, and lots more.

Fabrizio Bianch

Forge Icons: A Set of 300+ SVG Icons for a Variety of Projects — You can test them out on a dark or light background and interactively change size, stroke, and color to suit your needs.

forgesmith

Online Checkout Made Simple with Square’s Payments APIs and SDKs

Square Developer sponsor

Take Me On — A fun browser-based take on A-Ha’s 80s classic Take On Me. Note: This will ask to turn on your webcam.

Adam Kuhn codepen

Chrome Extension Development Kit — Is a Chrome extension in your future? This paid development kit comes complete with project files (built using React) enabling you to leverage your current skills into a new domain.

Ryan Fitzgerald

Kickstand UI: A Design System You Can Use Everywhere — This framework has a slew of components and utilities that are focused on accessibility via color contrast, HTML semantics, and use of ARIA.

Burton Smith

SurveyJS: A JavaScript Survey and Form Library — Here’s a live demo.

Devsoft Baltic OÜ

Figma to Code: Generate Responsive Pages for Tailwind, Flutter, and SwiftUI — A free design-to-code plugin for Figma that converts your layouts to responsive code.

Bernardo Ferrari