🚀 Статьи, новости, туториалы по 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
Новоe CSS-свойство margin-trim
Оно позволяет автоматически обрезать внешние отступы своих дочерних элементов, примыкающих к его краям. Это упрощает создание макетов без необходимости вручную удалять отступы у первого и последнего дочерних элементов. Поддерживается пока только в Safari.
https://webkit.org/blog/16854/margin-trim/
Что такое Owl Selector (а я думал сова)?
Как и когда удобно применять селектор вида (* + *), а также существующие альтернативы ему.
https://www.youtube.com/watch?v=0O0ssm70g1g
Улучшаем типографику с помощью единиц line-height
О новой экспериментальной возможности в WebKit — единицах line-height, таких как lh, rlh, cqh, позволяющих задавать размеры элементов на основе текущей высоты строки. Это упрощает создание адаптивной типографики и позволяет разработчикам лучше контролировать вертикальные ритмы в дизайне.
https://webkit.org/blog/16831/line-height-units/
Favicon v2025
Как готовить favicon в соответствии с требованиями десктоп и мобильных браузеров + PWA в 2025.
https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
Экспериментальные функции в React: ViewTransition и Activity
Компонент <ViewTransition>
позволяет легко добавлять анимации при переходах между состояниями интерфейса, используя новый API браузера startViewTransition
.
Компонент <Activity>
предоставляет возможность управлять отображением частей UI, скрывая или показывая их в зависимости от активности.
https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more
CSS Hell
15 CSS головоломок для пытливых умов, где нужно менять свойства для того чтобы сматчить элементы.
https://csshell.com/
Делаем карусели с GSAP
Руководство от Тома Миллера по созданию каруселей: от простых до продвинутых.
https://tympanus.net/codrops/2025/04/21/mastering-carousels-with-gsap-from-basics-to-advanced-animation/
⚡ Дождались! Ребята сделали крутейший канал про Frontend
Здесь на простых картинках и понятном языке обучают фронтенд-разработке, делятся полезными фишками и ресурсами
Подписывайтесь: @FrontendPortal
Session vs JWT: различия, которые стоит знать
Различия между сессионной аутентификацией и использованием JSON Web Tokens для управления пользовательскими сессиями. О работе каждого из этих методов, их преимуществах и недостатках, а также ситуациях, в которых предпочтительнее использовать тот или иной подход.
https://www.youtube.com/watch?v=fyTxwIa-1U0
Создавать сайты и приложения с нуля и зарабатывать 200+ тысяч рублей?
Фулстек-разработчик — программист с универсальными навыками и знанием нескольких языков, один из самых востребованных специалистов на рынке.
Именно таких мы готовим на совместной программе Нетологии и ВШЭ онлайн-бакалавриата «Программные системы и автоматизация процессов разработки».
Хотите узнать о программе подробнее? Ждём вас 29 апреля на дне открытых дверей.
В программе:
● встреча с академическим руководителем, научным руководителем и ментором программы;
● рассказ о том, чем занимается фулстек-разработчик и почему это одна из наиболее востребованных профессий на рынке;
● обзор онлайн-бакалавриата: как устроено обучение и практика, стажировки, кто преподаёт на программе.
День открытых дверей — возможность познакомиться с, возможно, вашей будущей профессией. Ждём вас!
Реклама. ООО "Нетология", ИНН: 7726464125, erid: 2VSb5zBMESc
Улучшаем производительность SPA
Методы оптимизации одностраничных приложений для улучшения UX.
Анализ узкиx мест: JavaScript-бандлы, неэффективный рендеринг компонентов и частые API-запросы. В качестве решений: разделение кода, ленивая загрузка, виртуализация и использование Web Workers.
https://dev.to/oltrenin/improving-spa-performance-2k2g
Продвинутый React в дикой природе
Сборник кейсов от инженерных команд, использующих React и Next.js в крупных проектах за последние пару лет.
Рассматриваются реальные примеры оптимизации производительности, такие как улучшение метрики INP, переход от клиентского к серверному рендерингу и внедрение современных подходов к управлению состоянием и маршрутизации.
https://largeapps.dev/case-studies/advanced/
Создание перекидного табло на JS
Пошаговый процесс создания анимации табло аэропорта с помощью GSAP.
Демо: https://codepen.io/jh3y/pen/yyLmeJd
https://craftofui.substack.com/p/time-travel-with-javascript
Погружаемся в работу сети
Как данные передаются от сервера к вашему устройству? Подробная статья о модели OSI и TCP/IP, а также протоколах TCP, UDP и HTTP. Пошаговое описание того, как данные проходят через различные уровни сетевой модели, превращаясь из запроса в браузере в электрические сигналы, которые пересекают океаны, чтобы достичь вашего экрана.
https://www.deepintodev.com/blog/how-data-travels-the-world-to-reach-your-screen
Глубокое погружение в React Reconciliation
Подробное объяснение, как React обновляет DOM с помощью алгоритма reconciliation, как React сохраняет или сбрасывает состояние в зависимости от типа и позиции элементов в дереве компонентов. Плюсом обсуждаются внутренние структуры React и даются советы по оптимизации производительности.
https://cekrem.github.io/posts/react-reconciliation-deep-dive/
Справочник по операторам JS
Удобный интерактивный справочник по JavaScript-операторам с примерами использования.
https://www.joshwcomeau.com/operator-lookup/
Пишем эффективные и понятных сообщений об ошибках
О том, почему важно использовать простой язык, избегая технического жаргона и как не раздражать пользователей в стрессовых ситуациях. Рекомендации по формулировке четких инструкций для исправления ошибок чтобы повысить ясность и доверие к интерфейсу.
https://piccalil.li/blog/how-to-write-error-messages-that-actually-help-users-rather-than-frustrate-them/
Кто на оплачиваемую стажировку в бигтех?
Т-Банк зовет студентов и начинающих специалистов решать реальные бизнес-задачи с шансом попасть в штат.
Вот что вас ждет:
— 6 направлений на выбор: разработка, аналитика, QA, PR, маркетинг и менеджмент.
— Плавное погружение в задачи: помощь ментора и команды.
— Удобный формат: от 20 до 40 часов в неделю, удаленно или в офисе.
— Возможность совмещать с учебой, сессией и экзаменами.
— Официальное оформление, оплата и рабочая техника.
— Доступ к базе знаний с курсами и вебинарами.
Выбирайте направление по душе и успейте пройти отбор до 13 мая
LaLoka Layouts
Коллекция макетов и компонентов, созданных с Tailwind CSS. Готовые и адаптивные шаблоны для ускорения разработки.
https://layoutsfortailwind.lalokalabs.dev/
Хотите собрать первое приложение на React за 60 минут?
Присоединяйтесь к открытому уроку от OTUS. Без скучных теорий и банальных todo-листов: только практика, код и живое общение. Вы узнаете, зачем нужны хуки и как компоненты делают интерфейс «живым», и самостоятельно создадите интерактивную игру.
Урок пройдет в преддверии старта курса «React.js Developer». Каждый участник вебинара получит скидку на обучение.
Встречаемся 7 мая в 20:00 МСК, регистрируйтесь прямо сейчас, чтобы не пропустить: https://otus.pw/MA7LW/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
JSON Mocker
Онлайн сервис, позволяющий генерировать JSON данные в соответствии со схемой.
https://laurawebdev.github.io/json-mocker/
Создаем offline-friendly систему загрузки изображений
Как с помощью IndexedDB, service workers и Background Sync API создать приложение, устойчивое к перебоям с сетью.
https://www.smashingmagazine.com/2025/04/building-offline-friendly-image-upload-system/
Настраиваем ts-config.json
Описание основных и экспериментальных параметров ts-config и на что они влияют в итоге при компиляции.
https://jsdevspace.substack.com/p/mastering-tsconfigjson-the-ultimate
Что делает директива 'use client'?
Ден Абрамов рассказывает об использовании 'use client' в новых архитектурах React, где серверные и клиентские компоненты сочетаются друг с другом. А также о типичных ошибках и ограничениях, связанных с использованием этой директивы.
https://overreacted.io/what-does-use-client-do/
Используем Chrome Identity API
Заметка о том, как и где быстро получить oauth client id и как его использовать в расширениях chrome для удобной аутентификации пользователей.
https://jem-space.ru/chrome-identity/
Новый API Cookie Store
Асинхронный и структурированный способ управления куками в браузерах.
3 ключевых преимущества: улучшение производительности за счёт асинхронного доступа, возможность отслеживания изменений кук через событие change и стандартизация, упрощающую создание общих SDK
https://fotis.xyz/posts/the-new-cookie-store-api/
<dl> — еще одна находка, которую вы никогда не используете
Если вы никогда не слышали про элемент <dl>, то вы не одиноки 😁
Для него не так много кейсов, но отображение списков состоящих из пар ключ-значение — самое то!
https://christianheilmann.com/2025/04/18/keeping-it-on-the-dl-another-html-gem-you-never-use/
Добавляем визуальных эффектов с backdrop-filter
Методы комбинирования backdrop-filter
с другими CSS-эффектами для создания сложных и интересных дизайнов
https://css-tricks.com/using-css-backdrop-filter-for-ui-effects/
Летняя школа разработки интерфейсов Яндекса открывает прием заявок
Прокачать скиллы фронтенд-разработки и поработать над реальными бизнес-задачами можно в Летней школе Яндекса. Это топовая возможность разобраться в тонкостях создания удобных и надёжных интерфейсов.
Школа пройдет в два этапа:
— со 2 июня по 27 июля участников ждут лекции и практические задания в онлайне
— с 28 июля по 24 августа участники объединятся в полноценные фулстек-команды, чтобы поработать над реальными продуктами и фичами. Каждую группу будет сопровождать опытный наставник компании.
Участие бесплатное, а лучшие смогут попасть на стажировку в Яндекс или даже получить офер.
Если основы JavaScript и HTML/CSS уже знакомы — отправляй заявку до 27 апреля.
Топ 5 ошибок в CSS меню навигации
Частые ошибки, которые допускают разработчики при реализации навигации. Обратите на них внимание, и вашим меню станет пользоваться намного удобнее.
https://blog.css-weekly.com/top-5-css-navigation-menu-mistakes