🚀 Статьи, новости, туториалы по 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
Как оптимизировать работу вашего NextJs приложения с after
О новой API-функции after()
в Next.js 15, которая позволяет выполнять дополнительную логику после отправки ответа клиенту, не замедляя основной рендеринг. О том, где и как применять after()
, а также потенциальные ограничения при работе с Server Components и middleware.
https://blog.logrocket.com/how-to-optimize-next-js-app-after/
🚴♂️Не надо изобретать велосипед
Главная ошибка стартаперов — пытаться сделать идеальный продукт, годами его дорабатывать, но так и не выпустить.
В своём канале я запустил челлендж: 12 проектов за 12 месяцев.
1️⃣ Ищем идею под существующий спрос (не из головы!)
2️⃣ Разрабатываем продукт
3️⃣ Занимаемся бесплатным продвижением
4️⃣ Оптимизируем и масштабируем
Формула проста:
1 запуск = 1 функция = решение 1 проблемы
Три главных правила:
✔️ Только проверенный спрос — через поисковые запросы, а не догадки.
✔️ Быстрый запуск — никакого перфекционизма.
✔️ Только США и ЕС — там платят за удобство.
Также в канале разбираю:
— Кто и зачем будет платить за микро-продукт?
— Главная ошибка начинающих стартаперов
— Микро-продукт vs стартап
— Как бесплатно продвигать продукт
Короче, рассказываю в канале без купюр: что работает, а что нет, сколько приносит и как продвигаем. Всё, что обычно скрывают.
Реклама: ИП Зуев Игорь Владимирович, ИНН: 360408359441, Erid: 2VtzqxL27QA
Эти CSS техники устарели
О привычных CSS решениях, которые работают и используются, но которые можно смело заменить более простыми, удобными и современными.
https://habr.com/ru/companies/ruvds/articles/917204/
😎 Хотите стать Fullstack-разработчиком и развиваться в IT?
У вас есть шанс освоить профессию с нуля и работать с современными технологиями!
💻На курсе «Fullstack Developer» вы научитесь создавать фронтенд и бэкенд приложений, работать с React, TypeScript, Node.js, PostgreSQL и многим другим. Мы обучаем с нуля, шаг за шагом — от верстки до серверной части.
💪 В результате обучения у вас будут 3 проекта в портфолио, которые можно использовать на собеседованиях, а также актуальные знания, которые соответствуют требованиям современного рынка. Все уроки проводятся опытными практиками, а диплом OTUS ценится среди крупнейших IT-компаний.
❗Набор на курс закрывается, осталось всего несколько мест! Оставьте заявку и получите скидку на обучение по промокоду FULLSTACK_6 : https://otus.pw/CvIh/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
Цветовые функции в CSS
О новых возможностях работы с цветами в CSS с помощью функции color(), позволяющей использовать разные цветовые пространства — от sRGB до CIELAB и Oklab.
https://css-tricks.com/css-color-functions/
Прошел тест от Спортмастера – оказывается, я не умею совмещать работу и жизнь. А какой результат у вас?
🆖перейти в бота
Использование await на верхнем уровне
Вызов асинхронных функций без дополнительного обертывания в ES2022. Кейсы (например загрузка конфигураций, динамический импорт модулей и инициализация WebAssembly в модулях) и ограничения (блокировка выполнения импортирующих модулей, сложности при циклических зависимостях и несовместимость с CommonJS).
https://allthingssmitty.com/2025/06/16/using-await-at-the-top-level-in-es-modules/
Интеграция React Server Components с бандлером
RSC нужно не только передавать данные, но и код компонентов от сервера к клиенту. Дэн Абрамов рассказывает почему без интеграции с бандлером это будет работать неоптимально.
https://overreacted.io/why-does-rsc-integrate-with-a-bundler/
26 июня в 15.00 мск пройдет онлайн митап «МойОфис Frontend&UX Talks. Практические решения для сложных интерфейсов в 2025 году: от кода до дизайна».
Современные цифровые продукты становятся все мощнее — и все сложнее. А еще требуют комплексного подхода — от архитектуры кода до продуманного UX. Как создавать сложные интерфейсы, чтобы они оставались удобными? Какие технологии и методы действительно работают в реальных проектах?
Об этом мы и поговорим на митапе: рассмотрим современные инструменты, архитектурные решения, дизайн-системы и методы редизайна, а также покажем рабочие подходы, которые можно применить прямо сейчас, независимо от масштаба вашего проекта.
На митапе выступят:
Руководитель группы разработки МойОфис, участник программного комитета конференции HolyJS Алексей Золотых;
Архитектор веб-направления в «Лаборатории Касперского», соорганизатор MoscowJS, Павел Востриков;
Исследователь пользовательского опыта и клиентских сценариев в Alfa Research Center, тренер и практик дизайн-мышления, Антон Бессонов.
И другие спикеры, в расписании митапа.
Для кого этот митап?
✔️ Для фронтендеров, которые создают не просто код, а удобные и современные интерфейсы.
✔️ Для продуктовых специалистов, которые хотят знать, куда движется индустрия.
✔️ Для дизайнеров, которые хотят глубже понимать технические возможности в разработке дизайна интерфейсов.
Это не просто доклады — это разбор реальных кейсов и живые дискуссии. Присоединяйтесь, чтобы обсудить лучшие практики, задать вопросы спикерам и вдохновиться новыми идеями. Будет полезно!
Реклама
ООО "НОВЫЕ ОБЛАЧНЫЕ ТЕХНОЛОГИИ"
ИНН: 7703807270
erid: 2W5zFJNYCat
Исследуем функцию contrast-color()...снова
Еще одна статья о том, как работает функция contrast-color() в CSS и зачем она нужна. В стать показано функция помогает улучшить доступность, автоматически подбирая контрастный цвет к заданному фону + текущие ограничения, поддержка в браузерах и возможные обходные пути.
https://css-tricks.com/exploring-the-css-contrast-color-function-a-second-time/
Тем, кто учит и учится новому
20 июня в рамках фестиваля «Т-Двор» от Т-Банка пройдет День образования и науки.
В программе — дискуссии, кейсы и воркшопы от экспертов:
— Расскажут про непрерывное обучение, профессии будущего и навыки новой эры.
— Обсудят мифы о границах интеллекта и стереотипы, которые мешают расти.
— Подскажут, как и для чего побеждать на олимпиадах.
— Рассмотрят, как вузы и компании могут растить специалистов вместе.
Будут и члены приемной комиссии Центрального университета — можно задать вопросы о поступлении и программах обучения.
Приходите на фестиваль в Санкт-Петербурге или подключайтесь онлайн. Участие бесплатное.
Успейте зарегистрироваться до 19 июня
State of CSS 2025
Опросник об использовании новых возможностей и инструментов CSS — ваша возможность повлиять на развитие CSS и web. Опрос займёт около 15–20 минут.
Цель — понять, насколько быстро внедряются новые функции (например, scroll‑driven animations, :has(), subgrid и другие) и помочь сообществу и браузерным вендорам приоритизировать дальнейшее развитие.
https://survey.devographics.com/ru-RU/survey/state-of-css/2025
Друзья! Я, как и многие из разработчиков, по вечерам пилю пет-проекты, которые решают мои задачи, а потенциально и задачи некоторого круга людей.
У пет-проектов есть несколько плюсов:
▫️Можно не увольняться с работы в компании
▫️Не так страшно, как запускать бизнес, который может прогореть
▫️Плюс, многие успешные компании начинали свой путь как пет-проект, например тот же Twitter.
Но как разработчику или менеджеру в IT запустить свой пет-проект, чтобы он еще и был успешным?
Михаил Табунов сделал про это телеграм канал Твой пет проект, в котором пишет для разработчиков и менеджеров про свой опыт – где брать идею, что надо знать про маркетинг, как запускать и искать первые 10 клиентов не имея бюджета на рекламу, и многое другое.
Так что подписывайтесь на Твой пет проект и получайте пользу от практиков рынка.
Анонс Rolldown‑Vite
Использование в Vite нового сборщика на Rust вместо Rollup + esbuild. Ускорение сборки от 3х до 16х и значительное снижение потребления памяти (в некоторых случаях до 100х) по сравнению с традиционными инструментами.
https://voidzero.dev/posts/announcing-rolldown-vite
Друзья! Нашел классный канал Формошлёп, где собраны сотни хаков для фронтендеров в одном месте
Никакой скучной теории, воды и прочей шляпы, только практические примеры, которые работают.
👉 Подписывайся на @frontbox — стань тем, кто знает, как решить проблему, пока остальные ищут ответ на Stack Overflow.
Облегчаем использование регулярных выражений в JS
Несколько советов, которые сделают вашу работу с регулярками проще и удобнее.
https://2ality.com/2025/06/javascript-regexp-tips.html
Создаем Танграм пазл на CSS
Как при помощи SCSS создать интерактивный танграм‑пазл — набор геометрических фигур, которые можно свободно перемещать и поворачивать. Реализация логики «перетаскивания» и поворота блоков с помощью CSS‑трансформаций и переменных + организация адаптивной верстки и плавных анимаций с минимальным использованием JavaScript.
https://css-tricks.com/breaking-boundaries-building-a-tangram-puzzle-with-scss/
Создаем приложение с использованием Refine
Пошаговый тутораил по разработке фуллстек приложения с CRUD операциями и аутентификацией на фреймворке Refine.
https://www.youtube.com/watch?v=k4lHXIzCEkM&ab_channel=JavaScriptMastery
Новая возможность CSS — gap decorations
Стилизация промежутков между элементами в макетах flex, grid и колонках с использованием свойств наподобие column-rule и row-rule, избавляя от костылей с псевдоэлементами и лишней вёрстки. Поддерживается в Chrome начиная с 139 версии.
https://developer.chrome.com/blog/gap-decorations
WelsonJS — cоздание Windows приложений на JavaScript
WelsonJS — фреймворк для создания Windows‑приложений на встроенном в систему JavaScript‑движке, позволяющий писать полноценные десктоп‑программы (GUI, консоль, автоматизация Office) с HTML/CSS и JS/TS без Node.js
Проект предоставляет для сборки и установки собственный HTA/скриптовый лаунчер и Inno Setup инсталлятор.
https://github.com/gnh1201/welsonjs
Tunnel Run длиной 170 строк на чистом JS
Реализация игры в которой нужно бегать и прыгать через туннель. Отображение двумерной сетки как трёхмерного туннеля с помощью функций sin и cos вместе с перспективным масштабированием. Простое объяснение реализации без углубления в тригонометрию.
https://slicker.me/javascript/tunnel/tunnel_run.htm
Упрощаем работу с ResizeObserver
Небольшая обёртка для ResizeObserver, которая делает работу с ним понятнее и удобнее.
https://css-tricks.com/a-better-api-for-the-resize-observer/
Продвинутые трюки с Typescript
6 приемов, которые помогут улучшить типизацию и разработку: условные типы, оператор infer, именованные типы и другие.
https://sinja.io/blog/advanced-typescript
Самый простой способ задеплоить сайт-портфолио
Используем связку github + netfly для бесплатного деплоя простых и небольших проектов.
https://frontendmasters.com/blog/the-simplest-way-to-deploy/
Partial Keyframes
Джош Комо рассказывает о технике "частичных ключевых кадров" в CSS-анимациях, которая позволяет анимации динамически унаследовать текущее состояние стилей. Это делает анимации более композиционными и гибкими, позволяя комбинировать несколько анимаций на одном элементе
https://www.joshwcomeau.com/animation/partial-keyframes/
Подробный гайд по CSS Custom Properties
Синтаксис, возможности и лучшие практики по работе с CSS переменными.В руководстве рассказывается как использовать кастомные свойства для соблюдения принципов DRY, динамической темизации и взаимодействия с JavaScript.
https://css-tricks.com/a-complete-guide-to-custom-properties/
GlowIcons 1.0
Более 440 open source svg иконок для ваших интерфейсов.
https://www.glowui.com/icons
AngularFire — Firebase + Angular
AngularFire — это официальная библиотека, которая обеспечивает удобную интеграцию Firebase с Angular-приложениями, оборачивая веб‑SDK в конструкции, привычные для Angular — с Dependency Injection, RxJS и Zone.js
https://github.com/angular/angularfire
Добавляем креативности с HTML Dialog
Используем элемент <dialog> вместе с его псевдоэлементом ::backdrop, фильтрами фона и анимациями для создания модальных окон с уникальным дизайном, сохраняя доступность и семантику.
https://css-tricks.com/getting-creative-with-html-dialog/
Частые ошибки при дизайне веб страниц
Несколько простых советов, которые помогут вам создавать красивые и информативные лендинги.
https://blog-en.tilda.cc/articles-website-design-mistakes