đź‘‹ Hello! This week we've asked Ahmad Shadeed to share a few of his favorite frontend tools. Be sure to scroll down and see them.
__
Chris Brandrick, Editor

Together with  Bryntum
🚀 Frontend Focus

#​610 — September 20, 2023 | Read on the web

WebKit Features in Safari 17.0 — Safari 17.0 is now available for both iOS 17 and iPadOS 17, it will arrive on macOS a little later this month. This release is packed, and includes support for the <search> element, the popover attribute, the CSS font-size-adjust property, the Storage API, JPEG XL, and much more. Big release!

Jen Simmons and the WebKit team

v0: Using AI to Build Frontend Components? — An interesting experiment from Vercel where you submit prompts like “a country selection field” or “a contact form” and it returns copy/paste-able shadcn/ui + Tailwind CSS code. It’s in “private alpha” for now, but you can take a good look at how it works here. A sign of the future?

Vercel Labs

The Complete UI Component Library For Enterprise Web Apps — A professional UI component library with power widgets like data grid, calendar, scheduler & Gantt charts. Includes API docs, guides and an unreasonable amount of demos to play with. Seamlessly integrates with React, Angular, Vue & Salesforce apps.

Bryntum sponsor

free-for.dev: A Bumper List of Stuff That's 'Free' for Developers — An interesting and extensive list of hosted services or otherwise paid-for products that have free tiers or options for developers. We linked to this a couple of years ago but it has been updated a lot since.

R.I.Pienaar

A (More) Modern CSS Reset — Andy created a modern CSS reset almost four years ago, but it’s time for an update to, well, keep it modern.

Andy Bell

⚡️ IN BRIEF

đź“™ Tutorials, Articles & Opinion

Get All That Network Activity Under Control with Priority Hints — Alex notes how the browser is pretty good at prioritizing resources requests on its own, but it’s not perfect. He shows us how priority hints makes it easy to provide explicit instructions, and just what scenarios they’re most helpful in.

Alex MacArthur

More CSS Findings from the Threads App — Ahmad continues his spelunking into Meta’s new social network, revealing a few interesting CSS findings from the Threads web app.

Ahmad Shadeed

How to Adjust Image Size Without Distortion | AI-Powered Smart Resize — This feature allows you to automate image resizing without losing quality or distorting objects in a picture.

Uploadcare sponsor

Revealing Images with CSS Mask Animations — A look at combining various CSS masks to create fancy image hover transitions/reveals. There's lots of visual demos and code examples here.

Temani Afif

A Beginner’s Guide to Using Pico CSS — An overview of getting started with this slimline framework.

David Uzondu

Counting Ghosts: A Case for Abandoning Web Analytics
P.C. Maffey

Web Apps are Better Than No Apps
Yury Molodtsov

🔎 FIVE IN FOCUS with Ahmad Shadeed

Five frontend recommendations from Ahmad Shadeed, design engineer, writer at ishadeed.com, and author of Debugging CSS.

  1. Stylelint
    This is a CSS linter that helps me avoid CSS mistakes upfront.
  2. Open Props
    I like this a lot because it gives us the power of Tailwind, but with pure CSS variables.
  3. Browser DevTools
    This is my most used tool while building stuff, it's opened by default.
  4. Responsive Viewer Extension
    Adds responsive testing in the browser (Chrome) with a click of a button.
  5. Codepen
    I don't think twice when I need to try something in the browser. I type pen.new and go from there.

🔧 Code, Tools & Resources

MDX Editor 1.0: A Rich Markdown Editor Component — Best known for the React Virtuoso virtualized rendering components, Petyo has unveiled a Lexical-powered Markdown editor for React apps that supports code blocks, tables, and more. The live demo shows off most of what you need to see.

Petyo Ivanov

Nue: An Alternative to React, Vue, and Svelte to Build UIs with Cleaner Code — Planned to be part of a full tooling ecosystem similar to Vite, Astro, etc., this library has no hooks, effects, props, or other abstractions and is based on a developer-friendly HTML-based template syntax.

nue

FusionAuth - It’s Your Auth, We Just Built It — Get fully-featured CIAM, customized to your unique requirements. Start with FusionAuth in just five minutes, for free.

FusionAuth sponsor

Plotteus: A JavaScript Library for Data Storytelling — Looks to be a powerful solution not just for creating static visualizations (graphs, plots, etc.) but interactive ones that visualize data changes via scrolling, UI controls, or other user interactions.

Bartosz Prusinowski

Create Chrome Extension: A Scaffolding Tool for Your Next Chrome Extension — Similar to create-react-app or Yeoman, this one is specifically for starting extension development, with support for 9+ frameworks, TS/JS, HMR, and light/dark modes.

Yalda

🧑‍💻 JOBS

Find Frontend Engineering Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.
Hired

Ipx.