Learn OAuth 2.0 by Building Your Own OAuth Client

When the author was first learning OAuth, he found lots of concept heavy, code-light tutorials, so he’s built something that’s truly code-first. This is a fantastic way to show off some code (using Annotate) and worth a look even if the topic doesn’t interest you. - https://annotate.dev/p/hello-world/learn-oauth-2-0-by-building-your-own-oauth-client-U2HaZNtvQojn4F

#nodejs

Vue 3 Explained: Rendering 101

Ever wondered how Vue turns your templates and components into the actual webpage you see in your browser? Curious about how it efficiently updates the view when things change? This article provides a breakdown of rendering in Vue 3. - https://dev.to/nasserahmed009/vue-3-explained-rendering-101-270g

#vue

Bulletproof React: A Scalable Architecture for Production-Ready Apps

An opinionated guide on how you could structure a large scale React app, should you be lacking for inspiration. A long standing resource that’s just had a major update and deserves another look. - https://github.com/alan2207/bulletproof-react

#react

Misconceptions About CSS Specificity

Bramus Van Damme shares a list of misconceptions about Specificity in CSS. - https://www.bram.us/2024/05/05/misconceptions-about-css-specificity

#css

Applying the Onion Architecture to Angular Projects

Building robust and maintainable Angular applications with layer abstraction - https://medium.com/@navez.jerome/applying-the-onion-architecture-to-angular-projects-b37736d2c996

#angular

Building an npm Package Compatible with ESM and CJS in 2024

Publishing packages compatible with both ECMAScript Modules (ESM) and CommonJS (CJS) is a valuable skill and Liran has a few quick tips. - https://snyk.io/blog/building-npm-package-compatible-with-esm-and-cjs-2024/

#nodejs

A Better Way To Organize Components In Vue

The base component pattern is an amazing way to organize your components
in your app. In this video, explore how this component pattern works, and what to look out for! You’ll explore refactoring components, updating components, and how to use presentational components. - https://www.youtube.com/watch?v=Z9Qi0SSO86s

#vue

Why React Query?

Starting from first principles, and a reminder of what React itself is, this is a neat, highly accessible exposition of why React Query exists and what it does. - https://ui.dev/why-react-query

#react

Alternating Style Queries

Roman Komarov shows a neat technique of alternating between different backgrounds or themes on nested elements. - https://kizu.dev/alternating-style-queries

#css

Angular: Tracking an inactive user using RXJS, in-built and custom events

When we talk about inactivity, there are certain questions we need to answer before we begin the… - https://javascript.plainenglish.io/angular-tracking-an-inactive-user-using-rxjs-in-built-and-custom-events-8e851e09d126

#angular

You Might Not Need dotenv: Node Now Natively Supports .env File Loading

This isn’t a super new feature (it’s existed since Node 20.6.0) but a handy reminder that you can trim another dependency if you have basic .env environment variable reading requirements. - https://javascript.plainenglish.io/ditch-dotenv-node-js-now-natively-supports-env-file-loading-8b9b2d49b2d2

#nodejs

Lazy Hydration and Server Components in Nuxt – Vue.js 3 Performance

For most Nuxt.js applications, components are #1 contributor to the JavaScript bundle size. This article talks about lazy hydration and server components in Nuxt.js. It discusses how these techniques can be used to improve the performance of Nuxt applications. - https://vueschool.io/articles/vuejs-tutorials/lazy-hydration-and-server-components-in-nuxt-vue-js-3-performance/

#vue

How to Document Your JavaScript Package

You’ve written some useful code, you want to distribute it.. what next? Good docs! The Deno team demonstrates the value of JSDoc and writing documentation alongside your usual source code. While Deno's tooling is focused upon here, the concepts apply to, and can be used with, Node too. - https://deno.com/blog/document-javascript-package

#docs

Handling The Indentation of a Treeview Component

Ahmad Shadeed offers some advice on handling indentation in treeview components. - https://ishadeed.com/article/tree-view-css-indent

#css

Building an Issue Tracker App with React and ElectricSQL

Kelvin is great at this stuff. ElectricSQL provides a way to build reactive, realtime local-first apps atop Postgres. - https://www.youtube.com/watch?v=y6vYJUESwns

#react

Five Node Version Managers Compared

In an ideal world, the latest version of Node would slot well into every project, but in reality we often need to switch versions, and a variety of tools are available to make it simple. NVM is perhaps the best known, but maybe N, FNM, Volta, or even pnpm could suit you better? - https://pavel-romanov.com/5-node-version-managers-compared-which-is-right-for-you

#nodejs

A Conceptual Model of State in Vue 3.4

This article is about a new feature in Vue 3.4 called defineModel. It discusses how defineModel can help developers manage state in their applications and that defineModel makes it easier to write clean, maintainable code. They also discuss how defineModel can be used with composables to further improve code organization. - https://itnext.io/a-conceptual-model-of-state-in-vue-3-4-9390c8e68aa5

#vue

Angular Best Practice

Angular, developed by Google, is a powerful framework for dynamic programming of Single Page Application… - https://medium.com/@marcomatto/angular-best-practices-83a7f1d7087c

#angular

Time-Based CSS Animations

Yuan Chuan showcases a time-based way of animation using CSS Math functions. - https://yuanchuan.dev/time-based-css-animations

#css

Build a Real-Life, AI-Powered Project with Next.js and Strapi

Uses the Strapi open-source, headless CMS. We linked to this a few months ago, but the whole ten part series is now available. - https://strapi.io/blog/epic-next-js-14-tutorial-learn-next-js-by-building-a-real-life-project-part-1-2

#react