✅ React Server Components Now in RedwoodJS

If you thought RSCs were a Next.js phenomenon, think again. Implementations are popping up all over, such as in Waku and now RedwoodJS, a full-stack framework founded by GitHub co-founder Tom Preston-Werner that leans on React, Prisma and other technologies to provide a great DX ‘out of the box.’

This post digs deep into how RSCs are used and how they can supplant Redwood’s use of GraphQL.

Link to the article

#js #react #redwood #middle #senior #server

✅ Spicing Up Text with text-emphasis in CSS

There’s plenty of neat ways to style text in CSS — and here’s a quick, fun look at what the well-supported text-emphasis property can do.

Link to the article

#css

✅ How to Build a ChatGPT-a-Like with Clerk and AWS Bedrock

A thorough walkthrough whose focus is on the UI rather than the LLM/AI stuff behind the scenes which is taken care of by Amazon’s Bedrock service. Clerk handles the auth, while Next.js forms the base of the app.

Link to the article

#js #nextjs #clerk #aws #server #frontend #ai

✅ What You Need to Know About Modern CSS

A bookmarkable guide with a list of all the new additions to CSS (think nesting, view transitions, :has(), etc).

This is very handy, as there’s an explainer, demo, code example, and quick bit of detail as to why you should care about each entry.

Link to the article

#css

✅ JavaScript Visualized: Promise Execution

A helpful diagrammed and animated article, coupled with an (optional) 8-minute video, that goes into how promises work and are scheduled behind the scenes.

It’s useful to have a good mental model of these mechanics, given promises form the basis of asynchronous functions in JavaScript.

Link to the article

#js #promises #engine

✅ An Interactive Guide to CSS Container Queries

This is a detailed explainer on CSS container queries, exploring the problems they solve, how they work, and how we can use them in our workflows.

Lots of code and visuals to help things along too.

Well worth bookmarking.

Link to the article

#css

✅ Introducing Babylon.js 7.0

This new version of the popular 3D web rendering engine is now here.

Changes:
- Adding Apple Vision Pro support
- Improved WebXR support
- Improved ragdoll physics, procedural geometry
- and more.

Link to the release

#js #news

✅ A Proposal to Add Signals to JavaScript

A (very) early stage proposal for bringing a new feature to ECMAScript/JavaScript: signals!

The proposal brings aboard ideas from a swathe of popular frameworks and aims to align everyone and get us on the same page when it comes to working with state and making updates based upon changes to state.

Link to the proposal

#js #reactivity

✅ Setting Up Storybook for React Components

How Dolt (love that name!) set up Storybook for their React component library including the use of Chromatic to test and review components.

Link to the article

#js #react #storybook

✅ Folding the DOM

No, you can’t fold a DOM node in two, but Josh runs us through a neat technique to create a 3D letter folding effect using transform and perspective.

It’s a React-specific tutorial, but the concepts would work in JS/CSS. The end result is slick, and you’ll learn something about 3D transforms and CSS animation along the way.

Link to the article

#js #react #css

✅ 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