23585
Изучаем Frontend. По вопросам сотрудничества: @adv_and_pr
Inview Animation
Все анимации созданы при помощи библиотеки gsap. GSAP является одним из наиболее популярных инструментов для создания выразительных и интерактивных анимаций на веб-сайтах. Благодаря ей, разработчики могут легко добавлять анимацию к элементам веб-страницы, делая ее более привлекательной и интересной для пользователей.
🌐Ссылка на код
Веб-аутентификация нового поколения
Владимир Прус описывает последние тенденции в веб-аутентификации, представляя новое поколение методов, которые уходят от использования традиционных паролей. В статье анализируются новые API и их потенциал в области аутентификации в интернете. Владимир дает обзор существующих ограничений и преимуществ этих методов, а также предостерегает от их неправильного использования.
🌐vladimir.prus/next-gen-web-authentication-59f487ea340">Ссылка на medium
Подсчёт уникальных посещений сайта без использования куки и фингерпринтинга
Ник Малвэни делится хитрым способом аналитики посещений без нарушения приватности пользователей.
🌐Ссылка на источник
Bouncy Star Rating
Каждая звезда - это радио-кнопка. При нажатии запускаются CSS анимации, самое лучшее в самом простом.
🌐Ссылка на код
Организуем библиотеку иконок в проекте с автоматической выгрузкой из Figma
Михаил Кононенко из Joom делится опытом автоматизации и упрощения работы с иконками.
🌐Ссылка на источник
Pure CSS scroll-triggered image reveal
Создано без использования JS, при помощи CSS свойства scroll-snap. Необычное решение простыми инструментами.
🌐Ссылка на код
Expanding Button
Создано и анимировано с использованием возможностей препроцессоров Pug и SCSS.
🌐Ссылка на код
Нативная поддержка .env-файлов в Node.js
В скучном и незаметном релизе v20.6.0 проекта была внесена изменение, которое, несмотря на свою скромность, имело большое значение для удобства разработчиков. Это изменение заключалось в добавлении функциональности для задания переменных окружения из файлов формата .env, что до этого момента обычно решалось с использованием стороннего пакета dotenv.
Ранее, чтобы задать переменные окружения в приложении, разработчики часто использовали сторонний пакет dotenv, который имел огромную популярность с 22 миллионами скачиваний в неделю. dotenv позволял загружать переменные окружения из файла .env и автоматически внедрять их в приложение во время его запуска. Этот пакет был неотъемлемой частью процесса настройки окружения для многих разработчиков.
🌐Ссылка на источник
Frontend online meetup - 11/10
✔️ CSS in JS или самая противоречивая техника стилизации веба — Ильдар Муллахметов, Авито Тех
В своем докладе я расскажу почему CSS in JS библиотеки вызывают так много противоречий среди frontend разработчиков. хочу рассмотреть влияние на производительность, поддерживаемость кода, девелопер экспириенс. Рассмотрю более подробно styled-components и сравню блоки кода со стилями между styled, tailwind, module. Рассмотрю как браузер обрабатывает styled. Продемонстрирую как влияет на семантику, работает с props и theme. Добавлю к сравнению Linaria и Astroturf, как самые быстрорастущие CSS in JS библиотеки.
✔️ Что такое Sentry и почему без него тяжело — Кирилл Логачев, Level.Travel
Доклад нацелен на раскрытие такого полезного инструмента, как Sentry. Из данного доклада слушатель узнает, как правильно настраивать, использовать и мониторить Sentry, что поможет уменьшить количество ошибок в продакшене, также данный сервис поможет определять и быстро устранять просочившиеся с релизом ошибки.
✔️ По ту сторону WebView — Максим Лавренюк, UZUM TECHNOLOGIES
Я бы хотел поделится некоторыми подходами и проблемами на примере встраивания сервиса доставки еды Uzum Tezkor в супер приложение Uzum Market. Я расскажу про то, что следует сделать в первую очередь при старте интеграции, как подружить нативные компоненты с вебом, как спрятать бесшовную авторизацию, а так же о чем попросить мобильных разработчиков, чтобы облегчить себе жизнь.
✔️ Web3 для фронтенд-разработчика — Назим Гафаров, Based.link
Доклады вокруг web3 обычно концентрируются вокруг рассказа об языках программирования для смарт-контрактов, которые больше интересны бэкенд-разработчикам. В своем докладе я расскажу о том, какие возможности предоставляет web3 именно для фронтенд-разработчика.
➖➖➖
🗓 11 октября в 19:00
✅ Регистрация - участие бесплатно!
🌐 Наш телеграам канал с анонсами митапов!
Shape Toggle With Image
Это оригинальное управление, созданное с использованием чекбокса и логики JavaScript для переключения классов при нажатии. Этот проект демонстрирует творческий подход к созданию интерфейсных элементов и улучшению пользовательского опыта.
🌐Ссылка на код
load
Событие load происходит, когда загрузилась и HTML страница, и все ресурсы для её отображения пользователю: стили, картинки и другое.
🌐Ссылка на статью
Merging Letter Toggle
Интересный проект, в котором используются SVG изображения букв, и их стили изменяются в зависимости от состояния флажка (checkbox). Этот проект обеспечивает динамическое изменение отображения букв с помощью включения и выключения флажка.
🌐Ссылка на код
Displacement Image Mask Reveal
Это эффект, реализованный в виде SVG изображения и анимированный с использованием библиотеки GSAP (GreenSock Animation Platform).
Этот эффект обычно используется для создания захватывающих визуальных переходов или интерактивных элементов в веб-дизайне.
При анимации маска изменяется, раскрывая или скрывая содержимое по мере движения.
🌐Ссылка на код
Mobile Menu
Мобильное меню создано с использованием чистого CSS. При выборе каждого элемента меню используются радио-кнопки, чтобы задавать свои стили.
Это позволяет создать адаптивный меню для мобильных устройств с интересными анимациями.
🌐Ссылка на код
Circular Progress Bar
Это элемент веб-дизайна, который используется для отображения процесса выполнения задачи или процентного выполнения определенной операции. Этот элемент представляет собой круговую диаграмму, которая заполняется цветами, чтобы показать, сколько уже выполнено.
Примеры использования такой круговой диаграммы могут включать отображение процента выполнения загрузки файла, уровень заряда батареи или прогресс выполнения определенной задачи на веб-сайте.
Это стильное и интуитивно понятное решение для визуализации информации о ходе выполнения задачи.
🌐Ссылка на видео
HolyJS — конференция для всех, кто пишет на JavaScript
HolyJS 2023 Autumn будет идти 4 дня: 2–3 ноября в онлайне и 11–12 ноября в Санкт-Петербурге (с возможностью онлайн-участия).
В программе — более 40 выступлений от спикеров из Apple, Яндекса, X5 Tech, VK, Сбера и других компаний. Поговорим о трендах, инструментах и актуальных JS-технологиях в финтехе, ритейле, блокчейне и других сферах. Будут воркшопы, которые можно использовать в работе, кейсы от создателей open source-решений Reatom и effector и немного хардкора для желающих узнать, как JS устроен «под капотом».
Если идете за свой счет, то ищите билеты здесь. По промокоду SENIORFRONTDEV они будут дешевле.
Если билет вам покупает работодатель, то пришлите ему эту ссылку.
Реклама, ООО «Джуг Ру Груп», ИНН 7801341446, erid 2Ranym4UFMS
Проблемы разработки изоморфных JS-библиотек:
Опыт инженеров команды DoorDash в создании инструментов, способных функционировать как в браузере, так и на сервере (Node.js)
Изоморфные JavaScript-библиотеки, способные работать как в браузерной среде, так и на сервере в Node.js, представляют собой важное направление в современной разработке веб-приложений. Команда инженеров из DoorDash имеет богатый опыт в создании таких библиотек и готова поделиться своими наработками и уроками, извлеченными в процессе разработки.
🌐senior_frontend/doordash">Ссылка на перевод
📰Оригинальная статья
Ты начнёшь верстать увереннее, добавишь в портфолио 1 крутой сайт и сможешь повысить цену на свои услуги…
Потому что Роман Чернов, веб-разработчик с 10-летним стажем, организовал бесплатный 7-дневный интенсив с практикой и обратной связью.
За 7 дней ты:
- Сверстаешь веб-сайт на HTML + CSS;
- Реализуешь функционал на JavaScript;
- Используешь фронтенд-фреймворк Angular;
- Подключишь Backend и загрузишь сайт на хостинг.
👉 Забрать бесплатно 7 дней обучения frontend-разработке
Реклама. ИП Чернова О. А., ИНН:771399721044, erid:LjN8KZw4P
PointLight Demo
Создано и анимировано с использованием библиотеки Three.js. Еще больше необычных решений можно реализовать с помощью этой библиотеки.
🌐Ссылка на код
ThumbHash
Новый инструмент для генерации легковесных превью изображений:
в сравнении с BlurHash даёт более натуральные и компактные результаты.
🌐Ссылка на источник
Glowy hover effect
В JS создана логика наложения маски на карточку при наведении. Отлично подойдет для коммерческого сайта, приятное восприятие.
🌐Ссылка на код
Хук useReducer() в React
useReducer() - это хук, принимающий функцию-редуктор и начальное состояние приложение в качестве аргументов и возвращающий текущее состояние и диспетчер (dispatcher) для отправки (dispatch) операций.
Несмотря на то, что useState() - это базовый хук, а useReducer() - продвинутый, на самом деле useState() реализован с помощью useReducer(). Это означает, что useReducer() - это примитив, который может использоваться во всех случаях использования useState(). Редуктор - мощный инструмент, который может использоваться в самых разных сценариях.
🌐Ссылка на документацию
Image Hover
Креативный веб-эффект, который придает дополнительную интерактивность статичным изображениям и карточкам на веб-сайтах. При наведении курсора мыши на элемент, происходит впечатляющая визуальная трансформация, в результате которой появляется текстовая информация.
🌐Ссылка на код
Sound Equalizer - CSS
Этот проект представляет собой креативное использование стилизованных элементов input type="range" для создания визуально привлекательного эквалайзера звука. Он демонстрирует, как с помощью CSS можно преобразовать стандартные элементы управления в нечто более интересное и информативное.
🌐Ссылка на код
Slinky Loader
Это SVG-анимация, созданная с использованием библиотеки TweenMax. Slinky Loader напоминает упругую игрушку Slinky и добавляет интересное визуальное восприятие к вашему веб-сайту или приложению. Вы можете использовать эту анимацию как загрузочный индикатор или декоративный элемент, чтобы придать вашему проекту уникальный вид и динамичность.
🌐Ссылка на код
Pure horizontal slider with sliding menu
Увлекательный проект, в котором вёрстка выполнена с использованием HTML и CSS, а логика раскрытия меню и карточек реализована с помощью JavaScript. Этот проект представляет собой горизонтальный слайдер с возможностью скольжения меню.
🌐Ссылка на код
Fancy Swiper slider
Уникальный слайдер, построенный с использованием библиотеки Swiper для создания интересных и креативных слайд-переходов. Для более подробной информации и просмотра кода и анимаций, пожалуйста, предоставьте ссылку на ресурс с этим слайдером.
🌐Ссылка на код
CSS Light Bulb
Этот элемент стилизует тег body и его псевдо-элементы, чтобы создать эффект светящейся лампочки.
Он создан с использованием CSS и может быть интересным дополнением к дизайну веб-страницы.
🌐Ссылка на код
Card Carousel
Этот элемент веб-дизайна реализован с использованием HTML и CSS. Он представляет собой карусель карточек, и при наведении на карточку применяются CSS трансформации. Это позволяет создать интерактивный и привлекательный элемент на веб-странице.
🌐Ссылка на код
Arc Time Slider
Это кастомный слайдер, разработанный с использованием веб-технологий HTML, SCSS и JS. Этот уникальный слайдер добавляет интересный и инновационный элемент управления на вашем веб-сайте.
🌐Ссылка на код