A Few Interesting Ways To Use CSS Shadows For More Than Depth
Preethi experiments with different shadows — two CSS properties and a filter — to make interesting hover effects, different text styles, and even casting shadows on other shadows. - https://www.smashingmagazine.com/2023/08/interesting-ways-use-css-shadows
#css
Preethi experiments with different shadows — two CSS properties and a filter — to make interesting hover effects, different text styles, and even casting shadows on other shadows. - https://www.smashingmagazine.com/2023/08/interesting-ways-use-css-shadows
#css
Smashing Magazine
A Few Interesting Ways To Use CSS Shadows For More Than Depth — Smashing Magazine
We often think of shadows in CSS as something to reach for when we want to add depth to a design. But shadows can be used for more than depth. Let’s experiment with different shadows — two CSS properties and a filter — to make interesting hover effects, different…
The Event Loop, Web APIs, and (Micro)task Queue Visualized - https://www.youtube.com/watch?v=eiC58R16hb8
#javascript
#javascript
YouTube
JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue
Learn how the browser event loop, task queue, microtask queue, and Web APIs work together to enable non-blocking, asynchronous JavaScript.
- https://www.patreon.com/LydiaHallie
- https://buymeacoffee.com/lydiahallie
- https://twitter.com/lydiahallie
- …
- https://www.patreon.com/LydiaHallie
- https://buymeacoffee.com/lydiahallie
- https://twitter.com/lydiahallie
- …
The Perf Gains of Adding a Task Runner to Node.js
Instead of running npm run test, how does node --run test sound? First teased in a 2023 pull request, the motivation for this idea is to improve performance and get scripts running ASAP (think 20ms vs 200ms). It appears set to make it to a Current Node.js release very soon. - https://polar.sh/anonrig/posts/node-js-task-runner
#nodejs
Instead of running npm run test, how does node --run test sound? First teased in a 2023 pull request, the motivation for this idea is to improve performance and get scripts running ASAP (think 20ms vs 200ms). It appears set to make it to a Current Node.js release very soon. - https://polar.sh/anonrig/posts/node-js-task-runner
#nodejs
Polar
Node.js task runner
Recently, I’ve added a task runner to Node.js. This means that instead of running npm run test on your project, you can now run “node —run test”. This change has the goal of reducing the amount of CPU cycles we pay for just running a simple script. Prior…
Data Fetching in Vue 3
Data fetching optimization is key for a performant web application. Vue helps by offering many different lifecycle hooks, but finding the best one for each specific type of call is not straightforward. This article helps understand this concept with some real-life scenarios. - https://fadamakis.com/data-fetching-in-vue-4b0faf0e88b7
#vue
Data fetching optimization is key for a performant web application. Vue helps by offering many different lifecycle hooks, but finding the best one for each specific type of call is not straightforward. This article helps understand this concept with some real-life scenarios. - https://fadamakis.com/data-fetching-in-vue-4b0faf0e88b7
#vue
Medium
Data Fetching in Vue 3
Data fetching optimization is key for a performant web application. Vue helps by offering many different lifecycle hooks, but finding the…
Component communication in Angular for Senior devs
Exchanging data between different components is just an essential task in any application. Angular is not an… - https://medium.com/@iamprovidence/component-communication-in-angular-for-senior-devs-4e3c9f0f2c59
#angular
Exchanging data between different components is just an essential task in any application. Angular is not an… - https://medium.com/@iamprovidence/component-communication-in-angular-for-senior-devs-4e3c9f0f2c59
#angular
Medium
Component communication in Angular for Senior devs
Exchanging data between different components is just an essential task in any application. Angular is not an exception here. Despite how…
CSS Selectors: A Visual Guide
Sébastien Noël created a visual guide to the most popular CSS selectors. - https://fffuel.co/css-selectors
#css
Sébastien Noël created a visual guide to the most popular CSS selectors. - https://fffuel.co/css-selectors
#css
fffuel.co
CSS Selectors: A Visual Guide & Reference
Visual guide to CSS selectors, including pseudo-classes (:nth-child, :hover,...), functional pseudo-classes (:not, :is,...) and pseudo-elements.
How I Made My GitHub Profile README Dynamic
There’s no Node here, alas, but I thought it was a good demo of how it’s not too tricky to give your GitHub profile some extra flair by pulling in your blog posts or other stats of choice. - https://tduyng.dev/blog/dynamic-github-profile-readme/
#github
There’s no Node here, alas, but I thought it was a good demo of how it’s not too tricky to give your GitHub profile some extra flair by pulling in your blog posts or other stats of choice. - https://tduyng.dev/blog/dynamic-github-profile-readme/
#github
Duy NG
How I made my GitHub profile README dynamic
Explore the process of making your GitHub profile README dynamic with automated updates of your latest blog posts using GitHub Actions and Python scripting
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
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
annotate.dev
Learn OAuth 2.0 by Building Your Own OAuth Client
OAuth is a standard protocol that allows users to securely share their information, such as email addresses from their Google account, with your website's server, without exposing their Google login credentials.This guide will show you how to create an OAuth…
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
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
DEV Community
Vue 3 Explained: Rendering 101
Ever wondered how Vue turns your templates and components into the actual webpage you see in your...
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
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
GitHub
GitHub - alan2207/bulletproof-react: 🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.
🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications. - GitHub - alan2207/bulletproof-react: 🛡️ ⚛️ A simple, scalable, and powerful architecture for...
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
Bramus Van Damme shares a list of misconceptions about Specificity in CSS. - https://www.bram.us/2024/05/05/misconceptions-about-css-specificity
#css
Bram.us
Misconceptions about CSS Specificity
To remove some of the confusion, here’s a list of misconceptions about Specificity in 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 robust and maintainable Angular applications with layer abstraction - https://medium.com/@navez.jerome/applying-the-onion-architecture-to-angular-projects-b37736d2c996
#angular
Medium
Applying the Onion Architecture to Angular Projects
Building robust and maintainable Angular applications with layer abstraction
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
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
Snyk
Building an npm package compatible with ESM and CJS in 2024 | Snyk
Publishing JavaScript packages that are compatible with both ECMAScript Modules (ESM) and CommonJS (CJS) is a critical skill for developers who aim to integrate wide-ranging libraries. This write-up focuses on practical approaches and best practices for maintaining…
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
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
YouTube
A Better Way To Organize Components In Vue
The base component pattern is an amazing way to organizer your components in your app. In this video I'll explore how this component pattern works, and what to look out for! We'll look at refactoring components, updating components, and how to use presentational…
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
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
ui.dev
Why React Query?
React Query gets downloaded 3.3 million times a month – this is the story of why it exists and what problems it solves.
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
Roman Komarov shows a neat technique of alternating between different backgrounds or themes on nested elements. - https://kizu.dev/alternating-style-queries
#css
kizu.dev
Alternating Style Queries
With the container style queries on the horizon, it is a good time to do more experiments with them. In one of my recent experiments, I found out that style queries will allow us to do what the currently specified (but not implemented by anyone) function…
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
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
Medium
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 implementation
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
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
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
vueschool.io
Lazy Hydration and Server Components in Nuxt - Vue.js 3 Performance - Vue School Articles
In the previous article, I mentioned two main ways that allow new, custom code to enter our Nuxt.js Application - components and plugins. Today, we will learn everything about the former. For most Nuxt.js applications, components are #1 contributor to the…
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
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
Deno Blog
How to document your JavaScript package
Writing good JSDocs for your JavaScript package is critical to its success. Here are some best practices for creating docs that helps your users be successful.