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
Насколько потолстел JavaScript к 2024 году?
Интересная статистика по популярным сайтам и их отношению к оптимизации JS бандлов. Выяснилось, что Pornhub больше всех задумывается о скорости загрузки.
https://habr.com/ru/companies/ruvds/articles/796595/
Интересная статистика по популярным сайтам и их отношению к оптимизации JS бандлов. Выяснилось, что Pornhub больше всех задумывается о скорости загрузки.
https://habr.com/ru/companies/ruvds/articles/796595/
😁26👍4👎4
CSS для печати на бумаге
Особенности стилизации веб-страниц для экспорта в печатный вид.
https://habr.com/ru/articles/798765/
Особенности стилизации веб-страниц для экспорта в печатный вид.
https://habr.com/ru/articles/798765/
👍14❤1👎1
useEffect vs useLayoutEffect
2 хука с приблизительно одинаковым функционалом. Но какой и для каких случаев использовать? Кент Си Додс помогает разобраться.
https://kentcdodds.com/blog/useeffect-vs-uselayouteffect
2 хука с приблизительно одинаковым функционалом. Но какой и для каких случаев использовать? Кент Си Додс помогает разобраться.
https://kentcdodds.com/blog/useeffect-vs-uselayouteffect
👍18👎2🤔1
Визуальное тестирование
Подробный гайд по визуальному тестированию с помощью Playwright. Визуальное тестирование позволяет определить соответствие визуальных элементов определенному эталонному снепшоту.
https://www.browsercat.com/post/ultimate-guide-visual-testing-playwright
Подробный гайд по визуальному тестированию с помощью Playwright. Визуальное тестирование позволяет определить соответствие визуальных элементов определенному эталонному снепшоту.
https://www.browsercat.com/post/ultimate-guide-visual-testing-playwright
🔥11👍2
Создаем цветовые палитры с помощью color-mix()
Знакомимся с функцией color-mix() и смотрим, для чего ее можно удобно применять.
https://developer.mozilla.org/en-US/blog/color-palettes-css-color-mix/
Знакомимся с функцией color-mix() и смотрим, для чего ее можно удобно применять.
https://developer.mozilla.org/en-US/blog/color-palettes-css-color-mix/
🔥12👍2👌1
Как сверстать письмо, чтобы оно дошло до получателя таким, как задумано
Базовые принципы верстки писем и особенности разных почтовых клиентов.
https://habr.com/ru/companies/kts/articles/798615/
Базовые принципы верстки писем и особенности разных почтовых клиентов.
https://habr.com/ru/companies/kts/articles/798615/
👍14❤3
Конвертируем строку в дату
Способы получения даты из строки и основные ошибки, которые при этом допускают разработчики
https://www.rajamsr.com/javascript-convert-string-to-date/
Способы получения даты из строки и основные ошибки, которые при этом допускают разработчики
https://www.rajamsr.com/javascript-convert-string-to-date/
🔥8
Как безопасно использовать dangerouslySetInnerHTML
Минимизируем возможные проблемы при отображении HTML контента с внешних ресурсов в React.
https://deadsimplechat.com/blog/how-to-safely-use-dangerouslysetinnerhtml-in-react/
Минимизируем возможные проблемы при отображении HTML контента с внешних ресурсов в React.
https://deadsimplechat.com/blog/how-to-safely-use-dangerouslysetinnerhtml-in-react/
👍8😁4🌭2🤮1
Погружение в package.json
Настраиваем проект с помощью полей package.json. Какие поля кроме name, scripts, dependecies и devDependencies могу быть полезными для конфигурации.
https://dyte.io/blog/package-json/
Настраиваем проект с помощью полей package.json. Какие поля кроме name, scripts, dependecies и devDependencies могу быть полезными для конфигурации.
https://dyte.io/blog/package-json/
👍21
This media is not supported in your browser
VIEW IN TELEGRAM
Эффект раскрытия гридовых ячеек при наведении
Демо | Github
https://tympanus.net/codrops/2024/03/13/grid-item-reveal-animation-on-hover/
Демо | Github
https://tympanus.net/codrops/2024/03/13/grid-item-reveal-animation-on-hover/
🔥27❤3
Топ 10 алгоритмов для интервью
Курс по алгоритмам с использованием JS для успешного прохождения секции лайвкодинг.
https://www.youtube.com/watch?v=ufBbWIyKY2E&ab_channel=freeCodeCamp.org
Курс по алгоритмам с использованием JS для успешного прохождения секции лайвкодинг.
https://www.youtube.com/watch?v=ufBbWIyKY2E&ab_channel=freeCodeCamp.org
❤9🔥3🍌3❤🔥1👍1
Shima Dev Tool
Расширение для разработчиков и тестировщиков, позволяющее быстро переключаться между разными конфигурациями окружения на лету.
https://www.youtube.com/watch?v=v8GkxClnf68
Расширение для разработчиков и тестировщиков, позволяющее быстро переключаться между разными конфигурациями окружения на лету.
https://www.youtube.com/watch?v=v8GkxClnf68
🔥7👍4❤1👀1
Скорость HTTP
Сравниваем основные серверные JavaScript платформы: Deno, NodeJs, Bun.
https://kitsonkelly.com/posts/http-speed
Сравниваем основные серверные JavaScript платформы: Deno, NodeJs, Bun.
https://kitsonkelly.com/posts/http-speed
👍14👎1
Индикатор прогресса
Туториал по созданию веб компнонента прогресса загрузки.
https://piccalil.li/blog/solution-009-progress-indicator/
Туториал по созданию веб компнонента прогресса загрузки.
https://piccalil.li/blog/solution-009-progress-indicator/
👍13