|
|
Delightful UI Animations with the Shared Element Transitions API — Adrian shares how the Shared Element Transitions API is a “game-changing feature that will enable us to create impressive and elaborate UI animations easily.” This post explores the potential by building real-life examples from scratch. Adrian Bece (Smashing Magazine) |
Templating in HTML with Kitty Giraudel |
Build Internal Tools 10x Faster with Retool — Assemble your UI, connect data, and publish apps faster than building from scratch. Retool offers 100+ pre-built UI components and the ability to write code to customize how apps look and work. Schedule a 1:1 demo to learn more. Retool sponsor |
The 'New Wave' of JavaScript Web Frameworks — A few months ago he covered the new wave of React state management and now Rem is back trying to “make sense of the proliferation of new JavaScript web frameworks.” As are we all. Vue, Svelte, Solid, Remix, Astro and Qwik all make an appearance here. Rem |
More Details on the Transition to Manifest V3 — Outlines new details about the (arguably controversial) plan for Chrome to move extensions over to Manifest V3 (basically Chrome's new extension platform) including key dates in January and June 2023. David Li (Chrome Developers) |
⤷ 'Chrome's Manifest v3 Push Signals Changing of the Guard' — Claims this updated version is “hostile to extension developers and users”. We said it was controversial..
|
|
📙 Tutorials, Articles & Opinion |
Element Timing: One True Metric to Rule Them All? — Largest Contentful Paint (aka LCP) is a Core Web Vital that’s gotten a lot of attention in recent years, but it’s not without its pitfalls. The author shares how Element Timing can be a better way to track the performance of the page elements that matter most to site owners and visitors, especially on SPAs. Andy Davies (Speedcurve) |
Meta on Launching a New Chromium-Based WebView for Android — Facebook’s in-app browser on Android devices is being updated in an effort to improve security, performance, and the overall user experience. Nate Schloss (Meta) |
Free Webinar! Sprinkle the Clean Code Magic in Your JavaScript Projects Sonar sponsor |
When Going Somewhere Does a Thing: On Links and Buttons — If it goes somewhere, it’s a link. If it does something, it’s a button. Are those two things always mutually exclusive? Kilian Valkhof |
Will Serving 'Real' HTML Content Make a Site Faster? — A good comparison of SSR performance on most of the top full stack JavaScript frameworks. Astro and Sveltekit, two of the newer generation of frameworks, come out on top in many of their measurements. Scott Jehl |
'I Am Not That Excited About New CSS Features' — Some quick thoughts on the flurry of new CSS features we have seen of late and whether adoption of these additional riches may be slow. Silvestar Bistrović |
▶ A Love Letter to DOMPoint and DOMMatrix — A quick look at two JavaScript APIs useful for visual effects. Google Chrome Developers |
'Where Web Components Went Wrong (And How We Can Turn It Around)'
|
The Battle for the Soul of the Web
|
🔧 Code, Tools & Resources |
50+ Shapes: Copy the CSS for Just About Any Shape — Not just run-of-the-mill stuff (triangle, oval, diamond, etc.) but also unique shapes like a checkmark, yin/yang symbol, octagon, cylinder, and lots more. CSS Scan |
Tailwind CSS Variant Generator — Automatically sort Tailwind CSS classes into shared and unique attributes with this browser-based tool. Here’s a video showing how you may approach using it. Charlie Joseph |
Simplify Front-End Performance Monitoring by Analyzing UX Data — Analyze user errors in real-time and resolve frontend issues fast. Start monitoring your frontend data in minutes with a Datadog free trial. Datadog sponsor |
icons.download: A Free Set of Open-Source SVG Icons in 16 Styles — A nice set of icons with strokes in 4 different thicknesses along with options for outline and solid styles, and round vs. sharp corners. Design Resource |
Illustration Link: 80+ Links Where You Can Find Free Illustrations for Your Project — A searchable directory that includes stuff we’ve linked to before (and more) but compiled into a single resource. Illustration Link |
dark-mode-toggle: A Dark Mode Toggle Component for React — Not to be confused with the Google Chrome team’s component of the same name, this one is specifically for use in React. Anatoliy Gatt |
|
|
🚗 .. And Finally |
Nightdrive — An expalanation of a JavaScript demo/simulation of driving at night time on the freeway/motorway — created reasonbly simply by drawing circles on a HTML canvas. There's a full screen version, with music, here. James Stanley |