Пишіть менше коду, блін

Я не найталановитіший кодер у світі. Правда. Так що я намагаюся писати якомога менше коду. Чим менше коду я пишу, тим менше коду може ламатися, підтримуватися і вимагати пояснень.
А ще я лінивий — мед, та ще й ложкою (я вирішив використовувати у статті аналогією з їжею).
Але, виявляється, що єдиний гарантований спосіб підвищити продуктивність в вебі — це писати менше коду. Минифицировать? Окей. Стискати? Ну, так. Кешувати? Звучить непогано. Взагалі відмовлятися кодити або використовувати чужий код спочатку? А ось тепер — в яблучко! Що є на вході — повинно вийти на виході в тій чи іншій формі, незалежно від того, чи зміг ваш складальник розчинити і переварити це своїми шлунковими соками (я, мабуть, відмовлюся від харчових аналогій).
І це не все. Крім видимих поліпшень продуктивності, де вам потрібно те ж кількість коду, але його спочатку треба розжувати (не зміг втриматися), ви також можете заощадити. Мою провайдера без різниці, посилаю я купу маленьких листів або одне велике: все складається.
У прагненні до зменшення мені найбільше подобається ось що: в кінці залишається тільки те, що реально потрібне, тільки те, що по-справжньому потрібно користувачеві. Величезна фотка якогось чувака, що п'є латте? Викинути. Кнопки соціальних мереж, які подсасывают купу лівого коду і ламають дизайн сторінки? Стусан під зад їм. Ця чортівня на 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.5 rem;
}

Ні, універсальний селектор не погіршить продуктивність. Це єресь.
Вигляд
Не потрібен цілий 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 або менше. Є великі призи. Я як суддя не можу дочекатися, коли візьмуся за вивчення всіх крутих заявок, ідей і реалізацій, які мені хотілося б придумати самому. А що ви придумаєте?
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.