✅ Going Beyond Pixels and (r)ems in CSS: Absolute Length Units

The last in a series on CSS units, this time looking at absolute units (“the units you mostly - absolutely - want to avoid”).

Although they are generally not recommended for responsive, accessible experiences, Brecht shares a few reasons why you might use them over relative ones.

Link to the article

#css

✅ The View Transitions API

Want to scratch the surface of what the View Transitions API can do and start creating some ‘native-feeling’ experiences on the web?

Link to the article

#css

✅ Don’t Get Scammed by Fake Performance Experts and Apps

This post exposes some of the common hacks used by bad actors to fake a higher Lighthouse score (which have zero real-world impact on the user experience).

Link to the article

#html #js #css

✅ The Things Users Would Appreciate In Mobile Apps

Pointers on things like forms, search, navigation, roomy elements, etc.

Link to the article

#css #html #ux

✅ Frontend Development Beyond React: Svelte

A surprisingly thorough article going deep into one developer’s research into using Svelte to build modern front-end apps.

If you’ve never experimented with Svelte, this is a good primer to the key concepts, tradeoffs, and techniques involved.

Link to the article

#js #react #svelte

✅ Releases

ESLint 9.0 – A significant release with lots of cleanups, a new no-useless-assignment rule, and numerous tweaks and changes.

VitePress 1.1 – Vite & Vue-powered static site generator.

npm 10.5.2 – It's now faster to run scripts, though we're talking milliseconds nowadays.

Node.js April 10 Security Releases – Including v18.20.2 (LTS), v20.12.1 (LTS), and v21.7.3 (Current).

#js #vue #node #lint

✅ On Developing Figma Plugins

Some interesting observations on the experience of creating Figma plugins in JavaScript, including how they’re sandboxed and some implementation details of the author’s own plugin.

Link to the article

#js #figma

✅ Some DevTools Tips and Tricks

Most developers barely scratch the surface of what DevTools can accomplish, says the author, who shares ten tips here.

Link to the article

#js #chrome

🖼️ Faces.js: A Library for Generating Vector-Based Cartoon Faces

The end results are somewhat reminiscent of how the Nintendo Wii generates random Miis. Faces are drawn as SVGs with each also represented by a JavaScript object so you can draw them again later.

Link to the lib

#lib #js

✅ iOS404

An overview of all of the missing web features in iOS. There’s over 60, and some of the missing features may surprise you (many are over a decade old).

Link to the article

#css #ios

✅ Modern CSS Patterns in Campfire

Advancements in CSS, such as :has(), oklch(), and others allow developers to replace client- and server-side code with CSS properties, enabling behavior that was previously difficult to impossible, all without a framework.

Link to the article

#css

✅ CSS in React Server Components

An exploration of compatibility issues between React Server Components and CSS-in-JS libraries like styled-components, including what some of your options are and what’s coming in future.

Link to the article

#css #react #next

✅ Next.js 14.2 Released

As it approaches its eighth birthday, Next.js has passed 1 million monthly active developers and landed this release with support for using Turbopack to improve local development, memory usage, CSS and caching optimizations, improved error messages, and more.
It also seems Next.js 15 is on the horizon to coincide with React 19.

Link to the release

#react #next #release

✅ CSS Gradients: A Gallery of 275 'Click-to-Copy' CSS Gradients

Includes quite a few unique examples (i.e. not just two-color gradients) that you might find useful or simply for inspiration.

Link to the site

#css #tool

👩‍💻 👩‍💻 Preview.js: Preview UI Components Instantly in Your IDE

Namely, VS Code or JetBrain IDEs, out of the box. Compatible with components built for React, Vue, Svelte and Solid.

Link to the tool

#js #vue #react #tool

✅ Wedges: A Collection of UI Components for React

Built and used by the folks at Lemon Squeezy, this is a well thought, aesthetically pleasing set of Radix UI and Tailwind CSS based components.

You can also download a Figma file of them to use when mocking up layouts

Link to the collection

#react #components #tailwindcss #radixui

✅ Gap is the New Margin

Author highlights how the use of the margin property is now on the decline, slowly.

Link to the article

#css

✅ Qwik vs. Next.js: Which is Right for Your Next Web Project?

A point by point faceoff between Qwik vs Next.js and why the author thinks Qwik takes the gold medal.

Link to the article

#react #next #qwik

✅ TresJS: Build 3D Experiences with Vue.js

Create 3D scenes with Vue components and Three.js. Think React-three-fiber but more.. Vue flavored. There’s an online playground if you want to give it a quick spin (literally).

Link to the tool

#vue #tool

✅ The Frontend Developer/Engineer Handbook 2024

An in-depth, detailed, and free guide to the current web development landscape.

It's a superb resource (by way of Frontend Masters) for getting up to speed on everything from code editors, CSS, UX, UI, the command line, popular tools and frameworks, performance, accessibility, testing, AI, and much more. One to bookmark/share.

Link to the handbook

#js