This media is not supported in your browser
VIEW IN TELEGRAM
Что нового в DevTools
Обновления DevTools v.122: официальное расширение для записи, новый функционал таймлайна, улучшенная работа с куками и еще куча всего.
https://developer.chrome.com/blog/new-in-devtools-122?hl=en
Обновления DevTools v.122: официальное расширение для записи, новый функционал таймлайна, улучшенная работа с куками и еще куча всего.
https://developer.chrome.com/blog/new-in-devtools-122?hl=en
Создаем игру Gorillas на JS
Подробный туториал по разработке игры с использоваием JS + Canvas.
https://www.freecodecamp.org/news/gorillas-game-in-javascript/
Подробный туториал по разработке игры с использоваием JS + Canvas.
https://www.freecodecamp.org/news/gorillas-game-in-javascript/
Изучаем доступность
Полный туториал по a11y познакомит вас с основами доступности, аспектами разаботки веб приложений с учетом нюансов доступности, и почему это важно.
https://www.youtube.com/watch?v=e2nkq3h1P68
Полный туториал по a11y познакомит вас с основами доступности, аспектами разаботки веб приложений с учетом нюансов доступности, и почему это важно.
https://www.youtube.com/watch?v=e2nkq3h1P68
Разбираемся с 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/
Forwarded from Habr For Dev
#css #accessibility
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 5
⭐️⭐️◽️◽️◽️
📖 Читать
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 5
⭐️⭐️◽️◽️◽️
📖 Читать
За гранью пикселей и 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
От множества к единому - переводим наши проекты в монорепозиторий
В каких случаях стоит хранить проекты в монорепе, и как слить все проекты в один, не потеряв при этом историю комитов.
https://www.aha.io/engineering/articles/monorepo
В каких случаях стоит хранить проекты в монорепе, и как слить все проекты в один, не потеряв при этом историю комитов.
https://www.aha.io/engineering/articles/monorepo
Оборачиваем в 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
Иммутабельные изменения массивов с 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.
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
Как отобразить радар-чарты в вебе
Создаем удобные и переиспользуемые компоненты для отображения данных в виде радар-чартов.
https://www.smashingmagazine.com/2024/02/draw-radar-charts-web/
Создаем удобные и переиспользуемые компоненты для отображения данных в виде радар-чартов.
https://www.smashingmagazine.com/2024/02/draw-radar-charts-web/
Что такое 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/
Продвинутое использование селектора :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/
Итак, вы думаете, что знаете Git? Часть вторая: новое в Git
О новых фичах в Git и их применении.
https://habr.com/ru/articles/794252/
О новых фичах в Git и их применении.
https://habr.com/ru/articles/794252/
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.…
Лучший способ отцентровать div
Обзор методик центрирования элементов на странице (лучший выбирать вам).
https://www.joshwcomeau.com/css/center-a-div/
Обзор методик центрирования элементов на странице (лучший выбирать вам).
https://www.joshwcomeau.com/css/center-a-div/
Работе с селектором :has
Интерактивное руководство от Ахмада Шадида.
https://ishadeed.com/article/css-has-guide/
Интерактивное руководство от Ахмада Шадида.
https://ishadeed.com/article/css-has-guide/
Чистая архитектура React приложения
Одна из возможных реализаций подхода чистой архитектуры для React + Redux приложения. Данный подход позволяет изменять/заменять любые модули с минимальными затратами, однако требует дополнительной работы при реализации.
https://github.com/eduardomoroni/react-clean-architecture
Одна из возможных реализаций подхода чистой архитектуры для React + Redux приложения. Данный подход позволяет изменять/заменять любые модули с минимальными затратами, однако требует дополнительной работы при реализации.
https://github.com/eduardomoroni/react-clean-architecture
Играемся с бесконечностью в CSS
О том, как можно использовать значение
https://codersblock.com/blog/playing-with-infinity-in-css/
О том, как можно использовать значение
infinity и в какие максимальные значения его интерпретируют браузеры.https://codersblock.com/blog/playing-with-infinity-in-css/
HTML streaming
Особенности реализации, на которые стоит обратить внимание, для того, чтобы использовать все преимущества данной технологии.
https://aralroca.com/blog/html-node-streaming
Особенности реализации, на которые стоит обратить внимание, для того, чтобы использовать все преимущества данной технологии.
https://aralroca.com/blog/html-node-streaming