Ready.code - JS development. Releases and articles

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

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

Enjoy our content? Advertise on this channel and reach a highly engaged audience! 👉🏻 It's easy with Telega.io. As the leading platform for native ads and integrations on Telegram, it provides user-friendly and efficient tools for quick and automated ad launches. ⚡️ Place your ad here in three simple steps: 1 Sign up: https://telega.io/c/ready_dot_code 2 Top up the balance in a convenient way 3 Create your advertising post If your ad aligns with our content, we’ll gladly publish it. Start your promotion journey now!

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

#meme #frontend #backend

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

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

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

#meme #frontend #ts

✅ '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

✅ 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

✅ 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

#meme #css #frontend

✅ 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

✅ 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

✅ 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

#meme #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

✅ 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

✅ The React Native Team Says 'Use a Framework' Using frameworks, such as Expo, is now the recommended approach when creating new React Native apps. As Nicola explains: “you’re either using a framework or you’re building your own framework.” Link to the article #react #reactnative #js #frontend