Фронтендер от бога – Telegram
Фронтендер от бога
3.89K subscribers
1.12K photos
19 videos
1.08K links
Божественные дайджесты по фронтенду и немного юмора.

По всем вопросам: @godinmedia
Download Telegram
Web Workers и React: как разгрузить UI и ускорить приложение

#почитать

Если вы хоть раз пробовали обрабатывать большой файл, парсить массив из сотен тысяч элементов или запускать сложные вычисления прямо в React-компоненте, то наверняка сталкивались с тем, что интерфейс подвисает, кнопки перестают реагировать, анимации застывают, и всё на секунду подвисает, пока скрипт не разлучит нас (ой, это не из этой сказки) завершит свою работу.

Почему так происходит? Всё дело в том, что React, как и JS, в браузере работает на одном основном потоке. Точнее, чтобы меня не закидали помидорами, React — это библиотека JS, и она полностью работает в основном потоке браузера, который однопоточен. Когда вы запускаете тяжёлую синхронную задачу, она полностью занимает этот поток и блокирует его, мешая браузеру рендерить интерфейс и обрабатывать события пользователя.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6👎2
и не говорите, что работы нету 😁
😁12
▫️Как работает звук в браузере

#посмотреть

Все люди на планете слушают музыку. Кто-то — по радио в машине, кто-то дома на своём виниловом проигрывателе, а кто-то вживую на концерте любимой группы. Но больше всего мы слушаем музыку в аудиостримингах: в Spotify, Apple Music, Звук, ВК или Яндекс.Музыке.

Расскажу про основные технологии, которые применяются для воспроизведения и управления аудио в вебе: HTML5 Audio и Web Audio API. Пройдём путь от того, как воспроизводить локальные аудиофайлы, до продвинутых библиотек для работы с потоковым аудио в высоком качестве.

Между делом поговорим про поддерживаемые браузером кодеки, технологию адаптивного стриминга HLS, буферизацию и о том, как работает Hi-Fi качество.

Смотреть на YouTube ⏱️40 минут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
React Custom Hook: useGeolocation

#почитать

Одним из ключевых преимуществ useGeolocation является его простота. Благодаря инкапсуляции сложной логики, необходимой для доступа к геолокации и ее обработки, этот хук обеспечивает чистое и многократно используемое решение. Хук автоматически обрабатывает состояние загрузки, обновляя его при загрузке данных геолокации, и устанавливает состояние ошибки, если в процессе возникают какие-либо проблемы.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Как я устал вручную писать сервис-воркеры и сделал next-pwa-pack, чтобы больше не страдать

#почитать

Словом, если ты когда-то пробовал прикрутить оффлайн-режим к Next.js-проекту, ты наверняка вспоминал всех, кто придумал этот стек. Я — точно. Поэтому, как человек, у которого было слишком много кофе и слишком мало терпения, я сделал единственное разумное: написал свою обёртку.

Так и появился next-pwa-pack — дроп-ин пакет, который превращает любой Next.js-проект в полноценное PWA, буквально одной строкой. Да, даже с App Router. Просто заворачиваешь свой layout в PWAProvider, и всё: приложение можно установить, оно кэширует страницы, работает оффлайн, синхронизирует вкладки и даже показывает отладочную панель, чтобы не гадать, сработало ли что-нибудь. Воткнул — и живи дальше.


Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
HTMX, AlpineJS, SSR v1/2/3 и SPA. Что к чему

#почитать

HTMX и AlpineJSэто две JS библиотеки, которые расширяют HTML специальными аттрибутами и позволяют писать фронтенд без SPA фреймворков.

Это альтернативы React/Vue/Angular и иже с ними. Их появление вызвано усталостью от сложной JS экосистемы и тоской по временам, когда задачи решались с помощью PHP и jQuery.

Я всю жизнь писал JSON API и SPA интерфейсы и моему мозгу трудно было переварить, зачем нужны эти библиотеки и как с ними работать. Поэтому я написал эту статью.


Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥2
Паттерны современного Node.js (2025)

#почитать

Node.js претерпел впечатляющее преобразование с момента своего появления. Если вы пишете на Node.js уже несколько лет, то, вероятно, сами наблюдали эту эволюцию - от эпохи колбэков и повсеместного использования CommonJS до современного, чистого и стандартизированного подхода к разработке.

Изменения затронули не только внешний вид - это фундаментальный сдвиг в самом подходе к серверной разработке на JavaScript. Современный Node.js опирается на веб-стандарты, снижает зависимость от внешних библиотек и предлагает более понятный и приятный опыт для разработчиков.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍1
Разработка Битрикс-бота: история о том, как документация врала, а облака смеялись

#почитать

Сегодня я расскажу вам историю о том, какая задача посетила меня на этот раз и как я сделал «корпоративного бота с возможностью оценки сотрудников» — казалось бы, простая задача, но


Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍2
Структуры данных для frontend-разработчиков с реальными примерами

#почитать

В этой статье вы найдете разбор нескольких структур данных, которые мы считаем наиболее важными и которые чаще всего пригождаются. Описание их преимуществ, особенностей и демонстрацию применения на примерах. Для всех рассматриваемых в статье структур данных мы подготовили реальные примеры и выложили код на Github

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
так и есть
😁166😢2
▫️Математика в CSS: что и зачем считать для стилей

#посмотреть

Современный CSS умеет в тригонометрию, округления, возведение в степень, логарифмы и даже в логические операции. Но при первом знакомстве с математическими функциями обычно возникает вопрос: «Зачем?»

Смотреть на YouTube ⏱️45 минут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Интересная задача с собеседования

#почитать

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


Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
же
👍8
React Custom Hook: useDebounce

#почитать

В этой серии статей мы отправимся в путешествие по миру пользовательских хуков React, открывая для себя их огромный потенциал для улучшения ваших проектов разработки. Сегодня мы сосредоточимся на хуке useDebounce, одном из многих тщательно разработанных хуков, доступных в коллекции пользовательских хуков React.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Принцип открытости/закрытости SOLID в React

#почитать

Разберём этот принцип сначала на примере классов. Да, в React они используются не так часто, и вы будете правы, если заметите это. Но сам подход прекрасно переносится и на другие сущности — например, на компоненты. Сейчас важнее понять саму идею, а чуть позже я покажу, как этот принцип используется при работе с React компонентами.

Как мы знаем, проект постоянно развивается: появляются новые задачи, а вместе с ними — изменения и дополнения в коде. Любые правки увеличивают вероятность ошибок. Это естественно, но хочется свести такие риски к минимуму. Для этого код должен быть как можно менее связанным: так изменения затрагивают меньшее количество участков кода.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
😡6👍1
This media is not supported in your browser
VIEW IN TELEGRAM
🪐 Новые вакансии фронтендеров


🚀 Frontend-разработчик в ДТ-Софт, 230 000 - 310 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-dt-soft-f382489d

🚀 Frontend-разработчик в Алабуга.Политех, oт 150 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-alabugapoliteh-6b3633d0

🚀 Frontend-разработчик в OQTACORE, oт 80 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-oqtacore-e80afb43

🚀 Frontend Developer в Vital Partners, 600 000 - 800 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-developer-vital-partners-a2f24c92

🚀 Frontend-разработчик в Placebo/25, 110 000 - 150 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-placebo25-2e5b0ca6

🚀 Junior frontend-разработчик (Vue.js), 60 000 - 155 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/junior-frontend-razrabotchik-vuejs-nda-9c5ebd30

🚀 Фронтенд-разработчик в Гуддело, oт 35 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-guddelo-cd81dfd9

🚀 Фронтенд-разработчик в Data World, до 200 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-data-world-ad1d66b9

🚀 Фронтенд-разработчик в Продуктовая лаборатория Mish, 160 000 - 250 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/frontend-razrabotchik-produktovaya-laboratoriya-mish-e457265f

🚀 Fullstack Developer (React/Java) в Транслогика, 200 000 - 230 000 ₽
Подробнее ➡️
https://jobrocket.ru/job/fullstack-developer-reactjava-translogika-0cf0dc4f


Больше вакансий здесь ⤵️
https://jobrocket.ru/?categories=frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Зачем нужны логические свойства CSS

#почитать

Сегодня я хотел бы поговорить о логических свойствах CSS — новом (и, возможно, более эффективном) способе определения свойств, которые по своей природе являются направленными.


Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4👍2
Красим посещённые ссылки: псевдоклассы :link, :visited и :any-link

#почитать

Когда вы создаёте веб-страницу, ссылки — один из ключевых элементов интерфейса. Они помогают пользователям перемещаться по сайту или переходить на внешние ресурсы. Но как сделать так, чтобы пользователь сразу понял, какие ссылки он уже посещал, а какие — нет? На помощь приходят псевдоклассы CSS :link, :visited и :any-link. Эти инструменты позволяют стилизовать ссылки в зависимости от их состояния, улучшая навигацию и пользовательский опыт. В этой статье мы разберём, как они работают, их историю, особенности и как безопасно использовать их в 2025 году.

Псевдоклассы :link и :visited существуют с самого зарождения CSS, появившись в спецификации CSS1 в 1996 году. Тогда веб был преимущественно текстовым, и ссылки играли центральную роль в навигации. Разработчики хотели, чтобы пользователи могли визуально отличать непосещённые ссылки от тех, на которые они уже кликали. :link отвечал за стилизацию непосещённых ссылок, а :visited — посещённых, основываясь на истории браузера.

Псевдокласс :any-link появился значительно позже, в спецификации CSS Selectors Level 4, чтобы упростить стилизацию ссылок независимо от их состояния (посещённые или нет). Он стал частью стандарта в 2022 году и быстро получил поддержку в браузерах. Эти псевдоклассы остаются важной частью веб-разработки, помогая создавать интуитивно понятные интерфейсы.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Promise.try: единый вход для sync/async и единая обработка ошибок

#почитать

Не раз ловил себя на том, как в код-ревью всплывает одна и та же проблема: часть наших функций синхронные, часть асинхронные, а часть ведут себя как шрёдингеровские коты и делают вид, что синхронны, пока не дотронешься. В итоге в одном месте у нас try/catch, в другом .catch, где-то внезапно падает исключение, а в соседнем модуле молча утекает Promise. С появлением нативного Promise.try стало проще навести порядок и избавиться от разнобоя. Фича прошла процесс стандартизации в TC39 и включена в спецификацию ECMAScript 2026, при этом уже с января доступна в актуальных движках. Можно перестать спорить про обёртку из Promise.resolve().then и получить единый вход для sync/async с нормальной обработкой ошибок.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5