29203
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Анимируем React приложение с Framer Motion
Короткий курс по анимации на примере приложения со списком.
https://egghead.io/lessons/react-create-micro-interactions-with-framer-motion-gesture-props
State of CSS 2024
Результаты ежегодного исследования о CSS: инструменты, фреймворки, тренды, фичи.
https://2024.stateofcss.com/ru-RU
Сайты на Framer ускорили интерактивность на 50%
Команда Framer о новом обновлении, которое ускоряет интерактивность сайтов, используя более оптимальный алгоритм загрузки и обновления.
https://www.framer.com/blog/sites-interactive-faster/
Продвинутый Ctrl+F
Используем текстовые фрагменты в URL для выделениях интересующих участков текста на странице, делая навигацию более эффективной.
https://alfy.blog/2024/10/19/linking-directly-to-web-page-content.html
3D анимация грида с scroll-triggered эффектами
Очередной красивый концепт анимаций и переходов с использованием скролла.
Демо | Github
https://tympanus.net/codrops/2024/10/16/staggered-3d-grid-animations-with-scroll-triggered-effects/
Встречайте новый оператор безопасного присвоения
Какие плюсы использования оператора ?= и в каких кейсах его можно использовать.
https://jsdev.space/safe-assignment-operator/
Хотите освоить прогрессивный фреймворк для создания веб-приложений на JS?
➡Ждем вас на открытом вебинаре 23 октября в 20:00 мск, где мы разберем:
✔архитектурные принципы Nest.Js, включая внедрение зависимостей и модульность;
✔как создавать маршруты, контроллеры и использовать middleware;
✔как работать с базами данных, включая MongoDB, PostgreSQL и MySQL;
✔методы тестирования и отладки приложений Nest.Js.
Спикер Николай Лапшин — опытный архитектор, тимлид, преподаватель и разработчик с широким технологическим стеком.
Встречаемся в преддверии старта курса «Node.js Developer». Все участники вебинара получат специальную цену на обучение!
➡Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие:
https://vk.cc/cCklPUРеклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Темы для проигрывателей Media Chrome
Набор тем для видео и аудио плееров созданных на основе Media Chrome для любых фреймворков.
https://player.style/
Несколько простых советов по использованию DevTools
От банального $0 в консоли до Edit and Resend Request в Network
https://www.freecodecamp.org/news/cross-browser-devtools-features
Контекстно-зависимые анимации для фиксированных элементов
Изменение масштаба, повороты и движения - динамичные визуальные эффекты для оживления вашего сайта.
Демо | Github
https://tympanus.net/codrops/2024/10/09/exploring-playful-context-aware-animations-for-fixed-elements/
Поддержка различных видов масштабирования
О том, как правильно поддерживать различное поведение зума на веб-сайтах, чтобы страницы корректно реагировали на увеличение в браузерах и сенсорное масштабирование на устройствах. Лучшие практики для улучшения доступности контента.
https://blog.logrocket.com/understanding-supporting-zoom-behaviors-web/
Управление памятью в JS c WeakRef и FinalizationRegistry
Что такое WeakRef и FinalizationRegistry, как и когда их стоит использовать и как это влияет на использование памяти.
https://jsdev.space/memory-management-js/
Несколько советов по доступности
Кевин Эндрюс делится советами по accessibility, которые можно применять уже сегодня.
https://piccalil.li/blog/practical-accessibility-tips-you-can-apply-today/
Используем Map вместо привычного Object
Дмитрий Павлутин рассказывает о том, как обойти ограничения обычных объектов для хранения данных с помощью Map.
https://dmitripavlutin.com/maps-vs-plain-objects-javascript/
В чем разница между Dialog и Popover?
Разбираем отличия и аспекты использования Dialog и Popover.
https://frontendmasters.com/blog/whats-the-difference-between-htmls-dialog-element-and-popovers
Значок скрола в DevTools
Теперь стало намного проще находить элементы, у которых присутствует скрол, с новым обновлением DevTools.
https://developer.chrome.com/blog/swe-devtools-scroll-badge
Создаем заполняющийся индикатор загрузки
Пошаговый туториал создания лоадера с использованием всего 1 элемента на чистом CSS.
https://www.freecodecamp.org/news/filling-css-loaders/
erid:2VtzqubR5DN
Как устроена работа ИТ-специалистов в Т-Банке?
Загляните в канал T-Crew — тут показывают будни команды и делятся полезным:
— Дайджесты вакансий, регистрация на fast track и приглашения от руководителей.
— Анонсы мероприятий. Например, когда пройдет следующий ИТ-каток, ИТ-пикник и другие нашумевшие ивенты.
— Кейсы, статьи и лайфхаки для работы — от методов планирования до карьерного роста.
Подписаться на T-Crew
Способы реализации светлой/темной темы
Используем css переменные, prefers-color-scheme и JS для динамического переключения темы.
https://css-tricks.com/come-to-the-light-dark-side/
Прими участие в «Хакатоне по разработке кибериммунных технологий 3.0» от «Лаборатории Касперского» с призовым фондом 1 000 000 рублей!
Регистрация на хакатон открыта до 15 ноября: https://cnrlink.com/cyberimmunehack3frontdev
Приглашаем разработчиков, аналитиков, архитекторов ПО, экспертов по информационной безопасности и студентов программирования и кибербезопасности. Участвуй индивидуально или в команде до 5 человек.
Тебе предстоит разработать систему удалённого управления автомобилем для каршеринга, устойчивую к кибератакам. Специальных знаний в автомобильной отрасли не требуется — задача будет понятна всем, независимо от опыта.
Это твой шанс прокачать навыки в кибербезопасности и пообщаться с экспертами «Лаборатории Касперского».
Ключевые даты:
• 15 октября – 15 ноября – регистрация участников
• 8 ноября – митап с экспертами и игра «Огнеборец»
• 15 ноября – старт хакатона
• 17 ноября – дедлайн загрузки решений
• 22 ноября – подведение итогов и объявление победителей
Регистрируйся, прояви себя и внеси вклад в безопасность каршеринговых сервисов: https://cnrlink.com/cyberimmunehack3frontdev
Реклама. АО «Лаборатория Касперского». ИНН 7713140469. erid: LjN8K7KrX
Создаем книжный магазин используя React, Node и MongoDB
Большой и подробный туториал по созданию frontend и backend частей для онлайн магазина книг.
https://www.youtube.com/watch?v=pgw2KPfgK1E
LocalStorage vs. IndexedDB vs. Cookies vs. OPFS vs. WASM-SQLite
Добавляем к привычному сравнению способов хранения данных на фронте новые: OPFS и WASM-SQLite
https://rxdb.info/articles/localstorage-indexeddb-cookies-opfs-sqlite-wasm.html
CSS Pattern
Сборник красивых фонов на чистом CSS
https://css-pattern.com/
Приглашаем на конференцию по JavaScript-разработке — 7 ноября онлайн и 14–15 ноября в Санкт-Петербурге
Новая HolyJS — это:
— 40 докладов и 3 воркшопа о JavaScript во всех сферах его использования;
— большая встреча JS-сообщества в онлайне и офлайне;
— обмен опытом, нетворкинг, конкурсы по кодингу и другие активности.
О чем можно послушать: про фронтенд, бэкенд, графику, 3D-движки в беспилотных автомобилях, архитектуру, внутренности фреймворков и многое другое.
Чем можно заняться на воркшопах: оптимизировать web perf, разработать игру для TON, внедрить HTMLVideoElement с быстрой перемоткой.
Где попробовать свои силы: в «открытом микрофоне», в соревновании Code in the Dark и других конкурсах от партнеров конференции.
Выбирайте, что вам больше по душе — и покупайте персональный билет со скидкой 15% по промокоду — FRONTENDDEV
В HolyJS можно поучаствовать и за счет компании. Почему это выгодно не только вам, но и работодателю — читайте в статье на VC.
Реклама. ООО «Джуг Ру Груп». ИНН 7801341446
Scroll Driven анимация карточек
Вариант замены привычной карусели
https://codepen.io/paulnoble/full/gOVPedz
Сейчас сезон, когда IT-мероприятий, как из рога изобилия — как оффлайн, так и онлайн
Но где найти единую "базу" ивентов? Чтобы "заглянул -> увидел все что есть -> выбрал -> пошел"?
🔥Советуем обратить внимание на канал, в котором публикуют анонсы вебинаров, хакатонов, конференций, мастер-классов, ивентов от гигантов индустрии и лучших специалистов по кодингу, дизайну, аналитике и т.д.
👍 Очень крутая вещь, где вы точно не пропустите ничего важного и интересного.
🗂 IT-мероприятия России / ITMeeting / IT events - подпишитесь, чтобы не потерять!
ViteConf 2024
43 доклада с прошедшей конференции об экосистеме vite.
https://viteconf.org/24/replay
Перевод веб приложения в Telegram Mini Apps
Интересная история о том, как команда Точки решила изменить подход к развитию продукта и перевела его на интеграцию с Telegram.
Глеб Агеев — фронт-разработчик Точка Нетворк, рассказывает о том, как это упростило разработку и делится советами по эффективной работе с платформой.
Как использовать CSS свойство backdrop-filter
Примеры стилизации с backdrop-filter, которые помогут создать необычный эффект в пару строк.
https://blog.logrocket.com/use-css-backdrop-filter-property/
Всем привет!
На связи команда RuStore.
Каждый день мы стараемся делать RuStore ещё удобнее и будем благодарны за вашу помощь. Примите участие в исследовании о работе магазинов приложений, заполнив небольшой опрос.
Это займёт не более 5 минут и поможет нам стать лучше.
Пройти опрос по ссылке