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

По всем вопросам: @godinmedia
Download Telegram
▫️Как работает звук в браузере

#посмотреть

Все люди на планете слушают музыку. Кто-то — по радио в машине, кто-то дома на своём виниловом проигрывателе, а кто-то вживую на концерте любимой группы. Но больше всего мы слушаем музыку в аудиостримингах: в 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
События keydown и keyup в JavaScript: управление клавиатурой

#почитать

Когда вы создаёте интерактивные веб-приложения, взаимодействие с клавиатурой пользователя становится важной частью. Хотите, чтобы ваш сайт реагировал на нажатие клавиши Enter для отправки формы? Или, может, мечтаете сделать простую браузерную игру, где персонаж движется при нажатии стрелок? Для этого в JavaScript есть события keydown и keyup. Они позволяют отслеживать, когда пользователь нажимает или отпускает клавишу. В этой статье мы разберём, как работают эти события, их историю, особенности и как безопасно использовать их в 2025 году.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5
Значения по умолчанию с оператором нулевого слияния

#почитать

Оператор нулевого слияния (??) предоставляет простой способ обработки null или undefined значений в JavaScript. Он просто необходим, и я расскажу, почему.


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