Web Workers и React: как разгрузить UI и ускорить приложение
#почитать
Если вы хоть раз пробовали обрабатывать большой файл, парсить массив из сотен тысяч элементов или запускать сложные вычисления прямо в React-компоненте, то наверняка сталкивались с тем, что интерфейс подвисает, кнопки перестают реагировать, анимации застывают, и всё на секунду подвисает, пока скрипт не разлучит нас (ой, это не из этой сказки) завершит свою работу.
Почему так происходит? Всё дело в том, что React, как и JS, в браузере работает на одном основном потоке. Точнее, чтобы меня не закидали помидорами, React — это библиотека JS, и она полностью работает в основном потоке браузера, который однопоточен. Когда вы запускаете тяжёлую синхронную задачу, она полностью занимает этот поток и блокирует его, мешая браузеру рендерить интерфейс и обрабатывать события пользователя.
⏱ Читать статью
#почитать
Если вы хоть раз пробовали обрабатывать большой файл, парсить массив из сотен тысяч элементов или запускать сложные вычисления прямо в React-компоненте, то наверняка сталкивались с тем, что интерфейс подвисает, кнопки перестают реагировать, анимации застывают, и всё на секунду подвисает, пока скрипт не разлучит нас (ой, это не из этой сказки) завершит свою работу.
Почему так происходит? Всё дело в том, что React, как и JS, в браузере работает на одном основном потоке. Точнее, чтобы меня не закидали помидорами, React — это библиотека JS, и она полностью работает в основном потоке браузера, который однопоточен. Когда вы запускаете тяжёлую синхронную задачу, она полностью занимает этот поток и блокирует его, мешая браузеру рендерить интерфейс и обрабатывать события пользователя.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6👎2
#посмотреть
Все люди на планете слушают музыку. Кто-то — по радио в машине, кто-то дома на своём виниловом проигрывателе, а кто-то вживую на концерте любимой группы. Но больше всего мы слушаем музыку в аудиостримингах: в Spotify, Apple Music, Звук, ВК или Яндекс.Музыке.
Расскажу про основные технологии, которые применяются для воспроизведения и управления аудио в вебе: HTML5 Audio и Web Audio API. Пройдём путь от того, как воспроизводить локальные аудиофайлы, до продвинутых библиотек для работы с потоковым аудио в высоком качестве.
Между делом поговорим про поддерживаемые браузером кодеки, технологию адаптивного стриминга HLS, буферизацию и о том, как работает Hi-Fi качество.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
React Custom Hook: useGeolocation
#почитать
Одним из ключевых преимуществ 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 опирается на веб-стандарты, снижает зависимость от внешних библиотек и предлагает более понятный и приятный опыт для разработчиков.
⏱ Читать статью
#почитать
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
⏱ Читать статью
#почитать
В этой статье вы найдете разбор нескольких структур данных, которые мы считаем наиболее важными и которые чаще всего пригождаются. Описание их преимуществ, особенностей и демонстрацию применения на примерах. Для всех рассматриваемых в статье структур данных мы подготовили реальные примеры и выложили код на Github
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
#посмотреть
Современный CSS умеет в тригонометрию, округления, возведение в степень, логарифмы и даже в логические операции. Но при первом знакомстве с математическими функциями обычно возникает вопрос: «Зачем?»
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Интересная задача с собеседования
#почитать
⏱ Читать статью
#почитать
Однажды на собеседовании мне предложили решить одну интересную задачу, которая для меня была довольно необычной на тот момент.
Позже я обнаружил, что задача была не особо уникальной, но с высоты моего опыта тогда, она показалась довольно будоражащей.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
React Custom Hook: useDebounce
#почитать
В этой серии статей мы отправимся в путешествие по миру пользовательских хуков React, открывая для себя их огромный потенциал для улучшения ваших проектов разработки. Сегодня мы сосредоточимся на хуке useDebounce, одном из многих тщательно разработанных хуков, доступных в коллекции пользовательских хуков React.
⏱ Читать статью
#почитать
В этой серии статей мы отправимся в путешествие по миру пользовательских хуков React, открывая для себя их огромный потенциал для улучшения ваших проектов разработки. Сегодня мы сосредоточимся на хуке useDebounce, одном из многих тщательно разработанных хуков, доступных в коллекции пользовательских хуков React.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Принцип открытости/закрытости SOLID в React
#почитать
Разберём этот принцип сначала на примере классов. Да, в React они используются не так часто, и вы будете правы, если заметите это. Но сам подход прекрасно переносится и на другие сущности — например, на компоненты. Сейчас важнее понять саму идею, а чуть позже я покажу, как этот принцип используется при работе с React компонентами.
Как мы знаем, проект постоянно развивается: появляются новые задачи, а вместе с ними — изменения и дополнения в коде. Любые правки увеличивают вероятность ошибок. Это естественно, но хочется свести такие риски к минимуму. Для этого код должен быть как можно менее связанным: так изменения затрагивают меньшее количество участков кода.
⏱ Читать статью
#почитать
Разберём этот принцип сначала на примере классов. Да, в React они используются не так часто, и вы будете правы, если заметите это. Но сам подход прекрасно переносится и на другие сущности — например, на компоненты. Сейчас важнее понять саму идею, а чуть позже я покажу, как этот принцип используется при работе с React компонентами.
Как мы знаем, проект постоянно развивается: появляются новые задачи, а вместе с ними — изменения и дополнения в коде. Любые правки увеличивают вероятность ошибок. Это естественно, но хочется свести такие риски к минимуму. Для этого код должен быть как можно менее связанным: так изменения затрагивают меньшее количество участков кода.
Please open Telegram to view this post
VIEW IN TELEGRAM
😡6👍1
Forwarded from джоброкет 🚀 вакансии в IT
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
🚀 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 году и быстро получил поддержку в браузерах. Эти псевдоклассы остаются важной частью веб-разработки, помогая создавать интуитивно понятные интерфейсы.
⏱ Читать статью
#почитать
Когда вы создаёте веб-страницу, ссылки — один из ключевых элементов интерфейса. Они помогают пользователям перемещаться по сайту или переходить на внешние ресурсы. Но как сделать так, чтобы пользователь сразу понял, какие ссылки он уже посещал, а какие — нет? На помощь приходят псевдоклассы 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 с нормальной обработкой ошибок.
⏱ Читать статью
#почитать
Не раз ловил себя на том, как в код-ревью всплывает одна и та же проблема: часть наших функций синхронные, часть асинхронные, а часть ведут себя как шрёдингеровские коты и делают вид, что синхронны, пока не дотронешься. В итоге в одном месте у нас 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