Прощай, JS Profiler
Профайлинг CPU c помощью вкладки Performance в Chrome. О причинах ухода от профайлера, и как теперь мониторить производительность приложений.
https://developer.chrome.com//blog/profiling-cpu
Профайлинг CPU c помощью вкладки Performance в Chrome. О причинах ухода от профайлера, и как теперь мониторить производительность приложений.
https://developer.chrome.com//blog/profiling-cpu
👍11🐳1
Изучаем относительные viewport единицы в CSS
Как и когда использовать 100vh, 100dvh, 100lvh, 100svh.
https://webdesign.tutsplus.com/learn-these-viewport-relative-css-units-100vh-100dvh-100lvh-100svh--cms-108537t
Как и когда использовать 100vh, 100dvh, 100lvh, 100svh.
https://webdesign.tutsplus.com/learn-these-viewport-relative-css-units-100vh-100dvh-100lvh-100svh--cms-108537t
👍18❤3🤣3🔥1
KeyUX - библиотека, позволяющая удобно работать с вашим сайтом с клавиатуры
Сделана не только для доступности, но и для тех, кто любит использовать клавиатуру по максимуму в своей работе. Весит всего 2Кб и не использует дополнительные зависимости.
https://github.com/ai/keyux
Сделана не только для доступности, но и для тех, кто любит использовать клавиатуру по максимуму в своей работе. Весит всего 2Кб и не использует дополнительные зависимости.
https://github.com/ai/keyux
👍20🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Скролл-анимация с типографикой
Эксперимент с анимацией с появлением изображения в тексте при скролле.
Демо | Github
https://tympanus.net/codrops/2024/04/02/on-scroll-expanding-image-animation-within-typography/
Эксперимент с анимацией с появлением изображения в тексте при скролле.
Демо | Github
https://tympanus.net/codrops/2024/04/02/on-scroll-expanding-image-animation-within-typography/
⚡15💩10👍7🔥2
Оптимизация карусели для EditorJS
Показательный пример того, что не все библиотеки собраны оптимальным образом, и как с эти можно бороться (если очень нужно)
https://dev.to/appqui/how-i-optimized-carousel-for-editorjs-2x-in-size-4efa
Показательный пример того, что не все библиотеки собраны оптимальным образом, и как с эти можно бороться (если очень нужно)
https://dev.to/appqui/how-i-optimized-carousel-for-editorjs-2x-in-size-4efa
👍10❤1
Подборка записей с конференций (300+) по JS за 2023 год
https://dev.to/techtalksweekly/all-javascript-conference-talks-300-from-2023-ordered-by-the-number-of-views-1akm
https://dev.to/techtalksweekly/all-javascript-conference-talks-300-from-2023-ordered-by-the-number-of-views-1akm
👍14❤2🔥1
React Router v6 - Полный курс
Курс по React Router v6, включающий как базовую настройку роутинга, так и продвинутую конфигурацию и кастомные переходы между страницами.
https://www.youtube.com/watch?v=SMq1IQRweDc
Курс по React Router v6, включающий как базовую настройку роутинга, так и продвинутую конфигурацию и кастомные переходы между страницами.
https://www.youtube.com/watch?v=SMq1IQRweDc
👍23❤3👎1🔥1
React Design Pattern
Плейлист из 5 видео с основными паттернами разработки на React: HOC, Layout, custom hooks, etc.
https://www.youtube.com/playlist?list=PLgeETUaEEds5HE2uGWezJxYeZwpBonHr-
Плейлист из 5 видео с основными паттернами разработки на React: HOC, Layout, custom hooks, etc.
https://www.youtube.com/playlist?list=PLgeETUaEEds5HE2uGWezJxYeZwpBonHr-
❤10👍2🔥1💩1
Forwarded from Habr For Dev
#accessibility #html
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 7
⭐️⭐️◽️◽️◽️
📖 Читать
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 7
⭐️⭐️◽️◽️◽️
📖 Читать
👀9👍7❤2
Курс по основам JS: Learn JavaScript
Базовый курс из 28 уроков от команды разработчиков Chrome.
https://web.dev/learn/javascript
Базовый курс из 28 уроков от команды разработчиков Chrome.
https://web.dev/learn/javascript
👍15❤5⚡3
13 репозиториев для изучения веб-разработки
Подборка из 13 ресурсов для бесплатного обучения основам и аспектам разработки от Евгения Ковальчука.
https://www.youtube.com/watch?v=UEyEAfnxp_c
Подборка из 13 ресурсов для бесплатного обучения основам и аспектам разработки от Евгения Ковальчука.
https://www.youtube.com/watch?v=UEyEAfnxp_c
YouTube
ТОП 13 Репозиториев для БЕСПЛАТНОГО изучения веб-разработки
#YauhenK #webdev #github #frontend
Всем привет.
Предыдущее видео на канале о репозиториях полезных веб-разработчику собрало 1000 лайков.
Поэтому, как и обещал выпускаю продолжение данной темы.
Однако на этот раз я постарался сконцентрироваться на репозиториях…
Всем привет.
Предыдущее видео на канале о репозиториях полезных веб-разработчику собрало 1000 лайков.
Поэтому, как и обещал выпускаю продолжение данной темы.
Однако на этот раз я постарался сконцентрироваться на репозиториях…
👍9❤2
Введение в Jest - JS библиотеку для тестирования
Краткое руководство, основные фичи, юзкейсы и сравнение с другими библиотеками.
https://blog.logrocket.com/jest-adoption-guide/
Краткое руководство, основные фичи, юзкейсы и сравнение с другими библиотеками.
https://blog.logrocket.com/jest-adoption-guide/
👍5👎5🌚4❤1👌1
DevTools: советы и трюки
Пачка малоизвестных (вперемешку с заезженными) фич DevTools, позволяющих экономить время и силы при разработке и дебаге.
https://frontendmasters.com/blog/devtools-tips-tricks/
Пачка малоизвестных (вперемешку с заезженными) фич DevTools, позволяющих экономить время и силы при разработке и дебаге.
https://frontendmasters.com/blog/devtools-tips-tricks/
🔥17❤1👍1
Интерактивный гайд по CSS Container Queries
Шанс попробовать относительно новую фичу без необходимости создавать свою песочницу.
https://ishadeed.com/article/css-container-query-guide
Шанс попробовать относительно новую фичу без необходимости создавать свою песочницу.
https://ishadeed.com/article/css-container-query-guide
🔥13❤2👍2
Как use() работает под капотом React?
https://jser.dev/2024-03-16-how-does-use-work-internally-in-react/
https://jser.dev/2024-03-16-how-does-use-work-internally-in-react/
🔥11❤2👎2👍1
Interaction to Next Paint
Подробнее о том, за что отвечает метрика INP.
https://gtmetrix.com/blog/interaction-to-next-paint-inp-explained/
Подробнее о том, за что отвечает метрика INP.
https://gtmetrix.com/blog/interaction-to-next-paint-inp-explained/
👍10🔥1👌1
DI для JS и TS
Dioma - библиотека для реализации паттерна Dependency Injection для чистого JS/TS
https://github.com/zheksoon/dioma
Dioma - библиотека для реализации паттерна Dependency Injection для чистого JS/TS
https://github.com/zheksoon/dioma
🤔13👍10🔥2😁2
ESLint Config Inspector
Визуализирующий инструмент для просмотра, поддержки и изучения правил линтинга на вашем проекте.
https://eslint.org/blog/2024/04/eslint-config-inspector/
Визуализирующий инструмент для просмотра, поддержки и изучения правил линтинга на вашем проекте.
https://eslint.org/blog/2024/04/eslint-config-inspector/
🔥22👍5
Изучаем CSS Box Model
Подробный туториал о работе и использовании CSS Box Model.
https://www.youtube.com/watch?v=nSst4-WbEZk
Подробный туториал о работе и использовании CSS Box Model.
https://www.youtube.com/watch?v=nSst4-WbEZk
👍20
Создаем необычное портфолио
Туториал по созданию 2D игры с Kaboom.js с сюжетом в виде вашего портфолио (врядли пригодится, но если нужно удивить, то получится 100%).
https://www.youtube.com/watch?v=wy_fSStEgMs&ab_channel=freeCodeCamp.org
Туториал по созданию 2D игры с Kaboom.js с сюжетом в виде вашего портфолио (врядли пригодится, но если нужно удивить, то получится 100%).
https://www.youtube.com/watch?v=wy_fSStEgMs&ab_channel=freeCodeCamp.org
YouTube
Build a Dev Portfolio as a 2D Game – JavaScript Course
Learn how to use Kaboom.js to create a 2d game that is actually a developer portfolio. This is a creative way to show off your skills.
Live demo: https://jslegenddev.github.io/portfolio/
Source code: https://github.com/JSLegendDev/2d-portfolio-kaboom
Map…
Live demo: https://jslegenddev.github.io/portfolio/
Source code: https://github.com/JSLegendDev/2d-portfolio-kaboom
Map…
🔥14🌚1