Детектируем тряску мобильного устройства
Реализуем обнаружение встряхивания смартфона без использования сторонних библиотек, опираясь на нативный API
https://slicker.me/javascript/shake/shake.htm
Реализуем обнаружение встряхивания смартфона без использования сторонних библиотек, опираясь на нативный API
devicemotionhttps://slicker.me/javascript/shake/shake.htm
😁13👍5🔥2
Веб-стандарты: выпуск 509
Антивебные API для веба, LLM помогает и убивает Tailwind, нездоровая зависимость от бандлеров
https://web-standards.ru/podcast/509/
Антивебные API для веба, LLM помогает и убивает Tailwind, нездоровая зависимость от бандлеров
https://web-standards.ru/podcast/509/
❤5👍4⚡1🥱1
JavaScript: прощай, Date, здравствуй, Temporal.
Встроенный объект Date давно доставлял неудобства разработчикам из-за своей нелогичности и изменяемости, что приводило к ошибкам и сложностям в работе со временем. Новый API Temporal призван решить эти проблемы, предлагая современный, более последовательный и функциональный подход к манипуляциям с датами и временем.
https://habr.com/ru/articles/984884/
Встроенный объект Date давно доставлял неудобства разработчикам из-за своей нелогичности и изменяемости, что приводило к ошибкам и сложностям в работе со временем. Новый API Temporal призван решить эти проблемы, предлагая современный, более последовательный и функциональный подход к манипуляциям с датами и временем.
https://habr.com/ru/articles/984884/
1👍22❤6🔥2
Анимация переходов адаптивного макета сетки с помощью GSAP Flip
Туториал, показывающий, как плавно анимировать изменения размера и перестановку элементов сетки при динамических изменениях макета. Этот подход с использованием плагина GSAP Flip идеально подходит для создания интерактивных галерей и портфолио с бесшовными переходами.
https://tympanus.net/codrops/2026/01/20/animating-responsive-grid-layout-transitions-with-gsap-flip/
Туториал, показывающий, как плавно анимировать изменения размера и перестановку элементов сетки при динамических изменениях макета. Этот подход с использованием плагина GSAP Flip идеально подходит для создания интерактивных галерей и портфолио с бесшовными переходами.
https://tympanus.net/codrops/2026/01/20/animating-responsive-grid-layout-transitions-with-gsap-flip/
❤🔥5👍1
CSS в 2026 году: новые возможности, меняющие фронтенд-разработку
Современный CSS становится достаточно мощным для обработки сложных анимаций и пользовательских взаимодействий, которые ранее требовали JavaScript. Использование таких функций, как
https://blog.logrocket.com/css-in-2026/
Современный CSS становится достаточно мощным для обработки сложных анимаций и пользовательских взаимодействий, которые ранее требовали JavaScript. Использование таких функций, как
appearance: base-select, sibling-index() и улучшенного attr(), позволяет создавать интерактивные элементы с меньшим количеством кода, сохраняя при этом нативную доступность.https://blog.logrocket.com/css-in-2026/
👍7❤3
Как легко определить версии Safari и iOS
Почему стоит отдавать предпочтение проверке фич вместо ненадежного User-Agent
https://evilmartians.com/chronicles/how-to-detect-safari-and-ios-versions-with-ease
Почему стоит отдавать предпочтение проверке фич вместо ненадежного User-Agent
https://evilmartians.com/chronicles/how-to-detect-safari-and-ios-versions-with-ease
❤6🔥1
Тихая революция в CSS в создании вырезов в блоках
Пока мы делаем вид, что не прошляпили посты за ВСЮ прошлую неделю, предлагаем вам почитать как делать вырезы с использованием CSS-масок одной строчкой.
https://habr.com/ru/articles/993310
Пока мы делаем вид, что не прошляпили посты за ВСЮ прошлую неделю, предлагаем вам почитать как делать вырезы с использованием CSS-масок одной строчкой.
https://habr.com/ru/articles/993310
🔥13👍6❤3😁2
Claude Code Agent teams
Claude Code теперь поддерживает команды агентов, позволяя нескольким ИИ-помощникам работать над сложными задачами параллельно. Такая многоагентная координация ускоряет отладку и разработку, делегируя задачи специализированным агентам.
https://addyosmani.com/blog/claude-code-agent-teams/
Claude Code теперь поддерживает команды агентов, позволяя нескольким ИИ-помощникам работать над сложными задачами параллельно. Такая многоагентная координация ускоряет отладку и разработку, делегируя задачи специализированным агентам.
https://addyosmani.com/blog/claude-code-agent-teams/
🤮9👍7⚡2🌚2❤1👀1
Отладка перфоманса с использованием Chrome DevTools MCP
Пошаговый туториал автоматизированного анализа производительности веб приложений с помощью AI и Chrome DevTools MCP.
https://www.debugbear.com/blog/chrome-devtools-mcp-performance-debugging
Пошаговый туториал автоматизированного анализа производительности веб приложений с помощью AI и Chrome DevTools MCP.
https://www.debugbear.com/blog/chrome-devtools-mcp-performance-debugging
👍11🔥3❤1
Компилируем TypeScript в натив: хардкор и мясо
TSNative — это AOT-компилятор, который позволяет преобразовывать TypeScript-код в нативные бинарные файлы, используя LLVM IR. Это решение подходит для создания десктопных приложений, обеспечивая прямое взаимодействие с C++ без браузера или JavaScript-движка.
https://habr.com/ru/companies/ncloudtech/articles/990666
TSNative — это AOT-компилятор, который позволяет преобразовывать TypeScript-код в нативные бинарные файлы, используя LLVM IR. Это решение подходит для создания десктопных приложений, обеспечивая прямое взаимодействие с C++ без браузера или JavaScript-движка.
https://habr.com/ru/companies/ncloudtech/articles/990666
😱15👍4🔥3🤡2❤1
Браузер ненавидит сюрпризы
Непредвиденные изменения макета, например, из-за долгой загрузки изображений, вынуждают браузер пересчитывать геометрию страницы, вызывая скачки интерфейса. Подробно о том, как избежать этого и заранее резервировать пространство для контента в статье frontendmasters.
https://frontendmasters.com/blog/the-browser-hates-surprises/
Непредвиденные изменения макета, например, из-за долгой загрузки изображений, вынуждают браузер пересчитывать геометрию страницы, вызывая скачки интерфейса. Подробно о том, как избежать этого и заранее резервировать пространство для контента в статье frontendmasters.
https://frontendmasters.com/blog/the-browser-hates-surprises/
🔥6❤2👍2
CSS @scope: Альтернатива соглашениям об именовании и тяжелым абстракциям
Упрощаем поддержку стилей с новым правилом @scope, которое позволяет точно ограничивать область действия стилей в DOM.
https://www.smashingmagazine.com/2026/02/css-scope-alternative-naming-conventions/
Упрощаем поддержку стилей с новым правилом @scope, которое позволяет точно ограничивать область действия стилей в DOM.
https://www.smashingmagazine.com/2026/02/css-scope-alternative-naming-conventions/
👍5❤2🔥1🌚1
Полифилл для switch
В Safari 17.4 появился новый нативный HTML элемент switch, который превращает обычный checkbox с атрибутом switch в переключатель. Для остальных браузеров есть полифилл. Подробее о нем — в статье
https://blog.tomayac.com/2026/01/12/a-polyfill-for-the-html-switch-element/
В Safari 17.4 появился новый нативный HTML элемент switch, который превращает обычный checkbox с атрибутом switch в переключатель. Для остальных браузеров есть полифилл. Подробее о нем — в статье
https://blog.tomayac.com/2026/01/12/a-polyfill-for-the-html-switch-element/
👍9🔥2❤1
Я 💛 Фронтенд 2026
Прямая трансляция конференции которая начнется сегодня в 11:00 МСК
Программу можно глянуть тут.
https://www.youtube.com/live/Da3cJi7RDPg
Прямая трансляция конференции которая начнется сегодня в 11:00 МСК
Программу можно глянуть тут.
https://www.youtube.com/live/Da3cJi7RDPg
❤7🔥3🤮1
Создание адаптивной пирамиды с помощью современного CSS
Делаем сложный адаптивный макет с гексагональными элементами, используя передовые возможности CSS Grid и математические вычисления.
https://css-tricks.com/making-a-responsive-pyramidal-grid-with-modern-css/
Делаем сложный адаптивный макет с гексагональными элементами, используя передовые возможности CSS Grid и математические вычисления.
https://css-tricks.com/making-a-responsive-pyramidal-grid-with-modern-css/
🤯10👍6🤡2❤1🔥1
Развлекаемся с TypeScript дженериками
Используем продвинутые возможности дженериков, условные типы и перегрузку функций, чтобы создавать строго типизированные утилиты.
https://frontendmasters.com/blog/fun-with-typescript-generics/
Используем продвинутые возможности дженериков, условные типы и перегрузку функций, чтобы создавать строго типизированные утилиты.
https://frontendmasters.com/blog/fun-with-typescript-generics/
1👍10❤4
UI паттерны для асинхронных процессов и фоновых задач
Как создавать интуитивно понятные интерфейсы для фоновых задач и конвейеров данных, чтобы пользователи не теряли контроль и понимали, что происходит в приложении.
https://blog.logrocket.com/ui-patterns-for-async-workflows-background-jobs-and-data-pipelines/
Как создавать интуитивно понятные интерфейсы для фоновых задач и конвейеров данных, чтобы пользователи не теряли контроль и понимали, что происходит в приложении.
https://blog.logrocket.com/ui-patterns-for-async-workflows-background-jobs-and-data-pipelines/
❤🔥4👍3⚡1
Как одно эмодзи замедлило приложение в 100 раз.
Невероятный баг, который приводил к задержке в 1600 мс на каждом этапе отрисовки в Safari, был вызван одним эмодзи из-за использования шрифта Noto Color Emoji.
https://frontendfoc.us/link/180511/web
Невероятный баг, который приводил к задержке в 1600 мс на каждом этапе отрисовки в Safari, был вызван одним эмодзи из-за использования шрифта Noto Color Emoji.
https://frontendfoc.us/link/180511/web
🤯23👍10🥴3
Обработка видео в web с помощью WebCodecs
Туториал по работе с WebCodecs API: создаем видео-редактор и live стримы без серверной обработки.
https://www.sitepoint.com/video-processing-in-browser-with-Web-Codecs
Туториал по работе с WebCodecs API: создаем видео-редактор и live стримы без серверной обработки.
https://www.sitepoint.com/video-processing-in-browser-with-Web-Codecs
1🔥4⚡1❤1
Вакансия Senior Frontend Developer /// Steper
Привет! Мы Steper — сервис для создания сценариев с привязкой к ботам в различных соцсетях и автоматизацией цепочек действий: от запуска задачи до её решения. Мы ищем Senior Frontend Developer. Проект напоминает что-то среднее между n8n.io и bothelp.io.
🛠 Стек: TypeScript, Vue 3 (опыт от 2 лет), Git (будет плюсом знание Node.js)
👩💻 Гибридный формат (удаленка, ищем кандидата из Москвы)
📌 Что делать:
▫️Разрабатывать интерфейсы платформы
▫️Проектировать и улучшать UI/UX, делать продукт удобным для бизнеса
▫️Работать над компонентами и архитектурой фронтенда.
▫️Участвовать в проектировании общей логики продукта и интеграций, включая AI-модули в сценариях.
📌 Важно:
▫️Писать качественный и современный код, но без чрезмерного увлечения велосипедами
▫️Уметь самостоятельно принимать решения по разработке продукта, а не ждать подробных ТЗ
📌 Что предлагаем:
▫️ЗП: от 300 000 ₽/мес на руки
▫️7-часовой рабочий день + 1 час обед
▫️Гибридный график работы (редкие встречи в Москве с командой)
▫️Оплата коворкинга и подписок на полезные сервисы (обсуждается)
▫️Возможность влиять на продукт и принимать ключевые решения
▫️Работа в небольшой продуктовой команде и участие в развитии проекта
Откликнуться: https://forms.yandex.ru/u/698d68d35056902e746570d5/
Привет! Мы Steper — сервис для создания сценариев с привязкой к ботам в различных соцсетях и автоматизацией цепочек действий: от запуска задачи до её решения. Мы ищем Senior Frontend Developer. Проект напоминает что-то среднее между n8n.io и bothelp.io.
🛠 Стек: TypeScript, Vue 3 (опыт от 2 лет), Git (будет плюсом знание Node.js)
👩💻 Гибридный формат (удаленка, ищем кандидата из Москвы)
📌 Что делать:
▫️Разрабатывать интерфейсы платформы
▫️Проектировать и улучшать UI/UX, делать продукт удобным для бизнеса
▫️Работать над компонентами и архитектурой фронтенда.
▫️Участвовать в проектировании общей логики продукта и интеграций, включая AI-модули в сценариях.
📌 Важно:
▫️Писать качественный и современный код, но без чрезмерного увлечения велосипедами
▫️Уметь самостоятельно принимать решения по разработке продукта, а не ждать подробных ТЗ
📌 Что предлагаем:
▫️ЗП: от 300 000 ₽/мес на руки
▫️7-часовой рабочий день + 1 час обед
▫️Гибридный график работы (редкие встречи в Москве с командой)
▫️Оплата коворкинга и подписок на полезные сервисы (обсуждается)
▫️Возможность влиять на продукт и принимать ключевые решения
▫️Работа в небольшой продуктовой команде и участие в развитии проекта
Откликнуться: https://forms.yandex.ru/u/698d68d35056902e746570d5/
👍10😁3❤2
Почему статические сайты возвращаются и чему они научились
Статические сайты снова актуальны: они предлагают зрелую архитектуру, способную решать до 90% задач быстрее, дешевле и безопаснее, чем тяжёлые бэкенды
https://habr.com/ru/articles/1000610
Статические сайты снова актуальны: они предлагают зрелую архитектуру, способную решать до 90% задач быстрее, дешевле и безопаснее, чем тяжёлые бэкенды
https://habr.com/ru/articles/1000610
👍12❤3🔥2