Params Editor
Удобное расширение для Chrome для редактирования query параметров url
https://params-editor.isolpro.in/
Удобное расширение для Chrome для редактирования query параметров url
https://params-editor.isolpro.in/
👍7😢3🔥2
Новшества EcmaScript 2025
Улучшения для Set, методы итераторов, дублирующиеся именованные группы захвата регулярных выражений, Promise.try() и новый тип Float16Array.
https://pawelgrzybek.com/whats-new-in-ecmascript-2025/
Улучшения для Set, методы итераторов, дублирующиеся именованные группы захвата регулярных выражений, Promise.try() и новый тип Float16Array.
https://pawelgrzybek.com/whats-new-in-ecmascript-2025/
👍5🔥4❤🔥1⚡1
Стилизуем gap
О новой CSS-функциональности — gap decorations, которая позволяет добавлять декоративные разделительные линии между элементами flex, grid и multi-column без лишнего HTML-кода. Теперь можно одним CSS-свойством настроить ширину, цвет, стиль линий и даже сложные шаблоны через repeat(). Поддержка с Chrome 139.
https://css-tricks.com/the-gap-strikes-back-now-stylable/
О новой CSS-функциональности — gap decorations, которая позволяет добавлять декоративные разделительные линии между элементами flex, grid и multi-column без лишнего HTML-кода. Теперь можно одним CSS-свойством настроить ширину, цвет, стиль линий и даже сложные шаблоны через repeat(). Поддержка с Chrome 139.
https://css-tricks.com/the-gap-strikes-back-now-stylable/
👍7❤2❤🔥1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
🎯 Хочешь запустить своё мини-приложение на аудиторию в 45 млн пользователей?
VK Dev Grants — грантовая программа для разработчиков от VK Mini Apps
🏆 Призовой фонд — 5 млн ₽
💡 Условия — от идеи до масштабного релиза
💼 Участие — соло или в команде
🧠 Экспертная поддержка, продвижение и монетизация
Заявки на 1 этап принимаются до 31 июля. Для участия потребуется презентация проекта с подробным описанием идеи мини-приложения и всем, что может лечь в основу проекта.
👉 Подать заявку.
VK Dev Grants — грантовая программа для разработчиков от VK Mini Apps
🏆 Призовой фонд — 5 млн ₽
💡 Условия — от идеи до масштабного релиза
💼 Участие — соло или в команде
🧠 Экспертная поддержка, продвижение и монетизация
Заявки на 1 этап принимаются до 31 июля. Для участия потребуется презентация проекта с подробным описанием идеи мини-приложения и всем, что может лечь в основу проекта.
👉 Подать заявку.
👎6👍4
Вертикальный ритм
Почему вертикальный ритм важен и как его соблюсти при дизайне и разработке приложений.
https://habr.com/ru/companies/edison/articles/340670/
Почему вертикальный ритм важен и как его соблюсти при дизайне и разработке приложений.
https://habr.com/ru/companies/edison/articles/340670/
👍9❤3❤🔥1🔥1
Оператор satisfies в TypeScript
Подробнее об операторе satisfies, который позволяет проверить, соответствует ли объект определённому типу. Полезно для случаев, когда нужно сохранить узкие типы значений и одновременно гарантировать соответствие интерфейсу. Благодаря satisfies улучшается безопасность типов, автодополнение и общая надёжность кода, по сравнению с использованием as.
https://frontendmasters.com/blog/satisfies-in-typescript/
Подробнее об операторе satisfies, который позволяет проверить, соответствует ли объект определённому типу. Полезно для случаев, когда нужно сохранить узкие типы значений и одновременно гарантировать соответствие интерфейсу. Благодаря satisfies улучшается безопасность типов, автодополнение и общая надёжность кода, по сравнению с использованием as.
https://frontendmasters.com/blog/satisfies-in-typescript/
❤🔥8❤4🔥4
Анализ 100 лендинг страниц продуктов для разработчиков
Представим, что у вас есть инструмент для разработчиков и вы хотите его продвигать. Какую лендинг страницу сделать? Вот обзорная статья от Злых Марсиан с успешными практиками для дизайна лендингов: понятные заголовки, визуальные демо продукта и чёткие призывы к действию.
https://evilmartians.com/chronicles/we-studied-100-devtool-landing-pages-here-is-what-actually-works-in-2025
Представим, что у вас есть инструмент для разработчиков и вы хотите его продвигать. Какую лендинг страницу сделать? Вот обзорная статья от Злых Марсиан с успешными практиками для дизайна лендингов: понятные заголовки, визуальные демо продукта и чёткие призывы к действию.
https://evilmartians.com/chronicles/we-studied-100-devtool-landing-pages-here-is-what-actually-works-in-2025
👍10🤣3❤2👨💻1
Как выжить в мире сложных интерфейсов в 2025-м
7 работающих рецептов от React и CSS до дизайн-систем.
https://habr.com/ru/companies/ncloudtech/articles/924704/
7 работающих рецептов от React и CSS до дизайн-систем.
https://habr.com/ru/companies/ncloudtech/articles/924704/
👍7💩3🤔2❤1
Асинхронное итерирование с Array.fromAsync()
Современный способ асинхронного итерирования и его сравнение с привычными паттернами.
https://allthingssmitty.com/2025/07/14/modern-async-iteration-in-javascript-with-array-fromasync/
Современный способ асинхронного итерирования и его сравнение с привычными паттернами.
https://allthingssmitty.com/2025/07/14/modern-async-iteration-in-javascript-with-array-fromasync/
👍15⚡4🔥3
Как хорошо вы знаете класс Date?
Квиз из 28 нестандартных вопросов о том, как работает Date в JS. Делитесь результатами в коментах.
https://jsdate.wtf/
Квиз из 28 нестандартных вопросов о том, как работает Date в JS. Делитесь результатами в коментах.
https://jsdate.wtf/
🤣19👍7🤯6🥴3😁2❤1🔥1
Один из наших подписчиков запилил ресурс для подготовки к фронтенд‑собеседованиям — Hack Frontend
Там собрано всё, что обычно нужно:
- База знаний с реальными вопросами и детальными разборками, а не просто теоретические статьи.
- База задач из интервью с возможностью решать их прямо в браузере (есть встроенная IDE).
- Квизы по «тонким» моментам JavaScript: event loop, замыкания, промисы, прототипы и пр.
Платформа полностью бесплатная
https://www.hackfrontend.com
Там собрано всё, что обычно нужно:
- База знаний с реальными вопросами и детальными разборками, а не просто теоретические статьи.
- База задач из интервью с возможностью решать их прямо в браузере (есть встроенная IDE).
- Квизы по «тонким» моментам JavaScript: event loop, замыкания, промисы, прототипы и пр.
Платформа полностью бесплатная
https://www.hackfrontend.com
Hack Frontend
Hack Frontend — платформа для подготовки к собеседованиям по фронтенд-разработке. Изучайте теорию, решайте задачи и готовьтесь к успешному собеседованию. Подготовка к фронтенд собеседованию
👍16❤11💩2
Localhost-атака: как **ta и Яндекс следят за пользователями Android через localhost
Скрипты **ta Pixel и Яндекс.Метрика в браузере устанавливают соединение с фоновыми нативными приложениями, прослушивающими определённые TCP/UDP‑порты, чтобы передать cookie (например, _fbp) и идентификаторы устройства, тем самым связывая активность в браузере с учётной записью пользователя. Этот способ обхода защиты ставит под угрозу приватность и делает даже приватный режим небезопасным.
https://habr.com/ru/articles/915732/
Скрипты **ta Pixel и Яндекс.Метрика в браузере устанавливают соединение с фоновыми нативными приложениями, прослушивающими определённые TCP/UDP‑порты, чтобы передать cookie (например, _fbp) и идентификаторы устройства, тем самым связывая активность в браузере с учётной записью пользователя. Этот способ обхода защиты ставит под угрозу приватность и делает даже приватный режим небезопасным.
https://habr.com/ru/articles/915732/
❤10🤔5👍3😱1
Scroll-Driven Sticky заголовки
Используем Scroll-Driven анимацию совместно с position: sticky чтобы оживлять заголовки при прокрутке.
https://css-tricks.com/scroll-driven-sticky-heading/
Используем Scroll-Driven анимацию совместно с position: sticky чтобы оживлять заголовки при прокрутке.
https://css-tricks.com/scroll-driven-sticky-heading/
❤8👍1🔥1
Задача: получить максимум инсайтов за минимум времени
Решение: прийти к нам на Frontend meetup. 😎
А именно:
✔️ Как ускорить сборку фронта в 10 раз (и не развалить всё по пути)
✔️ Как развивать хард-скиллы на работе, а не в 2 часа ночи
✔️ Как подружиться с ИИ и не отдать ему контроль над кодовой базой.
Встречаемся офлайн/онлайн 22 июля в 18:00 в Sber Agile Home по адресу: Кутузовский проспект, 32к1, Москва.
Здесь можно узнать подробности и зарегистрироваться!
Решение: прийти к нам на Frontend meetup. 😎
А именно:
✔️ Как ускорить сборку фронта в 10 раз (и не развалить всё по пути)
✔️ Как развивать хард-скиллы на работе, а не в 2 часа ночи
✔️ Как подружиться с ИИ и не отдать ему контроль над кодовой базой.
Встречаемся офлайн/онлайн 22 июля в 18:00 в Sber Agile Home по адресу: Кутузовский проспект, 32к1, Москва.
Здесь можно узнать подробности и зарегистрироваться!
🔥6❤1
Как создавать NPM пакеты в 2025
Пошаговая инструкция, начиная с инициализации Git‑репозитория, настройки сборки через tsc, подключения Prettier и Vitest, до настройки CI через GitHub Actions и публикации с помощью Changesets
Плюсом рассказывают о продвинутых шагах: конфигурирование package.json, генерация .d.ts-типов, настройка линтинга и автоматизации публикации. В итоге получается полностью готовый к продакшну пакет со структурой src→dist, тестами, форматом и CI/CD.
https://www.totaltypescript.com/how-to-create-an-npm-package
Пошаговая инструкция, начиная с инициализации Git‑репозитория, настройки сборки через tsc, подключения Prettier и Vitest, до настройки CI через GitHub Actions и публикации с помощью Changesets
Плюсом рассказывают о продвинутых шагах: конфигурирование package.json, генерация .d.ts-типов, настройка линтинга и автоматизации публикации. В итоге получается полностью готовый к продакшну пакет со структурой src→dist, тестами, форматом и CI/CD.
https://www.totaltypescript.com/how-to-create-an-npm-package
👍13👏3🔥2💩2❤🔥1👎1😁1
Утилитные TS типы для работы с Promise
Примеры типизации сложных кейсов при работе с Promise.all или вложенными Promise.
https://spin.atomicobject.com/better-promise-all/
Примеры типизации сложных кейсов при работе с Promise.all или вложенными Promise.
https://spin.atomicobject.com/better-promise-all/
❤6👍2❤🔥1🔥1
⚡️Хотите научиться писать надежные тесты для React-приложений и улучшить свои навыки в тестировании?
Присоединяйтесь к открытому уроку «Тестирование React-приложений с помощью React Testing Library» 23 июля в 20:00 МСК! Разберем:
- Основы React Testing Library (RTL): философию и ключевые принципы.
- Разницу между RTL и Enzyme, и почему RTL — лучший выбор.
- Как тестировать рендеринг, события, асинхронный код и кастомные хуки.
Это отличная возможность перед стартом курса «React.js Developer» от OTUS. Все участники получат скидку на обучение и полезные материалы для дальнейшего изучения.
👉Регистрация открыта: https://otus.pw/scrx/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Присоединяйтесь к открытому уроку «Тестирование React-приложений с помощью React Testing Library» 23 июля в 20:00 МСК! Разберем:
- Основы React Testing Library (RTL): философию и ключевые принципы.
- Разницу между RTL и Enzyme, и почему RTL — лучший выбор.
- Как тестировать рендеринг, события, асинхронный код и кастомные хуки.
Это отличная возможность перед стартом курса «React.js Developer» от OTUS. Все участники получат скидку на обучение и полезные материалы для дальнейшего изучения.
👉Регистрация открыта: https://otus.pw/scrx/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
👍4
Контролируем длину строк в CSS
Способы стилизации для того чтобы текст красиво вписывался в блок: установка оптимального числа символов на строку, трюки с vw, а также SVG-решения для адаптивного масштабирования текста под размер контейнера.
https://css-tricks.com/setting-line-length-in-css-and-fitting-text-to-a-container/
Способы стилизации для того чтобы текст красиво вписывался в блок: установка оптимального числа символов на строку, трюки с vw, а также SVG-решения для адаптивного масштабирования текста под размер контейнера.
https://css-tricks.com/setting-line-length-in-css-and-fitting-text-to-a-container/
👍5🔥5❤1
Совмещаем несколько трансформаций с animation-composition
Возможности, которые предоставляет animation-composition: replace, add, accumulate и примеры их использования для более гибкого управления анимацией и композициями трансформаций в CSS
https://frontendmasters.com/blog/stacked-transforms/
Возможности, которые предоставляет animation-composition: replace, add, accumulate и примеры их использования для более гибкого управления анимацией и композициями трансформаций в CSS
https://frontendmasters.com/blog/stacked-transforms/
👍4❤1
Frontend Performance Checklist
Большой гайд с лучшими практиками по оптимизации веб приложений.
https://crystallize.com/blog/frontend-performance-checklist
Большой гайд с лучшими практиками по оптимизации веб приложений.
https://crystallize.com/blog/frontend-performance-checklist
👍5❤1🔥1