Together with  Retool logo

#​562 — October 5, 2022 | Read on the web

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 <template> — A quick reminder about the <template> element and how it can come in handy, though folks on Hacker News were quick to pick up on its limitations.

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.


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..
Matt Frisbie


📙 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)'
Matthew Phillips

The Battle for the Soul of the Web
Kaitlyn Tiffany

🔧 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 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

  • Developer browser Polypane just hit version 11, adding new accessibility tools, an updated rendering engine, and a new JSON viewer.

  • Bootstrap version 5.2.2 is out now, with various bug fixes and changes to button hover styles.

  • Stark has a new macOS version of their accessibility design tool.

  • Leafjs is another entrant to the world of Web Component-based frameworks for building modern webapps.

🧑‍💻 JOBS

Full-Stack Engineer (NYC / Remote) — 100M+ devices, 100B+ API calls. Radar is looking for Product Engineers to build geospatial dev tools.

Software Engineer — Join our "kick ass" team. Our software team operates from 17 countries and we're always looking for more exceptional engineers.

Find Frontend Engineering Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

🚗 .. 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