FrontEndDev
28.8K subscribers
1.76K photos
13 videos
6.94K links
🚀 Статьи, новости, туториалы по frontend разработке.

http://jem-space.ru

Admin: @jem_jem
Пишу в @five_a_m

Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee

Реклама: http://bit.ly/2NxmVDu
Download Telegram
Изучаем NestJS - Полный курс

Большой 14 часовой курс по разработке на NestJs: котроллеры, сервисы, модули, работа с БД, авторизация, сваггер и другие аспекты разработки веб серверов.

https://www.youtube.com/watch?v=sFnAHC9lLaw
Прощай, JS Profiler

Профайлинг CPU c помощью вкладки Performance в Chrome. О причинах ухода от профайлера, и как теперь мониторить производительность приложений.

https://developer.chrome.com//blog/profiling-cpu
Изучаем относительные viewport единицы в CSS

Как и когда использовать 100vh, 100dvh, 100lvh, 100svh.

https://webdesign.tutsplus.com/learn-these-viewport-relative-css-units-100vh-100dvh-100lvh-100svh--cms-108537t
KeyUX - библиотека, позволяющая удобно работать с вашим сайтом с клавиатуры

Сделана не только для доступности, но и для тех, кто любит использовать клавиатуру по максимуму в своей работе. Весит всего 2Кб и не использует дополнительные зависимости.

https://github.com/ai/keyux
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/
Оптимизация карусели для EditorJS

Показательный пример того, что не все библиотеки собраны оптимальным образом, и как с эти можно бороться (если очень нужно)

https://dev.to/appqui/how-i-optimized-carousel-for-editorjs-2x-in-size-4efa
Подборка записей с конференций (300+) по JS за 2023 год

https://dev.to/techtalksweekly/all-javascript-conference-talks-300-from-2023-ordered-by-the-number-of-views-1akm
React Router v6 - Полный курс

Курс по React Router v6, включающий как базовую настройку роутинга, так и продвинутую конфигурацию и кастомные переходы между страницами.

https://www.youtube.com/watch?v=SMq1IQRweDc
React Design Pattern

Плейлист из 5 видео с основными паттернами разработки на React: HOC, Layout, custom hooks, etc.

https://www.youtube.com/playlist?list=PLgeETUaEEds5HE2uGWezJxYeZwpBonHr-
Forwarded from Habr For Dev
#accessibility #html

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 7

⭐️⭐️◽️◽️◽️

📖 Читать
Курс по основам JS: Learn JavaScript

Базовый курс из 28 уроков от команды разработчиков Chrome.

https://web.dev/learn/javascript
13 репозиториев для изучения веб-разработки

Подборка из 13 ресурсов для бесплатного обучения основам и аспектам разработки от Евгения Ковальчука.

https://www.youtube.com/watch?v=UEyEAfnxp_c
Введение в Jest - JS библиотеку для тестирования

Краткое руководство, основные фичи, юзкейсы и сравнение с другими библиотеками.

https://blog.logrocket.com/jest-adoption-guide/
DevTools: советы и трюки

Пачка малоизвестных (вперемешку с заезженными) фич DevTools, позволяющих экономить время и силы при разработке и дебаге.

https://frontendmasters.com/blog/devtools-tips-tricks/
Интерактивный гайд по CSS Container Queries

Шанс попробовать относительно новую фичу без необходимости создавать свою песочницу.

https://ishadeed.com/article/css-container-query-guide
Как use() работает под капотом React?

https://jser.dev/2024-03-16-how-does-use-work-internally-in-react/
Interaction to Next Paint

Подробнее о том, за что отвечает метрика INP.

https://gtmetrix.com/blog/interaction-to-next-paint-inp-explained/
DI для JS и TS

Dioma - библиотека для реализации паттерна Dependency Injection для чистого JS/TS

https://github.com/zheksoon/dioma
ESLint Config Inspector

Визуализирующий инструмент для просмотра, поддержки и изучения правил линтинга на вашем проекте.

https://eslint.org/blog/2024/04/eslint-config-inspector/
Изучаем CSS Box Model

Подробный туториал о работе и использовании CSS Box Model.

https://www.youtube.com/watch?v=nSst4-WbEZk