FrontEndDev
29.6K subscribers
2K photos
17 videos
7.19K links
🚀 Статьи, новости, туториалы по frontend разработке.

http://jem-space.ru

Admin: @jem_jem
Пишу в @five_a_m

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

Реклама: http://bit.ly/2NxmVDu
№ 4850240725
Download Telegram
Несколько советов по доступности

Кевин Эндрюс делится советами по accessibility, которые можно применять уже сегодня.

https://piccalil.li/blog/practical-accessibility-tips-you-can-apply-today/
ViteConf 2024

43 доклада с прошедшей конференции об экосистеме vite.

https://viteconf.org/24/replay
Управление памятью в JS c WeakRef и FinalizationRegistry

Что такое WeakRef и FinalizationRegistry, как и когда их стоит использовать и как это влияет на использование памяти.

https://jsdev.space/memory-management-js/
Сейчас сезон, когда IT-мероприятий, как из рога изобилия — как оффлайн, так и онлайн

Но где найти единую "базу" ивентов?
Чтобы "заглянул -> увидел все что есть -> выбрал -> пошел"?

🔥Советуем обратить внимание на канал, в котором публикуют анонсы вебинаров, хакатонов, конференций, мастер-классов, ивентов от гигантов индустрии и лучших специалистов по кодингу, дизайну, аналитике и т.д.

👍 Очень крутая вещь, где вы точно не пропустите ничего важного и интересного.

🗂 IT-мероприятия России / ITMeeting / IT events - подпишитесь, чтобы не потерять!
Please open Telegram to view this post
VIEW IN TELEGRAM
Поддержка различных видов масштабирования

О том, как правильно поддерживать различное поведение зума на веб-сайтах, чтобы страницы корректно реагировали на увеличение в браузерах и сенсорное масштабирование на устройствах. Лучшие практики для улучшения доступности контента.

https://blog.logrocket.com/understanding-supporting-zoom-behaviors-web/
This media is not supported in your browser
VIEW IN TELEGRAM
Scroll Driven анимация карточек

Вариант замены привычной карусели

https://codepen.io/paulnoble/full/gOVPedz
This media is not supported in your browser
VIEW IN TELEGRAM
Контекстно-зависимые анимации для фиксированных элементов

Изменение масштаба, повороты и движения - динамичные визуальные эффекты для оживления вашего сайта.

Демо | Github

https://tympanus.net/codrops/2024/10/09/exploring-playful-context-aware-animations-for-fixed-elements/
Несколько простых советов по использованию DevTools

От банального $0 в консоли до Edit and Resend Request в Network

https://www.freecodecamp.org/news/cross-browser-devtools-features
CSS Pattern

Сборник красивых фонов на чистом CSS

https://css-pattern.com/
Темы для проигрывателей Media Chrome

Набор тем для видео и аудио плееров созданных на основе Media Chrome для любых фреймворков.

https://player.style/
LocalStorage vs. IndexedDB vs. Cookies vs. OPFS vs. WASM-SQLite

Добавляем к привычному сравнению способов хранения данных на фронте новые: OPFS и WASM-SQLite

https://rxdb.info/articles/localstorage-indexeddb-cookies-opfs-sqlite-wasm.html
Создаем книжный магазин, используя React, Node и MongoDB

Большой и подробный туториал по созданию frontend и backend частей для онлайн магазина книг.

https://www.youtube.com/watch?v=pgw2KPfgK1E
Встречайте новый оператор безопасного присвоения

Какие плюсы использования оператора ?= и в каких кейсах его можно использовать.

https://jsdev.space/safe-assignment-operator/
This media is not supported in your browser
VIEW IN TELEGRAM
3D анимация грида с scroll-triggered эффектами

Очередной красивый концепт анимаций и переходов с использованием скролла.

Демо | Github

https://tympanus.net/codrops/2024/10/16/staggered-3d-grid-animations-with-scroll-triggered-effects/
Способы реализации светлой/темной темы

Используем css переменные, prefers-color-scheme и JS для динамического переключения темы.

https://css-tricks.com/come-to-the-light-dark-side/
Продвинутый Ctrl+F

Используем текстовые фрагменты в URL для выделениях интересующих участков текста на странице, делая навигацию более эффективной.

https://alfy.blog/2024/10/19/linking-directly-to-web-page-content.html
This media is not supported in your browser
VIEW IN TELEGRAM
Сайты на Framer ускорили интерактивность на 50%

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

https://www.framer.com/blog/sites-interactive-faster/
Создаем заполняющийся индикатор загрузки

Пошаговый туториал создания лоадера с использованием всего 1 элемента на чистом CSS.

https://www.freecodecamp.org/news/filling-css-loaders/
State of CSS 2024

Результаты ежегодного исследования о CSS: инструменты, фреймворки, тренды, фичи.

https://2024.stateofcss.com/ru-RU
Forwarded from Web Stack
Значок скрола в DevTools

Теперь стало намного проще находить элементы, у которых присутствует скрол, с новым обновлением DevTools.

https://developer.chrome.com/blog/swe-devtools-scroll-badge