Together with  FusionAuth
🚀 Frontend Focus

#​626 — January 17, 2024 | Read on the web

Designing Better Target Sizes — A thoughtfully designed, interactive guide that really zeroes in on how best to design target sizes on the web. They are often far too small, particularly on mobile, so this excellent primer should set you up for getting things right.

Ahmad Shadeed

5 CSS Snippets Every Frontend Developer Should Know in 2024 — Adam did this last year, and it proved very popular, so he’s back with more toolbelt worthy, powerful, CSS tips that you need to know (including nesting, sub grid, container query units, etc), all of which you can use today.

Adam Argyle

Auth for Every App — The best frontend developers deserve the best auth service. Add MFA, SSO, biometrics and advanced threat detection with just a few clicks. Find out for yourself using our easy quickstart guides.

FusionAuth sponsor

Top Frontend Tools of 2023 — An excellent collection of popular, useful frontend tools for both CSS and JavaScript developers. You'll no doubt find something here to help speed up your development workflow.

Louis Lazaris

⚡️ Quick Links

đź“™ Tutorials, Articles & Opinion

Accessible Notifications with ARIA Live Regions — A detailed, two-part series offering an extensive guide to ARIA live regions, looking at what they are, how to use them, and how not to. Part two is here.

Sara Soueidan

The Complex and Awesome border-image Property — If you’ve never reached for the powerful border-image property, Temani demonstrates some different approaches for using it to create clever decorative accents and shapes.

Temani Afif

Using data-nosnippet to Block Content from Google Search Snippets — One for those tinkering with all things SEO here.

Glenn Gabe

Join Our Live Webinar - Debunking Free Obfuscation Myths in 2024 — We'll explore the complex world of JavaScript code obfuscation, focusing on the dangers of free obfuscation tools.

Jscrambler sponsor

Money Talks? Formatting Currency in Web Content — How do screen readers announce money amounts and currency symbols in web content?

Ricky Onsman

▶  'I Hate CORS' — “Cross Origin Resource Sharing was, in many ways, a mistake. It has caused as much pain as it has solved, if not significantly more..” — This video dives into just why Theo holds that opinion. In response, Jake Archibald shared this historical context.

Theo Browne

'I Used Netscape Composer in 2024' — Just how far can you get using a WYSIWYG page editor released in the 1990s?

Pier-Luc Brault

How to Center an Element in CSS Without a Wrapper
Mojtaba Seyedi

Drawing Raindrops with CSS Gradients and Masks
Michelle Barker

Eliminating Cookie Banners is Hard
Jeff Kaufman

Learn SVG by Drawing an Arrow
Shalvah Adebayo

🔧 Code, Tools & Resources

What PWAs Can Do Today: A Showcase of What's Possible — We first shared this over three years ago, but things have come along a lot since. There are some interactive demos to help show off what’s possible.

Danny Moerkerke

Pa11y: An Automated Accessibility Testing Tool — Something you can add into your build process.

Pa11y

Auth Without Complexity — Authentication in a Straightforward Platform — Userfront streamlines authentication & access control so engineers can focus on their core business. Read the docs now.

Userfront sponsor

Heynote: A Dedicated Scratchpad for Developers — A native, open-source app for Windows, Mac, and Linux, described as “a large persistent text buffer” that’s divided into blocks where each block allows syntax highlighting and JSON is auto-formatted.

Jonatan Heyman

Penrose: Beautiful Diagrams by Just Writing Plain Text — A little bit like charting tool Mermaid but with a more mathematical focus – there are plenty of examples to get a feel for it.

Penrose Contributors

SVG Icons CLI: A Command Line Tool for Creating SVG Sprite Sheets — This uses a React Component to offer a middle-ground between dropping your SVGs into HTML image elements (less flexible) vs. importing them in your JS bundle (less performant).

Alex Anderson

🕰️ ICYMI (Older links, still worth checking out)

Ipx.