Mozilla layoffs, Rome, and some CSS comics

#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 ⚡️ Quick bits: A living doc of things to consider when building sites for iOS 14 users. The New York Times is pretty good at creating clever pages that show off their journalistic work, and so it goes with this look at 'viral particles' on the New York subway. Some app design lessons we can learn from Google. People are doing some neat exploration of building SPAs with Rust by way of WebAssembly. Could you build a Web 'piano' in just 1KB of code? This guy shares how he did it. From 2017 comes the back story to how we got 'favicons' on the Web. Do you need a custom select control? Spoiler: No. Working with pre-rendered/static sites? You may enjoy Brian Rinaldi's JAMstacked newsletter. 💻 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 <input type=number> — 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 🗓 Upcoming Events: Front-End Focus (August 17) – It's got the same name as this newsletter but it's nothing to do with us. It's from the An Event Apart team though and has some fantastic speakers lined up. You Gotta Love Frontend (August 24-28) — This now online event will feature five talks over five days. Here's the speaker line-up. International JavaScript Conference (September 2 - 4) — Lots of workshops, sessions and keynotes — now all online. 🔧 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

by via Frontend Focus