Термины frontend: render, hydration, bundle, breakpoint, a11y
Тема дорожной карты · Английский для IT
🔊 Словарь терминов с произношением →
Фронтенд-словарь меняется быстрее любого другого в IT, но его ядро стабильно и почти целиком английское. Рендеринг: render — отрисовать, re-render — перерисовать, SSR (server-side rendering), CSR (client-side rendering), SSG (static site generation), ISR (incremental static regeneration), hydration — подключение интерактивности к серверному HTML на клиенте, partial hydration, islands architecture, streaming, first paint, time to interactive (TTI), LCP / CLS / INP — метрики Core Web Vitals, layout shift — сдвиг макета, reflow / repaint, virtual DOM, reconciliation. Сборка: bundle — собранный файл, bundler (webpack, Vite, esbuild), chunk — часть бандла, code splitting — разбиение, lazy loading — ленивая загрузка, tree shaking — удаление неиспользуемого кода, minify — минифицировать, transpile — транспилировать (TypeScript → JavaScript), polyfill — заполнитель недостающего API, source map, hot module replacement (HMR), dev server, build step, asset — ресурс (картинка, шрифт). Вёрстка: layout — макет, responsive — адаптивный, breakpoint — порог ширины, на котором меняется макет, viewport — видимая область, mobile-first, grid / flexbox, above the fold — до линии сгиба, видимая без прокрутки часть, sticky, overflow, z-index, stacking context, padding / margin, box model, rem / em / vh / vw, media query, container query, dark mode, theme, design tokens, design system, component library. Доступность: a11y (accessibility), screen reader — программа чтения с экрана, ARIA — атрибуты доступности, alt text, focus management, keyboard navigation, contrast ratio, WCAG — стандарт, semantic HTML, landmark, skip link. Состояние и данные: state — состояние, props — свойства, store, selector, hook, side effect, memoize, debounce / throttle, optimistic update — оптимистичное обновление, stale-while-revalidate, cache invalidation, hydration mismatch — расхождение серверного и клиентского HTML. Прочее: i18n (internationalization), l10n (localization), RTL — письмо справа налево, SEO, meta tags, Open Graph, PWA, service worker, web components, shadow DOM, event delegation, bubbling / capturing, CORS, CSP.
Как произносится
Render /ˈrɛndər/, hydration /haɪˈdreɪʃən/ («хайдрЕйшен»), hydrate /ˈhaɪdreɪt/, bundle /ˈbʌndl/, bundler /ˈbʌndlər/, chunk /tʃʌŋk/, transpile /trænˈspaɪl/, polyfill /ˈpɒlifɪl/, minify /ˈmɪnɪfaɪ/, asset /ˈæsɛt/, layout /ˈleɪaʊt/, responsive /rɪˈspɒnsɪv/, breakpoint /ˈbreɪkpɔɪnt/, viewport /ˈvjuːpɔːrt/, margin /ˈmɑːrdʒɪn/, padding /ˈpædɪŋ/, accessibility /əkˌsɛsəˈbɪləti/, a11y «эй-илевен-уай» или просто accessibility, ARIA /ˈɑːriə/ («Ариа»), WCAG «дабл-ю-кэг» /ˈwʊkæɡ/ или по буквам, semantic /sɪˈmæntɪk/, debounce /diːˈbaʊns/, throttle /ˈθrɒtl/, memoize /ˈmɛmoʊaɪz/, i18n «ай-эйтин-эн», l10n «эл-тен-эн», SSR по буквам, DOM /dɒm/ как слово, CSS по буквам, Sass /sæs/, JSX по буквам, Vite /viːt/, Vue /vjuː/, Svelte /svɛlt/, Astro /ˈæstroʊ/.
Как употребляется
- The component re-renders on every keystroke; memoize the handler. — Компонент перерисовывается на каждое нажатие, мемоизируй обработчик.
- We're seeing a hydration mismatch: the server HTML doesn't match the client. — Расхождение hydration: серверный HTML не совпадает с клиентским.
- Split the bundle and lazy-load the admin routes. — Разбей бандл и лениво загружай админские маршруты.
- The layout breaks at the 768-pixel breakpoint. — Макет ломается на брейкпоинте 768 пикселей.
- Add alt text and make the modal keyboard-navigable for a11y. — Добавь alt-текст и сделай модалку доступной с клавиатуры.
- LCP is 4 seconds on mobile; the hero image isn't optimized. — LCP на мобильных 4 секунды, главная картинка не оптимизирована.
- Debounce the search input by 300 milliseconds. — Отложи поиск на 300 мс после последнего ввода.
- Keep the CTA above the fold. — Держи призыв к действию до линии сгиба.
Ловушки
Первая ловушка — responsive как «отзывчивый»: адаптивный к размеру экрана. Вторая — hydration переводить как «гидратация»: в русской документации так пишут, но термин лучше оставлять латиницей или говорить «гидрация» только в кругу фронтендеров. Третья — breakpoint в двух смыслах: точка остановки в отладчике и порог вёрстки; контекст решает. Четвёртая — margin и padding путать: margin снаружи, padding внутри; мнемоника — padding pads the inside. Пятая — a11y и i18n читать по буквам как слова: это нумеронимы, число обозначает пропущенные буквы. Шестая — asset как «актив» из финансов: во фронтенде это ресурс. Седьмая — bundle как «пачка»: собранный файл. Восьмая — debounce и throttle как синонимы: debounce ждёт паузу, throttle ограничивает частоту.