Разбираемся с Interaction to Next Paint
О чем говорит новая метрика Core Web Vital и как ее можно оптимизировать.
https://blog.logrocket.com/exploring-interaction-next-paint-new-core-web-vital/
О чем говорит новая метрика Core Web Vital и как ее можно оптимизировать.
https://blog.logrocket.com/exploring-interaction-next-paint-new-core-web-vital/
👍9❤1
Forwarded from Habr For Dev
#css #accessibility
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 5
⭐️⭐️◽️◽️◽️
📖 Читать
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 5
⭐️⭐️◽️◽️◽️
📖 Читать
👍10❤2
За гранью пикселей и rems в CSS - относительные единицы измерения основанные на viewport
Частые ловушки, в которые попадают разрабочики при использовании относительных единиц измерения в CSS.
https://techhub.iodigital.com/articles/going-beyond-pixels-and-rems-in-css/relative-length-units-based-on-the-viewport
Частые ловушки, в которые попадают разрабочики при использовании относительных единиц измерения в CSS.
https://techhub.iodigital.com/articles/going-beyond-pixels-and-rems-in-css/relative-length-units-based-on-the-viewport
👍10🔥3🌚1
От множества к единому - переводим наши проекты в монорепозиторий
В каких случаях стоит хранить проекты в монорепе, и как слить все проекты в один, не потеряв при этом историю комитов.
https://www.aha.io/engineering/articles/monorepo
В каких случаях стоит хранить проекты в монорепе, и как слить все проекты в один, не потеряв при этом историю комитов.
https://www.aha.io/engineering/articles/monorepo
👍12❤1🌚1
Оборачиваем в Docker ваше NextJs приложение с помощью Github Actions
Пошаговый туториал с конфигами, позволяющий настроить билд приложения с Github Actions.
https://mxd.codes/articles/docker-ci-cd-for-nextjs-with-github-actions
Пошаговый туториал с конфигами, позволяющий настроить билд приложения с Github Actions.
https://mxd.codes/articles/docker-ci-cd-for-nextjs-with-github-actions
👍19❤1👌1
Иммутабельные изменения массивов с Array.prototype.with
Заметка о том, как with поможет с модификацией массивов, создавая новую копию с изменениями.
https://web.dev/blog/array-with?hl=en
Заметка о том, как with поможет с модификацией массивов, создавая новую копию с изменениями.
https://web.dev/blog/array-with?hl=en
web.dev
Immutable array updates with Array.prototype.with | Blog | web.dev
Learn how to use this new method to update an array without mutating the original array.
🔥11👍4🤔2
This media is not supported in your browser
VIEW IN TELEGRAM
Появление WebGL изображений при скролле
Эффект обратной пикселизации изображений при скролле с использованием WebGL и GSAP
https://tympanus.net/codrops/2024/02/07/on-scroll-revealing-webgl-image-explorations/
Демо | GitHub
Эффект обратной пикселизации изображений при скролле с использованием WebGL и GSAP
https://tympanus.net/codrops/2024/02/07/on-scroll-revealing-webgl-image-explorations/
Демо | GitHub
🔥24👍2❤1
Как отобразить радар-чарты в вебе
Создаем удобные и переиспользуемые компоненты для отображения данных в виде радар-чартов.
https://www.smashingmagazine.com/2024/02/draw-radar-charts-web/
Создаем удобные и переиспользуемые компоненты для отображения данных в виде радар-чартов.
https://www.smashingmagazine.com/2024/02/draw-radar-charts-web/
🔥15👍2❤1
Что такое CSS Motion Path
Как анимировать элементы по траектории с CSS Motion Path.
https://www.letsbuildui.dev/articles/what-is-css-motion-path/
Как анимировать элементы по траектории с CSS Motion Path.
https://www.letsbuildui.dev/articles/what-is-css-motion-path/
❤19
Продвинутое использование селектора :is()
https://www.bram.us/2023/01/17/using-is-in-complex-selectors-selects-more-than-you-might-initially-think/
https://www.bram.us/2023/01/17/using-is-in-complex-selectors-selects-more-than-you-might-initially-think/
👍12
Итак, вы думаете, что знаете Git? Часть вторая: новое в Git
О новых фичах в Git и их применении.
https://habr.com/ru/articles/794252/
О новых фичах в Git и их применении.
https://habr.com/ru/articles/794252/
👍12❤1
Front-End Architecture 101 - Nir Kaufman @ ReactNYC
Доклад про архитектуру front end проектов: о том, с чего стоит начинать разработку и почему библиотеки и технологии не так важны при реализации.
https://www.youtube.com/watch?v=o8THlN8hgcw
Доклад про архитектуру front end проектов: о том, с чего стоит начинать разработку и почему библиотеки и технологии не так важны при реализации.
https://www.youtube.com/watch?v=o8THlN8hgcw
YouTube
Front-End Architecture 101 - Nir Kaufman @ ReactNYC
In this session, we will discuss front-end architecture, define what it is and how to leverage solid design principles to our system. Along the way, we will learn how React fits in with this puzzle and why frameworks are not a replacement to clean architecture.…
🔥11❤3💩3👍1
Лучший способ отцентровать div
Обзор методик центрирования элементов на странице (лучший выбирать вам).
https://www.joshwcomeau.com/css/center-a-div/
Обзор методик центрирования элементов на странице (лучший выбирать вам).
https://www.joshwcomeau.com/css/center-a-div/
👎15👍11🤡7🤨7❤4
Работе с селектором :has
Интерактивное руководство от Ахмада Шадида.
https://ishadeed.com/article/css-has-guide/
Интерактивное руководство от Ахмада Шадида.
https://ishadeed.com/article/css-has-guide/
👍10❤3💩2
Чистая архитектура React приложения
Одна из возможных реализаций подхода чистой архитектуры для React + Redux приложения. Данный подход позволяет изменять/заменять любые модули с минимальными затратами, однако требует дополнительной работы при реализации.
https://github.com/eduardomoroni/react-clean-architecture
Одна из возможных реализаций подхода чистой архитектуры для React + Redux приложения. Данный подход позволяет изменять/заменять любые модули с минимальными затратами, однако требует дополнительной работы при реализации.
https://github.com/eduardomoroni/react-clean-architecture
👍19👎7💩4❤1🔥1
Играемся с бесконечностью в CSS
О том, как можно использовать значение
https://codersblock.com/blog/playing-with-infinity-in-css/
О том, как можно использовать значение
infinity и в какие максимальные значения его интерпретируют браузеры.https://codersblock.com/blog/playing-with-infinity-in-css/
👍16
HTML streaming
Особенности реализации, на которые стоит обратить внимание, для того, чтобы использовать все преимущества данной технологии.
https://aralroca.com/blog/html-node-streaming
Особенности реализации, на которые стоит обратить внимание, для того, чтобы использовать все преимущества данной технологии.
https://aralroca.com/blog/html-node-streaming
👍16
React + SignalDB
Как работает SignalDB и как интегрировать реактивную клиентскую базу данных с React.
https://blog.logrocket.com/using-signaldb-react/
Как работает SignalDB и как интегрировать реактивную клиентскую базу данных с React.
https://blog.logrocket.com/using-signaldb-react/
👍13⚡3👏2
JavaScript по запросу: как Qwik отличается от React Hydration
Различные подходы в решении проблемы доставки JS приложений: Qwik vs React Hydration
https://thenewstack.io/javascript-on-demand-how-qwik-differs-from-react-hydration/
Различные подходы в решении проблемы доставки JS приложений: Qwik vs React Hydration
https://thenewstack.io/javascript-on-demand-how-qwik-differs-from-react-hydration/
👍8❤4
Capo.js: улучшаем перформанс вашего приложения за 5 минут
Capo.js — инструмент, который проверяет разметку в
Конечно, не стоит доверять ему на 100%, но, как минимум, покажет вам возможные варианты для оптимизации.
https://frontendmasters.com/blog/capo-js-a-five-minute-web-performance-boost/
Capo.js — инструмент, который проверяет разметку в
head и сортирует элементы для улучшения скорости загрузки приложения.Конечно, не стоит доверять ему на 100%, но, как минимум, покажет вам возможные варианты для оптимизации.
https://frontendmasters.com/blog/capo-js-a-five-minute-web-performance-boost/
🔥15❤2👍2💩2⚡1🤔1