front_end_dev | Технологии

Telegram-канал front_end_dev - FrontEndDev

29749

🚀 Статьи, новости, туториалы по 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

Подписаться на канал

FrontEndDev

Новоe CSS-свойство margin-trim

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

https://webkit.org/blog/16854/margin-trim/

Читать полностью…

FrontEndDev

Что такое Owl Selector (а я думал сова)?

Как и когда удобно применять селектор вида (* + *), а также существующие альтернативы ему.

https://www.youtube.com/watch?v=0O0ssm70g1g

Читать полностью…

FrontEndDev

Улучшаем типографику с помощью единиц line-height

О новой экспериментальной возможности в WebKit — единицах line-height, таких как lh, rlh, cqh, позволяющих задавать размеры элементов на основе текущей высоты строки. Это упрощает создание адаптивной типографики и позволяет разработчикам лучше контролировать вертикальные ритмы в дизайне.

https://webkit.org/blog/16831/line-height-units/

Читать полностью…

FrontEndDev

Favicon v2025

Как готовить favicon в соответствии с требованиями десктоп и мобильных браузеров + PWA в 2025.

https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs

Читать полностью…

FrontEndDev

Экспериментальные функции в React: ViewTransition и Activity

Компонент <ViewTransition> позволяет легко добавлять анимации при переходах между состояниями интерфейса, используя новый API браузера startViewTransition.
Компонент <Activity> предоставляет возможность управлять отображением частей UI, скрывая или показывая их в зависимости от активности.

https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more

Читать полностью…

FrontEndDev

CSS Hell

15 CSS головоломок для пытливых умов, где нужно менять свойства для того чтобы сматчить элементы.

https://csshell.com/

Читать полностью…

FrontEndDev

Делаем карусели с GSAP

Руководство от Тома Миллера по созданию каруселей: от простых до продвинутых.

https://tympanus.net/codrops/2025/04/21/mastering-carousels-with-gsap-from-basics-to-advanced-animation/

Читать полностью…

FrontEndDev

Дождались! Ребята сделали крутейший канал про Frontend

Здесь на простых картинках и понятном языке обучают фронтенд-разработке, делятся полезными фишками и ресурсами

Подписывайтесь: @FrontendPortal

Читать полностью…

FrontEndDev

Session vs JWT: различия, которые стоит знать

Различия между сессионной аутентификацией и использованием JSON Web Tokens для управления пользовательскими сессиями. О работе каждого из этих методов, их преимуществах и недостатках, а также ситуациях, в которых предпочтительнее использовать тот или иной подход.

https://www.youtube.com/watch?v=fyTxwIa-1U0

Читать полностью…

FrontEndDev

Создавать сайты и приложения с нуля и зарабатывать 200+ тысяч рублей?

Фулстек-разработчик — программист с универсальными навыками и знанием нескольких языков, один из самых востребованных специалистов на рынке.

Именно таких мы готовим на совместной программе Нетологии и ВШЭ онлайн-бакалавриата «Программные системы и автоматизация процессов разработки».

Хотите узнать о программе подробнее? Ждём вас 29 апреля на дне открытых дверей.

В программе:
● встреча с академическим руководителем, научным руководителем и ментором программы;
● рассказ о том, чем занимается фулстек-разработчик и почему это одна из наиболее востребованных профессий на рынке;
● обзор онлайн-бакалавриата: как устроено обучение и практика, стажировки, кто преподаёт на программе.

День открытых дверей — возможность познакомиться с, возможно, вашей будущей профессией. Ждём вас!

Реклама. ООО "Нетология", ИНН: 7726464125, erid: 2VSb5zBMESc

Читать полностью…

FrontEndDev

Улучшаем производительность SPA

Методы оптимизации одностраничных приложений для улучшения UX.
Анализ узкиx мест: JavaScript-бандлы, неэффективный рендеринг компонентов и частые API-запросы. В качестве решений: разделение кода, ленивая загрузка, виртуализация и использование Web Workers.

https://dev.to/oltrenin/improving-spa-performance-2k2g

Читать полностью…

FrontEndDev

Продвинутый React в дикой природе

Сборник кейсов от инженерных команд, использующих React и Next.js в крупных проектах за последние пару лет.

Рассматриваются реальные примеры оптимизации производительности, такие как улучшение метрики INP, переход от клиентского к серверному рендерингу и внедрение современных подходов к управлению состоянием и маршрутизации.

https://largeapps.dev/case-studies/advanced/

Читать полностью…

FrontEndDev

Создание перекидного табло на JS

Пошаговый процесс создания анимации табло аэропорта с помощью GSAP.

Демо: https://codepen.io/jh3y/pen/yyLmeJd

https://craftofui.substack.com/p/time-travel-with-javascript

Читать полностью…

FrontEndDev

Погружаемся в работу сети

Как данные передаются от сервера к вашему устройству? Подробная статья о модели OSI и TCP/IP, а также протоколах TCP, UDP и HTTP. Пошаговое описание того, как данные проходят через различные уровни сетевой модели, превращаясь из запроса в браузере в электрические сигналы, которые пересекают океаны, чтобы достичь вашего экрана.

https://www.deepintodev.com/blog/how-data-travels-the-world-to-reach-your-screen

Читать полностью…

FrontEndDev

Глубокое погружение в React Reconciliation

Подробное объяснение, как React обновляет DOM с помощью алгоритма reconciliation, как React сохраняет или сбрасывает состояние в зависимости от типа и позиции элементов в дереве компонентов. Плюсом обсуждаются внутренние структуры React и даются советы по оптимизации производительности.

https://cekrem.github.io/posts/react-reconciliation-deep-dive/

Читать полностью…

FrontEndDev

Справочник по операторам JS

Удобный интерактивный справочник по JavaScript-операторам с примерами использования.

https://www.joshwcomeau.com/operator-lookup/

Читать полностью…

FrontEndDev

Пишем эффективные и понятных сообщений об ошибках

О том, почему важно использовать простой язык, избегая технического жаргона и как не раздражать пользователей в стрессовых ситуациях. Рекомендации по формулировке четких инструкций для исправления ошибок чтобы повысить ясность и доверие к интерфейсу.

https://piccalil.li/blog/how-to-write-error-messages-that-actually-help-users-rather-than-frustrate-them/

Читать полностью…

FrontEndDev

Кто на оплачиваемую стажировку в бигтех?

Т-Банк зовет студентов и начинающих специалистов решать реальные бизнес-задачи с шансом попасть в штат.

Вот что вас ждет:

— 6 направлений на выбор: разработка, аналитика, QA, PR, маркетинг и менеджмент.
— Плавное погружение в задачи: помощь ментора и команды.
— Удобный формат: от 20 до 40 часов в неделю, удаленно или в офисе.
— Возможность совмещать с учебой, сессией и экзаменами.
— Официальное оформление, оплата и рабочая техника.
— Доступ к базе знаний с курсами и вебинарами.

Выбирайте направление по душе и успейте пройти отбор до 13 мая

Читать полностью…

FrontEndDev

LaLoka Layouts

Коллекция макетов и компонентов, созданных с Tailwind CSS. Готовые и адаптивные шаблоны для ускорения разработки.

https://layoutsfortailwind.lalokalabs.dev/

Читать полностью…

FrontEndDev

Хотите собрать первое приложение на React за 60 минут?

Присоединяйтесь к открытому уроку от OTUS. Без скучных теорий и банальных todo-листов: только практика, код и живое общение. Вы узнаете, зачем нужны хуки и как компоненты делают интерфейс «живым», и самостоятельно создадите интерактивную игру.

Урок пройдет в преддверии старта курса «React.js Developer». Каждый участник вебинара получит скидку на обучение.

Встречаемся 7 мая в 20:00 МСК, регистрируйтесь прямо сейчас, чтобы не пропустить: https://otus.pw/MA7LW/

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Читать полностью…

FrontEndDev

JSON Mocker

Онлайн сервис, позволяющий генерировать JSON данные в соответствии со схемой.

https://laurawebdev.github.io/json-mocker/

Читать полностью…

FrontEndDev

Создаем offline-friendly систему загрузки изображений

Как с помощью IndexedDB, service workers и Background Sync API создать приложение, устойчивое к перебоям с сетью.

https://www.smashingmagazine.com/2025/04/building-offline-friendly-image-upload-system/

Читать полностью…

FrontEndDev

Настраиваем ts-config.json

Описание основных и экспериментальных параметров ts-config и на что они влияют в итоге при компиляции.

https://jsdevspace.substack.com/p/mastering-tsconfigjson-the-ultimate

Читать полностью…

FrontEndDev

Что делает директива 'use client'?

Ден Абрамов рассказывает об использовании 'use client' в новых архитектурах React, где серверные и клиентские компоненты сочетаются друг с другом. А также о типичных ошибках и ограничениях, связанных с использованием этой директивы.

https://overreacted.io/what-does-use-client-do/

Читать полностью…

FrontEndDev

Используем Chrome Identity API

Заметка о том, как и где быстро получить oauth client id и как его использовать в расширениях chrome для удобной аутентификации пользователей.

https://jem-space.ru/chrome-identity/

Читать полностью…

FrontEndDev

Новый API Cookie Store

Асинхронный и структурированный способ управления куками в браузерах.
3 ключевых преимущества: улучшение производительности за счёт асинхронного доступа, возможность отслеживания изменений кук через событие change и стандартизация, упрощающую создание общих SDK

https://fotis.xyz/posts/the-new-cookie-store-api/

Читать полностью…

FrontEndDev

<dl> — еще одна находка, которую вы никогда не используете

Если вы никогда не слышали про элемент <dl>, то вы не одиноки 😁
Для него не так много кейсов, но отображение списков состоящих из пар ключ-значение — самое то!

https://christianheilmann.com/2025/04/18/keeping-it-on-the-dl-another-html-gem-you-never-use/

Читать полностью…

FrontEndDev

Добавляем визуальных эффектов с backdrop-filter

Методы комбинирования backdrop-filter с другими CSS-эффектами для создания сложных и интересных дизайнов

https://css-tricks.com/using-css-backdrop-filter-for-ui-effects/

Читать полностью…

FrontEndDev

Летняя школа разработки интерфейсов Яндекса открывает прием заявок

Прокачать скиллы фронтенд-разработки и поработать над реальными бизнес-задачами можно в Летней школе Яндекса. Это топовая возможность разобраться в тонкостях создания удобных и надёжных интерфейсов.

Школа пройдет в два этапа:
— со 2 июня по 27 июля участников ждут лекции и практические задания в онлайне
— с 28 июля по 24 августа участники объединятся в полноценные фулстек-команды, чтобы поработать над реальными продуктами и фичами. Каждую группу будет сопровождать опытный наставник компании.


Участие бесплатное, а лучшие смогут попасть на стажировку в Яндекс или даже получить офер.

Если основы JavaScript и HTML/CSS уже знакомы — отправляй заявку до 27 апреля.

Читать полностью…

FrontEndDev

Топ 5 ошибок в CSS меню навигации

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

https://blog.css-weekly.com/top-5-css-navigation-menu-mistakes

Читать полностью…
Подписаться на канал