How layout position impacts three big web performance levers
Sia Karamalegos shares three common problems related to layout position: lazy loading images above the fold, asynchronous loading of CSS needed for elements above the fold, and not prioritizing the fetch of the Largest Contentful Paint (LCP) image. - https://performance.shopify.com/blogs/blog/how-layout-position-impacts-three-big-web-performance-levers
#css
Sia Karamalegos shares three common problems related to layout position: lazy loading images above the fold, asynchronous loading of CSS needed for elements above the fold, and not prioritizing the fetch of the Largest Contentful Paint (LCP) image. - https://performance.shopify.com/blogs/blog/how-layout-position-impacts-three-big-web-performance-levers
#css
Performance @ Shopify
How layout position impacts three big web performance levers
Updated: 18 Sept 2023 We help Shopify merchants improve their web performance and see three common problems related to layout position: Lazy loading images above the fold Asynchronous loading of CSS needed for elements above the fold Not prioritizing the…
Awesome React: The Essential React Libraries and Resources
A well maintained collection of resources relating to the React ecosystem. Starting life as a list of several hundred items, it has since been pared down to fewer than 200 by removing all outdated projects and focusing on the essentials. - https://github.com/enaqx/awesome-react
#react
A well maintained collection of resources relating to the React ecosystem. Starting life as a list of several hundred items, it has since been pared down to fewer than 200 by removing all outdated projects and focusing on the essentials. - https://github.com/enaqx/awesome-react
#react
GitHub
GitHub - enaqx/awesome-react: A collection of awesome things regarding React ecosystem
A collection of awesome things regarding React ecosystem - enaqx/awesome-react
Frontend Development Beyond React: Svelte
A surprisingly thorough article going deep into one developer’s research into using Svelte to build modern front-end apps. If you’ve never experimented with Svelte, this is a good primer to the key concepts, tradeoffs, and techniques involved. - https://itnext.io/frontend-development-beyond-react-svelte-1-3-f47eda22cba5
#svelte
A surprisingly thorough article going deep into one developer’s research into using Svelte to build modern front-end apps. If you’ve never experimented with Svelte, this is a good primer to the key concepts, tradeoffs, and techniques involved. - https://itnext.io/frontend-development-beyond-react-svelte-1-3-f47eda22cba5
#svelte
Medium
Frontend Development Beyond React: Svelte (1/3)
Delving into Svelte, Solid, and Qwik
Vue 3 — Transitions — Why?
As a part of the Vue.js core code, a special component called "Transitions” is exposed to us. But how and why is something like this even included? - https://javascript.plainenglish.io/vue-3-transitions-why-db5ab4b85a79
#vue
As a part of the Vue.js core code, a special component called "Transitions” is exposed to us. But how and why is something like this even included? - https://javascript.plainenglish.io/vue-3-transitions-why-db5ab4b85a79
#vue
Medium
Vue 3 — Transitions — Why?
As a part of the Vue.js core code, a special component called "Transitions” is exposed to us. But how and why is something like this even…
A Node.js Streams Masterclass
What a treat! Join the creator of Fastify, as well as Node.js TSC member, on an hour long odyssey into the world of streams, a topic in which he specializes. He starts off quite poetically .. a stream is like an array over time .. before quickly getting on to some live coding and demos. This is one in a series of events put on by Platformatic. - https://www.youtube.com/watch?v=edB964-YYpE
#nodejs
What a treat! Join the creator of Fastify, as well as Node.js TSC member, on an hour long odyssey into the world of streams, a topic in which he specializes. He starts off quite poetically .. a stream is like an array over time .. before quickly getting on to some live coding and demos. This is one in a series of events put on by Platformatic. - https://www.youtube.com/watch?v=edB964-YYpE
#nodejs
YouTube
A Deep Dive into Node.js Streams | Masterclass
Streams are the lifeblood of many Node.js applications, enabling efficient data processing and manipulation. But their evolution has been anything but straightforward.
In this masterclass, we did a deep dive into stream development, exploring:
-Why are streams…
In this masterclass, we did a deep dive into stream development, exploring:
-Why are streams…
React Server Components in a Nutshell
A quick overview of RSCs not all about Next.js, comparing the approach taken by several frameworks before sharing thoughts on the tech and why the smaller Waku framework is worth a look. - https://thenewstack.io/react-server-components-in-a-nutshell/
#react
A quick overview of RSCs not all about Next.js, comparing the approach taken by several frameworks before sharing thoughts on the tech and why the smaller Waku framework is worth a look. - https://thenewstack.io/react-server-components-in-a-nutshell/
#react
The New Stack
React Server Components in a Nutshell
Paul Scanlon uses Waku to show how RSCs give React developers access to asynchronous server-side requests and data at the component level.
Getting to Know the DestroyRef Provider in Angular
Angular v16 has introduced a new provider called DestroyRef, which allows for registering destroy callbacks… - https://netbasal.com/getting-to-know-the-destroyref-provider-in-angular-9791aa096d77
#angular
Angular v16 has introduced a new provider called DestroyRef, which allows for registering destroy callbacks… - https://netbasal.com/getting-to-know-the-destroyref-provider-in-angular-9791aa096d77
#angular
Medium
Getting to Know the DestroyRef Provider in Angular
Angular v16 has introduced a new provider called DestroyRef, which allows for registering destroy callbacks for a specific lifecycle scope…
Для первого сезона профильной IT-конференции Podlodka React Crew сложно придумать более нужную тему, чем «архитектура».
Уже 27 мая опытные эксперты научат React-разработчиков:
💜 Решать архитектурные вопросы в разрезе React. В формате круглого стола Сергей Сова, Максим Вишневский и Сергей Самохов обсудят, как строить архитектуру, организовывать компоненты и данные, использовать рендер-движок, задействовать реактивность и учитывать особенности
💜 Применять архитектурный линтер для Feature-Sliced Design. Антон Медведев и Лев Челядинов из FSD core team представят новый линтер и в режиме лайвкодинга покажут, как его применять.
💜 Менять жизненный цикл проектов на React, проектировать гибкое приложение и править негибкое. Редактор «Доки» Полина Гуртовая расскажет, когда мигрировать проект и нужно ли это делать, если он ещё не устарел.
💜 Выбирать стейтменеджер. Валерий Смирнов из Oone.World покажет, когда и какие популярные библиотеки использовать для управления стейтом.
🎁 Бонусы: публичное собеседование по архитектуре и открытый микрофон.
Билеты уже ждут вас на сайте
Уже 27 мая опытные эксперты научат React-разработчиков:
Билеты уже ждут вас на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
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 …