/best-front-practices

Best frontend practices

Дизайн

Если понадобится стилизовать форму или какой-нибудь элемент самой

  1. Статья

Используйте меньшее количество границ

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

  • box-shadow
  • Используйте два разных цвета фона
  • Добавьте дополнительный интерва

Не увеличивайте значки, которые должны быть маленькими

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

Используйте акцент для границы, чтобы добавить цвет в безликий дизайн

Не каждая кнопка нуждается в цветном фоне

Текст/Шрифты

  • Онлайн типографов - для оформление текста, чтобы не расставлять ручками неразрывные пробелы и т.п.
  • Оптимальная высота строки (line-height) 1.4 — 1.8 от размера шрифта.
  • Конвертор шрифтов
  • На айфоне бывает неконтролируемый резайз шрифтов, надо поробовать добавить: -webkit-text-size-adjust: none;
  • Заметка на будующее - доклад от Юлии Бухваловой про кастомные шрифты

Изображения

Видео

  • документация гугла . ВАЖНО не забыть атрибут muted на <video> с autoplay

  • атрибут playsinline у <video> не позволяет ему воспроизводиться в полноэкранном режиме на iPhone

Верстка элементов

select {
    width: 100%;
    border: 0;
    height: 3.7rem;
    line-height: 1em;
    /*text-indent: .01px;*/
    /*text-overflow: '';*/
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none; 
    -moz-outline: none;
    padding-left: 5%;
    font-weight: bold;
    outline: none !important;
    color: black;
}

Возможно нужен не селект на самом деле, есть еще datalist и optgroup

&:-moz-focusring {
    outline: none;
}

&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.divInCenter {
    width: 300px; /* жестко задана ширина */
    position: absolute;
    left: 50%;
    margin-left: -150px; /* отрицательный отступ равный 1/2 ширины (width) позиционируемого блока */ 
}
.text-block {
    overflow: hidden;
    height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; 
}
.rotated {
    writing-mode: tb-rl;
    transform: rotate(-180deg);
}
  • Управляет доступом к заголовку Referer
<a href="https://some-site.com"
   referrerpolicy="no-referrer">
   External Resource
</a>
  • Можно указать в ссылке на почту так же тему письма, кого поставить в копию и др.
<a href="mailto:mefody@yandex-team.ru
      ?cc=dark.mefody@yandex.ru,n.a.dubko@gmail.com
      &bcc=n.a.dubko@gmail.com
      &subject=I%20Love%20Frontend%202020
      &body=Хочу%20выступить">
  • Для ссылки, открывающейся в новом окне хорошо бы это показать, например, иконка перед текстом
a[target="_blank"]::before {
    content: url('path-to-icon.svg');
}
  • Задержка после таба по устройству - 300ms, чтобы его исключить - touch-action: manipulation. Не поддерживается только в сафари
  • Библиотека для фокуса на элементах - flying-focus
  • text-decoration-skip-ink: auto делает красовое подчеркивание. Работает в хром и FF
  • Галочка на CSS:
content: '';
position: absolute;
left: 5px;
top: 5px;
width: 5px;
height: 9px;
border: solid @white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);

Письма

Без засечек:
*   Arial
*   Arial Black
*   Tahoma
*   Trebuchet MS
*   Verdana
* Lucida Console 

С засечками:
*   Courier
*   Courier New
*   Georgia
*   Times
*   Times New Roman

Полезные плагины для браузера

  • Page Ruler
  • FireShot
  • PerfectPixel by WellDoneCode
  • Tampermonkey
  • Siteimprove Accessibility Checker
  • Switcheroo Redirector

Полезные плагины(на JS/jQuery)

  • Счетчик - countUp.js
  • Проверка наличия элемента во вьюпорте - jquery-visible
  • Анимированое появление элементов, плагин платный - wowjs
  • Параллакс для фона - jquery-parallax.js
  • Параллакс для фиксированных блоков на странице - rellax
  • Слайдер 3D, возможностей не хватает и работает как-то костыльно, но бесплатен и уже используется на килзе и лореале - jQuery Rondell - стоит поискать аналог
  • flipclock — вылезла проблема, не работает корректно, если стоит больше 2х недель
var date    = new Date(2018, 2, 31, 24),
                now     = new Date(),
                diff    = (date.getTime() / 1000) - (now.getTime() / 1000),
                seconds = (diff > 0) ? diff : 0,
                clock;

            clock = new FlipClock(this.$timer, {
                clockFace: 'DailyCounter',
                countdown: true,
                language: 'ru-ru',
                showSeconds: true,
                autoStart: false
            });

            clock.setTime(seconds);
            clock.start();
  • countdownjs — нашла как альтернативу flipclock, документация так себе, но разобраться можно
var date = new Date(2020, 0, 15, 0, 0);

countdown(
    date,
    function(ts) {
        document.getElementById('mcaTimer').innerHTML = ts.toHTML('strong');
    },
    countdown.DAYS|countdown.HOURS|countdown.MINUTES,
    countdown.setLabels(
        ' milliseconde| секунда| минута| час| день| semaine| mois| année| décennie| siècle| millénaire',
        ' millisecondes| секунд| минут| часов| дней| semaines| mois| années| décennies| siècles| millénaires',
        ' ',
        ' ',
        ' ',
        function(n){return '<span class="mca-2018-timer__numeric">' + n + '</span><br>'; }
    )
);

Сслыки

TODO @me

  • Сделать пример по видео
  • Пополнить список плагинов