#статья дня

Вильям Кеннеди написал исчерпывающий трактат в защиту single-page applications aka SPA aka веб-приложений.

Рекомендую ознакомиться: https://williamkennedy.ninja/javascript/2022/05/03/in-defence-of-the-single-page-application/

Пойдёт в копилку любимых статей, наряду с руководством об упорядочивании файлов в веб-приложениях от Дэна Абрамова: http://react-file-structure.surge.sh/ 😉

#article #jff

#статья дня

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

Верстка была, мягко говоря, небрежной. Количество мелких огрехов и багов UX поражало. Тут кривой вертикальный ритм, тут все слиплось, здесь текст вылез за пределы блока, там выделение текста закрывает аккордеон. Про то, что все разваливалось на узких экранах говорить уже не приходится.

Да, часть огрехов можно было списать на несовершенство дизайн-системы, часть — на не до конца завершённые мысли дизайнеров и их невнимательность. Но вот что надо помнить.

Верстальщик — не ксерокс. Его задачей не является точный перенос статичной картинки на такой же статичный носитель. У него должно быть своё мнение. Обязано.

Если в вашей компании так не считают — БЕГNТЕ.

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

А небезызвестный Ахмад Шадид — закрепил. И назвал это «Defensive CSS». Обороняющиеся стили: https://ishadeed.com/article/defensive-css/

Незнание английского не страшно, там хорошие иллюстрации. Как всегда.

Ахмад делает из этого целый проект, примеров будет больше.

P. S. Подписчик прислал перевод на русский, вот теперь точно прекрасно: https://habr.com/ru/post/648537/

Оставайтесь на связи :)

#css #article

#статья дня

Действительно адаптивный дизайн может быть достигнут только с использованием контейнерных запросов. Ведь ширина экрана это, конечно, прекрасно, но ширина контейнера — это как раз то, что нас всегда волновало.

Ну и ограничиваться одним только вертикально-горизонтально всегда раздражало.

Потому, вашему вниманию — новая статья Ахмада Шадида: «Верстка секций современным CSS».

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

Особое внимание уделено таким возможностям, как container queries, logical properties и flexible gaps. Шадид показывает, как всё это помогает создавать действительно устойчивые макеты, которые не ломаются при изменении контента, языка или даже направления текста.

И, как всегда у Ахмада, статья не ограничивается теорией — множество живых демо, аккуратных примеров и пояснений, зачем это всё нужно.

А, ссылка: https://ishadeed.com/article/modern-css-section-layout/

#css #article #container #cqw

#заметка дня

Иногда стоит выкладывать рекламу, чтобы просто увидеть, что вы живы, котаны. На посты такого количества реакций никогда нет.

А тема сегодняшней заметки — очередная статья на тему «Нам не нужен useEffect»: вот тут.

В чём же проблема таких статей? Да на самом деле проблемы-то особой и нет, есть некоторая недосказанность.

И недосказанность эта связана с тем, что ВСЕ ваши прекрасные библиотеки управления состоянием, анимацией, загрузкой данных и кешем — будут использовать useEffect внутри себя. И говорить, что вы отказываетесь от useEffect — не очень верно.

Что верно, так это то, что их имплементация будет просто намного лучше протестирована. Ну, возможно.

Тем не менее, самый любимый пример, когда отказ от useEffect действительно имеет смысл — на иллюстрации.

Суть проста: если ваше действие требует полной перезагрузки логики, перерисовки компонента — так перерисуйте, блин, компонент, а не пытайтесь через useEffect чота там стартануть.

Продублирую текстом:

// ❌ BAD: Effect attempts to emulate remount behavior
function VideoPlayer({ videoId }) {
  useEffect(() => {
    loadVideo(videoId);
  }, [videoId]);
}

// ✅ GOOD: key forces clean remount
function VideoPlayer({ videoId }) {
  useMountEffect(() => {
    loadVideo(videoId);
  });
}

function VideoPlayerWrapper({ videoId }) {
  return <VideoPlayer key={videoId} videoId={videoId} />;
}

Это настолько чисто, элегантно и понятно — что удивляешься, почему это не стало общим паттерном.

Впрочем, дело за вами, котаны.

#react #useeffect #article

Любите ли вы шрифтовые лонгриды так же, как люблю их я? Тут про один шрифт — текста на хороший журнал и 600 фотографий.

В 2007 году Марцин Вихари впервые приехал в Нью-Йорк и фотографировал там все шрифты, которые положено любить: Helvetica, Akzidenz Grotesk, Gotham. Один он при этом вообще не заметил — хотя тот был буквально вокруг.

Спустя десять лет Вихари обратил внимание на странные буквы на старых клавиатурах. Квадратные, местами почти детские: чудная Q, слишком широкие P и R, странные цифры. Он попытался выяснить, что это за шрифт. Сервисы распознавания давали разные ответы, скачать его было негде, а редкие упоминания называли его Gorton.

А потом Gorton начал попадаться в других местах.

На пароме. В национальном парке. На домофоне. На крышке уличного оборудования. В лифте. У стоматолога. В переулке.

И тут уже стало интересно: что это вообще за шрифт и почему он везде?

Первая разгадка нашлась довольно быстро. Gorton оказался шрифтом для гравировальных станков: буквы вырезались фрезой по шаблону, поэтому все линии одинаковой толщины, окончания круглые, а острых углов почти нет. В каталоге производителя он нашёл Gorton Normal 1952 года. Потом каталог 1935-го. Потом 1925-го. Потом — 1902-го.

Казалось бы, расследование закончено.

Но дальше выяснилось, что Gorton встречается там, где ничего не гравировали: напечатанным на бумаге, нарисованным краской на металле. Потом обнаружились его родственники в системах технического черчения, трафаретах, Letraset, военных стандартах и ранних компьютерных шрифтах. Gorton оказался на локомотивах, подлодках, истребителях, атомных объектах и клавишах компьютера Apollo.

А ещё позже Вихари увидел его в Австралии — только немного другим. И это вывело расследование на новый след: оказалось, что история начинается не с американской Gorton Machine Company, как он думал годами, а ещё раньше и на другом континенте — с британского производителя объективов Taylor, Taylor & Hobson, который в 1894 году придумал машину для гравировки надписей на линзах и алфавит для неё.

К этому моменту автор уже семь лет был одержим Gorton. А в Нью-Йорке в итоге прошёл больше ста миль и сделал тысячи фотографий одного-единственного шрифта.

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

The hardest working font in Manhattan

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

#font #article