[{"data":1,"prerenderedAt":1222},["ShallowReactive",2],{"$fiqKN1pU00Y4l45jSJUbp_I7gucWCjFlNh6PIsLNALs0":3,"$fMMUdSFktwQFqMVGPrTtt3EC5yheBp7PzwIqznamFcMo":90,"$fc0LoAJgqXDLbKKd2JS_NpM4SuzBK8EycUXINSg09CKU":93,"$fM3ea55k6lKMPOTM84llDB26VSQDVVbxiQuSBFQw9P_c":98,"$f1Prj1xEczHja_-L7FyIGgRHd5_cSWHo7r6AE5aheAik":443,"$fI5fDmvm-5tr9wcH0eHaKZa1j3y_FQIQaHHPqbZxAHJE":665,"mdc--3n03oa-key":685,"mdc-5jbgzl-key":697,"mdc-v91w70-key":705,"mdc--a02rdc-key":723,"mdc--5uvvxu-key":731,"mdc-331l0-key":754,"mdc-u49n52-key":788,"mdc--73m5l5-key":803,"mdc-ub995l-key":823,"mdc-xwv8zc-key":831,"mdc-lhpkz5-key":911,"mdc-izmohi-key":949,"mdc-97qa1e-key":957,"mdc-3lh55z-key":1003,"mdc--5a5i2o-key":1045,"mdc-m2ikak-key":1214},{"content":4,"quizQuestionContent":61,"type":80,"pageMeta":81},[5,9,13,16,20,24,27,31,34,37,41,44,48,51,55,58],{"id":6,"value":7,"isTypeH1":8},"1859","Flexbox и Grid: заменяют ли они друг друга",true,{"id":10,"value":11,"anchor":12,"isTypeH2":8},"4221","Теория: ключевая идея","theory-key-idea",{"id":14,"value":15,"isTypeParagraph":8},"9739","Flexbox и CSS Grid — это две разные модели раскладки, созданные под разные типы разметки.  \nFlexbox описывает управление элементами вдоль главной оси и выравнивание по поперечной оси, то есть модель «в основном одномерная».  \nGrid описывает раскладку сразу по двум измерениям: строки и колонки задаются как единая система, по которой затем размещаются элементы.",{"id":17,"description":18,"titleAlert":19,"isTypeAlertInfo":8},"590","Правило «Flexbox для 1D, Grid для 2D» полезно как стартовая подсказка, но оно не является строгим законом: иногда Grid применяется для «почти одномерных» задач, а Flexbox — для «похожих на сетку» списков, если не требуется строгое совпадение колонок между строками.",null,{"id":21,"value":22,"anchor":23,"isTypeH3":8},"4260","Как мыслит Flexbox: оси и линии","how-flexbox-thinks-axes-and-lines",{"id":25,"value":26,"isTypeParagraph":8},"9740","Во Flexbox есть главная ось (main axis) и поперечная ось (cross axis), которые зависят от `flex-direction`.  \nЭлементы распределяются по главной оси, а по поперечной выполняется выравнивание через `align-items` и `align-content`.  \nЕсли включён перенос `flex-wrap: wrap`, элементы разбиваются на несколько линий (flex lines), и каждая линия рассчитывается как отдельная мини-раскладка.\n\nСхема (упрощённо):\n\n```\nflex-direction: row\n\nmain axis  ->  ->  ->  (раскладка)\ncross axis |\n           v (выравнивание)\n```\n\nПример типичного выравнивания внутри компонента:\n\n```\n.container {\ndisplay: flex;\nflex-direction: row;\nalign-items: center;\njustify-content: space-between;\ngap: 12px;\n}\n\n.item {\nflex: 0 1 auto;\n}\n```",{"id":28,"value":29,"anchor":30,"isTypeH3":8},"4261","Почему `flex-wrap` не равен Grid","why-flex-wrap-is-not-grid",{"id":32,"value":33,"isTypeParagraph":8},"9741","`flex-wrap` действительно создаёт несколько строк, но эти строки независимы: ширины и распределение свободного места считаются отдельно для каждой строки.  \nИз-за независимости строк колонки «не обязаны» совпадать по вертикали, даже если визуально ожидается строгая сетка.  \nЭто нормально для «резиновых» списков, но неудобно для макетов, где требуется строгая геометрия.\n\nПример «почти сетки» на Flexbox (подходит не всегда):\n\n```\n.cards {\ndisplay: flex;\nflex-wrap: wrap;\ngap: 16px;\n}\n\n.card {\nflex: 1 1 240px;\nmin-width: 200px;\n}\n```\n",{"id":35,"description":36,"titleAlert":19,"isTypeAlertWarning":8},"648","Если для получения ровных колонок приходится усложнять расчёты ширин, добавлять многочисленные исключения и «подгонять» поведение на разных размерах экрана, это часто означает, что задача по смыслу является Grid-задачей.",{"id":38,"value":39,"anchor":40,"isTypeH2":8},"4222","Теория: как мыслит Grid","how-grid-thinks",{"id":42,"value":43,"isTypeParagraph":8},"9742","Grid начинается с задания сетки: определяются колонки и строки (треку задаётся размер), после чего элементы размещаются по линиям или областям.  \nТак как сетка едина для всего контейнера, элементы разных строк могут строго выравниваться по одним и тем же колонкам.  \nGrid удобен для «каркаса» страницы и для карточных сеток, где ожидается предсказуемая структура.\n\nПример каркаса страницы на Grid:\n\n```\n.layout {\ndisplay: grid;\ngrid-template-columns: 240px 1fr;\ngrid-template-rows: auto 1fr auto;\ngap: 16px;\nmin-height: 100vh;\n}\n\n.header { grid-column: 1 / -1; }\n.sidebar { grid-column: 1; }\n.main { grid-column: 2; }\n.footer { grid-column: 1 / -1; }\n```\n\nСхема (упрощённо):\n\n```\ngrid\n\ncolumns: |  1  |     2     |\nrows:    +-----+-----------+\n         |     |           |\n         +-----+-----------+\n         |     |           |\n         +-----+-----------+\n```",{"id":45,"value":46,"anchor":47,"isTypeH3":8},"4262","Subgrid: согласование линий во вложенности","subgrid-aligning-nested-layouts",{"id":49,"value":50,"isTypeParagraph":8},"9743","В современных реализациях Grid существует возможность `subgrid`, позволяющая дочернему grid-контейнеру использовать линии родительской сетки по выбранной оси.  \nЭто полезно, когда у карточек или модулей внутри общего макета должны совпадать колонки/строки с внешним «каркасом», без ручного повторения размеров треков.  \nЕсли `subgrid` недоступен в целевой среде, обычно приходится дублировать `grid-template-columns` или перестраивать структуру разметки.",{"id":52,"value":53,"anchor":54,"isTypeH2":8},"4223","Практика: когда что выбирать","practical-when-to-choose-what",{"id":56,"value":57,"isTypeParagraph":8},"9744","Ниже приведён упрощённый ориентир выбора, основанный на том, требуется ли единая двумерная сетка или достаточно одномерного распределения.  \nВ реальной разработке часто получается связка: Grid для крупной структуры, Flexbox для внутреннего выравнивания элементов внутри каждого блока.  \n\n| Ситуация | Чаще подходит | Критерий выбора |\n|---|---|---|\n| Выравнивание элементов в строке/колонке (кнопки, меню, аватары + текст) | Flexbox | Основная логика вдоль одной оси, важны `justify-content` и `align-items`. |\n| Каркас страницы (шапка/сайдбар/контент/подвал) | Grid | Нужны и строки, и колонки как единый «скелет». |\n| Сетка карточек с ровными колонками | Grid | Требуется, чтобы элементы в разных строках выравнивались по одним колонкам. |\n| «Резиновый» список, где точные колонки не критичны | Flexbox | Перенос возможен, допускается, что строки ведут себя независимо. |\n| Вложенные блоки должны совпасть по линиям | Grid (+ `subgrid`) | Нужно наследование/согласование линий сетки. |\n\nПример комбинирования (Grid как каркас, Flexbox внутри компонентов):\n\n```\n.page {\ndisplay: grid;\ngrid-template-columns: 280px 1fr;\ngrid-template-rows: auto 1fr;\ngap: 20px;\n}\n\n.topbar {\ngrid-column: 1 / -1;\ndisplay: flex;\nalign-items: center;\njustify-content: space-between;\ngap: 12px;\npadding: 12px 16px;\n}\n\n.actions {\ndisplay: flex;\ngap: 8px;\nflex-wrap: wrap;\n}\n\n.cards {\ndisplay: grid;\ngrid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\ngap: 16px;\n}\n```",{"id":59,"value":60,"isTypeParagraph":8},"9745","Итого: Flexbox и Grid не заменяют друг друга, потому что Flexbox ориентирован на распределение и выравнивание в основном вдоль одной оси (удобно для компонентов), а Grid задаёт единую двумерную сетку строк и колонок (удобно для каркасов и строгих сеток); на практике оба подхода часто применяются вместе.",{"id":62,"options":63,"hint":77,"solution":78,"description":79},"1106",[64,68,71,74],{"id":65,"label":66,"isCorrect":67},"4552","Grid полностью заменил Flexbox, потому что Grid умеет всё то же самое и всегда проще",false,{"id":69,"label":70,"isCorrect":67},"4553","Flexbox полностью заменил Grid, потому что перенос строк `flex-wrap` делает Flexbox полноценной сеткой",{"id":72,"label":73,"isCorrect":8},"4554","Flexbox и Grid не заменяют друг друга: Flexbox лучше для 1D-раскладки, Grid — для 2D-сеток, часто применяются вместе",{"id":75,"label":76,"isCorrect":67},"4555","Flexbox и Grid являются устаревшими, в 2026 году их следует заменять только на `position: absolute` и `float`","Для ответа на вопрос «заменяют ли Flexbox и Grid друг друга» удобно пройти по чек-листу:  \n1) Определяется, нужно ли управление раскладкой по одной оси или по двум.  \n2) Проверяется, требуется ли строгое совпадение колонок между строками (если да — обычно выбирается Grid).  \n3) Уточняется уровень задачи: «каркас/страница» (чаще Grid) или «внутренности компонента» (чаще Flexbox).  \n4) Рассматривается комбинирование: внешний контейнер Grid, внутренние блоки Flexbox, либо наоборот — по смыслу макета.","**Правильный ответ: 3** - Flexbox и Grid не заменяют друг друга: Flexbox лучше для 1D-раскладки, Grid — для 2D-сеток, часто применяются вместе (правильный)","Заменяют ли Flexbox и Grid друг друга?","quizQuestion",{"title":79,"description":82,"ogTitle":7,"ogDescription":82,"ogImageUrl":83,"canonical":19,"ogLocale":84,"ogSiteName":85,"ogImageType":86,"ogImageWidth":87,"ogImageHeight":88,"ogType":89,"ogUrl":19},"Flexbox и Grid не заменяют друг друга: это разные модели раскладки, которые часто применяются вместе в одном интерфейсе","/og-image.png","ru_RU","goodwebjob.ru","image_jpeg","1200","630","article",{"siteName":91,"siteUrl":92},"GOOD WEB JOB!","https://goodwebjob.ru",[94],{"label":95,"slug":96,"to":97},"Подготовка к тех.интервью","technical-interview","/technical-interview/where-to-begin",{"navigationList":99,"navigationSublist":107},[100,103],{"path":97,"isActive":67,"name":101,"icon":102,"isNavbarMobileDisabled":8},"С чего начать?","material-symbols:visibility-outline-rounded",{"path":104,"isActive":8,"name":105,"icon":106,"isNavbarMobileDisabled":67},"/technical-interview/tasks","Сборник задач","material-symbols:task-outline",[108,117,143,155,161,302,326,335,341,404,425,431],{"title":109,"list":110,"isOpened":67},"Bash",[111,114],{"name":112,"path":113,"isActive":67},"Дан фрагмент bash-скрипта: cd ~; mkdir foo... Что в нем происходит?","/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":115,"path":116,"isActive":67},"Дан фрагмент bash-скрипта: target=$(ps -Af | grep $1 | head -n 1)...","/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"title":118,"list":119,"isOpened":67},"CSS",[120,123,126,129,132,135,138,140],{"name":121,"path":122,"isActive":67},"Дан HTML-код. Какой будет цвет у текста «Some dummy text»?","/technical-interview/tasks/the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":124,"path":125,"isActive":67},"Есть шаблон HTML и CSS кода. Какой будет цвет у текста «Таким образом, постоянное»?","/technical-interview/tasks/there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":127,"path":128,"isActive":67},"Есть шаблон вложенного HTML кода. Какой будет цвет у текста «One more dummy text»?","/technical-interview/tasks/there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":130,"path":131,"isActive":67},"Есть шаблон вложенного HTML кода. Будет ли display:block у body влиять на span?","/technical-interview/tasks/there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":133,"path":134,"isActive":67},"Есть HTML код. Будет ли font-weight на span влиять?","/technical-interview/tasks/there-is-an-html-code-will-font-weight-affect-span",{"name":136,"path":137,"isActive":67},"Flexbox и Grid, чем отличаются друг от друга?","/technical-interview/tasks/what-are-the-differences-between-flexbox-and-grid",{"name":79,"path":139,"isActive":67},"/technical-interview/tasks/do-flexbox-and-grid-replace-each-other",{"name":141,"path":142,"isActive":67},"Есть CSS и JS анимация. Какая между ними разница, что быстрее, что более удобно?","/technical-interview/tasks/there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"title":144,"list":145,"isOpened":67},"Git",[146,149,152],{"name":147,"path":148,"isActive":67},"Разрабатывал, взял закоммитил, запушил. Оказалось, что запушил не в ту ветку, точнее, коммит не в ту ветку. Какие действия?","/technical-interview/tasks/developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":150,"path":151,"isActive":67},"В git есть несколько вариантов слияния веток, какие? Чем отличаются?","/technical-interview/tasks/git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":153,"path":154,"isActive":67},"Какие существуют стратегии ветвления для работы команды? Что это такое?","/technical-interview/tasks/what-are-the-branching-strategies-for-the-team-what-is-it",{"title":156,"list":157,"isOpened":67},"HTML",[158],{"name":159,"path":160,"isActive":67},"Что такое HTML?","/technical-interview/tasks/what-is-html",{"title":162,"list":163,"isOpened":67},"JavaScript",[164,167,170,173,176,179,182,185,188,191,194,197,200,203,206,209,212,215,218,221,224,227,230,233,236,239,242,245,248,251,254,257,260,263,266,269,272,275,278,281,284,287,290,293,296,299],{"name":165,"path":166,"isActive":67},"Какие логические значения в console.log будут получены?","/technical-interview/tasks/prototype-what-logical-values-will-be-received-in-console-log",{"name":168,"path":169,"isActive":67},"Почему опасно писать прямо в прототипы базовых типов?","/technical-interview/tasks/why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":171,"path":172,"isActive":67},"Что вернёт следующий код? Object.create(null).hasOwnProperty('toString')","/technical-interview/tasks/what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":174,"path":175,"isActive":67},"Какое значение выведет консоль с object.property?","/technical-interview/tasks/what-value-will-the-console-output-with-object-property",{"name":177,"path":178,"isActive":67},"Что выведется в console.log([arr[0](), arr[0]()])?","/technical-interview/tasks/what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":180,"path":181,"isActive":67},"Что выведет console.log в результате выполнения цикла while?","/technical-interview/tasks/what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":183,"path":184,"isActive":67},"Есть функция и объект. Напишите все известные вам способы, чтобы вывести в консоли значение x из объекта, используя функцию","/technical-interview/tasks/there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":186,"path":187,"isActive":67},"Что вернёт метод book.getUpperName()?","/technical-interview/tasks/what-will-the-book-get-upper-name-method-return",{"name":189,"path":190,"isActive":67},"Переменные объявлены следующим образом: a=3; b=«hello»;. Укажите правильное утверждение","/technical-interview/tasks/variables-are-declared-as-follows-specify-the-correct-statement",{"name":192,"path":193,"isActive":67},"Что выведет консоль в случае присвоения свойства массиву по строковому положительному индексу?","/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":195,"path":196,"isActive":67},"Что выведет консоль в случае присвоения свойства массиву по строковому отрицательному индексу?","/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":198,"path":199,"isActive":67},"Что выведет консоль в случае удаления элемента массива с помощью оператора delete?","/technical-interview/tasks/what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":201,"path":202,"isActive":67},"Что вернёт этот код: typeof (function(){})()","/technical-interview/tasks/what-this-code-will-return-typeof-function",{"name":204,"path":205,"isActive":67},"Что получится в результате передачи объекта как аргумента в функцию и выполнения кода?","/technical-interview/tasks/what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":207,"path":208,"isActive":67},"Какие способы объявления функции есть в JavaScript?","/technical-interview/tasks/what-are-the-ways-to-declare-a-function-in-javascript",{"name":210,"path":211,"isActive":67},"Что такое this в JavaScript?","/technical-interview/tasks/what-is-this-in-javascript",{"name":213,"path":214,"isActive":67},"Что такое Event Loop, как работает?","/technical-interview/tasks/what-is-an-event-loop-and-how-does-it-work",{"name":216,"path":217,"isActive":67},"Что будет, если вызвать typeof на необъявленной переменной?","/technical-interview/tasks/what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":219,"path":220,"isActive":67},"Что показывает оператор typeof в JavaScript?","/technical-interview/tasks/what-does-the-typeof-operator-show-in-javascript",{"name":222,"path":223,"isActive":67},"Какие типы данных существует в JavaScript?","/technical-interview/tasks/what-types-of-data-exist-in-javascript",{"name":225,"path":226,"isActive":67},"Какую структуру использовать для хранения упорядоченного списка строк в JavaScript?","/technical-interview/tasks/what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":228,"path":229,"isActive":67},"Что вернет typeof для массива?","/technical-interview/tasks/what-will-typeof-return-for-an-array",{"name":231,"path":232,"isActive":67},"Почему оператор typeof, применённый к массиву, возвращает объект?","/technical-interview/tasks/why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":234,"path":235,"isActive":67},"Если нужно хранить список уникальных строк, какую структуру данных выбрать?","/technical-interview/tasks/if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":237,"path":238,"isActive":67},"Что возвращает typeof для new Set в JavaScript?","/technical-interview/tasks/what-does-typeof-return-for-new-set-in-javascript",{"name":240,"path":241,"isActive":67},"Почему в JavaScript два объекта с одинаковым содержимым при сравнении возвращают false?","/technical-interview/tasks/why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":243,"path":244,"isActive":67},"В чем разница между микро- и макро-тасками в JavaScript?","/technical-interview/tasks/what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":246,"path":247,"isActive":67},"arr.push(0) повлияет на массив так же, как если бы мы выполнили...","/technical-interview/tasks/arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":249,"path":250,"isActive":67},"Вернуть массив от 1 до n, где числа, кратные 3, заменены на 'fizz', кратные 5 - на 'buzz', а кратные и 3, и 5 одновременно - на 'fizzbuzz'","/technical-interview/tasks/returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":252,"path":253,"isActive":67},"Дана строка: 'one.two.three.four.five'. Необходимо из строки сделать вложенный объект","/technical-interview/tasks/the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":255,"path":256,"isActive":67},"Дано дерево (вложенный объект), надо найти сумму всех вершин","/technical-interview/tasks/given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":258,"path":259,"isActive":67},"Для каждого вложенного объекта нужно добавить свойство level, которое равняется числу - номер вложенности","/technical-interview/tasks/for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":261,"path":262,"isActive":67},"Для каждой ветви дерева записать номер вложенности данной ветви","/technical-interview/tasks/for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":264,"path":265,"isActive":67},"Есть массив, в котором лежат объекты с датами, необходимо отсортировать даты по возрастанию","/technical-interview/tasks/there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":267,"path":268,"isActive":67},"Есть слова в массиве, необходимо определить, состоят ли они из одних и тех же букв","/technical-interview/tasks/there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":270,"path":271,"isActive":67},"Есть строка, состоящая из разных скобок, необходимо проверить, закрыты ли все","/technical-interview/tasks/there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":273,"path":274,"isActive":67}," Найти в массиве неповторяющиеся числа","/technical-interview/tasks/find-non-repeating-numbers-in-an-array",{"name":276,"path":277,"isActive":67},"Напишите функцию, который сделает из массива объект","/technical-interview/tasks/write-a-function-that-will-make-an-object-out-of-an-array",{"name":279,"path":280,"isActive":67},"Необходимо проверить, являются ли две строки анаграммами друг друга","/technical-interview/tasks/checks-whether-two-strings-are-anagrams-of-each-other",{"name":282,"path":283,"isActive":67},"Нечётные числа должны отсортироваться по возрастанию, а чётные должны остаться на своих местах","/technical-interview/tasks/odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":285,"path":286,"isActive":67},"Определить, является ли слово палиндромом","/technical-interview/tasks/determines-whether-a-word-is-a-palindrome",{"name":288,"path":289,"isActive":67},"«Расплющивание» массива","/technical-interview/tasks/flattening-the-array",{"name":291,"path":292,"isActive":67},"Реализовать функцию, принимающую аргументы \"*\", \"1\", \"b\", \"1c\" и возвращающую строку \"1*b*1c\"","/technical-interview/tasks/implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":294,"path":295,"isActive":67},"Сжатие строк","/technical-interview/tasks/string-compression",{"name":297,"path":298,"isActive":67},"Уникализация значений в массиве","/technical-interview/tasks/unifying-values-in-an-array",{"name":300,"path":301,"isActive":67},"Числа от 1 до 100 находятся в массиве, они хаотично перемешанные, но в нём не хватает одного числа из этой последовательности. Необходимо найти его","/technical-interview/tasks/the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"title":303,"list":304,"isOpened":67},"React",[305,308,311,314,317,320,323],{"name":306,"path":307,"isActive":67},"Для чего нужен React, какие он решает проблемы?","/technical-interview/tasks/what-is-react-used-for-and-what-problems-does-it-solve",{"name":309,"path":310,"isActive":67},"Какой механизм лежит в основе оптимизации обновлений DOM в React?","/technical-interview/tasks/what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":312,"path":313,"isActive":67},"Если убрать в React VDOM/Fiber, и вручную изменять DOM, разве это не оптимально?","/technical-interview/tasks/if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":315,"path":316,"isActive":67},"Есть блок кода. Что в реальном DOM изменится после нажатия на кнопку?","/technical-interview/tasks/there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":318,"path":319,"isActive":67},"Есть код, в котором список и кнопка. Что в реальном DOM изменится после нажатия на кнопку?","/technical-interview/tasks/there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":321,"path":322,"isActive":67},"Зачем нужен Redux (Mobx/Effector)? Зачем нужен менеджер состояния? Какие проблемы решает?","/technical-interview/tasks/why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":324,"path":325,"isActive":67},"Что мешает организовать централизованное состояние без менеджера состояния? Если организовать состояние механизмами реакта: контекстом, стейтом, в чем проблема? Что менеджеры состояния привносят?","/technical-interview/tasks/what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",{"title":327,"list":328,"isOpened":67},"Алгоритмы",[329,332],{"name":330,"path":331,"isActive":67},"Что такое алгоритмическая сложность?","/technical-interview/tasks/what-is-algorithmic-complexity",{"name":333,"path":334,"isActive":67},"Какая алгоритмическая сложность у \"быстрой сортировки\"?","/technical-interview/tasks/what-is-the-algorithmic-complexity-of-quick-sort",{"title":336,"list":337,"isOpened":67},"Дебаггинг",[338],{"name":339,"path":340,"isActive":67},"Как диагностировать и исправить нежелательное изменение цвета фона по клику на кнопку, если исходный код сайта запутан и недоступен для прямого чтения?","/technical-interview/tasks/how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"title":342,"list":343,"isOpened":67},"Компьютерные сети",[344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401],{"name":345,"path":346,"isActive":67},"Как браузер после ввода домена понимает, откуда брать сайт?","/technical-interview/tasks/how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":348,"path":349,"isActive":67},"Что такое DNS, как DNS находит нужный IP-адрес?","/technical-interview/tasks/what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":351,"path":352,"isActive":67},"Как домен попадает в DNS в таблицу соответствия: домен – ip","/technical-interview/tasks/how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":354,"path":355,"isActive":67},"Как браузер решает, какое соединение ему открывать, TCP или UDP?","/technical-interview/tasks/how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":357,"path":358,"isActive":67},"Ключевые отличия TCP и UDP","/technical-interview/tasks/key-differences-between-tcp-and-udp",{"name":360,"path":361,"isActive":67},"\"TCP/IP\" - кем является TCP, а кем IP в данном случае?","/technical-interview/tasks/tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":363,"path":364,"isActive":67},"Что такое HTTP и из чего состоит?","/technical-interview/tasks/what-is-http-and-what-does-it-consist-of",{"name":366,"path":367,"isActive":67},"Что такое заголовки в HTTP и зачем они нужны?","/technical-interview/tasks/what-are-http-headers-and-why-do-we-need-them",{"name":369,"path":370,"isActive":67},"Что такое параметры в HTTP?","/technical-interview/tasks/what-are-http-parameters",{"name":372,"path":373,"isActive":67},"Где находится HTML-код в структуре HTTP-ответа?","/technical-interview/tasks/where-is-the-html-code-located-in-the-http-response-structure",{"name":375,"path":376,"isActive":67},"Чем отличаются 1.0, 1.1, 2.0, 3.0 версии HTTP?","/technical-interview/tasks/what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":378,"path":379,"isActive":67},"Пользователь авторизован на сайте. Как сервер узнает об этом с последующими другими заходами, что «я – авторизованный пользователь»?","/technical-interview/tasks/the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":381,"path":382,"isActive":67},"Что такое cookie?","/technical-interview/tasks/what-is-a-cookie",{"name":384,"path":385,"isActive":67},"Кто является инициатором записи cookie в браузере?","/technical-interview/tasks/who-initiates-the-cookie-recording-in-the-browser",{"name":387,"path":388,"isActive":67},"Есть ли возможность с клиента (с браузера) управлять cookie?","/technical-interview/tasks/is-it-possible-to-manage-cookies-from-the-client-browser",{"name":390,"path":391,"isActive":67},"Верно ли утверждение, что злоумышленник, контролирующий роутер и прослушивающий трафик, может получить логины и пароли от сайтов, на которые заходит клиент?","/technical-interview/tasks/is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":393,"path":394,"isActive":67},"Всё, что идет по HTTPS – оно защищено?","/technical-interview/tasks/is-everything-that-goes-through-https-secure",{"name":396,"path":397,"isActive":67},"Все данные зашифрованы, используется https. Хакер взламывает dns и делает подмену одного ip на другой, на фишинговый сайт. В этом случае, злоумышленник может получить данные (логин \\ пароль)?","/technical-interview/tasks/all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":399,"path":400,"isActive":67},"Есть веб-приложение. Помимо HTTP, какие протоколы того же уровня (Application Layer) можно дополнительно использовать в веб-приложении в браузере?","/technical-interview/tasks/there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":402,"path":403,"isActive":67},"Каким способом может выполняться авторизация пользователя на сайте?","/technical-interview/tasks/how-can-a-user-be-authorized-on-a-website",{"title":405,"list":406,"isOpened":67},"Отрисовка в браузере",[407,410,413,416,419,422],{"name":408,"path":409,"isActive":67},"Что происходит, когда HTTP прислал HTML? Что браузер дальше делает c HTML с учетом того, что она валидная?","/technical-interview/tasks/what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":411,"path":412,"isActive":67},"Как браузер парсит JavaScript и изображения при рендеринге?","/technical-interview/tasks/how-the-browser-parses-javascript-and-images-when-rendering",{"name":414,"path":415,"isActive":67},"Что в браузере блокирует рендеринг страницы?","/technical-interview/tasks/what-is-blocking-the-page-rendering-in-the-browser",{"name":417,"path":418,"isActive":67},"Что такое DOM в браузере? Что такое CSSOM?","/technical-interview/tasks/what-is-dom-in-a-browser-what-is-cssom",{"name":420,"path":421,"isActive":67},"Что является узлами в DOM?","/technical-interview/tasks/what-are-nodes-in-the-dom",{"name":423,"path":424,"isActive":67},"Из чего состоит CSSOM?","/technical-interview/tasks/what-does-cssom-consist-of",{"title":426,"list":427,"isOpened":67},"Ревью кода",[428],{"name":429,"path":430,"isActive":67},"По каким характеристикам, ревьюер понимает, что данный код - хороший, а этот код - плохой?","/technical-interview/tasks/how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"title":432,"list":433,"isOpened":67},"Теория вероятности",[434,437,440],{"name":435,"path":436,"isActive":67},"В комнате три человека. Какова вероятность того, что хотя бы двое из них одного пола? То есть два и более.","/technical-interview/tasks/there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":438,"path":439,"isActive":67},"Есть монета. Ее подбрасывают пять раз подряд. Каждый раз записывается, что выпало - орел или решка. Сколько разных последовательностей орлов и решек может при этом получиться?","/technical-interview/tasks/there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":441,"path":442,"isActive":67},"Как гарантированно найти лёгкую фальшивую монету среди 8 за минимальное число взвешиваний на чашечных весах?","/technical-interview/tasks/how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"slugs":444},[445,448,450,452,454,457,460,462,464,466,468,470,473,475,477,479,481,483,485,487,489,491,493,495,497,499,501,503,505,507,509,511,513,515,517,519,521,523,525,527,529,531,533,535,537,539,541,543,545,547,549,551,554,556,558,560,562,564,566,568,570,572,574,576,578,580,582,584,586,588,590,592,594,596,598,600,602,604,606,608,610,612,614,616,618,620,622,624,626,628,630,632,634,636,638,640,642,644,646,648,650,652,654,655,657,659,661,663],{"name":446,"value":447},"Теоретические задания","theoretical-tasks",{"name":201,"value":449},"what-this-code-will-return-typeof-function",{"name":101,"value":451},"where-to-begin",{"name":168,"value":453},"why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":455,"value":456},"Backend","backend",{"name":458,"value":459},"Frontend","frontend",{"name":165,"value":461},"prototype-what-logical-values-will-be-received-in-console-log",{"name":282,"value":463},"odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":273,"value":465},"find-non-repeating-numbers-in-an-array",{"name":246,"value":467},"arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":252,"value":469},"the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":471,"value":472},"Реализовать функцию, похоже как в Jquery","implement-a-function-similar-to-jquery",{"name":258,"value":474},"for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":174,"value":476},"what-value-will-the-console-output-with-object-property",{"name":177,"value":478},"what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":249,"value":480},"returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":279,"value":482},"checks-whether-two-strings-are-anagrams-of-each-other",{"name":285,"value":484},"determines-whether-a-word-is-a-palindrome",{"name":264,"value":486},"there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":291,"value":488},"implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":255,"value":490},"given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":261,"value":492},"for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":267,"value":494},"there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":300,"value":496},"the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"name":270,"value":498},"there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":276,"value":500},"write-a-function-that-will-make-an-object-out-of-an-array",{"name":180,"value":502},"what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":183,"value":504},"there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":195,"value":506},"what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":198,"value":508},"what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":297,"value":510},"unifying-values-in-an-array",{"name":288,"value":512},"flattening-the-array",{"name":186,"value":514},"what-will-the-book-get-upper-name-method-return",{"name":294,"value":516},"string-compression",{"name":192,"value":518},"what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":204,"value":520},"what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":345,"value":522},"how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":351,"value":524},"how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":354,"value":526},"how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":357,"value":528},"key-differences-between-tcp-and-udp",{"name":360,"value":530},"tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":363,"value":532},"what-is-http-and-what-does-it-consist-of",{"name":366,"value":534},"what-are-http-headers-and-why-do-we-need-them",{"name":369,"value":536},"what-are-http-parameters",{"name":372,"value":538},"where-is-the-html-code-located-in-the-http-response-structure",{"name":159,"value":540},"what-is-html",{"name":375,"value":542},"what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":378,"value":544},"the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":381,"value":546},"what-is-a-cookie",{"name":384,"value":548},"who-initiates-the-cookie-recording-in-the-browser",{"name":387,"value":550},"is-it-possible-to-manage-cookies-from-the-client-browser",{"name":552,"value":553},"Лайвкодинг","livecoding",{"name":171,"value":555},"what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":393,"value":557},"is-everything-that-goes-through-https-secure",{"name":396,"value":559},"all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":399,"value":561},"there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":411,"value":563},"how-the-browser-parses-javascript-and-images-when-rendering",{"name":408,"value":565},"what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":414,"value":567},"what-is-blocking-the-page-rendering-in-the-browser",{"name":417,"value":569},"what-is-dom-in-a-browser-what-is-cssom",{"name":420,"value":571},"what-are-nodes-in-the-dom",{"name":423,"value":573},"what-does-cssom-consist-of",{"name":121,"value":575},"the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":124,"value":577},"there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":127,"value":579},"there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":130,"value":581},"there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":133,"value":583},"there-is-an-html-code-will-font-weight-affect-span",{"name":136,"value":585},"what-are-the-differences-between-flexbox-and-grid",{"name":79,"value":587},"do-flexbox-and-grid-replace-each-other",{"name":141,"value":589},"there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"name":105,"value":591},"tasks",{"name":207,"value":593},"what-are-the-ways-to-declare-a-function-in-javascript",{"name":210,"value":595},"what-is-this-in-javascript",{"name":213,"value":597},"what-is-an-event-loop-and-how-does-it-work",{"name":216,"value":599},"what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":219,"value":601},"what-does-the-typeof-operator-show-in-javascript",{"name":222,"value":603},"what-types-of-data-exist-in-javascript",{"name":225,"value":605},"what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":228,"value":607},"what-will-typeof-return-for-an-array",{"name":231,"value":609},"why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":234,"value":611},"if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":237,"value":613},"what-does-typeof-return-for-new-set-in-javascript",{"name":306,"value":615},"what-is-react-used-for-and-what-problems-does-it-solve",{"name":312,"value":617},"if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":315,"value":619},"there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":318,"value":621},"there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":321,"value":623},"why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":339,"value":625},"how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"name":147,"value":627},"developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":150,"value":629},"git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":153,"value":631},"what-are-the-branching-strategies-for-the-team-what-is-it",{"name":429,"value":633},"how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"name":112,"value":635},"here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":115,"value":637},"here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"name":330,"value":639},"what-is-algorithmic-complexity",{"name":333,"value":641},"what-is-the-algorithmic-complexity-of-quick-sort",{"name":240,"value":643},"why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":402,"value":645},"how-can-a-user-be-authorized-on-a-website",{"name":243,"value":647},"what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":435,"value":649},"there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":438,"value":651},"there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":441,"value":653},"how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"name":95,"value":96},{"name":390,"value":656},"is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":348,"value":658},"what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":189,"value":660},"variables-are-declared-as-follows-specify-the-correct-statement",{"name":309,"value":662},"what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":324,"value":664},"what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",{"cooperation":666,"copyright":669,"reportError":670,"socialNetwork":672},{"link":667,"title":668},"https://t.me/baurinanton","Сотрудничество","© “GOOD WEB JOB!”",{"label":671,"link":667},"Сообщить об ошибке",{"label":673,"socialNetworkList":674},"Мы в соцсетях:",[675,678,681],{"icon":19,"link":676,"title":677},"https://max.ru/u/f9LHodD0cOKMaukdnnahTeL5pwvjrPfUaZ4S8_1rsNy9I9qsmc9Ar3kP_y8","Max",{"icon":679,"link":667,"title":680},"ic:baseline-telegram","Telegram",{"icon":682,"link":683,"title":684},"ri:vk-fill","https://vk.com/baurinanton","VK",{"data":686,"body":687},{},{"type":688,"children":689},"root",[690],{"type":691,"tag":692,"props":693,"children":694},"element","p",{},[695],{"type":696,"value":79},"text",{"data":698,"body":699},{},{"type":688,"children":700},[701],{"type":691,"tag":692,"props":702,"children":703},{},[704],{"type":696,"value":66},{"data":706,"body":707},{},{"type":688,"children":708},[709],{"type":691,"tag":692,"props":710,"children":711},{},[712,714,721],{"type":696,"value":713},"Flexbox полностью заменил Grid, потому что перенос строк ",{"type":691,"tag":715,"props":716,"children":718},"code",{"className":717},[],[719],{"type":696,"value":720},"flex-wrap",{"type":696,"value":722}," делает Flexbox полноценной сеткой",{"data":724,"body":725},{},{"type":688,"children":726},[727],{"type":691,"tag":692,"props":728,"children":729},{},[730],{"type":696,"value":73},{"data":732,"body":733},{},{"type":688,"children":734},[735],{"type":691,"tag":692,"props":736,"children":737},{},[738,740,746,748],{"type":696,"value":739},"Flexbox и Grid являются устаревшими, в 2026 году их следует заменять только на ",{"type":691,"tag":715,"props":741,"children":743},{"className":742},[],[744],{"type":696,"value":745},"position: absolute",{"type":696,"value":747}," и ",{"type":691,"tag":715,"props":749,"children":751},{"className":750},[],[752],{"type":696,"value":753},"float",{"data":755,"body":756},{},{"type":688,"children":757},[758,763],{"type":691,"tag":692,"props":759,"children":760},{},[761],{"type":696,"value":762},"Для ответа на вопрос «заменяют ли Flexbox и Grid друг друга» удобно пройти по чек-листу:",{"type":691,"tag":764,"props":765,"children":766},"ol",{},[767,773,778,783],{"type":691,"tag":768,"props":769,"children":770},"li",{},[771],{"type":696,"value":772},"Определяется, нужно ли управление раскладкой по одной оси или по двум.",{"type":691,"tag":768,"props":774,"children":775},{},[776],{"type":696,"value":777},"Проверяется, требуется ли строгое совпадение колонок между строками (если да — обычно выбирается Grid).",{"type":691,"tag":768,"props":779,"children":780},{},[781],{"type":696,"value":782},"Уточняется уровень задачи: «каркас/страница» (чаще Grid) или «внутренности компонента» (чаще Flexbox).",{"type":691,"tag":768,"props":784,"children":785},{},[786],{"type":696,"value":787},"Рассматривается комбинирование: внешний контейнер Grid, внутренние блоки Flexbox, либо наоборот — по смыслу макета.",{"data":789,"body":790},{},{"type":688,"children":791},[792],{"type":691,"tag":692,"props":793,"children":794},{},[795,801],{"type":691,"tag":796,"props":797,"children":798},"strong",{},[799],{"type":696,"value":800},"Правильный ответ: 3",{"type":696,"value":802}," - Flexbox и Grid не заменяют друг друга: Flexbox лучше для 1D-раскладки, Grid — для 2D-сеток, часто применяются вместе (правильный)",{"data":804,"body":805},{},{"type":688,"children":806},[807],{"type":691,"tag":692,"props":808,"children":809},{},[810,812,816,818,821],{"type":696,"value":811},"Flexbox и CSS Grid — это две разные модели раскладки, созданные под разные типы разметки.",{"type":691,"tag":813,"props":814,"children":815},"br",{},[],{"type":696,"value":817},"\nFlexbox описывает управление элементами вдоль главной оси и выравнивание по поперечной оси, то есть модель «в основном одномерная».",{"type":691,"tag":813,"props":819,"children":820},{},[],{"type":696,"value":822},"\nGrid описывает раскладку сразу по двум измерениям: строки и колонки задаются как единая система, по которой затем размещаются элементы.",{"data":824,"body":825},{},{"type":688,"children":826},[827],{"type":691,"tag":692,"props":828,"children":829},{},[830],{"type":696,"value":18},{"data":832,"body":833},{},{"type":688,"children":834},[835,880,885,897,902],{"type":691,"tag":692,"props":836,"children":837},{},[838,840,846,848,851,853,859,860,866,867,870,872,878],{"type":696,"value":839},"Во Flexbox есть главная ось (main axis) и поперечная ось (cross axis), которые зависят от ",{"type":691,"tag":715,"props":841,"children":843},{"className":842},[],[844],{"type":696,"value":845},"flex-direction",{"type":696,"value":847},".",{"type":691,"tag":813,"props":849,"children":850},{},[],{"type":696,"value":852},"\nЭлементы распределяются по главной оси, а по поперечной выполняется выравнивание через ",{"type":691,"tag":715,"props":854,"children":856},{"className":855},[],[857],{"type":696,"value":858},"align-items",{"type":696,"value":747},{"type":691,"tag":715,"props":861,"children":863},{"className":862},[],[864],{"type":696,"value":865},"align-content",{"type":696,"value":847},{"type":691,"tag":813,"props":868,"children":869},{},[],{"type":696,"value":871},"\nЕсли включён перенос ",{"type":691,"tag":715,"props":873,"children":875},{"className":874},[],[876],{"type":696,"value":877},"flex-wrap: wrap",{"type":696,"value":879},", элементы разбиваются на несколько линий (flex lines), и каждая линия рассчитывается как отдельная мини-раскладка.",{"type":691,"tag":692,"props":881,"children":882},{},[883],{"type":696,"value":884},"Схема (упрощённо):",{"type":691,"tag":886,"props":887,"children":891},"pre",{"className":888,"code":890,"language":696},[889],"language-text","flex-direction: row\n\nmain axis  ->  ->  ->  (раскладка)\ncross axis |\n           v (выравнивание)\n",[892],{"type":691,"tag":715,"props":893,"children":895},{"__ignoreMap":894},"",[896],{"type":696,"value":890},{"type":691,"tag":692,"props":898,"children":899},{},[900],{"type":696,"value":901},"Пример типичного выравнивания внутри компонента:",{"type":691,"tag":886,"props":903,"children":906},{"className":904,"code":905,"language":696},[889],".container {\ndisplay: flex;\nflex-direction: row;\nalign-items: center;\njustify-content: space-between;\ngap: 12px;\n}\n\n.item {\nflex: 0 1 auto;\n}\n",[907],{"type":691,"tag":715,"props":908,"children":909},{"__ignoreMap":894},[910],{"type":696,"value":905},{"data":912,"body":913},{},{"type":688,"children":914},[915,935,940],{"type":691,"tag":692,"props":916,"children":917},{},[918,923,925,928,930,933],{"type":691,"tag":715,"props":919,"children":921},{"className":920},[],[922],{"type":696,"value":720},{"type":696,"value":924}," действительно создаёт несколько строк, но эти строки независимы: ширины и распределение свободного места считаются отдельно для каждой строки.",{"type":691,"tag":813,"props":926,"children":927},{},[],{"type":696,"value":929},"\nИз-за независимости строк колонки «не обязаны» совпадать по вертикали, даже если визуально ожидается строгая сетка.",{"type":691,"tag":813,"props":931,"children":932},{},[],{"type":696,"value":934},"\nЭто нормально для «резиновых» списков, но неудобно для макетов, где требуется строгая геометрия.",{"type":691,"tag":692,"props":936,"children":937},{},[938],{"type":696,"value":939},"Пример «почти сетки» на Flexbox (подходит не всегда):",{"type":691,"tag":886,"props":941,"children":944},{"className":942,"code":943,"language":696},[889],".cards {\ndisplay: flex;\nflex-wrap: wrap;\ngap: 16px;\n}\n\n.card {\nflex: 1 1 240px;\nmin-width: 200px;\n}\n",[945],{"type":691,"tag":715,"props":946,"children":947},{"__ignoreMap":894},[948],{"type":696,"value":943},{"data":950,"body":951},{},{"type":688,"children":952},[953],{"type":691,"tag":692,"props":954,"children":955},{},[956],{"type":696,"value":36},{"data":958,"body":959},{},{"type":688,"children":960},[961,976,981,990,994],{"type":691,"tag":692,"props":962,"children":963},{},[964,966,969,971,974],{"type":696,"value":965},"Grid начинается с задания сетки: определяются колонки и строки (треку задаётся размер), после чего элементы размещаются по линиям или областям.",{"type":691,"tag":813,"props":967,"children":968},{},[],{"type":696,"value":970},"\nТак как сетка едина для всего контейнера, элементы разных строк могут строго выравниваться по одним и тем же колонкам.",{"type":691,"tag":813,"props":972,"children":973},{},[],{"type":696,"value":975},"\nGrid удобен для «каркаса» страницы и для карточных сеток, где ожидается предсказуемая структура.",{"type":691,"tag":692,"props":977,"children":978},{},[979],{"type":696,"value":980},"Пример каркаса страницы на Grid:",{"type":691,"tag":886,"props":982,"children":985},{"className":983,"code":984,"language":696},[889],".layout {\ndisplay: grid;\ngrid-template-columns: 240px 1fr;\ngrid-template-rows: auto 1fr auto;\ngap: 16px;\nmin-height: 100vh;\n}\n\n.header { grid-column: 1 / -1; }\n.sidebar { grid-column: 1; }\n.main { grid-column: 2; }\n.footer { grid-column: 1 / -1; }\n",[986],{"type":691,"tag":715,"props":987,"children":988},{"__ignoreMap":894},[989],{"type":696,"value":984},{"type":691,"tag":692,"props":991,"children":992},{},[993],{"type":696,"value":884},{"type":691,"tag":886,"props":995,"children":998},{"className":996,"code":997,"language":696},[889],"grid\n\ncolumns: |  1  |     2     |\nrows:    +-----+-----------+\n         |     |           |\n         +-----+-----------+\n         |     |           |\n         +-----+-----------+\n",[999],{"type":691,"tag":715,"props":1000,"children":1001},{"__ignoreMap":894},[1002],{"type":696,"value":997},{"data":1004,"body":1005},{},{"type":688,"children":1006},[1007],{"type":691,"tag":692,"props":1008,"children":1009},{},[1010,1012,1018,1020,1023,1025,1028,1030,1035,1037,1043],{"type":696,"value":1011},"В современных реализациях Grid существует возможность ",{"type":691,"tag":715,"props":1013,"children":1015},{"className":1014},[],[1016],{"type":696,"value":1017},"subgrid",{"type":696,"value":1019},", позволяющая дочернему grid-контейнеру использовать линии родительской сетки по выбранной оси.",{"type":691,"tag":813,"props":1021,"children":1022},{},[],{"type":696,"value":1024},"\nЭто полезно, когда у карточек или модулей внутри общего макета должны совпадать колонки/строки с внешним «каркасом», без ручного повторения размеров треков.",{"type":691,"tag":813,"props":1026,"children":1027},{},[],{"type":696,"value":1029},"\nЕсли ",{"type":691,"tag":715,"props":1031,"children":1033},{"className":1032},[],[1034],{"type":696,"value":1017},{"type":696,"value":1036}," недоступен в целевой среде, обычно приходится дублировать ",{"type":691,"tag":715,"props":1038,"children":1040},{"className":1039},[],[1041],{"type":696,"value":1042},"grid-template-columns",{"type":696,"value":1044}," или перестраивать структуру разметки.",{"data":1046,"body":1047},{},{"type":688,"children":1048},[1049,1059,1200,1205],{"type":691,"tag":692,"props":1050,"children":1051},{},[1052,1054,1057],{"type":696,"value":1053},"Ниже приведён упрощённый ориентир выбора, основанный на том, требуется ли единая двумерная сетка или достаточно одномерного распределения.",{"type":691,"tag":813,"props":1055,"children":1056},{},[],{"type":696,"value":1058},"\nВ реальной разработке часто получается связка: Grid для крупной структуры, Flexbox для внутреннего выравнивания элементов внутри каждого блока.",{"type":691,"tag":1060,"props":1061,"children":1062},"table",{},[1063,1087],{"type":691,"tag":1064,"props":1065,"children":1066},"thead",{},[1067],{"type":691,"tag":1068,"props":1069,"children":1070},"tr",{},[1071,1077,1082],{"type":691,"tag":1072,"props":1073,"children":1074},"th",{},[1075],{"type":696,"value":1076},"Ситуация",{"type":691,"tag":1072,"props":1078,"children":1079},{},[1080],{"type":696,"value":1081},"Чаще подходит",{"type":691,"tag":1072,"props":1083,"children":1084},{},[1085],{"type":696,"value":1086},"Критерий выбора",{"type":691,"tag":1088,"props":1089,"children":1090},"tbody",{},[1091,1123,1141,1158,1175],{"type":691,"tag":1068,"props":1092,"children":1093},{},[1094,1100,1105],{"type":691,"tag":1095,"props":1096,"children":1097},"td",{},[1098],{"type":696,"value":1099},"Выравнивание элементов в строке/колонке (кнопки, меню, аватары + текст)",{"type":691,"tag":1095,"props":1101,"children":1102},{},[1103],{"type":696,"value":1104},"Flexbox",{"type":691,"tag":1095,"props":1106,"children":1107},{},[1108,1110,1116,1117,1122],{"type":696,"value":1109},"Основная логика вдоль одной оси, важны ",{"type":691,"tag":715,"props":1111,"children":1113},{"className":1112},[],[1114],{"type":696,"value":1115},"justify-content",{"type":696,"value":747},{"type":691,"tag":715,"props":1118,"children":1120},{"className":1119},[],[1121],{"type":696,"value":858},{"type":696,"value":847},{"type":691,"tag":1068,"props":1124,"children":1125},{},[1126,1131,1136],{"type":691,"tag":1095,"props":1127,"children":1128},{},[1129],{"type":696,"value":1130},"Каркас страницы (шапка/сайдбар/контент/подвал)",{"type":691,"tag":1095,"props":1132,"children":1133},{},[1134],{"type":696,"value":1135},"Grid",{"type":691,"tag":1095,"props":1137,"children":1138},{},[1139],{"type":696,"value":1140},"Нужны и строки, и колонки как единый «скелет».",{"type":691,"tag":1068,"props":1142,"children":1143},{},[1144,1149,1153],{"type":691,"tag":1095,"props":1145,"children":1146},{},[1147],{"type":696,"value":1148},"Сетка карточек с ровными колонками",{"type":691,"tag":1095,"props":1150,"children":1151},{},[1152],{"type":696,"value":1135},{"type":691,"tag":1095,"props":1154,"children":1155},{},[1156],{"type":696,"value":1157},"Требуется, чтобы элементы в разных строках выравнивались по одним колонкам.",{"type":691,"tag":1068,"props":1159,"children":1160},{},[1161,1166,1170],{"type":691,"tag":1095,"props":1162,"children":1163},{},[1164],{"type":696,"value":1165},"«Резиновый» список, где точные колонки не критичны",{"type":691,"tag":1095,"props":1167,"children":1168},{},[1169],{"type":696,"value":1104},{"type":691,"tag":1095,"props":1171,"children":1172},{},[1173],{"type":696,"value":1174},"Перенос возможен, допускается, что строки ведут себя независимо.",{"type":691,"tag":1068,"props":1176,"children":1177},{},[1178,1183,1195],{"type":691,"tag":1095,"props":1179,"children":1180},{},[1181],{"type":696,"value":1182},"Вложенные блоки должны совпасть по линиям",{"type":691,"tag":1095,"props":1184,"children":1185},{},[1186,1188,1193],{"type":696,"value":1187},"Grid (+ ",{"type":691,"tag":715,"props":1189,"children":1191},{"className":1190},[],[1192],{"type":696,"value":1017},{"type":696,"value":1194},")",{"type":691,"tag":1095,"props":1196,"children":1197},{},[1198],{"type":696,"value":1199},"Нужно наследование/согласование линий сетки.",{"type":691,"tag":692,"props":1201,"children":1202},{},[1203],{"type":696,"value":1204},"Пример комбинирования (Grid как каркас, Flexbox внутри компонентов):",{"type":691,"tag":886,"props":1206,"children":1209},{"className":1207,"code":1208,"language":696},[889],".page {\ndisplay: grid;\ngrid-template-columns: 280px 1fr;\ngrid-template-rows: auto 1fr;\ngap: 20px;\n}\n\n.topbar {\ngrid-column: 1 / -1;\ndisplay: flex;\nalign-items: center;\njustify-content: space-between;\ngap: 12px;\npadding: 12px 16px;\n}\n\n.actions {\ndisplay: flex;\ngap: 8px;\nflex-wrap: wrap;\n}\n\n.cards {\ndisplay: grid;\ngrid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\ngap: 16px;\n}\n",[1210],{"type":691,"tag":715,"props":1211,"children":1212},{"__ignoreMap":894},[1213],{"type":696,"value":1208},{"data":1215,"body":1216},{},{"type":688,"children":1217},[1218],{"type":691,"tag":692,"props":1219,"children":1220},{},[1221],{"type":696,"value":60},1775735658956]