Оборачиваем в 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
Разбираемся с StyleX — одним из новых подходов к написанию стилей.
Обзор различных техник по работе с CSS и как StyleX может быть полезен на вашем проекте.
https://blog.logrocket.com/exploring-stylex-new-generation-styling-libraries/
Обзор различных техник по работе с CSS и как StyleX может быть полезен на вашем проекте.
https://blog.logrocket.com/exploring-stylex-new-generation-styling-libraries/
🤡36👍7🤣6
А вы не задумывались, почему пакет is-number в npm имеет большое число скачиваний?
Немного аналитики, или почему не стоит доверять большим цифрам на страницах npm для принятия решения об установке того или иного пакета.
https://shubhamjain.co/2024/02/29/why-is-number-package-have-59m-downloads/
Немного аналитики, или почему не стоит доверять большим цифрам на страницах npm для принятия решения об установке того или иного пакета.
https://shubhamjain.co/2024/02/29/why-is-number-package-have-59m-downloads/
👌9👍6🥱2
Типизация для Redux Toolkit
Михаил Непомнящий на примере показывает, как можно типизировать работу со стором в Redux Toolkit.
https://www.youtube.com/watch?v=uRlh6-tHWEE
Михаил Непомнящий на примере показывает, как можно типизировать работу со стором в Redux Toolkit.
https://www.youtube.com/watch?v=uRlh6-tHWEE
👍14🤡7💩3🤣2❤1
Техники переноса слов
О возможностях переноса слов с помощью CSS и HTML.
https://adrianroselli.com/2024/02/techniques-to-break-words.html
О возможностях переноса слов с помощью CSS и HTML.
https://adrianroselli.com/2024/02/techniques-to-break-words.html
👍17
Tailwind vs. Semantic CSS
Сравниваем 2 сайта с похожим дизайном: один на Tailwind, второй - с семантическим CSS.
Исследование показывает основные проблемы Tailwind, которые стоит учитывать при выборе способа стилизации.
https://nuejs.org/blog/tailwind-vs-semantic-css/
Сравниваем 2 сайта с похожим дизайном: один на Tailwind, второй - с семантическим CSS.
Исследование показывает основные проблемы Tailwind, которые стоит учитывать при выборе способа стилизации.
https://nuejs.org/blog/tailwind-vs-semantic-css/
👍20💩10👎2