✅ 👩‍💻 Vue Tip: Destructure in v-for

We are a big fan of ES6 destructuring and recently discovered that you can use it in v-for.

First, let's take a look at a v-for without using ES6 destructuring:

<div v-for="article in articles" :key="article.id">
  <h2>{{ article.title }}</h2>
</div>

articles is a list of article JavaScript objects and has the type Article[]:

interface Article {
  title: string
  id: string
}

We can use ES6 destructuring which results in a cleaner template code:

<div v-for="{id, title} in articles" :key="id">
  <h2>{{ title }}</h2>
</div>

#vue #js #frontend #destructuring
#tip

✅ 👩‍💻 Seamless Fullstack Nuxt Apps with Nuxt Hub

NuxtHub is a deployment and admin platform making it possible to build and deploy fullstack Nuxt application with ease. In this article they will explore this amazing new tool and what capabilities it offers to the ecosystem.

Link to the article

#vue #nuxt #frontend #backend #js #fullstack
#article

✅ 👩‍💻 React Flow 12: Build Node-Based Editors and Interactive Diagrams

Now more broadly known as xyflow, this mature library makes it easy to create ‘node-based UIs’ where you want to have numerous interactive components wired together however you choose. Version 12 introduces server side rendering support, dark mode, more hooks and helpers, and better DX via TSDoc.

Link to the release

#react #js #frontend #diagrams #xyflow #lib

✅ 👩‍💻 Sneaky React Memory Leaks: How the React Compiler Won’t Save You

Closures can lead to memory leaks in React and while the new and exciting React Compiler can tackle a lot of issues and make most codebases more performant, it pays to be aware of the tricky edge cases.

Link to the article

#react #js #frontend #memory #leaks
#article

✅ 👩‍💻 React 19's use Hook Can Impact App Performance

The new use() hook in React 19 looks great. However, there are some potential issues which require some exploration and explanation, says Jack.

Link to the video

#js #react #hooks #frontend
#video

✅ 👩‍💻 Learn Suspense by Building a Suspense-Enabled Library

What better way to learn than to get your hands dirty? Especially when it comes to a topic that’s a little awkwardly documented.

Link to the article

#js #react #frontend #lib
#article

✅ 👩‍💻 Using React 19 with Both Vite and Then Next.js

The VP of Product at Vercel starts with a client-only React app using Vite and looks at how React 19 can make life better, before moving on to a Next.js example. (32 minutes.)

Link to the video

#js #react #next #frontend #vercel
#video

✅ 👩‍💻👩‍💻 The Magic of Clip Path

This post sets out to “inspire you and show you that thinking outside the box can lead to some great animations” — all via the magic of the very powerful clip-path CSS property.

Link to the article

#frontend #css #html
#article

✅ 🖥 👩‍💻 👩‍💻 15 Page Speed Optimizations That Sites Ignore (at Their Own Risk)

Optimizations to put in place, including some fairly easy low-hanging fruit, to improve your page performance.

Link to the article

#js #html #css #frontend #performance
#article

✅ 👩‍💻 👩‍💻 How Keyboard Navigation Works in a CSS Game

You may recall a few issues ago we featured this Chromium-only CSS Mario game — now here’s a look at how it works, specifically moving Mario with keyboard input. All HTML/CSS, no JavaScript.

Link to the article

#html #css #frontend #game
#article

✅ 👩‍💻 Zoom, Zoom, and Zoom

A post exploring the intricacies of the three types of browser magnification and their CSS equivalents. If you want to understand zoom in the browser, this is a good place to start.

Link to the article

#frontend #html #css
#article

✅ Node.js v22.5.0 (Current) Released

A notable release for two reasons: first, the WebSocket feature in node:http is now exposed, but second, Node is embedding SQLite and now offers direct access to it via node:sqlite.

Link to the release

#js #node
#release

✅ 👩‍💻 How to Integrate Shadcn with Nuxt.js

Shadcn-Vue is an innovative tool that stands out by offering a unique approach to component integration. In this detailed guide, you’ll walk through how to integrate Shadcn-Vue with Nuxt.js, optimizing your development process with insights and practical tips to ensure you get the most out of this powerful combination.

Link to the article

#js #frontend #vue #nuxt #shadcn
#article

✅ Releases

- ESLint v9.7.0 – Supports ES2025 duplicate capturing groups in regexes. Duy Ng also shares some tips on migrating to ESLint 9+.
- Boa 0.19 – A JS engine written in Rust for embedding in other projects.
- Meteor 3.0 – Full-stack framework for real-time apps.

jQuery 4.0 Beta 2, htmx 2.0.1, swc 1.7

#releases #js #libs #frontend #fullstack #eslint #jquery #meteor

✅ InfiniteGrid 4.12: Arrange Card Elements Infinitely in a Grid Layout

A mature and established way to create grids formed of card elements of varying sizes. Happy on both desktop and mobile and has integrations for React, Vue, Angular, Svelte, and others.

Link to the lib

#js #frontend #react #vue
#lib

✅ 👩‍💻 Integrating HeadlessUI and TailwindCSS with Nuxt: A Comprehensive Guide

Headless UI is a set of completely unstyled, accessible UI components designed to smoothly integrate with utility-first CSS frameworks like Tailwind CSS. If you're working with Nuxt.js and want to leverage these components, this guide will walk you through the process step-by-step, ensuring you can effortlessly integrate HeadlessUI into your Nuxt.js projects.

Link to the article

#vue #js #frontend #nuxt #tailwindcss #headlessui
#article

✅ 👩‍💻 What React Devs Need to Know About React Native

While React and React Native share many similarities, significant differences exist when targeting web versus native platforms. This blog aims to highlight and address the most common mistakes and questions developers typically encounter when transitioning from React to React Native.

Link to the article

#js #frontend #react #reactnative
#article

✅ How to Make Complex Chrome Extensions

Spinning up a quick, simple browser extension isn’t that big of a deal nowadays, especially with tools like Extension to kick off a project. Larger extensions are a different story, so it’s neat to learn from the experiences of a team that’s built one.

Link to the article

#js #frontend #chrome #extension
#article