Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день.
Присоединяйтесь: @FrontendPortal
Присоединяйтесь: @FrontendPortal
👍33❤🔥2⚡2❤1
ResizeObserver API
ResizeObserver API — инструмент JavaScript для отслеживания изменений размеров HTML-элементов, полезный при работе с адаптивными и динамическими интерфейсами. Туториал, показывающий как создать экземпляр ResizeObserver, наблюдать за элементами и управлять событиями изменения размера.
https://blog.logrocket.com/how-to-use-the-resizeobserver-api-a-tutorial-with-examples/
ResizeObserver API — инструмент JavaScript для отслеживания изменений размеров HTML-элементов, полезный при работе с адаптивными и динамическими интерфейсами. Туториал, показывающий как создать экземпляр ResizeObserver, наблюдать за элементами и управлять событиями изменения размера.
https://blog.logrocket.com/how-to-use-the-resizeobserver-api-a-tutorial-with-examples/
👍13❤2🔥1🥴1
10 советов по SEO для разработчиков
Приемы и трюки для улучшения SEO ваших приложений. Использование SSR, оптимизация метаданных, управление ленивой загрузкой, создание описательных URL и добавление структурированных данных.
https://thenewstack.io/top-10-javascript-seo-tricks-every-developer-should-know/
Приемы и трюки для улучшения SEO ваших приложений. Использование SSR, оптимизация метаданных, управление ленивой загрузкой, создание описательных URL и добавление структурированных данных.
https://thenewstack.io/top-10-javascript-seo-tricks-every-developer-should-know/
1❤9👍2👎1🥱1
Современный CSS reset
Обычно базовые стили кочуют у разработчиков из проекта в проект. Что могло поменяться с течением времени? Josh Comeau делится своим набором стилей и тем, что в нем изменилось за последнее время.
https://www.joshwcomeau.com/css/custom-css-reset/
Обычно базовые стили кочуют у разработчиков из проекта в проект. Что могло поменяться с течением времени? Josh Comeau делится своим набором стилей и тем, что в нем изменилось за последнее время.
https://www.joshwcomeau.com/css/custom-css-reset/
👍17🤔4🔥2⚡1
Разбираемся с процессом рендеринга в браузере
Один из частых вопросов на собеседовании - вы вводите адрес в строку браузера и нажимаете Enter, что происходит дальше?
Подробное описание стадий - от отправки запроса до отображения пикселей на экране.
https://abhisaha.com/blog/exploring-browser-rendering-process
Один из частых вопросов на собеседовании - вы вводите адрес в строку браузера и нажимаете Enter, что происходит дальше?
Подробное описание стадий - от отправки запроса до отображения пикселей на экране.
https://abhisaha.com/blog/exploring-browser-rendering-process
🔥15👍2⚡1❤1🌚1🤓1
Почему оптимизация Lighthouse score — не гарантия быстрого сайта?
А также почему фикс по рекомендациям Lighthouse — это хороший старт для улучшения приложений.
https://www.smashingmagazine.com/2024/11/why-optimizing-lighthouse-score-not-enough-fast-website/
А также почему фикс по рекомендациям Lighthouse — это хороший старт для улучшения приложений.
https://www.smashingmagazine.com/2024/11/why-optimizing-lighthouse-score-not-enough-fast-website/
👍9🤔2❤1
JavaScript Import Attributes
Разбираемся с новым синтаксисом импортов в JS (ES2025) и какую проблему он решает.
https://www.trevorlasn.com/blog/import-attributes-in-javascript
Разбираемся с новым синтаксисом импортов в JS (ES2025) и какую проблему он решает.
https://www.trevorlasn.com/blog/import-attributes-in-javascript
1🔥10👍7🌚3
Promise - краткое руководство
Ёмкая документация от Доки по работе с промисами: синтаксис, методы, цепочки вызовов, промисификация функций с колбэком.
https://doka.guide/js/promise/
Ёмкая документация от Доки по работе с промисами: синтаксис, методы, цепочки вызовов, промисификация функций с колбэком.
https://doka.guide/js/promise/
👍14❤6🌚1
Устали бороться с древним кодом? Чувствуете, что легаси по-тихоньку захватывает ваш проект? 😱
Приглашаем на онлайн-митап «Как лиду работать с легаси?», где лид фронтенд-разработчик Мерка, Никита Шальнев, поделится проверенными техниками борьбы с «программным наследием».
О чем будем говорить?
- Что такое легаси-код и откуда он берется?
- Как обнаружить легаси в проекте?
- Какую ошибку постоянно совершают лиды?
- Как предотвратить появление легаси и сохранить код чистым?
- Рефакторинг или ... может, ну его? 😜
Встречаемся с вами в 19:00 МСК в канале @merkteam ⬅️
👉 Подписывайтесь, чтобы не пропустить митап, а заодно быть в курсе других мероприятий, открытых вакансий в Мерке и полезных айти-новостей от меркурианских разработчиков.
Приглашаем на онлайн-митап «Как лиду работать с легаси?», где лид фронтенд-разработчик Мерка, Никита Шальнев, поделится проверенными техниками борьбы с «программным наследием».
О чем будем говорить?
- Что такое легаси-код и откуда он берется?
- Как обнаружить легаси в проекте?
- Какую ошибку постоянно совершают лиды?
- Как предотвратить появление легаси и сохранить код чистым?
- Рефакторинг или ... может, ну его? 😜
Встречаемся с вами в 19:00 МСК в канале @merkteam ⬅️
👉 Подписывайтесь, чтобы не пропустить митап, а заодно быть в курсе других мероприятий, открытых вакансий в Мерке и полезных айти-новостей от меркурианских разработчиков.
💩6👍5⚡3❤1
This media is not supported in your browser
VIEW IN TELEGRAM
30 простых (и не очень) анимаций на CSS
Подборка анимаций на чистом CSS чтобы оживить ваше приложение.
https://blog.hubspot.com/website/css-animation-examples
Подборка анимаций на чистом CSS чтобы оживить ваше приложение.
https://blog.hubspot.com/website/css-animation-examples
🔥17👍3❤2👏1
Дебажим мобильное веб приложение на Android-смартфоне
Как отловить специфичный для мобильной платформы баг или понять особенности выполнения кода на реальных устройствах с помощью adb и DevTools.
https://jem-space.ru/mobile-degub-on-desktop/
Как отловить специфичный для мобильной платформы баг или понять особенности выполнения кода на реальных устройствах с помощью adb и DevTools.
https://jem-space.ru/mobile-degub-on-desktop/
🔥19👍5🤯2❤1
Введение в API MutationObserver
Короткая заметка о том, что такое MutationObserver, зачем он нужен и как с помощью него отслеживать изменения DOM элемента.
https://css-live.ru/articles/vvedenie-v-api-mutationobserver-iz-javascript.html
Короткая заметка о том, что такое MutationObserver, зачем он нужен и как с помощью него отслеживать изменения DOM элемента.
https://css-live.ru/articles/vvedenie-v-api-mutationobserver-iz-javascript.html
👍12❤1👎1🔥1👌1
15 советов и трюков по TypeScript
Небольшая подборка примеров продвинутого использования TS.
https://dev.to/mattlewandowski93/15-advanced-typescript-tips-and-tricks-you-might-not-know-12kk
Небольшая подборка примеров продвинутого использования TS.
https://dev.to/mattlewandowski93/15-advanced-typescript-tips-and-tricks-you-might-not-know-12kk
👍13🔥1
Простое введение в Container Queries
Прошло уже несколько лет с тех пор, как Container Queries стали доступны в браузерах. Но мало кто их использует в своей разработке, потому что они не так просты, как Media Queries. Разберем их по полочкам, чтобы вы могли смело использовать их в работе.
https://www.joshwcomeau.com/css/container-queries-introduction/
Прошло уже несколько лет с тех пор, как Container Queries стали доступны в браузерах. Но мало кто их использует в своей разработке, потому что они не так просты, как Media Queries. Разберем их по полочкам, чтобы вы могли смело использовать их в работе.
https://www.joshwcomeau.com/css/container-queries-introduction/
🔥12👍4⚡1🤔1
Лучшие практики по работе с Context API в React приложении
Михаил Непомнящий рассказывает как оптимизировать React приложение при работе с Context API.
https://www.youtube.com/watch?v=zmAL9revylc
Михаил Непомнящий рассказывает как оптимизировать React приложение при работе с Context API.
https://www.youtube.com/watch?v=zmAL9revylc
💩12👍10🔥2😁1
Как на самом деле работает position: sticky в CSS
Разбираемся, почему часто position: sticky работает не так, как ожидает разработчик.
https://web-standards.ru/articles/position-sticky/
Разбираемся, почему часто position: sticky работает не так, как ожидает разработчик.
https://web-standards.ru/articles/position-sticky/
🔥11👍6⚡1
Пишем свой аккордеон (музыкальный инструмент) на JavaScript
О том, как работать с WebAudio API и создавать звуки программно на JS.
https://www.taniarascia.com/musical-instrument-web-audio-api/
О том, как работать с WebAudio API и создавать звуки программно на JS.
https://www.taniarascia.com/musical-instrument-web-audio-api/
🔥21👍8😁5👻4❤🔥3👎2👏1
Использование ссылок с атрибутом ping
Новые возможности в привычных элементах — <a ping="url">, или как трекать действия пользователей без счетчиков.
https://jsdev.space/html-ping-attribute/
Новые возможности в привычных элементах — <a ping="url">, или как трекать действия пользователей без счетчиков.
https://jsdev.space/html-ping-attribute/
❤13🔥4⚡2👍1