đź‘‹ 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. |
|
|
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 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 |
|
đź“™ 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
|
Web Apps are Better Than No Apps
|
|
|
🔧 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 |
|