Эти CSS техники устарели
О привычных CSS решениях, которые работают и используются, но которые можно смело заменить более простыми, удобными и современными.
https://habr.com/ru/companies/ruvds/articles/917204/
О привычных CSS решениях, которые работают и используются, но которые можно смело заменить более простыми, удобными и современными.
https://habr.com/ru/companies/ruvds/articles/917204/
🔥12👎7❤2💩1
Создаем Танграм пазл на CSS
Как при помощи SCSS создать интерактивный танграм‑пазл — набор геометрических фигур, которые можно свободно перемещать и поворачивать. Реализация логики «перетаскивания» и поворота блоков с помощью CSS‑трансформаций и переменных + организация адаптивной верстки и плавных анимаций с минимальным использованием JavaScript.
https://css-tricks.com/breaking-boundaries-building-a-tangram-puzzle-with-scss/
Как при помощи SCSS создать интерактивный танграм‑пазл — набор геометрических фигур, которые можно свободно перемещать и поворачивать. Реализация логики «перетаскивания» и поворота блоков с помощью CSS‑трансформаций и переменных + организация адаптивной верстки и плавных анимаций с минимальным использованием JavaScript.
https://css-tricks.com/breaking-boundaries-building-a-tangram-puzzle-with-scss/
🔥9⚡2❤2
🚴♂️Не надо изобретать велосипед
Главная ошибка стартаперов — пытаться сделать идеальный продукт, годами его дорабатывать, но так и не выпустить.
В своём канале я запустил челлендж: 12 проектов за 12 месяцев.
1️⃣ Ищем идею под существующий спрос (не из головы!)
2️⃣ Разрабатываем продукт
3️⃣ Занимаемся бесплатным продвижением
4️⃣ Оптимизируем и масштабируем
Формула проста:
1 запуск = 1 функция = решение 1 проблемы
Три главных правила:
✔️ Только проверенный спрос — через поисковые запросы, а не догадки.
✔️ Быстрый запуск — никакого перфекционизма.
✔️ Только США и ЕС — там платят за удобство.
Также в канале разбираю:
— Кто и зачем будет платить за микро-продукт?
— Главная ошибка начинающих стартаперов
— Микро-продукт vs стартап
— Как бесплатно продвигать продукт
Короче, рассказываю в канале без купюр: что работает, а что нет, сколько приносит и как продвигаем. Всё, что обычно скрывают.
Реклама: ИП Зуев Игорь Владимирович, ИНН: 360408359441, Erid: 2VtzqxL27QA
Главная ошибка стартаперов — пытаться сделать идеальный продукт, годами его дорабатывать, но так и не выпустить.
В своём канале я запустил челлендж: 12 проектов за 12 месяцев.
1️⃣ Ищем идею под существующий спрос (не из головы!)
2️⃣ Разрабатываем продукт
3️⃣ Занимаемся бесплатным продвижением
4️⃣ Оптимизируем и масштабируем
Формула проста:
1 запуск = 1 функция = решение 1 проблемы
Три главных правила:
✔️ Только проверенный спрос — через поисковые запросы, а не догадки.
✔️ Быстрый запуск — никакого перфекционизма.
✔️ Только США и ЕС — там платят за удобство.
Также в канале разбираю:
— Кто и зачем будет платить за микро-продукт?
— Главная ошибка начинающих стартаперов
— Микро-продукт vs стартап
— Как бесплатно продвигать продукт
Короче, рассказываю в канале без купюр: что работает, а что нет, сколько приносит и как продвигаем. Всё, что обычно скрывают.
Реклама: ИП Зуев Игорь Владимирович, ИНН: 360408359441, Erid: 2VtzqxL27QA
💯4❤2🔥1🤡1
Облегчаем использование регулярных выражений в JS
Несколько советов, которые сделают вашу работу с регулярками проще и удобнее.
https://2ality.com/2025/06/javascript-regexp-tips.html
Несколько советов, которые сделают вашу работу с регулярками проще и удобнее.
https://2ality.com/2025/06/javascript-regexp-tips.html
🔥8👍4❤3🥴2
Как оптимизировать работу вашего NextJs приложения с after
О новой API-функции
https://blog.logrocket.com/how-to-optimize-next-js-app-after/
О новой API-функции
after()
в Next.js 15, которая позволяет выполнять дополнительную логику после отправки ответа клиенту, не замедляя основной рендеринг. О том, где и как применять after()
, а также потенциальные ограничения при работе с Server Components и middleware.https://blog.logrocket.com/how-to-optimize-next-js-app-after/
❤🔥8👍4❤1🌭1
Пропали на неделю, сори.
Инспектор HTML форм
Инструмент, делающий разбор вашей формы на предмет ошибок и недочетов - вставляете код и получаете отчет.
https://polypane.app/form-inspector/
Инспектор HTML форм
Инструмент, делающий разбор вашей формы на предмет ошибок и недочетов - вставляете код и получаете отчет.
https://polypane.app/form-inspector/
👍11🍌4🔥3
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/
👍13⚡3🔥3
Как хорошо вы знаете класс Date?
Квиз из 28 нестандартных вопросов о том, как работает Date в JS. Делитесь результатами в коментах.
https://jsdate.wtf/
Квиз из 28 нестандартных вопросов о том, как работает Date в JS. Делитесь результатами в коментах.
https://jsdate.wtf/
🤣15👍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 — платформа для подготовки к собеседованиям по фронтенд-разработке. Изучайте теорию, решайте задачи и готовьтесь к успешному собеседованию. Подготовка к фронтенд собеседованию
👍10❤9💩1
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/
❤6🤔5👍3
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/
❤3👍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, Москва.
Здесь можно узнать подробности и зарегистрироваться!
🔥1