FrontEndDev
28.2K subscribers
2.33K photos
23 videos
7.54K links
🚀 Статьи, новости, туториалы по frontend разработке.

http://jem-space.ru

Admin: @jem_jem
Пишу в @five_a_m

Читать на парковке: https://max.ru/front_end_dev

Реклама: http://bit.ly/2NxmVDu
РКН: https://clck.ru/3GLw7G
Download Telegram
Друзья!

☝🏻 Совершенно случайно у нас появился билет на Highload 2022, которая стартует уже завтра и продлится 2 дня.

Highload это конференция, посвященная аспектам разработки высоконагруженных систем - от разработки архитектуры и алгоритмов, до тестирования и администрирования. Думаю, будет интересно инженерам разного рода деятельности и опыта работы.

🎁 По традиции разыгрываем билет среди подписчиков. Для участия в розыгрыше заполняйте форму. Итоги подведем уже сегодня вечером!
👍8🔥2
Большой гайд по оптимизации изображений

В статье описаны способы оптимизации для статических сайтов, но подходы можно применять для любых веб приложений.

https://www.smashingmagazine.com/2022/11/guide-image-optimization-jamstack-sites/
🔥8❤‍🔥4👍41
Дайте шума!

Генерируем статический шум при помощи CSS и странного бага градиентов.

https://css-tricks.com/making-static-noise-from-a-weird-css-gradient-bug/
🍌8👍5
This media is not supported in your browser
VIEW IN TELEGRAM
12 расширений для VSCode

Подборка расширений, которые сделают работу чуть приятнее и удобнее.

https://javascript.plainenglish.io/71a7f745d5e
🔥12👍6💩1🍾1
Скролим к фрагменту текста через url параметры

https://blog.jim-nielsen.com/2022/scroll-to-text-fragments/
👍23👌2
Использование CSS filter, mask-image, mix-blend-mode.

Несколько экспериментов с CSS фильтрами и масками, которые позволяют достичь интересных эффектов.

http://jlzych.com/2022/11/17/experimenting-with-layering-filtering-and-masking-in-css/
👍12🥴3
Руководство по CSS анимации

Синтаксис и примеры реализации.

https://blog.openreplay.com/all-about-css-animations/
🔥12👍2
6 генераторов фона

Подборка инструментов для генерации красивого заднего фона.

https://blog.logrocket.com/best-css-background-generators/
👍11😐6🤨21
Интерактивное руководство по Flexbox

https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
🔥35
Альтернативы Create React App

От создания React проекта с нуля до Gatsby и React Starter Kit.

https://blog.openreplay.com/top-alternatives-to-create-react-app/
💩12👍6
Привет! На связи Podlodka Crew. Приглашаем на юбилейный сезон Podlodka Frontend Crew 5 декабря и разыгрываем 1 билет.

В программе — браузерные API и интересные кейсы. Проведи начало зимы с пользой и лови вдохновение на следующий год!

Новые подробности сезона:

❄️ Разработчики из Microsoft и Альфа Онлайн на круглом столе обсудят, почему проекты приходят к PWA, какие с ним бывают проблемы и можно ли с его помощью решить проблемы блокировок нативных мобильных приложений в сторах.
❄️ Разберём API для безопасности и криптографии, использование ключей и узнаем, зачем генерировать, хранить и использовать криптоключи в браузере.
❄️ Научимся безопасно использовать Service Worker API с учётом ограничений и требований.
❄️ Узнаем, как улучшать диалоги с помощью нативных элементов.

👉 забирай билет на сайте

🎁 По традиции разыгрываем билет среди подписчиков. Для участия в розыгрыше заполняй форму, результаты объявим через пару дней!
🔥8💩4👍3
DOM - введение для начинающих

Руководство по расположению и геометрии элементов внутри DOM.

https://www.smashingmagazine.com/2022/11/document-object-model-geometry-guide/
👍18😐1
Что нового в DevTools (Chrome 108)

https://developer.chrome.com/en/blog/new-in-devtools-108/
👍15
Полное руководство по Web Workers

Web Workers позволяют улучшать производительность приложений за счет вынесения тяжелой логики из основного потока. В статье описаны способы работы с воркерами, а также их ограничения.

https://www.sitepoint.com/developing-faster-javascript-apps-the-ultimate-guide-to-web-workers
🔥16👍6👌21
This media is not supported in your browser
VIEW IN TELEGRAM
Набор CSS анимаций на все случаи жизни

Выбираете анимацию, жмете like и download и копируете сгенерированный код

https://animista.net
👍27🔥11👌2
Рефакторинг на максималках

Сборник правил от Саши Беспоясова, который поможет облегчить рефакторинг кода.

https://refactor-like-a-superhero.vercel.app/ru
👍26❤‍🔥7
Используем npm query для менеджмента зависимостей

CLI инструмент для аудита установленных пакетов, в том числе поиска недостающих, и определения пакетов, зависимых от других.

https://blog.logrocket.com/npm-query-better-dependency-management/
👍10