Я не самый талантливый кодер в мире. Правда. Так что я стараюсь писать как можно меньше кода. Чем меньше кода я пишу, тем меньше кода может ломаться, поддерживаться и требовать пояснений.
А еще я ленивый — мед, да еще и ложкой (я решил использовать в статье аналогии с едой).
Но, оказывается, что единственный гарантированный способ повысить производительность в вебе — это писать меньше кода. Минифицировать? Окей. Сжимать? Ну, да. Кэшировать? Звучит неплохо. Вообще отказываться кодить или использовать чужой код изначально? А вот теперь — в яблочко! Что есть на входе — должно выйти на выходе в той или иной форме, независимо от того, смог ли ваш сборщик растворить и переварить это своими желудочными соками (я, пожалуй, откажусь от пищевых аналогий).
И это не все. Кроме видимых улучшений производительности, где вам требуется то же количество кода, но его сначала нужно разжевать (не смог удержаться), вы также можете сэкономить. Моему провайдеру без разницы, посылаю ли я кучу маленьких писем или одно большое: все складывается.
В стремлении к уменьшению мне больше всего нравится вот что: в конце остается только то, что реально нужно, только то, что по-настоящему требуется пользователю. Огромная фотка какого-то чувака, пьющего латте? Выкинуть. Кнопки социальных сетей, которые подсасывают кучу левого кода и ломают дизайн страницы? Пинок под зад им. Эта хреновина на JavaScript, которая перехватывает правый клик и показывает кастомное модальное окно? Выставить на мороз!
Речь идет не только про подключение штук, которые ломают интерфейс. То, как вы пишете свой собственный код, тоже играет большую роль в стремлении к уменьшению кода. Вот несколько советов и идей. Я писал о них ранее, но в контексте удобства и отзывчивого дизайна. Просто так получается, что гибкий, удобный веб требует меньше контроля с нашей стороны и его сложнее сломать.
WAI-ARIA
Во-первых, WAI-ARIA != web accessibility. Это просто инструмент для улучшения совместимости с некоторыми вспомогательными технологиями вроде экранного диктора. Поэтому первое правило ARIA — это не использовать его, если не требуется.
LOL, нет:
<div role="heading" aria-level="2">Subheading</div>Да:
<h2>Subheading</h2>Преимущество использования нативных элементов в том, что зачастую не нужно будет кодировать собственное поведение. Следующая реализация чекбокса не только слишком многословная, но также зависит от JavaScript, который контролирует изменение состояния и переопределяет стандарт работы с атрибутами и методом GET. Кода больше, и он менее надежный. Красота!
<div role="checkbox" aria-checked="false" tabindex="0" id="checkbox1" aria-labelledby="label-for-checkbox1"></div>
<div class="label" id="label-for-checkbox1">My checkbox label</div>Стили? Не волнуйтесь, все под контролем. Если вообще нужны кастомные стили, конечно.
<input type="checkbox" id="checkbox1" name="checkbox1">
<label for="checkbox1">My checkbox label</label>Сетка
Вы когда-нибудь получали удовольствие от использования или чтения веб-сайта с более чем двумя колонками? Слишком много информации, которая требует внимания. «Интересно, какая из этих штук, похожих на навигацию, на самом деле является нужной мне навигацией?». Это риторический вопрос: я не знаю, что делать дальше и покидаю сайт.
Конечно, иногда хочется поставить какую-нибудь штуку рядом с другой штукой. Например, поисковую выдачу или еще что-то. Но зачем тянуть сюда тонну библиотек для сеток? Флексбокс умеет это буквально с двумя блоками определений.
.grid {
display: flex;
flex-flow: row wrap;
}
.grid > * {
flex-basis: 10em;
flex-grow: 1;
}Теперь все будет растягиваться до примерно 10em в ширину. Количество колонок зависит от того, сколько ячеек размером примерно 10em поместится в viewport. Готово. Идем дальше. А, кстати, давайте еще обсудим такую штуку:
width: 57.98363527356473782736464546373337373737%;Знаете ли вы, что это число основано на мистической пропорции? Пропорции, которая должна вызывать чувство спокойствия и благоговения? Нет, я не знал об этом и мне пофиг. Просто сделайте кнопку "Порно" достаточно большой, чтоб было видно.
Отступы
Мы знаем, как это делается. Задавайте отступ для всех элементов, используя универсальные селекторы. И переопределяйте когда нужно. Много не потребуется.
body * + * {
margin-top: 1.5rem;
}Нет, универсальный селектор не ухудшит производительность. Это ересь.
Вид
Не нужен целый Angular или Meteor чтобы поделить простую страницу на "views". Views это просто куски страницы, которые видны в те моменты, когда не видны другие. Это можно сделать с CSS:
.view {
display: none;
}
.view:target {
display: block;
}«Но одностраничные приложения запускают код при загрузке view!», — скажете вы. Я понимаю. Для этого существует событие onhashchange. Не нужно библиотек, и ваши ссылки будут нормальными, стандартными, их можно добавлять в закладки. Это клево. Об этом можно почитать больше, если интересно.
Размер шрифта
Тонкая настройка размера шрифта может сильно раздуть ваши блоки media. Поэтому нужно отдать это в руки CSS. Одна строчка кода.
font-size: calc(1em + 1vw);Э-э-э… вот и все. Есть даже минимальный размер, так что не будет нечитаемых крохотных букв на мобильных устройствах.
10k Apart
Как я сказал, я не лучший в мире кодер. Я просто знаю несколько трюков. Но с небольшим количеством знаний можно сделать очень многое. В этом суть соревнования «10k Apart» — выяснить, чего можно добиться с 10kb или меньше. Есть большие призы. Я как судья не могу дождаться, когда возьмусь за изучение всех крутых заявок, идей и реализаций, которые мне хотелось бы придумать самому. А что придумаете вы?
Автор: freetonik
