Frontend Focus

🇺🇦 #​537 — April 13, 2022 | Read on the web

Introducing DuckDuckGo for Mac: A Private, Fast, and Secure Browsing App — Mac-only, in beta, and invite only for now, but here’s a new browser app from the privacy-focused search engine DuckDuckGo. It uses WebKit under the hood, and boasts features such as private search, tracker blocking, automatic cookie pop-up management (yes please) and more.

Beah Burger-Lenehan (DuckDuckGo)

Boost Resource Loading With fetchpriority, a New Priority Hint — The new attribute helps us fine-tune relative resource priority, improve LCP performance, and deprioritize JavaScript fetch calls. This post digs into some potential use cases.

Adrian Bece

How to Build a Fullstack App from Scratch — Join Scott Moss for this detailed course looking at modern app building. Get to grips with a stack of tools, including the likes of Next.js, TypeScript, Postgres, and React, plus you'll learn about data modeling, authentication, state management, testing and more.

Frontend Masters sponsor

Designing Better Breadcrumb-Based Navigation — Explores how people navigate websites and how this prominent design pattern can assist us in our journeys.

Vitaly Friedman

CSS Parent Selector — A deep-dive into the CSS :has parent selector, looking at how it works, with plenty of use-cases and visual examples.

Ahmad Shadeed

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Private Click Measurement: Conversion Fraud Prevention and Replacement For Tracking Pixels — An update on the proposed web standard for measuring advertising in a privacy-preserving way.

John Wilander

A Deep Dive into CSS's :where() — A good primer on the :where() pseudo-class, showing how it can be used in production along with some specific use cases.

Pelumi Akintokun

Make Beautifully Resilient Apps with Progressive Enhancement — Ignoring progressive enhancement could be seriously hurting your conversions. This article shows you how to build resiliency into your apps.

Austin Gil

Retool Makes It 10x Faster to Build Custom Internal Tools for Any Company — Build internal tools in minutes with Retool, where visual programming meets the power of real code.

Retool sponsor

Performance Insights: Get Actionable Insights on Your Site's Performance — Here’s a preview of the ‘Performance Insights’ panel, an upcoming Chrome feature that’s expected in version 102. It’s designed to surface actionable insights for your sites performance.

Jecelyn Yeen (Google)

Identifying Fonts: The Complete Guide — Having a good working knowledge of fonts is a handy skill to have when it comes to UI work. Here’s some handy pointers on identifying various typefaces in the wild.

Erik D. Kennedy

Fonts in Use: Variable Fonts — Four real-world examples of variable fonts being put to use.

Matthijs Sluiter

Atomic 2.0: Revisiting the Atomic Design Method for Design Systems
Hannah Heinson

Jobs

Front End Engineer (Remote) — Our profitable & growing startup is looking for experienced FE engineers who are interested in working on complex UX challenges.
Sensor Tower

Senior Technical Writer (Warsaw or Remote) — The leading rich text editor used by global software companies and millions of users around the world. Join the CKEditor team.
CKEditor

Find Frontend Engineering Jobs with 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

🔧 Code, Tools & Resources

scroll-snap: A Customizable Scroll Snap Implementation — Bit of an older project that’s still maintained. Uses requestAnimationFrame() for 60fps scrolling performance and doesn’t have any dependencies. Try it here.

Luca Falasco

Style Guide Generator for Tailwind CSS — Generate a beautiful style guide based on your Tailwind configuration settings. You can do this via a URL to your GitHub repo or by pasting your config file directly.

beyondcode

APIs to Encode, Play & Analyze Video. Start a Free Bitmovin Trial

Bitmovin Inc. sponsor

Doodle Icons: 400+ Free Hand-Drawn Icons — These are quite nice and available in PNG and SVG formats and for Figma. 15 categories of icons and completely free for any kind of project. There's an associated npm package here too.

Khushmeen Sidhu

Chalk.ist: Create Beautiful Images of Your Source Code — Quickly turns your source code into nice sharable images. Carbon is another popular choice in this space.

Kasper Mikiewicz

🖌 ..and finally

home sweet homepage — If you grew up in late 90s and used the likes of Geocities to build some of your very first websites then this webcomic about growing up online is a very sweet look at that side of web publishing and its wider impact on the individual. There's a text-only transcript here too.

Amy Wibowo