Frontend Focus

#​496 — June 23, 2021 | Read on the web

A History of the Web — Matthew shares a look back at how the web has evolved into what we have today (going from the first HTML spec, right up to modern day React), along with thoughts as to why building web applications is so hard here in 2021.

Matthew Gerstman

▶  Top 10 Web Performance Pitfalls — Jake and Surma run through some of the top web performance issues they’ve seen recently across a bunch of sites.

Google Chrome Developers

Resolve Bugs and Manage Website Feedback Fast with BugHerd — Simple, effective QA and user acceptance testing. Pin bugs and feedback to your website. BugHerd captures all the technical information you need to replicate bugs and solve issues like a screenshot, and browser and OS information.

BugHerd sponsor

Brave Unveils New 'Brave Search' Search Engine — Brave, perhaps better known for its privacy oriented browser, has unveiled Brave Search, a new privacy-oriented search engine of its own. Their biggest claim is it’s built upon “a completely independent index” and there’s no tracking at all.

Brave

A Complete Guide To Accessibility Tooling — A look into different kinds of tools to help you streamline your accessibility testing process.

Nic Chan

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Custom Scrollbars In CSS — You may have spotted these and been curious about how to do it yourself. Ahmad does a great job of running through both the old and new way to style these custom scrollbars here, with plenty of details and visual examples.

Ahmad Shadeed

Let's Learn About Aspect Ratios in CSS — Another from Ahmad, this time looking at how to use the native CSS aspect-ratio property.

Ahmad Shadeed

Optical Size, The Hidden Superpower of Variable Fonts — A font with an optical size axis allows for more detail to be shown when used at larger sizes. Neat.

Roel Nieskens

Watch Gavin Strange’s Series of Design Classes on Editor X

Editor X sponsor

Towards a Better Responsiveness Metric — The Chrome Speed Metrics team shares some ideas around improving how they measure responsiveness, and ask for your feedback on the matter.

Moreno, Sullivan, Song

Perfect Tooltips with CSS Clipping and Masking
Louis Hoebregts

A Comprehensive Guide to Front End Testing
Perfecto

Detect Unused Classes in... HTML
Chris Coyier

Jobs

Senior Front End Engineer at Sakari (San Francisco) — Build the Next-Gen Messaging Platform. Join our small agile team to help build chatbots, AI & voice using React, Mongo & Node.js.
Sakari

🧑‍💻 Got a job listing to share? Here's how.

🔧 Code, Tools and Resources

TOAST UI Editor 3.0 Is Here — The latest version of a popular open-source JavaScript library for editing Markdown documents through both text and WYSIWYG. Has things like syntax highlighting, scroll syncing, live preview, chart support, and more.

TOAST UI

Useful Front-End Boilerplates and Starter Kits — We don’t need to write everything from scratch every single time. With boilerplates and starter kits, we can set up our projects faster, and get to work immediately.

Cosima Mielke

What Are the Best React Component Libraries? — Our team researched the best React component libraries so you don’t have to.

Retool sponsor

Utopia: A New Browser-Based React IDE — Although only in alpha release, Utopia makes a positive first impression. The founding principle of the new browser-based IDE is that design and coding processes should be fully integrated from the outset with easy, two way navigation between the two. Take a test drive with the 'Play with Utopia' button on their landing page. There was a lot of discussion about this tool on Hacker News, too.

Utopia

Concentric Circle Spinner — A cool spinner made only with divs, some border tricks, and one CSS animation.

Alex Trost (via Luke Richardville)

Pintr: Generate Single-Line SVG Illustrations from a Photo — You can select the level of contrast and definition then download in PNG or SVG format.

Javier Bórquez

snappify: Create Images of Beautiful Code Snippets — There are a few of these types of tools available. This one includes a number of different options for customizing the color, syntax, background, etc, of the code blocks.

Anki and Dominik