✅ How to Annul Promises in JavaScript

You can 'cancel' XHR and fetch requests, but can you cancel regular promises? Currently, no, but Zachary looks into doing the next best thing: telling a promise the game's up, and discarding/ignoring its eventual results.

Link to the article

#js #frontend

✅ Pure CSS Circular Text (Without Requiring a Monospace Font)

How to create circular text (animated too if you want) with just pure CSS. A nice decorative element.

Link to the article

#css #frontend

✅ Web Performance Guide

A helpful collection of over 20 plain language guides, covering things such as working with the different core web vitals, optimization techniques, critical CSS, metrics, user monitoring, and more. You’re bound to find some worthwhile advice here.

Link to the article

#js #frontend #css #html #performance

✅ Layout and Reading Order

This talk gets into the nitty gritty of layout options with CSS (think grid, subgrid, gap etc) — with a particular focus on the proposed, new CSS masonry method, what it aims to fix and the prototyping currently underway in Chrome. A good overview of where we are, and where things are heading in terms of laying out our pages

Link to the video

#frontend #css #video

✅ How to use container queries now

Makes pragmatic recommendations on how we can use container queries now (whilst still supporting older browsers).

Link to the article

#css #frontend #google

✅ CSS 'Surprise Manga Lines'

When a manga or anime character is surprised, lines often focus on and highlight their face. This post looks at how to create a similar effect with HTML and CSS.

Link to the article

#css #frontend #html

✅ Checkboxes: Design Guidelines

When to use them, what alternative input fields to consider, and usability guidelines to keep in mind.

Link to the article

#css #html #design #frontend

✅ 'Blazing Fast' Websites with Speculation Rules

A look at how to pre-render pages on your site. There’s a demo included to so you can get a feel for how it works.

Link to the article

#frontend #performance #render #engine

✅ 👩‍💻 The simplicity of using Vue’s reactivity system outside of Vue

Vue’s reactivity can be imported and used in JS outside of a Vue app, like in Node directly.

Link to the article

#vue #js #node #reactivity #ref #frontend
#article

✅ 👩‍💻 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