FrontEndDev
28.9K subscribers
2.2K photos
23 videos
7.4K links
🚀 Статьи, новости, туториалы по frontend разработке.

http://jem-space.ru

Admin: @jem_jem
Пишу в @five_a_m

Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee

Реклама: http://bit.ly/2NxmVDu
РКН: https://clck.ru/3GLw7G
Download Telegram
Tunnel Run длиной 170 строк на чистом JS

Реализация игры в которой нужно бегать и прыгать через туннель. Отображение двумерной сетки как трёхмерного туннеля с помощью функций sin и cos вместе с перспективным масштабированием. Простое объяснение реализации без углубления в тригонометрию.

https://slicker.me/javascript/tunnel/tunnel_run.htm
👍8❤‍🔥2🔥2🥴1
Прошел тест от Спортмастера – оказывается, я не умею совмещать работу и жизнь. А какой результат у вас?

🆖перейти в бота
Please open Telegram to view this post
VIEW IN TELEGRAM
💩8👍4🤣2
WelsonJS — cоздание Windows приложений на JavaScript

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/
8🔥5👍1
Новая возможность CSS — gap decorations

Стилизация промежутков между элементами в макетах flex, grid и колонках с использованием свойств наподобие column-rule и row-rule, избавляя от костылей с псевдоэлементами и лишней вёрстки. Поддерживается в Chrome начиная с 139 версии.

https://developer.chrome.com/blog/gap-decorations
🔥143👍3❤‍🔥2💔1
😎 Хотите стать Fullstack-разработчиком и развиваться в IT?

У вас есть шанс освоить профессию с нуля и работать с современными технологиями!

💻На курсе «Fullstack Developer» вы научитесь создавать фронтенд и бэкенд приложений, работать с React, TypeScript, Node.js, PostgreSQL и многим другим. Мы обучаем с нуля, шаг за шагом — от верстки до серверной части.

💪 В результате обучения у вас будут 3 проекта в портфолио, которые можно использовать на собеседованиях, а также актуальные знания, которые соответствуют требованиям современного рынка. Все уроки проводятся опытными практиками, а диплом OTUS ценится среди крупнейших IT-компаний.

Набор на курс закрывается, осталось всего несколько мест! Оставьте заявку и получите скидку на обучение по промокоду FULLSTACK_6 : https://otus.pw/CvIh/

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Создаем приложение с использованием Refine

Пошаговый тутораил по разработке фуллстек приложения с CRUD операциями и аутентификацией на фреймворке Refine.

https://www.youtube.com/watch?v=k4lHXIzCEkM&ab_channel=JavaScriptMastery
👍511
Эти CSS техники устарели

О привычных CSS решениях, которые работают и используются, но которые можно смело заменить более простыми, удобными и современными.

https://habr.com/ru/companies/ruvds/articles/917204/
🔥12👎72💩1
Создаем Танграм пазл на CSS

Как при помощи SCSS создать интерактивный танграм‑пазл — набор геометрических фигур, которые можно свободно перемещать и поворачивать. Реализация логики «перетаскивания» и поворота блоков с помощью CSS‑трансформаций и переменных + организация адаптивной верстки и плавных анимаций с минимальным использованием JavaScript.

https://css-tricks.com/breaking-boundaries-building-a-tangram-puzzle-with-scss/
🔥922
🚴‍♂️Не надо изобретать велосипед

Главная ошибка стартаперов — пытаться сделать идеальный продукт, годами его дорабатывать, но так и не выпустить.

В своём канале я запустил челлендж: 12 проектов за 12 месяцев.

1️⃣ Ищем идею под существующий спрос (не из головы!)
2️⃣ Разрабатываем продукт
3️⃣ Занимаемся бесплатным продвижением
4️⃣ Оптимизируем и масштабируем

Формула проста:
1 запуск = 1 функция = решение 1 проблемы

Три главных правила:
✔️ Только проверенный спрос — через поисковые запросы, а не догадки.
✔️ Быстрый запуск — никакого перфекционизма.
✔️ Только США и ЕС — там платят за удобство.

Также в канале разбираю:
Кто и зачем будет платить за микро-продукт?
Главная ошибка начинающих стартаперов
Микро-продукт vs стартап
Как бесплатно продвигать продукт

Короче, рассказываю в канале без купюр: что работает, а что нет, сколько приносит и как продвигаем. Всё, что обычно скрывают.

Реклама: ИП Зуев Игорь Владимирович, ИНН: 360408359441, Erid: 2VtzqxL27QA
💯42🔥1🤡1
Облегчаем использование регулярных выражений в JS

Несколько советов, которые сделают вашу работу с регулярками проще и удобнее.

https://2ality.com/2025/06/javascript-regexp-tips.html
🔥8👍43🥴2
Как оптимизировать работу вашего NextJs приложения с after

О новой API-функции after() в Next.js 15, которая позволяет выполнять дополнительную логику после отправки ответа клиенту, не замедляя основной рендеринг. О том, где и как применять after(), а также потенциальные ограничения при работе с Server Components и middleware.

https://blog.logrocket.com/how-to-optimize-next-js-app-after/
❤‍🔥8👍41🌭1
Пропали на неделю, сори.

Инспектор HTML форм

Инструмент, делающий разбор вашей формы на предмет ошибок и недочетов - вставляете код и получаете отчет.

https://polypane.app/form-inspector/
👍11🍌4🔥3
Params Editor

Удобное расширение для 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/
👍5🔥4❤‍🔥11
Стилизуем gap

О новой CSS-функциональности — gap decorations, которая позволяет добавлять декоративные разделительные линии между элементами flex, grid и multi-column без лишнего HTML-кода. Теперь можно одним CSS-свойством настроить ширину, цвет, стиль линий и даже сложные шаблоны через repeat(). Поддержка с Chrome 139.

https://css-tricks.com/the-gap-strikes-back-now-stylable/
👍62❤‍🔥1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
🎯 Хочешь запустить своё мини-приложение на аудиторию в 45 млн пользователей?

VK Dev Grants — грантовая программа для разработчиков от VK Mini Apps

🏆 Призовой фонд — 5 млн ₽

💡 Условия — от идеи до масштабного релиза

💼 Участие — соло или в команде

🧠 Экспертная поддержка, продвижение и монетизация

Заявки на 1 этап принимаются до 31 июля. Для участия потребуется презентация проекта с подробным описанием идеи мини-приложения и всем, что может лечь в основу проекта.

👉 Подать заявку.
👎5👍4
Вертикальный ритм

Почему вертикальный ритм важен и как его соблюсти при дизайне и разработке приложений.

https://habr.com/ru/companies/edison/articles/340670/
👍83❤‍🔥1🔥1
Оператор satisfies в TypeScript

Подробнее об операторе satisfies, который позволяет проверить, соответствует ли объект определённому типу. Полезно для случаев, когда нужно сохранить узкие типы значений и одновременно гарантировать соответствие интерфейсу. Благодаря satisfies улучшается безопасность типов, автодополнение и общая надёжность кода, по сравнению с использованием as.

https://frontendmasters.com/blog/satisfies-in-typescript/
❤‍🔥7🔥43
Анализ 100 лендинг страниц продуктов для разработчиков

Представим, что у вас есть инструмент для разработчиков и вы хотите его продвигать. Какую лендинг страницу сделать? Вот обзорная статья от Злых Марсиан с успешными практиками для дизайна лендингов: понятные заголовки, визуальные демо продукта и чёткие призывы к действию.

https://evilmartians.com/chronicles/we-studied-100-devtool-landing-pages-here-is-what-actually-works-in-2025
👍8🤣31👨‍💻1