🚀 Статьи, новости, туториалы по 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
Иллюстрированный гайд по Big O и временной сложности
JavaScript-ориентированное, интерактивное и визуализированное руководство по системе обозначения Big O и ее роли в описании сложности алгоритмов. Подойдёт даже для тех, кто отличает O(log n) от O(n^2).
https://samwho.dev/big-o/
Next.js Caching & Rendering Tutorial
1.5 часовой курс по кешированию и рендерингу в Next.js для начинающих.
https://www.youtube.com/watch?v=qYk_BqGHXEg
Трюк с radio button для корзины товаров
Хороший пример, как управлять интерактивностью и UI-эффектами (плавные переходы и анимация добавления товара), не перегружая интерфейс лишним JavaScript-кодом.
https://css-tricks.com/a-radio-button-shopping-cart-trick/
JWTAuditor
Бесплатный онлайн-анализатор JWT, декодер и инструмент для тестирования безопасности.
https://jwtauditor.com/
Что такое Generative Engine Optimization (GEO)?
Generative Engine Optimization (GEO) — новый подход, который помогает создавать контент, чтобы AI-движки (например, ChatGPT, Google AI-Overviews, Perplexity) ссылались на ваш сайт напрямую в своих ответах, а не просто выводили его среди ссылок в выдаче. В отличие от SEO, ориентированного на рейтинги и клики, GEO ставит задачу — стать частью ответа AI, и включает оптимизацию структуры, цитируемости, авторитетности контента и семантики.
https://www.sitepoint.com/generative-engine-optimization/?utm_source=rss
Текст с трехмерными слоями
Создание сложного эффекта объёмного текста, похожего на стопку вырезанных слоёв. Три части — от основ к добавлению интерактивности.
Часть 1
Часть 2
Часть 3
20 частых антипаттернов в React и как их исправить
Ошибки, которые приводят к избыточным рендерам, мерцаниям интерфейса, нестабильным эффектам и расхождениям данных.
https://habr.com/ru/articles/937656/
Зовем на стажировку по Frontend-разработке
Т-Банк предлагает студентам и начинающим специалистам попробовать себя в роли frontend-разработчика. Стажеры будут решать реальные бизнес-задачи и получат шанс попасть в штат.
Что ждет на стажировке:
— Работа над пользовательской стороной сервисов и приложений.
— Плавное погружение в задачи, помощь ментора и команды.
— Удобный формат: от 20 до 40 часов в неделю, удаленно или в офисе.
— Возможность совмещать с учебой, сессией и экзаменами.
— Официальное оформление, оплата и рабочая техника.
— Доступ к базе знаний с курсами и вебинарами.
Узнайте больше и успейте пройти отбор до 26 августа
Релиз Nuxt 4.0
Новая структура app, переработанная поддержка TypeScript, более умные useAsyncData и useFetch.
https://blog.logrocket.com/nuxt-4-0-whats-new-what-to-expect/
На SourceCraft от Яндекса стартовали прием заявок на грантовую программу и конкурс репозиториев. Это шанс для разработчиков не только заявить о своем проекте, но и получить поддержку.
Платформа недавно ввела многоуровневые рейтинги и теперь участники смогут собирать оценки, которые влияют на видимость проекта и шансы в грантовом отборе.
Ачивки с уникальным дизайном от нейросети будут фиксировать ваш вклад, делая его заметным в профиле. Загружайте свои репозитории уже сегодня, собирайте отклики комьюнити и двигайтесь к победе.
Информация об организаторе Акции, о правилах проведения Акции, количестве призов, сроках, месте и порядке их получения размещена по ссылке
5 полезных CSS функций
5 примеров с применением CSS-функции @function — от отрицания значений и создания полупрозрачных цветов до адаптивной типографики и условного скругления углов. Эти функции делают CSS более выразительным и динамичным. Работает с Chrome версии 139.
https://una.im/5-css-functions/
Получи грант за свое мини-приложение от VK Mini Apps 🎯
Придумал игру, сервис или фичу, от которой все друзья скажут «Вау»?
Во втором этапе VK Dev Grants разработчики могут получить по 150 000₽ за мини-приложение и по 800 000₽ в финале конкурса.
🛠 Менторы — есть.
🚀 Продвижение — есть.
💰 Гранты на каждом этапе — тоже есть.
Игры, соцсервисы, инструменты для блогеров — твори как хочешь. Главное — сделать и показать результат.
📅 Участвовать можно в любой момент, хоть в одиночку, хоть с командой.
📌 Подай заявку до 5 октября.
Привет! Чуть не забыл подвести итоги розыгрыша билета на Podlodka React Crew 3 😅
Желающих не так много и шансы на победу были велики у всех. Но повезло больше @halahot. Поздравляем!
Для всех остальных, кто желает послушать крутые доклады действует промокод react_crew_3_75eI9e!
Всем добра ✌️
Пара вещей про href в ссылках, о которых вы, возможно, не догадывались
Неожиданный спектр значений атрибута href — от протоколов mailto:, tel: до ссылок вроде href=".", href="?", data:-URI и медиа-фрагментов с временными метками. Мелочи, которые делают поведение ссылок более гибким и полезным.
https://blog.jim-nielsen.com/2025/href-value-possibilities/
Структуры данных для front end (и не только)
Разбор наиболее популярных структур данных: особенности , преимущества и недостатки.
https://habr.com/ru/companies/habr_rutube/articles/934130
Интерактивные примеры и демо тут
Сапер в 100 строк на чистом JavaScript
Простой туториал, который поможет вам лучше понять правила игры.
https://slicker.me/javascript/mine/minesweeper.htm
CSS лифт: конечный автомат на чистом CSS для навигации по этажам
Как при помощи современных возможностей CSS можно создать полнофункциональный лифт с перемещением между этажами без JavaScript. Интерфейс работает как конечный автомат: пользователь выбирает этаж, и благодаря состояниям CSS лифт «понимает», куда ему двигаться.
https://css-tricks.com/css-elevator-a-pure-css-state-machine-with-floor-navigation/
Бросаем кости с CSS random()
Новая CSS-функция random() (доступна в Safari Technology Preview) — позволяет генерировать рандомные значения прямо в стилях: позицию, цвет, размеры, анимации и многое другое — без единой строки JavaScript
https://webkit.org/blog/17285/rolling-the-dice-with-css-random
Что такое Generative Engine Optimization (GEO)?
Generative Engine Optimization (GEO) — новый подход, который помогает создавать контент, чтобы AI-движки (например, ChatGPT, Google AI-Overviews, Perplexity) ссылались на ваш сайт напрямую в своих ответах, а не просто выводили его среди ссылок в выдаче. В отличие от SEO, ориентированного на рейтинги и клики, GEO ставит задачу — стать частью ответа AI, и включает оптимизацию структуры, цитируемости, авторитетности контента и семантики.
https://www.sitepoint.com/generative-engine-optimization
Начните карьеру в IT с профессии Frontend-разработчика
Frontend-разработчик создает визуальную часть сайтов и приложений, с которой взаимодействуют пользователи. Это востребованная профессия с отличными перспективами роста и высоким уровнем дохода.
Преимущества профессии:
— Высокий доход: от 70 000 рублей для начинающих специалистов, до 300 000 рублей для опытных разработчиков
— Широкие возможности для работы: IT-компании, банки, стриминговые сервисы, фриланс
— Гибкий график: 50% вакансий предлагают удаленный формат работы
Чем занимается Frontend-разработчик:
— Создает адаптивные интерфейсы, которые корректно отображаются на любых устройствах
— Разрабатывает интерактивные элементы: формы, кнопки, анимации
— Оптимизирует производительность сайтов и приложений
— Работает с современными технологиями: HTML, CSS, JavaScript, React, Vue.js
С чего начать обучение:
— Освоить основы HTML и CSS
— Изучить JavaScript и принципы работы с DOM
— Практиковаться на реальных проектах
— Изучить популярные фреймворки (React, Vue.js, Angular)
Получите подробную карту развития (Skill-map) для frontend-разработчика и узнайте, как построить успешную карьеру в IT.
Зарегистрируйтесь и скачайте гайд → https://otus.pw/Fe12/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
Оптимизация PWA под различные вариации Display Mode
Как в PWA можно учитывать разные режимы отображения — fullscreen, standalone, minimal-ui и browser — чтобы PWA выглядело как нативное приложение без потери удобства.
При использовании таких режимов разработчикам важно помнить, что пользователи теряют привычные возможности браузера — кнопки назад, обновления, копирования URL и т.п., поэтому нужно подстраивать интерфейс под контекст установки и отображения.
https://smashingmagazine.com/2025/08/optimizing-pwas-different-display-modes/
WebSocket DevTools
Инструмент для Chrome DevTools, позволяющий в реальном времени отслеживать WebSocket-соединения: просматривать сообщения, перехватывать и блокировать их, а также симулировать ответы клиента и сервера.
https://github.com/law-chain-hot/websocket-devtools
Smart Layouts. CSS Day - 06.06.2025
Концепция Smart Layouts, которую представил Ахмад Шаид на выступлении на CSS Day 2025 — адаптивные CSS-макеты, которые сами «принимают умные решения» благодаря современным возможностям: clamp(), :has(), container queries и другим.
https://ishadeed.com/article/smart-layouts-talk-css-day/
Hyvector
Современный веб редактор для SVG.
https://www.hyvector.com/
Введение в Intl API
Intl API — встроенный браузерный инструмент для локализации, который позволяет нативно форматировать даты, числа, списки, относительное время, правилa множественного числа и даже отображение имён языков и регионов. Вместо тяжёлых сторонних библиотек, Intl предлагает лёгкие, быстрые и стандартизированные решения для адаптации интерфейса к разным культурным особенностям.
https://www.smashingmagazine.com/2025/08/power-intl-api-guide-browser-native-internationalization/
Простое и понятное введение в SVG
Джош Комю объясняет основы SVG — от простых форм (<circle>, <rect>) до анимаций и inline-примитивов, которые работают как полноценные DOM-элементы, управляемые через CSS и JavaScript.
https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/
Генератор заглавной картинки для Github профиля
Простой генератор, чтобы разнообразить вашу страницу на Github.
https://leviarista.github.io/github-profile-header-generator/
Pattern Monster: 300+ настраиваемых SVG паттернов
Простой онлайн-генератор SVG шаблонов, которые можно использовать в качестве фона без сильного влияния на время загрузки сайта.
https://pattern.monster/
⚙️ Микросервисы начинают тормозить под нагрузкой?
💡 Узнайте, как масштабировать и оптимизировать систему с помощью CQRS и Event Sourcing на .NET Aspire.
На открытом вебинаре «Оптимизация микросервисов с CQRS и Event Sourcing на .NET Aspire» 19 августа в 20:00 МСК разберем:
◽️ Ограничения классических микросервисов при высокой нагрузке.
◽️ Принципы разделения команд и запросов (CQRS) и хранения истории через Event Sourcing.
◽️ Практическую реализацию: сервис заказов с «команда-обработчик» и хранением событий в MongoDB.
◽️ Конфигурацию проекций для чтения данных.
❗️ Вы освоите оркестрацию через .NET Aspire (API Gateway, Order Service, база событий), внедрите логирование и трейсинг через OpenTelemetry, а также протестируете создание заказа, обновление статуса и визуализацию потока событий.
➡️ Посетите открытый урок и получите скидку на большое обучение «C# ASP.NET Core разработчик»: https://otus.pw/aU0F/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
CSS Questions
Более 100 вопросов для проверки своих знаний по CSS. Вопросы разного уровня сложности, так что даже знатоки найдут для себя что-то новое.
https://css-questions.com/