Английский для разработчика

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

На мой взгляд этот навык нужен любому разработчику как минимум для того, чтобы читать документацию без кривого автоперевода. Также ввиду уменьшения вакансий на внутреннем рынке, всё актуальней становится вопрос валютной удалёнки за рубежом.

Итак, как научиться?

1) В первый год необходимо набрать базовый словарный запас из 2000-3000 слов. Делать это гораздо проще на сервисах вроде Duolingo. Слова можно записывать в физический словарь или использовать приложения наподобие Anki. В первом случае рекомендую слова помечать цветными звёздочками (или как удобнее), чтобы каждый раз можно было чередовать их повторение. Сначала чётные, затем нечётные и куча других вариаций. Наш мозг — это очень ленивая штука и в определённый момент ты поймёшь, что по порядку слова в столбик ты помнишь, а вот в разброс не получается. Если выберешь вариант с приложением, то рекомендую заранее разобраться как он работает и всё настроить так, чтобы в будущем случайно не перетереть всю базу данных со словами. Тут придётся выбирать между удобством и риском потерять всё разом по случайности. Также рекомендую заранее позаботиться о транскрипции (записывай её рядом с каждым словом) и правильным произношением звуков. Меня до сих пор "коробит" от того, что даже переводчики с многолетним опытом, могут говорить с жёстким русским акцентом и не знают правильных ударений в словах.

2) После того, как переступишь через отметку в 2000-3000 слов, приступай к просмотру видео (любых, желательно современных) и прочтению книг. Все незнакомые слова выписывай и заучивай. Когда начнёшь чувствовать себя уверенно, можешь пробовать ставить видео на ускоренный режим и также пытаться понять о чём идёт речь. Но! Самое главное! Не включай субтитры, ты должен всё это пропускать через себя, иначе толку не будет. Параллельно, с базовым набором слов, можешь пробовать поднимать свой разговорный. В discord и других сервисах можно найти собеседников и пытаться завести с ними вести диалог. Я, например, начинал с индусов. Запускался в формате чат-рулетки или как-то ещё и общался. Но вообще это очень муторно. Каждый раз приходится представляться и отвечать на одни и те же вопросы... Откуда ты? Как тебя зовут? И так далее. Гораздо проще где-то уединиться и начать проговаривать свои мысли вслух. Возьми фигурку с полки и начни проговаривать, что ты видишь и, что ты думаешь. Произнеси вслух какая сейчас погода, какое у тебя настроение и так далее. Таким же способом, кстати, учатся ораторскому искусству и в этом нет ничего постыдного. Используя этот метод, у меня получалось не только экономить время, но и эффективно обучаться. Спустя несколько месяцев я ненадолго возвращался к живому общению и чувствовал необычайную лёгкость.

3) Грамматика. По сути из грамматики самое важное — это времена. Ты можешь знать только их, но если твой словарный запас будет достаточно большим, то по сути это уже 90% или даже 95% результата. По сути дети, которые учатся языку с рождения, вообще не притрагиваются ни к каким учебникам, они просто знают, что так правильно. Поэтому, если ты прям активно наляжешь на практику чтения, слушания и самостоятельного воспроизведения, то у тебя просто появится чуйка, что так делать можно или так делать нельзя. Я не говорю о том, что про правила нужно вообще забыть, те же неправильные глаголы и прочие штуки надо будет доучивать впоследствии, но это не настолько важно, насколько важно иметь реальный запас слов и большую практику. Из учебников горячо рекомендую старый учебник Голицынского, лучше его я ещё не находил.

4) Собственно, это всё. Дальше тебе остаётся лишь не бросать начатое. Продолжай читать книги, смотреть фильмы и общаться с иностранцами. Через какое-то время ты начнёшь мыслить и видеть сны на английском, а также понимать на 30% больше информации нежели другие (многие сложные слова в русском приходят именно с английского).

Обновлены word-spacing и letter-spacing

Chrome в 145 версии добавил возможность передачи процентов данным свойствам, где 100% — это размер символа пробела (U+0020) в текущем шрифте.

Эта фишка будет полезна адаптивным макетам, где при смене font-size или font-family, автоматически должны подстраиваться и отступы.

⚙️ Поддержка браузерами (word-spacing, letter-spacing ещё не добавили)

Гибкое управление фокусом элемента

Chrome в 145 версии добавил параметр focusVisible в метод focus:

input.focus({ focusVisible: true });

Как вы уже, наверное, догадываетесь, это позволяет самостоятельно управлять тем, будет ли элемент при ручном вызове фокуса, помимо CSS-псевдокласса :focus, соответствовать ещё и :focus-visible.

Ранее без данного параметра браузер самостоятельно решал этот вопрос.

⚙️ Поддержка браузерами широкая

Upsert для Map и WeakMap 🔥

Chrome в 145 версии добавил сразу 2 новых метода:

📌 getOrInsert(key, value) — возвращает существующее значение по ключу key, если оно есть, иначе вставляет value и также возвращает его

const fruitsCount = new Map([
  ['apple', 10]
]);

const appleCount = fruitsCount.getOrInsert('apple', 5); // 10

const bananaCount = fruitsCount.getOrInsert('banana', 20); // 20

📌 getOrInsertComputed(key, callback) — то же самое, только вставляет результат выполнения переданной callback функции, которая вызывается только в том случае, если ключ отсутствует

const fruitsCount = new Map([
  ['apple', 10]
]);

const appleCount = fruitsCount.getOrInsertComputed('apple', (key) => {
  // функция будет проигнорирована
  return 5;
});

const bananaCount = fruitsCount.getOrInsertComputed('banana', (key) => {
  return 20;
});

⚙️ Поддержка браузерами широкая (getOrInsert, getOrInsertComputed)

Защита от XSS

В последнее время в браузеры активно завозят Trusted Types и HTML Sanitizer API. Оба очень полезны для фильтрации содержимого, вставляемого напрямую в HTML.

HTML Sanitizer API

// Создаём санитайзер с разрешением только для <b> и <i> тегов
const sanitizer = new HTMLSanitizer({
  allowElements: ['b', 'i']
});

const unsafeHTML = '<div onclick="alert('XSS')">Hello <b>World</b></div>';

// Очищаем небезопасный код
const safeFragment = sanitizer.sanitizeFor('div', unsafeHTML);

document.body.appendChild(safeFragment); // Hello <b>World</b>

Trusted Types API

import DOMPurify from 'https://cdn.jsdelivr.net/npm/dompurify@3.3.1/+esm';

const policy = trustedTypes.createPolicy('myPolicy', {
  // Очищаем небезопасный HTML код при помощи библиотеки dompurify
  createHTML: (input) => {
    return DOMPurify.sanitize(input);
  },
  // JavaScript код и URL'ы оставляем как есть
  createScript: input => input,
  createScriptURL: url => url
});

const unsafe = '<img src="x" onerror="alert(1)>"';

document.body.innerHTML = unsafe; // небезопасно, <img src="x" onerror="alert('XSS')">
document.body.innerHTML = policy.createHTML(unsafe); // безопасно, <img src="x">

⚙️ Поддержка браузерами (HTML Sanitizer, Trusted Types)

Вышел Vite 8 🔥

Главным изменением этой версии является переход с esbuild (для dev режима) и Rollup (для build) на единый Rolldown, написанный на Rust. Он такой же быстрый как esbuild, поддерживает тот же API плагинов, что Rollup и Vite, а также привносит ряд недоступных ранее фич, среди которых: полноценный bundle-режим, более гибкое управление разделением чанков, персистентный кэш на уровне модулей, Module Federation и многое другое.

Авторы заявляют, что такой переход позволил ускорить этап сборки проектов примерно в 10-30 раз.

К примеру, бета-версии сборщика при тестировании на разных проектах показали следующие числа:
1) Linear — время сборки сократилось с 46 секунд до 6 секунд
2) Ramp — сокращение времени сборки на 57%
3) Mercedes-Benz.io — на 38%
4) Beehiiv — на 64%

Данный переход позволит в будущем ещё сильнее ускорить работу как dev, так и build режимов, работы над этим уже ведутся.

Другие фичи 8 версии Vite:
1) Встроенная поддержка Vite Devtools (опция devtools)
2) Алиасы для импортов теперь можно получать сразу из tsconfig.json и не дублировать в vite.config.ts (опция resolve.tsconfigPaths)
3) Встроенная поддержка TypeScript-опции emitDecoratorMetadata (отпадает надобность в использовании ряда плагинов)
4) Импорт WebAssembly-модулей с суффиксом ?init теперь корректно работает и в средах с SSR
5) Добавлена возможность пересылать браузерные console.* логи в терминал dev-сервера (опция server.forwardConsole)

Размер Vite увеличился примерно на 15 МБ. Это связано с тем, что lightningcss теперь является обязательной зависимостью, а бинарный файл Rolldown оказался больше, чем прежняя связка esbuild + Rollup, но в будущем обещают это также исправить.

🔗 Ссылка на официальный пост

Caninclude

Полезный инструмент, который позволяет определить может ли один элемент быть вложен в другой по спецификации HTML

По каждому тегу предоставляется детальная информация:
1) Его категория
2) Контекст, в котором может быть использован
3) Контентная модель

Если вы пользуетесь SSR, то наверняка сталкивались с проблемой того, что браузер автоматически исправляет некорректный HTML и финальное дерево в браузере не совпадает с тем, что было сгенерировано на сервере.

🔗 Ссылка на инструмент

React Doctor 👨‍⚕️🏥

Попался интересный инструмент для анализа кода, написанного на React. Он автоматически определяет на чём написан ваш проект (Next.js, Vite, Remix и т.д.) и запускает 2 параллельные проверки:
1) Линтинг
2) Неиспользуемые файлы

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

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

Его можно подключить к вашей нейронке для автофикса, а также к github actions, чтобы он автоматически генерировал комментарии к PR.

🔗 Ссылка на инструмент

Chrome dev tools в мобильном браузере 🤯

К своему удивлению узнал, что оказывается существует такой инструмент как Eruda, который позволяет пользоваться инструментами разработчика в мобильных браузерах.

Функционал далеко не полный, т.к. автор самостоятельно делает копию Chrome Dev Tools, но на самом деле он достаточно обширный.

Есть такие вкладки как:
1) Elements
2) Console
3) Network
4) Sources
5) Vue (инструменты фреймворка)

И куча других, которые придумал, например:
1) Timing
2) Geolocation
3) Touches
4) Orientation
5) Code

Ранее подобное можно было реализовать только удалённо. То есть устройство подключалось по USB или Wi-Fi к компьютеру, с которого можно было заходить в инструменты разработчика.

🔗 Ссылка на npm

Вышел Module Federation 2.0 🔥

Хорошие новости!

Сообщество в лице Заккари Джексона (он впервые придумал эту технологию) начало развивать данный подход отдельно от webpack и даже создало для этого отдельный сайт, на котором собрана вся информация о том, что это, как пользоваться и как добавить в свой проект. На нём есть куча примеров под любой стек, список всех инструментов для работы, а также лучшие практики и набор skills для обучения нейронок.

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

Rsbuild, Rspack, Webpack, Modern.js, Next.js и Vite уже поддержали данный проект и либо используют пакеты @module-federation/* у себя под капотом, либо пишут собственные реализации и плагины на основе общего стандарта.

Для нас это означает то, что наконец проблемы со сложностью добавления микросервисов (микрофронтов) в проект, а также их переиспользование между проектами с разным стеком начинают постепенно исчезать.

🔗 Ссылка на сайт проекта

Подготовка к System design

В последнее время данный формат становится всё более популярным на собеседованиях.

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

🔗 Ссылка на сайт

Топ донатов месяца

По традиции благодарю всех, кто поддержал проект в этом месяце!

Boosty:
🔥 @romaahs - серебряная подписка
🔥 @EmberIsReal - бронзовая подписка
🔥 @prodiusserj - бронзовая подписка

Телеграм:
⭐️ @maunsh 12 звёздочек

Скидка на подписку Boosty 🤟🏻

Судя по реакциям под предыдущим постом было много желающих, поэтому в этом месяце я решил сделать скидку и по самой дешёвой подписке дать сразу 4 часа на личные встречи (~4 моковых собеседования или ~6 встреч по прочим вопросам).

Количество ограничено, больше трёх человек не смогу набрать. Тем, кто уже оформил подписку, время также докину, чтобы было честно.

Если вы новенький на канале, то напомню, что я помогаю с:
1) Подготовкой к собеседованиям (провожу сам)
2) Карьерным ростом
3) Обучением с нуля
4) Генерацией технических собеседований
5) Составлением резюме
6) Составлением легенды
7) И многим другим

Также даю доступ к:
1) Документации со всеми актуальными вопросами и задачами для подготовки
2) Закрытому каналу, в котором публикую посты с исследованиями рынка и другой полезной информацией
3) Закрытому чату, в котором вы можете тренироваться с другими участниками

🔗 Ссылка на Boosty

Новый meta тег

Chrome в 146 версии добавил

<meta name="text-scale" content="scale" />

Он позволяет указать браузеру, что при расчёте размеров на странице, он должен учитывать системный размер текста пользователя и автоматически в соответствии с этим увеличивать или уменьшать корневой font-size. То есть, если пользователь в настройках браузера или устройства установил шрифт в 30 пикселей, то и font-size для <html> элемента на странице в обязательном порядке должен стать 30px.

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

🔗 Видео обзор от канала HTMHell
⚙️ Поддержка браузерами (пока таблицу на caniuse не завезли)

Итераторам добавлен новый метод

Chrome в 146 версии представил Iterator.concat, с помощью которого теперь можно объединять несколько итераторов в один по аналогии с массивами.

Кстати, возможно вы не знали, но при помощи генераторов и итераторов мы можем строить "ленивые цепочки" операций над массивами.

Представим следующий код:

Array.from({ length: 10 }, (_, i) => i)  
  .map(a => a + 10)                      
  .filter(a => a % 2 === 0)             
  .slice(0, 2)                          
  .forEach(a => console.log(a));        

На каждом этапе мы снова и снова проходимся по одним и тем же элементам, а также вновь создаём новые и новые массивы на основе предыдущих, хотя по итогу нам понадобятся только первые 2 элемента. Оптимизация страдает, не так ли?

При помощи генераторов и итераторов мы можем реализовать что-то вроде этого:

pipe(
  range(10),
  map((a) => a + 10),
  filter((a) => a % 2 === 0),
  take(2),
  each((a) => console.log(a)),
);

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

🔗 Полифил
⚙️ Поддержка браузерами средняя

Modern CSS

Нашёл интересный сайт с наглядным представлением того, как HTML и CSS уже не нужно писать в 2026 году.

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

🔗 Ссылка на сайт

Basewatch

Инструмент предоставляет возможность подписаться на тот или иной браузерный API и получить push уведомление или сообщение на почту, когда его поддержка переступит определённый процент.

В поиске можно найти любую фичу и получить информацию о её поддержке.

Данные собираются из:
1) CanIUse
2) Web Platform Baseline
3) MDN Browser Compat Data
4) Chrome Status

🔗 Ссылка на инструмент