Заметки Фронтендера

бизнестрендс — легендарный агрегатор всего, что происходит в бизнесе и маркетинге прямо сейчас. Оперативные новости, вдумчивая аналитика и щепотка мемчиков. Что задумал Альтман со своей OpenAI, когда грянет страшный кризис, расцветёт ли российская экономика, что на завтрак у Германа Грефа и какие приколы сейчас в почёте у СММщиков. Изнанку трендов и бизнеса транслируют тут: @business_trends

JS в браузере: как на самом деле работает среда выполнения На собеседованиях про event loop рассказывают про макрозадачи и микрозадачи, а вкладки называют отдельными потоками. Но HTML Standard описывает всё иначе: агенты, привязка event loop, кластеры. Автор разбирает эти механизмы на примерах, где код ведёт себя нео

Как устроена среда выполнения JavaScript на самом деле: агенты, event loop, task и microtask в терминах HTML Standard. Разбираются три расхождения с бытовыми представлениями: зависший window.open() может подвесить родительскую вкладку из-за общего агента; порядок вывода кода зависит от того, кто его вызвал; термина «макрозадача» в стандарте нет — есть просто task. Автор объясняет, как браузер груп

Советую фронтендерам, которые готовятся к собеседованиям или хотят понять, почему один код в браузере может зависнуть из-за соседней вкладки 🧠 ➡️ Перейти на сайт 🔨Заметки Фронтендера // чат

⚡️ В сети начали массово сливать IT-курсы и книги известных онлайн школ Вот отсортированная база с тонной материала (постепенно пополняется): (363 видео, 87 книги) — Python (117 видео, 53 книги) — ВАЙБКОД (174 видео, 91 книги) — DevOps (415 видео, 68 книги) — Frontend (137 видео, 93 книги) — DS/ML (143 видео, 33 книги) — ИБ/Хакинг (352 видео, 89 книги) — С/С++/C# (343 видео, 87 книги) — Java/QA (176 видео, 32 книги) — Git/Linux (167 видео, 53 книги) — PHP/1С (227 видео, 83 книги) — SQL/БД (114 видео, 77 книги) — Сисадмин (107 видео, 43 книги) — BA/SA (181 видео, 32 книги) — Go/Rust (167 видео, 43 книги) — Kotlin/Swift (112 видео, 24 книги) — Flutter (113 видео, 82 книги) — GameDev (183 видео, 37 книги) — Дизайн (136 видео, 33 книги) — PM/HR Скачивать ничего не нужно — все выложили в Telegram

⚡️ 21 лайфхак для новичков в JavaScript В JavaScript есть эксклюзивные практики, которые используют профессионалы и о которых даже не подозревают новички. Ознакомьтесь с некоторыми из них в этой статье, чтобы усовершенствовать свои навыки в написании кода и преуспеть в динамичном мире JS-разработки.

АЙТИШНИКИ БЕСПЛАТНОЕ ОБУЧЕНИЕ Проект «Terminal» стал крупнейшей библиотекой бесплатного образования. В одном канале собраны курсы, книги, полезные инструменты и практические тренажёры для всех разработчиков: • Практические курсы и задания • Книги и статьи известных авторов • Полезные инструменты и ресурсы • IT-новости и инсайды Обучение по всем направлениям: SQL, Python, ML, Frontend, PHP, C++, Go, Git, Linux, QA, Java, Vibe-coding, InfoSec и др. ⌨️ подписаться

⚡️ 5 000 ₽ — столько приносит одна сделка В день доступно 3-5 готовых сделок. Их находит ИИ и проверяют аналитики. От тебя — только повторить под сопровождением трейдеров. ❗️Можно без опыта и анализа графика, нужен телефон, обучение и час времени. Мы живём в эпоху, когда искусственный интеллект делает большую часть работы за нас, НО НЕ ВСЮ! И чтобы понять, как это работает — заходи в канал к Дмитрию. Все инструкции и доступ к ИИ-агенту внутри. Заходите, пока набор открыт 👉 https://telegram.me/+mNCup1xVf21iOTIy

Typescript для React Типобезопасный React — это круто! Если хотите применить TypeScript для React, нашёл для вас хорошую статью по тому, как сделать это эффективно. Вкратце о чём статья: Даются приёмы использования ReturnType и Awaited для извлечения типов из функций, типизации children через ReactNode, применения React.ComponentProps, объединений & и Omit для точного описания пропсов, способов группировки через объединения и использования as const для кортежей. ➡️ Читать статью 🔨Заметки Фронтендера // чат

Размеры типографики для веб-сайтов Это всего лишь пример для вас — размеры могут варьироваться. 🔨Заметки Фронтендера // чат

SVG URL Encoder Инструмент для конвертации SVG, который позволяет использовать его в качестве background-image, border-image или mask. Некоторые особенности работы с инструментом: 🔘SVG должен иметь атрибут xmlns, например: xmlns='http: //w3.org'. Если его нет, атрибут добавляется автоматически. 🔘Закодированный SVG может использоваться в фоновом режиме, для border-image или маски. ➡️ Перейти на сайт 🔨Заметки Фронтендера // чат

Выбираем лучший редактор кода В этом видео вы ознакомитесь со всеми ключевыми особенностями популярных редакторов кода. Автор разложил по полочкам всю необходимую инфу, а также рассказал, какие пользовательские потребности закрывает каждый из них. 🔨Заметки Фронтендера // чат

Семантические элементы HTML — первый шаг к созданию доступного сайта. Многие начинают веб-разработку, не зная о возможностях HTML, и открывают их позже, что может удивить. Почему использовать семантические элементы? Они улучшают доступность (например, для экранных чтецов). Повышают SEO. Каждый элемент имеет смысл и используется в контексте: <main> — основное содержимое страницы. <header> и <footer> — заголовок и подвал. <aside> — дополняющий контент. 🔨Заметки Фронтендера // чат

15 полезнейших плагинов Chrome в помощь фронтендеру Инструменты из этой статьи помогут значительно упростить и ускорить процесс разработки и тестирования фронтенда. Увидел много интересного — от извлечения CSS-стилей с веб-сайтов до анализа и оптимизации SEO. 🔨Заметки Фронтендера // чат

❗️Курс Руководство CISO по киберустойчивости: практическое руководство для каждого CISO по созданию устойчивой программы безопасности 📖О курсе: Эта книга, написанная генеральным директором TrustedCISO с более чем 30-летним опытом, помогает директорам по информационной безопасности укреплять организационную защиту и защищать конфиденциальные данные. Проанализируйте атаку программы-вымогателя на вымышленную компанию BigCo и изучите фундаментальные политики и меры безопасности. С его помощью вы приобретете практические навыки и идеи, подходящие для различных уровней знаний, от базового до среднего. 🔥СКАЧАТЬ Заметки Фронтендера & Max

❗️Подмена камеры в Яндекс.Телемосте Хочешь исчезать из кадра по щелчку пальцев? Автор Яндекс.Телепульта разобрал, как подменить камеру через getUserMedia и canvas, добавить фоны, маски и субтитры, работающие локально в браузере.

Проблема: Телемост забирает видео с камеры через getUserMedia, и в этот поток хочется вклиниться со своими эффектами. Решение: патчим getUserMedia — настоящую камеру открываем сами, а странице отдаём трек, нарисованный на canvas. Всё, что рисуешь на этом canvas, уезжает собеседникам как обычное видео и попадает в запись.

Статья пригодится фронтендерам, кто хочет разобраться в WebRTC,Canvas и MediaPipe — загляни, если интересуют реальные хаки работы с видеопотоком в браузере 🔥Ссылка на статью Заметки Фронтендера & Max

❗️От AJAX до React: перестройка фронтенда ВКонтакте ВКонтакте прошёл путь от ручного DOM и AJAX до единой архитектуры на React — и это не просто хайп ради моды, а реальная необходимость: раньше мобильная и десктопная версии жили в одном репозитории, но с разными архитектурами.

Материал ведёт через реальную эволюцию: от четырёх несовместимых способов рендера компонентов до единой архитектуры на React. Особенно ценна часть про API Prefetch и HTTP Streaming: команда показывает, как за счёт переноса API-запросов на сервер и раннего старта JS сократили время полной отрисовки страницы с 4,4 до 2 секунд на списке друзей и с 3,1 до 1,9 секунд в фотографиях.

Рекомендую всем, кто работает с легаси-фронтендом или хочет понять, как строить масштабируемую архитектуру с React и SSR 🔥Ссылка на статью Заметки Фронтендера & Max

❗️Курс Успешное прохождение собеседования по системному проектированию 📖О курсе: Не пугайтесь сложного и открытого характера собеседований при проектировании систем! В этом подробном руководстве автор Чжиюн Тань делится своим опытом, полученным по обе стороны стола собеседований. Вы подробно разберёте распространённые технические темы, возникающие во время собеседований, и научитесь применять их для ментального совершенствования различных типов систем. 🔥СКАЧАТЬ Заметки Фронтендера & Max

❗️PVS-Studio для Go: охота за copy-paste ошибками Копируешь код, меняешь пару переменных — и получаешь не то поведение. Такие опечатки легко пропустить на ревью, особенно когда фрагменты выглядят почти одинаково.

Автор разбирает диагностику V8033 в анализаторе PVS-Studio для Go, которая ищет copy-paste ошибки в структурно изоморфном коде. Алгоритм упрощает AST, группирует похожие фрагменты и попарно сравнивает переменные: если общая переменная во втором фрагменте используется реже, чем в первом, на тех же позициях, а специфичная переменная занимает ровно те позиции, где в первом была общая, — это кандидат.

Если пишете на Go или ревьюите чужой код — загляните в статью, там ещё несколько реальных примеров из open source 🔥Ссылка на статью Заметки Фронтендера & Max

❗️Устаревшие HTML и CSS, которые всё ещё работают Современный фронтенд часто игнорирует старые возможности HTML и CSS, считая их пережитком. А зря — некоторые из них решают задачи быстрее и проще, чем модные фреймворки.

В статье разобраны пять приёмов, которые стоит держать в голове: множественные фоны в background, атрибут accept для input[type=file] (фильтрует файлы в диалоге, но требует серверной проверки), вертикальный текст через writing-mode и text-orientation, гибкое подчёркивание с text-decoration и единицы em для декоративных теней, которые автоматически масштабируются под размер шрифта.

Полезно тем, кто верстает лендинги или поддерживает legacy-проекты — загляните, если хотите писать меньше кода без потери гибкости 🔥Ссылка на статью Заметки Фронтендера & Max

❗️Курс Cracking the Data Science Interview: получите полезные советы от отраслевых экспертов, чтобы освоить область науки о данных 📖О курсе: Cracking the Data Science предоставляет экспертные рекомендации по тому, как подойти к процессу собеседования с полной подготовкой и уверенностью. Начиная с введения в современную среду науки о данных, вы найдете советы по поиску работы, написанию резюме и созданию первоклассного портфолио. Затем вы перейдете к таким темам, как Python, базы данных SQL, Git и производительность с помощью сценариев оболочки и Bash. 🔥СКАЧАТЬ Заметки Фронтендера & Max

❗️Как GitHub ускорил сайт с CSS Modules GitHub перевёл большую часть интерфейса с CSS-in-JS на CSS Modules, чтобы избавиться от рантайм-накладных расходов на стили. В статье подробно разбирают, как прошла миграция и какие подводные камни встретились на пути.

В статье на примере GitHub разбирают миграцию с CSS-in-JS (styled-components, sx-проп) на CSS Modules. Проблема: стили инициализировались на клиенте, SSR замедлялся, а обновления стилей выходили из-под контроля с ростом числа компонентов.

Решение: вынести стили в статические CSS-файлы рядом с компонентами, убрать рантайм и динамические sx-пропы. 🔥Ссылка на репозиторий Заметки Фронтендера & Max