From 0eeec5c3b78275cbbe8a3772f00e461a4526c0c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D1=81=D0=B8=D0=BC=20=D0=98=D0=B2=D0=B0?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= Date: Tue, 7 Jul 2026 10:07:54 +0300 Subject: [PATCH 01/11] docs: remove standalone Web Platform entry --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 9da2a0a..11f86b4 100644 --- a/README.md +++ b/README.md @@ -9,8 +9,7 @@ TypeScript и устройство Angular-приложений. - [Основы Computer Science](src/pages/computer-science/index.md) - [Алгоритмы и структуры данных для frontend](src/pages/computer-science/index.md#алгоритмы-и-структуры-данных-для-frontend) -- [Web Platform](src/pages/web-platform/index.md) -- [Большие данные, сеть и browser APIs](src/pages/web-platform/index.md#большие-данные-сеть-и-browser-apis) +- [JSON, URL, binary data, i18n и browser APIs](src/pages/web-platform/index.md) - [HTML, формы, доступность (accessibility), SEO и media](src/pages/web-platform/html/index.md) - [CSS](src/pages/css/index.md) - [Рендеринг браузера и производительность (performance)](src/pages/web-platform/browser/index.md) From ba3ba70ccc51a98ab30843ca4930651f1de404eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D1=81=D0=B8=D0=BC=20=D0=98=D0=B2=D0=B0?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= Date: Tue, 7 Jul 2026 10:08:16 +0300 Subject: [PATCH 02/11] docs: hide Web Platform as standalone card --- src/pages/web-platform/index.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/pages/web-platform/index.md b/src/pages/web-platform/index.md index 55bd913..3f09cc3 100644 --- a/src/pages/web-platform/index.md +++ b/src/pages/web-platform/index.md @@ -1,16 +1,21 @@ --- layout: ../../layouts/Layout.astro -title: Web Platform +title: Browser APIs, data formats and i18n description: Вопросы и ответы category: Frontend -kind: questions +kind: guide order: 20 --- -## Web Platform +## Browser APIs, data formats and i18n + +Этот файл хранит вопросы, которые находятся на стыке JavaScript, browser APIs, HTTP, performance, i18n и CSS. Они не +выносятся отдельной карточкой на главной странице, чтобы не дублировать более точные разделы: HTML, CSS, JavaScript, +Browser rendering, HTTP и Auth. - [HTML, forms, accessibility, SEO и media](html/) - [CSS](../css/) +- [JavaScript](../javascript/) - [Browser rendering и performance](browser/) - [HTTP, HTTPS и curl](http/) From a5442ed90dfcb6f50186ba84001ce022cfcc72eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D1=81=D0=B8=D0=BC=20=D0=98=D0=B2=D0=B0?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= Date: Tue, 7 Jul 2026 10:08:48 +0300 Subject: [PATCH 03/11] docs: keep README navigation focused From 80c758cec5566ebb2bd8aae17b297b30ffcafda8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D1=81=D0=B8=D0=BC=20=D0=98=D0=B2=D0=B0?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= Date: Tue, 7 Jul 2026 10:09:13 +0300 Subject: [PATCH 04/11] docs: keep platform page as guide From 256d3c3aabc18fe955758283416ded832e375e59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D1=81=D0=B8=D0=BC=20=D0=98=D0=B2=D0=B0?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= Date: Tue, 7 Jul 2026 10:42:32 +0300 Subject: [PATCH 05/11] docs: move data format questions from web platform --- src/pages/javascript/data-formats/index.md | 72 ++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 src/pages/javascript/data-formats/index.md diff --git a/src/pages/javascript/data-formats/index.md b/src/pages/javascript/data-formats/index.md new file mode 100644 index 0000000..d5d8615 --- /dev/null +++ b/src/pages/javascript/data-formats/index.md @@ -0,0 +1,72 @@ +--- +layout: ../../../layouts/Layout.astro +title: JavaScript data formats and binary data +description: Вопросы и ответы +category: Frontend +kind: questions +order: 71 +--- + +## JavaScript data formats and binary data + +### JSON, binary data и i18n + +#### Middle + +
+Почему стоимость JSON.parse и JSON.stringify важна?
+
+ +`JSON.parse()` и `JSON.stringify()` выполняют синхронную работу и могут блокировать main thread на больших payload. +Большой ответ API может быть быстрым по сети, но затем зависнуть на parsing, нормализации и rendering. + +Практические решения: уменьшать payload, использовать pagination, отдавать только нужные поля, переносить тяжелую +обработку в Web Worker, кешировать уже нормализованные данные или выбирать streaming/binary format там, где это +действительно оправдано. + +
+ +
+ +
+Для чего нужны ArrayBuffer, TypedArray и Blob?
+
+ +`ArrayBuffer` представляет участок бинарной памяти, `TypedArray` дает типизированный view поверх него, а `Blob` хранит +immutable file-like binary data. Эти API нужны для файлов, изображений, audio/video, WebSocket binary messages, +WebAssembly, canvas и stream processing. + +```ts +const response = await fetch('/assets/report.pdf'); +const file = await response.blob(); + +const url = URL.createObjectURL(file); +``` + +После `URL.createObjectURL()` важно вызвать `URL.revokeObjectURL(url)`, когда ссылка больше не нужна, чтобы не держать +память. + +
+ +
+ +
+Как использовать Intl API в frontend-приложении?
+
+ +`Intl` дает стандартные formatter APIs для дат, чисел, валют, plural rules, relative time, lists и collation. Это лучше, +чем вручную собирать строки с датами и валютами. + +```ts +const price = new Intl.NumberFormat('ru-RU', { + style: 'currency', + currency: 'RUB', +}).format(1250); +``` + +Важно не создавать formatter в горячем loop без необходимости: formatter можно кешировать по locale/options. Также нужно +учитывать timezone, fallback locale и тесты для разных языков. + +
+ +
From 88439a44d86b827ab75fb691e122278e7cde6eae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D1=81=D0=B8=D0=BC=20=D0=98=D0=B2=D0=B0?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= Date: Tue, 7 Jul 2026 10:42:57 +0300 Subject: [PATCH 06/11] docs: move URL questions from web platform --- src/pages/http/url/index.md | 57 +++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 src/pages/http/url/index.md diff --git a/src/pages/http/url/index.md b/src/pages/http/url/index.md new file mode 100644 index 0000000..926f63a --- /dev/null +++ b/src/pages/http/url/index.md @@ -0,0 +1,57 @@ +--- +layout: ../../../layouts/Layout.astro +title: URL and URLSearchParams +description: Вопросы и ответы +category: Frontend +kind: questions +order: 61 +--- + +## URL and URLSearchParams + +### URL encoding и сборка ссылок + +#### Middle + +
+Какие Unicode-проблемы могут быть в URL?
+
+ +URL может содержать Unicode в hostname, path и query, но разные части кодируются по-разному. Hostname с не-ASCII +символами преобразуется через IDNA/Punycode, а path и query используют percent-encoding. Визуально похожие символы из +разных алфавитов могут создавать look-alike risks. + +Также встречаются разные формы нормализации Unicode, combining marks и emoji. Поэтому validation, search, canonical URL +и сравнение ссылок должны учитывать продуктовый контекст, а не простое побайтовое равенство строк. + +
+ +
+ +
+Почему нельзя собирать URL простой конкатенацией строк?
+
+ +Конкатенация легко ломает encoding, `?`, `&`, `#`, пробелы, slash boundaries и значения с управляющими символами query. +Ошибочный URL может отправить неправильный query, сломать cache key, открыть redirect bug или привести к CORS-запросу не +на тот origin. + +Для query используйте `URLSearchParams`, а для абсолютных адресов — `URL`: + +```ts +const params = new URLSearchParams({ + page: String(page), + query: searchQuery, +}); + +const url = new URL('/api/search', location.origin); +url.search = params.toString(); + +await fetch(url); +``` + +`URLSearchParams` сам закодирует пробелы, амперсанды, Unicode и другие специальные символы в значениях параметров. + +
+ +
From 0771ca9327d2e279b918b7e34c9c4058d6b5aba2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D1=81=D0=B8=D0=BC=20=D0=98=D0=B2=D0=B0?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= Date: Tue, 7 Jul 2026 10:43:09 +0300 Subject: [PATCH 07/11] docs: move data performance questions from web platform --- src/pages/browser/data-performance/index.md | 45 +++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 src/pages/browser/data-performance/index.md diff --git a/src/pages/browser/data-performance/index.md b/src/pages/browser/data-performance/index.md new file mode 100644 index 0000000..7093189 --- /dev/null +++ b/src/pages/browser/data-performance/index.md @@ -0,0 +1,45 @@ +--- +layout: ../../../layouts/Layout.astro +title: Data loading and rendering performance +description: Вопросы и ответы +category: Frontend +kind: questions +order: 51 +--- + +## Data loading and rendering performance + +### Большие данные, сеть и rendering + +#### Middle+ or Senior + +
+Почему network latency не описывают через Big O?
+
+ +Big O описывает рост вычислительной сложности относительно размера входа. Network latency зависит от расстояния, +маршрута, TLS, состояния соединения, сервера, CDN и качества сети пользователя. + +Frontend-разработчику важно разделять CPU-bound и I/O-bound проблемы. `O(n)` фильтрация может лагать из-за main thread, +а медленный API-запрос — из-за latency, throughput, backend queue или cache miss. Для первого помогают профилировщик, +алгоритм, virtual scroll и Web Worker; для второго — caching, batching, prefetch, pagination, timeout и retry policy. + +
+ +
+ +
+Когда нужны pagination, streaming или virtual scroll?
+
+ +Если данных много, проблема обычно не только в загрузке, но и в памяти, вычислениях и DOM rendering. Pagination +ограничивает размер страницы данных, streaming позволяет начать обработку до полного ответа, virtual scroll рендерит +только видимую часть списка. + +В Angular large table часто начинают с server-side pagination/filtering/sorting. Если UX требует плавного просмотра +большого локального списка, добавляют virtual scroll и стабильный `track` в `@for`, чтобы не пересоздавать DOM без +необходимости. + +
+ +
From 2a222eac5e9dc486eff72d8b0a67c1572a44bb70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D1=81=D0=B8=D0=BC=20=D0=98=D0=B2=D0=B0?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= Date: Tue, 7 Jul 2026 10:43:37 +0300 Subject: [PATCH 08/11] docs: move RTL question from web platform --- src/pages/css/rtl/index.md | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 src/pages/css/rtl/index.md diff --git a/src/pages/css/rtl/index.md b/src/pages/css/rtl/index.md new file mode 100644 index 0000000..4e7d741 --- /dev/null +++ b/src/pages/css/rtl/index.md @@ -0,0 +1,35 @@ +--- +layout: ../../../layouts/Layout.astro +title: RTL in frontend interfaces +description: Вопросы и ответы +category: Frontend +kind: questions +order: 31 +--- + +## RTL in frontend interfaces + +### RTL, direction и CSS logical properties + +#### Middle + +
+Какие frontend-проблемы появляются при RTL?
+
+ +RTL влияет на direction, порядок inline content, иконки направления, отступы, scroll behavior, charts, drag and drop и +анимации. CSS logical properties (`margin-inline-start`, `inset-inline-end`) уменьшают количество отдельных overrides. + +Нельзя просто поменять `text-align`. Нужно проверить keyboard navigation, focus order, truncation, mixed LTR/RTL text, +date/number formatting и screenshots основных экранов. + +```css +.toolbar { + padding-inline-start: 1rem; + padding-inline-end: 0.5rem; +} +``` + +
+ +
From 3f9d22c235e89cd84f7c34ee0eddfadb896c64ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D1=81=D0=B8=D0=BC=20=D0=98=D0=B2=D0=B0?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= Date: Tue, 7 Jul 2026 10:43:47 +0300 Subject: [PATCH 09/11] docs: remove migrated web platform page --- src/pages/web-platform/index.md | 183 -------------------------------- 1 file changed, 183 deletions(-) delete mode 100644 src/pages/web-platform/index.md diff --git a/src/pages/web-platform/index.md b/src/pages/web-platform/index.md deleted file mode 100644 index 3f09cc3..0000000 --- a/src/pages/web-platform/index.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -layout: ../../layouts/Layout.astro -title: Browser APIs, data formats and i18n -description: Вопросы и ответы -category: Frontend -kind: guide -order: 20 ---- - -## Browser APIs, data formats and i18n - -Этот файл хранит вопросы, которые находятся на стыке JavaScript, browser APIs, HTTP, performance, i18n и CSS. Они не -выносятся отдельной карточкой на главной странице, чтобы не дублировать более точные разделы: HTML, CSS, JavaScript, -Browser rendering, HTTP и Auth. - -- [HTML, forms, accessibility, SEO и media](html/) -- [CSS](../css/) -- [JavaScript](../javascript/) -- [Browser rendering и performance](browser/) -- [HTTP, HTTPS и curl](http/) - -### Большие данные, сеть и browser APIs - -#### Middle - -
-Почему стоимость JSON.parse и JSON.stringify важна?
-
- -`JSON.parse()` и `JSON.stringify()` выполняют синхронную работу и могут блокировать main thread на больших payload. -Большой ответ API может быть быстрым по сети, но затем зависнуть на parsing, нормализации и rendering. - -Практические решения: уменьшать payload, использовать pagination, отдавать только нужные поля, переносить тяжелую -обработку в Web Worker, кешировать уже нормализованные данные или выбирать streaming/binary format там, где это -действительно оправдано. - -
- -
- -
-Какие Unicode-проблемы могут быть в URL?
-
- -URL может содержать Unicode в hostname, path и query, но разные части кодируются по-разному. Hostname с не-ASCII -символами преобразуется через IDNA/Punycode, а path и query используют percent-encoding. Визуально похожие символы из -разных алфавитов могут создавать phishing и homograph risks. - -Также встречаются разные формы нормализации Unicode, combining marks и emoji. Поэтому validation, search, canonical URL -и сравнение ссылок должны учитывать продуктовый контекст, а не простое побайтовое равенство строк. - -
- -
- -
-Почему нельзя собирать URL простой конкатенацией строк?
-
- -Конкатенация легко ломает encoding, `?`, `&`, `#`, пробелы, slash boundaries и значения вроде `a&role=admin`. Ошибочный -URL может отправить неправильный query, сломать cache key, открыть redirect bug или привести к CORS-запросу не на тот -origin. - -Для query используйте `URLSearchParams`, а для абсолютных адресов — `URL`: - -```ts -const params = new URLSearchParams({ - page: String(page), - query: searchQuery, -}); - -const url = new URL('/api/search', location.origin); -url.search = params.toString(); - -await fetch(url); -``` - -`URLSearchParams` сам закодирует пробелы, амперсанды, Unicode и другие специальные символы в значениях параметров. - -
- -
- -#### Middle+ or Senior - -
-Почему network latency не описывают через Big O?
-
- -Big O описывает рост вычислительной сложности относительно размера входа. Network latency зависит от расстояния, -маршрута, TLS, состояния соединения, сервера, CDN и качества сети пользователя. - -Frontend-разработчику важно разделять CPU-bound и I/O-bound проблемы. `O(n)` фильтрация может лагать из-за main thread, -а медленный API-запрос — из-за latency, throughput, backend queue или cache miss. Для первого помогают профилировщик, -алгоритм, virtual scroll и Web Worker; для второго — caching, batching, prefetch, pagination, timeout и retry policy. - -
- -
- -
-Когда нужны pagination, streaming или virtual scroll?
-
- -Если данных много, проблема обычно не только в загрузке, но и в памяти, вычислениях и DOM rendering. Pagination -ограничивает размер страницы данных, streaming позволяет начать обработку до полного ответа, virtual scroll рендерит -только видимую часть списка. - -В Angular large table часто начинают с server-side pagination/filtering/sorting. Если UX требует плавного просмотра -большого локального списка, добавляют virtual scroll и стабильный `track` в `@for`, чтобы не пересоздавать DOM без -необходимости. - -
- -
- -
-Для чего нужны ArrayBuffer, TypedArray и Blob?
-
- -`ArrayBuffer` представляет участок бинарной памяти, `TypedArray` дает типизированный view поверх него, а `Blob` хранит -immutable file-like binary data. Эти API нужны для файлов, изображений, audio/video, WebSocket binary messages, -WebAssembly, canvas и stream processing. - -```ts -const response = await fetch('/assets/report.pdf'); -const file = await response.blob(); - -const url = URL.createObjectURL(file); -``` - -После `URL.createObjectURL()` важно вызвать `URL.revokeObjectURL(url)`, когда ссылка больше не нужна, чтобы не держать -память. - -
- -
- -### i18n и platform details - -#### Middle - -
-Как использовать Intl API в frontend-приложении?
-
- -`Intl` дает стандартные formatter APIs для дат, чисел, валют, plural rules, relative time, lists и collation. Это лучше, -чем вручную собирать строки с датами и валютами. - -```ts -const price = new Intl.NumberFormat('ru-RU', { - style: 'currency', - currency: 'RUB', -}).format(1250); -``` - -Важно не создавать formatter в горячем loop без необходимости: formatter можно кешировать по locale/options. Также нужно -учитывать timezone, fallback locale и тесты для разных языков. - -
- -
- -
-Какие frontend-проблемы появляются при RTL?
-
- -RTL влияет на direction, порядок inline content, иконки направления, отступы, scroll behavior, charts, drag and drop и -анимации. CSS logical properties (`margin-inline-start`, `inset-inline-end`) уменьшают количество отдельных overrides. - -Нельзя просто поменять `text-align`. Нужно проверить keyboard navigation, focus order, truncation, mixed LTR/RTL text, -date/number formatting и screenshots основных экранов. - -```css -.toolbar { - padding-inline-start: 1rem; - padding-inline-end: 0.5rem; -} -``` - -
- -
From c355561a8e0c2f169b4912cc287e71b97c084b5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D1=81=D0=B8=D0=BC=20=D0=98=D0=B2=D0=B0?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= Date: Tue, 7 Jul 2026 10:44:21 +0300 Subject: [PATCH 10/11] docs: update links after web platform split --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 11f86b4..f072f39 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,10 @@ TypeScript и устройство Angular-приложений. - [Основы Computer Science](src/pages/computer-science/index.md) - [Алгоритмы и структуры данных для frontend](src/pages/computer-science/index.md#алгоритмы-и-структуры-данных-для-frontend) -- [JSON, URL, binary data, i18n и browser APIs](src/pages/web-platform/index.md) +- [JavaScript data formats and binary data](src/pages/javascript/data-formats/index.md) +- [URL and URLSearchParams](src/pages/http/url/index.md) +- [Data loading and rendering performance](src/pages/browser/data-performance/index.md) +- [RTL in frontend interfaces](src/pages/css/rtl/index.md) - [HTML, формы, доступность (accessibility), SEO и media](src/pages/web-platform/html/index.md) - [CSS](src/pages/css/index.md) - [Рендеринг браузера и производительность (performance)](src/pages/web-platform/browser/index.md) From f126dbc5f7b7feec97505f3fc08ff1a1e0ea0c71 Mon Sep 17 00:00:00 2001 From: splincode Date: Tue, 7 Jul 2026 15:18:42 +0300 Subject: [PATCH 11/11] chore: update --- README.md | 4 - src/pages/browser/data-performance/index.md | 45 ------- src/pages/css/index.md | 21 ++++ src/pages/css/rtl/index.md | 35 ------ src/pages/http/url/index.md | 57 --------- src/pages/javascript/data-formats/index.md | 72 ----------- src/pages/javascript/index.md | 132 ++++++++++++++++++++ 7 files changed, 153 insertions(+), 213 deletions(-) delete mode 100644 src/pages/browser/data-performance/index.md delete mode 100644 src/pages/css/rtl/index.md delete mode 100644 src/pages/http/url/index.md delete mode 100644 src/pages/javascript/data-formats/index.md diff --git a/README.md b/README.md index f072f39..738e448 100644 --- a/README.md +++ b/README.md @@ -9,10 +9,6 @@ TypeScript и устройство Angular-приложений. - [Основы Computer Science](src/pages/computer-science/index.md) - [Алгоритмы и структуры данных для frontend](src/pages/computer-science/index.md#алгоритмы-и-структуры-данных-для-frontend) -- [JavaScript data formats and binary data](src/pages/javascript/data-formats/index.md) -- [URL and URLSearchParams](src/pages/http/url/index.md) -- [Data loading and rendering performance](src/pages/browser/data-performance/index.md) -- [RTL in frontend interfaces](src/pages/css/rtl/index.md) - [HTML, формы, доступность (accessibility), SEO и media](src/pages/web-platform/html/index.md) - [CSS](src/pages/css/index.md) - [Рендеринг браузера и производительность (performance)](src/pages/web-platform/browser/index.md) diff --git a/src/pages/browser/data-performance/index.md b/src/pages/browser/data-performance/index.md deleted file mode 100644 index 7093189..0000000 --- a/src/pages/browser/data-performance/index.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -layout: ../../../layouts/Layout.astro -title: Data loading and rendering performance -description: Вопросы и ответы -category: Frontend -kind: questions -order: 51 ---- - -## Data loading and rendering performance - -### Большие данные, сеть и rendering - -#### Middle+ or Senior - -
-Почему network latency не описывают через Big O?
-
- -Big O описывает рост вычислительной сложности относительно размера входа. Network latency зависит от расстояния, -маршрута, TLS, состояния соединения, сервера, CDN и качества сети пользователя. - -Frontend-разработчику важно разделять CPU-bound и I/O-bound проблемы. `O(n)` фильтрация может лагать из-за main thread, -а медленный API-запрос — из-за latency, throughput, backend queue или cache miss. Для первого помогают профилировщик, -алгоритм, virtual scroll и Web Worker; для второго — caching, batching, prefetch, pagination, timeout и retry policy. - -
- -
- -
-Когда нужны pagination, streaming или virtual scroll?
-
- -Если данных много, проблема обычно не только в загрузке, но и в памяти, вычислениях и DOM rendering. Pagination -ограничивает размер страницы данных, streaming позволяет начать обработку до полного ответа, virtual scroll рендерит -только видимую часть списка. - -В Angular large table часто начинают с server-side pagination/filtering/sorting. Если UX требует плавного просмотра -большого локального списка, добавляют virtual scroll и стабильный `track` в `@for`, чтобы не пересоздавать DOM без -необходимости. - -
- -
diff --git a/src/pages/css/index.md b/src/pages/css/index.md index 93a66fe..40bda13 100644 --- a/src/pages/css/index.md +++ b/src/pages/css/index.md @@ -1754,6 +1754,27 @@ Logical properties описывают flow-relative стороны: `margin-inli +
+Какие frontend-проблемы появляются при RTL?
+
+ +RTL влияет на direction, порядок inline content, иконки направления, отступы, scroll behavior, charts, drag and drop и +анимации. CSS logical properties (`margin-inline-start`, `inset-inline-end`) уменьшают количество отдельных overrides. + +Нельзя просто поменять `text-align`. Нужно проверить keyboard navigation, focus order, truncation, mixed LTR/RTL text, +date/number formatting и screenshots основных экранов. + +```css +.toolbar { + padding-inline-start: 1rem; + padding-inline-end: 0.5rem; +} +``` + +
+ +
+ #### Middle
diff --git a/src/pages/css/rtl/index.md b/src/pages/css/rtl/index.md deleted file mode 100644 index 4e7d741..0000000 --- a/src/pages/css/rtl/index.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -layout: ../../../layouts/Layout.astro -title: RTL in frontend interfaces -description: Вопросы и ответы -category: Frontend -kind: questions -order: 31 ---- - -## RTL in frontend interfaces - -### RTL, direction и CSS logical properties - -#### Middle - -
-Какие frontend-проблемы появляются при RTL?
-
- -RTL влияет на direction, порядок inline content, иконки направления, отступы, scroll behavior, charts, drag and drop и -анимации. CSS logical properties (`margin-inline-start`, `inset-inline-end`) уменьшают количество отдельных overrides. - -Нельзя просто поменять `text-align`. Нужно проверить keyboard navigation, focus order, truncation, mixed LTR/RTL text, -date/number formatting и screenshots основных экранов. - -```css -.toolbar { - padding-inline-start: 1rem; - padding-inline-end: 0.5rem; -} -``` - -
- -
diff --git a/src/pages/http/url/index.md b/src/pages/http/url/index.md deleted file mode 100644 index 926f63a..0000000 --- a/src/pages/http/url/index.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -layout: ../../../layouts/Layout.astro -title: URL and URLSearchParams -description: Вопросы и ответы -category: Frontend -kind: questions -order: 61 ---- - -## URL and URLSearchParams - -### URL encoding и сборка ссылок - -#### Middle - -
-Какие Unicode-проблемы могут быть в URL?
-
- -URL может содержать Unicode в hostname, path и query, но разные части кодируются по-разному. Hostname с не-ASCII -символами преобразуется через IDNA/Punycode, а path и query используют percent-encoding. Визуально похожие символы из -разных алфавитов могут создавать look-alike risks. - -Также встречаются разные формы нормализации Unicode, combining marks и emoji. Поэтому validation, search, canonical URL -и сравнение ссылок должны учитывать продуктовый контекст, а не простое побайтовое равенство строк. - -
- -
- -
-Почему нельзя собирать URL простой конкатенацией строк?
-
- -Конкатенация легко ломает encoding, `?`, `&`, `#`, пробелы, slash boundaries и значения с управляющими символами query. -Ошибочный URL может отправить неправильный query, сломать cache key, открыть redirect bug или привести к CORS-запросу не -на тот origin. - -Для query используйте `URLSearchParams`, а для абсолютных адресов — `URL`: - -```ts -const params = new URLSearchParams({ - page: String(page), - query: searchQuery, -}); - -const url = new URL('/api/search', location.origin); -url.search = params.toString(); - -await fetch(url); -``` - -`URLSearchParams` сам закодирует пробелы, амперсанды, Unicode и другие специальные символы в значениях параметров. - -
- -
diff --git a/src/pages/javascript/data-formats/index.md b/src/pages/javascript/data-formats/index.md deleted file mode 100644 index d5d8615..0000000 --- a/src/pages/javascript/data-formats/index.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -layout: ../../../layouts/Layout.astro -title: JavaScript data formats and binary data -description: Вопросы и ответы -category: Frontend -kind: questions -order: 71 ---- - -## JavaScript data formats and binary data - -### JSON, binary data и i18n - -#### Middle - -
-Почему стоимость JSON.parse и JSON.stringify важна?
-
- -`JSON.parse()` и `JSON.stringify()` выполняют синхронную работу и могут блокировать main thread на больших payload. -Большой ответ API может быть быстрым по сети, но затем зависнуть на parsing, нормализации и rendering. - -Практические решения: уменьшать payload, использовать pagination, отдавать только нужные поля, переносить тяжелую -обработку в Web Worker, кешировать уже нормализованные данные или выбирать streaming/binary format там, где это -действительно оправдано. - -
- -
- -
-Для чего нужны ArrayBuffer, TypedArray и Blob?
-
- -`ArrayBuffer` представляет участок бинарной памяти, `TypedArray` дает типизированный view поверх него, а `Blob` хранит -immutable file-like binary data. Эти API нужны для файлов, изображений, audio/video, WebSocket binary messages, -WebAssembly, canvas и stream processing. - -```ts -const response = await fetch('/assets/report.pdf'); -const file = await response.blob(); - -const url = URL.createObjectURL(file); -``` - -После `URL.createObjectURL()` важно вызвать `URL.revokeObjectURL(url)`, когда ссылка больше не нужна, чтобы не держать -память. - -
- -
- -
-Как использовать Intl API в frontend-приложении?
-
- -`Intl` дает стандартные formatter APIs для дат, чисел, валют, plural rules, relative time, lists и collation. Это лучше, -чем вручную собирать строки с датами и валютами. - -```ts -const price = new Intl.NumberFormat('ru-RU', { - style: 'currency', - currency: 'RUB', -}).format(1250); -``` - -Важно не создавать formatter в горячем loop без необходимости: formatter можно кешировать по locale/options. Также нужно -учитывать timezone, fallback locale и тесты для разных языков. - -
- -
diff --git a/src/pages/javascript/index.md b/src/pages/javascript/index.md index f58bb10..78dcd0c 100644 --- a/src/pages/javascript/index.md +++ b/src/pages/javascript/index.md @@ -145,6 +145,21 @@ Spread и `Object.assign` создают shallow copy enumerable own properties;
+
+Почему стоимость JSON.parse и JSON.stringify важна?
+
+ +`JSON.parse()` и `JSON.stringify()` выполняют синхронную работу и могут блокировать main thread на больших payload. +Большой ответ API может быть быстрым по сети, но затем зависнуть на parsing, нормализации и rendering. + +Практические решения: уменьшать payload, использовать pagination, отдавать только нужные поля, переносить тяжелую +обработку в Web Worker, кешировать уже нормализованные данные или выбирать streaming/binary format там, где это +действительно оправдано. + +
+ +
+ ### Типы, функции и область видимости #### Junior @@ -1032,6 +1047,49 @@ params.getAll('tag'); // ["angular", "rxjs"] +
+Какие Unicode-проблемы могут быть в URL?
+
+ +URL может содержать Unicode в hostname, path и query, но разные части кодируются по-разному. Hostname с не-ASCII +символами преобразуется через IDNA/Punycode, а path и query используют percent-encoding. Визуально похожие символы из +разных алфавитов могут создавать look-alike risks. + +Также встречаются разные формы нормализации Unicode, combining marks и emoji. Поэтому validation, search, canonical URL +и сравнение ссылок должны учитывать продуктовый контекст, а не простое побайтовое равенство строк. + +
+ +
+ +
+Почему нельзя собирать URL простой конкатенацией строк?
+
+ +Конкатенация легко ломает encoding, `?`, `&`, `#`, пробелы, slash boundaries и значения с управляющими символами query. +Ошибочный URL может отправить неправильный query, сломать cache key, открыть redirect bug или привести к CORS-запросу не +на тот origin. + +Для query используйте `URLSearchParams`, а для абсолютных адресов — `URL`: + +```ts +const params = new URLSearchParams({ + page: String(page), + query: searchQuery, +}); + +const url = new URL('/api/search', location.origin); +url.search = params.toString(); + +await fetch(url); +``` + +`URLSearchParams` сам закодирует пробелы, амперсанды, Unicode и другие специальные символы в значениях параметров. + +
+ +
+ ### Отмена асинхронных операций #### Junior @@ -1731,6 +1789,27 @@ const formatted = new Intl.NumberFormat('ru-RU', { +
+Как использовать Intl API в frontend-приложении?
+
+ +`Intl` дает стандартные formatter APIs для дат, чисел, валют, plural rules, relative time, lists и collation. Это лучше, +чем вручную собирать строки с датами и валютами. + +```ts +const price = new Intl.NumberFormat('ru-RU', { + style: 'currency', + currency: 'RUB', +}).format(1250); +``` + +Важно не создавать formatter в горячем loop без необходимости: formatter можно кешировать по locale/options. Также нужно +учитывать timezone, fallback locale и тесты для разных языков. + +
+ +
+
Какие ограничения есть у bitwise operators в JavaScript?
@@ -1749,6 +1828,28 @@ Math.pow(2, 40) | 0; // 0 +
+Для чего нужны ArrayBuffer, TypedArray и Blob?
+
+ +`ArrayBuffer` представляет участок бинарной памяти, `TypedArray` дает типизированный view поверх него, а `Blob` хранит +immutable file-like binary data. Эти API нужны для файлов, изображений, audio/video, WebSocket binary messages, +WebAssembly, canvas и stream processing. + +```ts +const response = await fetch('/assets/report.pdf'); +const file = await response.blob(); + +const url = URL.createObjectURL(file); +``` + +После `URL.createObjectURL()` важно вызвать `URL.revokeObjectURL(url)`, когда ссылка больше не нужна, чтобы не держать +память. + +
+ +
+ #### Middle+ or Senior
@@ -1811,6 +1912,37 @@ task. Если обработчик клика сортирует, фильтр
+
+Почему network latency не описывают через Big O?
+
+ +Big O описывает рост вычислительной сложности относительно размера входа. Network latency зависит от расстояния, +маршрута, TLS, состояния соединения, сервера, CDN и качества сети пользователя. + +Frontend-разработчику важно разделять CPU-bound и I/O-bound проблемы. `O(n)` фильтрация может лагать из-за main thread, +а медленный API-запрос — из-за latency, throughput, backend queue или cache miss. Для первого помогают профилировщик, +алгоритм, virtual scroll и Web Worker; для второго — caching, batching, prefetch, pagination, timeout и retry policy. + +
+ +
+ +
+Когда нужны pagination, streaming или virtual scroll?
+
+ +Если данных много, проблема обычно не только в загрузке, но и в памяти, вычислениях и DOM rendering. Pagination +ограничивает размер страницы данных, streaming позволяет начать обработку до полного ответа, virtual scroll рендерит +только видимую часть списка. + +В Angular large table часто начинают с server-side pagination/filtering/sorting. Если UX требует плавного просмотра +большого локального списка, добавляют virtual scroll и стабильный `track` в `@for`, чтобы не пересоздавать DOM без +необходимости. + +
+ +
+ ### JavaScript interview questions #### Junior