Frontend  Focus

#475 — January 27, 2021 | Read on the web

Firefox 85 Cracks Down on 'Supercookies' — Firefox has already blocked cookies from known trackers and scripts from known fingerprinting companies and is now partitioning network connections and caches by origin to prevent cache abuse used for surreptitiously tracking users. Here's the Firefox 85 release notes too.

Mozilla Security Blog

How Smashing Magazine Has Improved Its PerformanceSmashing Magazine is one of our favorite sources of tutorials, so it's neat to see how they've made it even quicker for us to consume their content by optimizing their React and Jamstack-based site.

Vitaly Friedman

Achieving Observability with AWS Lambda Extensions — Amazon Web Services recently announced AWS Lambda Extensions, a new way to run code in parallel without being bound by the Lambda lifecycle. Learn how New Relic integrates with the Extensions API to make monitoring your AWS functions even easier.

New Relic sponsor

Introducing Open Web Docs — A collective project between W3C, Google, Microsoft, Mozilla and others to support technical writers and the long-term maintenance of web platform documentation (such as the much loved MDN Web Docs), independently of any single vendor or organization.

Open Collective

▶  What’s The State Of Web Performance? — Smashing Podcast Episode 34 — Drew McLellan is joined by performance expert Harry Roberts for a long chat about all things web perf, including an overview of the performance landscape in 2021.

Smashing Magazine podcast

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Responsible Web Applications — A solid collection of HTML/CSS tips and tricks for creating applications that are both responsive and accessible out of the box. This is a beautifully designed site in its own right, too.

Joy Heron

Creating Comic Book Speech Bubbles with SVG and JavaScript — Can comic-style speech bubbles be rendered in both an accessible and visually authentic manner? Yes, with a little work.

Paul Spencer

Porting Firefox to Apple Silicon — Details some background information on the experience of porting Firefox to run natively on these new CPUs.

Gian-Carlo Pascutto (Mozilla)

Privacy Sandbox in 2021: Testing A More Private Web — Last year Google announced their intention to phase out third-party cookies and replace them with new, more private, browser features — here’s an update on that effort.

Justin Schuh (Google)

HTML and CSS Still Isn’t About Painting with Code — Thoughts on explaining how HTML works beyond just seeing the visual end result.

Christian Heilmann

CSS Frameworks, Hype and Dogmatism — Thoughts on the “dogmatism and gatekeeping themes of Tech Twitter and how they can generate often incorrect and naive statements—specifically about frameworks and methodologies”.

Andy Bell

Learn How Publicis Sapient use GatherContent to Massively Speed Up Site Builds

GatherContent sponsor

Are Your Anchor Links Accessible?

Amber Wilson

Six Reasons Why You Should Start Using Tailwind CSS

Varun Pujari

Creating a Checkerboard Reveal Effect in CSS

Geoff Graham

💻 Jobs

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

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

PACE: Automatically Add A Progress Bar to Your Site — View examples here. You can customize the color of the progress bar (which appears at the top of the page) and choose a style right on the page before downloading.

CodeByZach

Create App - Your Tool for Starting A New Project — A frontend build config generator that works with webpack, Parcel and Snowpack.

Jakob Lind

Source Map Visualization: Upload and View JavaScript/CSS Source Map Data — You can upload your own source map file or load the example file to see how this works.

Evan Wallace

Fast and Reliable Feature Management for the Modern Enterprise — Built for Engineering Teams. Easy Implementation. Designed for Enterprise Scale. Try LaunchDarkly for free today.

LaunchDarkly sponsor

inspyr: A Handpicked Set of Beautifully Designed SVG Icons — There's lots to choose from here. Just click to quickly copy the SVG code, and you can search by keywords.

Sam Barrowclough

CodeCopy: A Browser Extension That Adds 'Copy to Clipboard' Buttons on Every Code Block — Works with GitHub (including gists), MDN, Stack Overflow (and other Stack Exchange sites), Medium, CSS Tricks, and more.

Zeno Rocha

Parcel: A Code Editor Built for Email Development — One interesting feature is syntax highlighting support to easily read MSO comments (for Outlook conditionals), along with a side-by-side view of HTML, Text, and AMP versions of the emails.

AYMLab