#453 — August 12, 2020 |
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 |
➡️ Looking to share your job listing in Frontend Focus? More info here.
📙 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 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 |