x
 
Антон Ефремов
2 июля 2020
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Расскажите, как автор советов работает с маргиналиями?

Если верстать руками через float, получается, что на узком экране с линейным отображением сноска будет до абзаца, к которому относится. Неправильно как-то. Судя по коду, советы бюро дублируют текст и до, и после абзаца как раз на этот случай, а показывают только что-то одно в зависимости от размера экрана. Как это выглядит для автора советов?


Антон!

В «Сове­тах» и на сайте бюро исполь­зу­ется один и тот же тек­сто­вый дви­жок. Можно, напри­мер, взять исход­ный код этого совета и вста­вить в любую ста­тич­ную стра­ницу. При этом ничего не сло­ма­ется. Сам исход­ный код пишется с исполь­зо­ва­нием шаб­ло­ни­за­тора Паг.

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

Напри­мер, дизай­неры сами вер­стают кар­точки про­ек­тов, вёдра и мно­гое дру­гое. Какие‑то вещи свер­стать или запро­грам­ми­ро­вать легче, какие‑то слож­нее, но ито­го­вая цель — мак­си­мально облег­чить вёрстку и авто­ма­ти­зи­ро­вать всё, что можно автоматизировать.

Мар­ги­на­лии пол­но­стью авто­ма­ти­зи­ро­ваны. Автору нужно про­сто поста­вить модуль +sidenote перед абза­цем, справа от кото­рого должна появиться мар­ги­на­лия. Внутри +sidenote может быть всё что угодно.

Пре­про­цес­сор высчи­тает отступы для position: absolute, чтобы модуль встал в нуж­ное место, и ском­пи­ли­рует весь код стра­ницы из Пага в ХТМЛ. Затем пост­про­цес­сор ХТМЛ ско­пи­рует код мар­ги­на­лии и поста­вит его после абзаца, чтобы пока­зы­вать его в узком окне. Таким обра­зом, в широ­ком окне мар­ги­на­лия пока­жется справа от абзаца, в узком — после.

Кусок исход­ного кода с мар­ги­на­лией выше:

+sidenote: a(href="https://github.com/pugjs/pug") Паг на Гит­хабе
p В «Сове­тах» и на сайте бюро исполь­зу­ется один и тот же тек­сто­вый дви­жок. Можно, напри­мер, взять исход­ный код этого совета и вста­вить в любую ста­тич­ную стра­ницу. При этом ничего не сло­ма­ется. Сам исход­ный код пишется с исполь­зо­ва­нием шаб­ло­ни­за­тора Паг.

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

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Как бороться с багами? Часть четвёртая: отслеживать производительность Что такое непрерывная доставка? Специфичность селекторов в ЦСС Как написать аккуратный код? Часть четвёртая: ответственность




Недавно всплыло

6 Практика: формулировка полезного действия 9 Как выжить в дистанционной работе. Инструменты на удалёнке 4 Некоторые редакторы переписывают твои советы, а потом продают как свои курсы 2