FrontEndDev
29.7K subscribers
2K photos
18 videos
7.2K 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
Почему оптимизация Lighthouse score — не гарантия быстрого сайта?

А также почему фикс по рекомендациям Lighthouse — это хороший старт для улучшения приложений.

https://www.smashingmagazine.com/2024/11/why-optimizing-lighthouse-score-not-enough-fast-website/
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
FrontEndDev
Please open Telegram to view this post
VIEW IN TELEGRAM
JavaScript Import Attributes

Разбираемся с новым синтаксисом импортов в JS (ES2025) и какую проблему он решает.

https://www.trevorlasn.com/blog/import-attributes-in-javascript
Promise - краткое руководство

Ёмкая документация от Доки по работе с промисами: синтаксис, методы, цепочки вызовов, промисификация функций с колбэком.

https://doka.guide/js/promise/
Устали бороться с древним кодом? Чувствуете, что легаси по-тихоньку захватывает ваш проект? 😱

Приглашаем на онлайн-митап «Как лиду работать с легаси?», где лид фронтенд-разработчик Мерка, Никита Шальнев, поделится проверенными техниками борьбы с «программным наследием».

О чем будем говорить?
- Что такое легаси-код и откуда он берется?
- Как обнаружить легаси в проекте?
- Какую ошибку постоянно совершают лиды?
- Как предотвратить появление легаси и сохранить код чистым?
- Рефакторинг или ... может, ну его? 😜

Встречаемся с вами в 19:00 МСК в канале @merkteam ⬅️

👉 Подписывайтесь, чтобы не пропустить митап, а заодно быть в курсе других мероприятий, открытых вакансий в Мерке и полезных айти-новостей от меркурианских разработчиков.
This media is not supported in your browser
VIEW IN TELEGRAM
30 простых (и не очень) анимаций на CSS

Подборка анимаций на чистом CSS чтобы оживить ваше приложение.

https://blog.hubspot.com/website/css-animation-examples
Дебажим мобильное веб приложение на Android-смартфоне

Как отловить специфичный для мобильной платформы баг или понять особенности выполнения кода на реальных устройствах с помощью adb и DevTools.

https://jem-space.ru/mobile-degub-on-desktop/
Введение в API MutationObserver

Короткая заметка о том, что такое MutationObserver, зачем он нужен и как с помощью него отслеживать изменения DOM элемента.

https://css-live.ru/articles/vvedenie-v-api-mutationobserver-iz-javascript.html
15 советов и трюков по TypeScript

Небольшая подборка примеров продвинутого использования TS.

https://dev.to/mattlewandowski93/15-advanced-typescript-tips-and-tricks-you-might-not-know-12kk
Простое введение в Container Queries

Прошло уже несколько лет с тех пор, как Container Queries стали доступны в браузерах. Но мало кто их использует в своей разработке, потому что они не так просты, как Media Queries. Разберем их по полочкам, чтобы вы могли смело использовать их в работе.

https://www.joshwcomeau.com/css/container-queries-introduction/
Лучшие практики по работе с Context API в React приложении

Михаил Непомнящий рассказывает как оптимизировать React приложение при работе с Context API.

https://www.youtube.com/watch?v=zmAL9revylc
Как на самом деле работает position: sticky в CSS

Разбираемся, почему часто position: sticky работает не так, как ожидает разработчик.

https://web-standards.ru/articles/position-sticky/
Пишем свой аккордеон (музыкальный инструмент) на JavaScript

О том, как работать с WebAudio API и создавать звуки программно на JS.

https://www.taniarascia.com/musical-instrument-web-audio-api/
Использование ссылок с атрибутом ping

Новые возможности в привычных элементах — <a ping="url">, или как трекать действия пользователей без счетчиков.

https://jsdev.space/html-ping-attribute/
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация добавления в корзину

Очередной необычный эффект для сайта с товарами.

Github | Демо

https://tympanus.net/codrops/2024/11/21/from-product-to-cart-adding-guiding-animations-to-the-shopping-experience/
Генерируем моковые запросы/ответы

Mocky — онлайн сервис для создания моков. Настраиваете параметры ответа, в том числе и заголовки и получаете url по которому можно делать запросы. Удобно, если не настроены локальные моки и нужно быстро что-то проверить.

https://designer.mocky.io/
Новый релиз кандидат - TypeScript 5.7

Улучшенная работа со Strict Null Checks, улучшения безопасности типов при работе с enum, добавлен утилитарный тип NoInfer и еще несколько улучшений новой версии TS

https://devblogs.microsoft.com/typescript/announcing-typescript-5-7/
Ищем перфоманс проблемы в React приложениях

Еще один инструмент для поиска слабых мест, не требующий внесения изменений в код проекта.

https://github.com/aidenybai/react-scan#readme