
CSS Grid на практике: три макета, которые верстают чаще всего
Разбираем три реальных макета — карточки товаров, holy grail и панель дашборда — на чистом CSS Grid. С рабочей разметкой, которую можно скопировать и запустить.

Разбираем три реальных макета — карточки товаров, holy grail и панель дашборда — на чистом CSS Grid. С рабочей разметкой, которую можно скопировать и запустить.

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

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

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

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

После включения strict в tsconfig сборка прошла зелёной, а в продакшене платёжный виджет начал падать с TypeError. Разбираем, где типы соврали и почему компилятор пропустил ошибку.

Проект перевели с JavaScript на TypeScript, но половина файлов до сих пор пестрит any, а сборка молчит про реальные баги. Разбираем, что искать на ревью и какие места миграции ломаются первыми.

Код, который проходит ревью по типам, падает в проде на объёме: Promise.all кладёт память, any прячет невалидные данные, JSON.parse без валидации роняет обработчик. Разбираем формулировки замечаний, которые ловят это до релиза.

Что реально стоит писать в комментариях к пулл-реквесту на TypeScript: не про табы и точки с запятой, а про any, приведения типов и утечки типовой безопасности через границы модулей.

Минификация урезала бандл на 15%, а Time to Interactive не сдвинулся. Разбираем, что в размере бандла реально бьёт по скорости, а что — оптимизация ради строчки в отчёте.

Функция, которую V8 уже скомпилировал в оптимизированный код, может внезапно вернуться к интерпретатору и потерять в скорости в разы. Разбираем, что провоцирует деоптимизацию и как её ловить.