Tunnel Run длиной 170 строк на чистом JS
Реализация игры в которой нужно бегать и прыгать через туннель. Отображение двумерной сетки как трёхмерного туннеля с помощью функций sin и cos вместе с перспективным масштабированием. Простое объяснение реализации без углубления в тригонометрию.
https://slicker.me/javascript/tunnel/tunnel_run.htm
Реализация игры в которой нужно бегать и прыгать через туннель. Отображение двумерной сетки как трёхмерного туннеля с помощью функций sin и cos вместе с перспективным масштабированием. Простое объяснение реализации без углубления в тригонометрию.
https://slicker.me/javascript/tunnel/tunnel_run.htm
👍8❤🔥2🔥2🥴1
WelsonJS — cоздание Windows приложений на JavaScript
WelsonJS — фреймворк для создания Windows‑приложений на встроенном в систему JavaScript‑движке, позволяющий писать полноценные десктоп‑программы (GUI, консоль, автоматизация Office) с HTML/CSS и JS/TS без Node.js
Проект предоставляет для сборки и установки собственный HTA/скриптовый лаунчер и Inno Setup инсталлятор.
https://github.com/gnh1201/welsonjs
WelsonJS — фреймворк для создания Windows‑приложений на встроенном в систему JavaScript‑движке, позволяющий писать полноценные десктоп‑программы (GUI, консоль, автоматизация Office) с HTML/CSS и JS/TS без Node.js
Проект предоставляет для сборки и установки собственный HTA/скриптовый лаунчер и Inno Setup инсталлятор.
https://github.com/gnh1201/welsonjs
❤12🤯6🔥3
Цветовые функции в CSS
О новых возможностях работы с цветами в CSS с помощью функции color(), позволяющей использовать разные цветовые пространства — от sRGB до CIELAB и Oklab.
https://css-tricks.com/css-color-functions/
О новых возможностях работы с цветами в CSS с помощью функции color(), позволяющей использовать разные цветовые пространства — от sRGB до CIELAB и Oklab.
https://css-tricks.com/css-color-functions/
❤8🔥5👍1
Новая возможность CSS — gap decorations
Стилизация промежутков между элементами в макетах flex, grid и колонках с использованием свойств наподобие column-rule и row-rule, избавляя от костылей с псевдоэлементами и лишней вёрстки. Поддерживается в Chrome начиная с 139 версии.
https://developer.chrome.com/blog/gap-decorations
Стилизация промежутков между элементами в макетах flex, grid и колонках с использованием свойств наподобие column-rule и row-rule, избавляя от костылей с псевдоэлементами и лишней вёрстки. Поддерживается в Chrome начиная с 139 версии.
https://developer.chrome.com/blog/gap-decorations
🔥14❤3👍3❤🔥2💔1
Создаем приложение с использованием Refine
Пошаговый тутораил по разработке фуллстек приложения с CRUD операциями и аутентификацией на фреймворке Refine.
https://www.youtube.com/watch?v=k4lHXIzCEkM&ab_channel=JavaScriptMastery
Пошаговый тутораил по разработке фуллстек приложения с CRUD операциями и аутентификацией на фреймворке Refine.
https://www.youtube.com/watch?v=k4lHXIzCEkM&ab_channel=JavaScriptMastery
👍5⚡1❤1
Эти 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⚡3❤2
Облегчаем использование регулярных выражений в JS
Несколько советов, которые сделают вашу работу с регулярками проще и удобнее.
https://2ality.com/2025/06/javascript-regexp-tips.html
Несколько советов, которые сделают вашу работу с регулярками проще и удобнее.
https://2ality.com/2025/06/javascript-regexp-tips.html
🔥8❤4👍4🥴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👍5❤1🌭1
Пропали на неделю, сори.
Инспектор HTML форм
Инструмент, делающий разбор вашей формы на предмет ошибок и недочетов - вставляете код и получаете отчет.
https://polypane.app/form-inspector/
Инспектор HTML форм
Инструмент, делающий разбор вашей формы на предмет ошибок и недочетов - вставляете код и получаете отчет.
https://polypane.app/form-inspector/
👍12🍌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/
👍8❤2❤🔥1🔥1
Вертикальный ритм
Почему вертикальный ритм важен и как его соблюсти при дизайне и разработке приложений.
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❤7🔥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🤣3👨💻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🤔2
Асинхронное итерирование с 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🔥4
Как хорошо вы знаете класс Date?
Квиз из 28 нестандартных вопросов о том, как работает Date в JS. Делитесь результатами в коментах.
https://jsdate.wtf/
Квиз из 28 нестандартных вопросов о том, как работает Date в JS. Делитесь результатами в коментах.
https://jsdate.wtf/
🤣19👍8🤯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 — платформа для подготовки к собеседованиям по фронтенд-разработке. Изучайте теорию, решайте задачи и готовьтесь к успешному собеседованию. Подготовка к фронтенд собеседованию
👍17❤12💩2