Кто я такой

• Занимаюсь разработкой > 5 лет
• Ведущий разработчиком
• Верстаю и пишу JS
• Организую в Томске митапы

Как я стал разработчиком

• Закончил Факультет психологии
• Много читал

Где меня можно найти

Андреев Сергей

vk: dragorWW

tw: dragorWW

fb: dragorWW

TomskJS

vk: tomskjs

tw: tomskjs

fb: tomskjs

tomskjs.ru

slack.tomskjs.ru

Особенности фронтенд

• Интерфейс !== набору макетов
• Интерфейс объединяет работу всей команды: 
  • Дизайнеров
  • Менеджеров
  • Аналитиков
  • UI/UX проектировщиков
  • архитекторов
  • программистов

Интерфейс !== набору макетов

• Состояния
• Размеры экрана
• Способы ввода
• Анимации
• Деградация

Это не frontend

Нужно быть

• Дизайнером
• Менеджером
• Аналитиком
• UI/UX проектировщиком
• архитектором
• программистом
• тим лидом
• ...

Ограниченность восприятия

Чему можно учить

Важно то что не устареет через год

• Паттерны
• Технологии в стадии плато
• Идеям а не реализациям

w3c валидатор

Валидатор формата (от англ. validator) — компьютерная программа, которая проверяет соответствие документа, определённому формату, проверяет синтаксическую корректность.

Поддержка браузеров

graceful degradation

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

При этом ущерб для пользователя по возможности смягчается.

Например: цвет подложки вместо градиента, растровая графика вместо векторной, проигрывание видео с помощью плагина. Встречается также более буквальный перевод «изящная деградация».

progressive enhancement

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

Например: градиенты, векторная графика, воспроизведение видео.

BEM

<!-- index.html --/>
<div class="block">
    <div class="block__elem1">
        <div class="block__elem2"></div>
    </div>

    <div class="block__elem3"></div>
</div>

<!-- Блок `search-form` имеет булевый модификатор `focused` -->
<form 
    class="search-form search-form_focused"
>
    <input class="search-form__input">

    <!-- Элемент `button` имеет булевый модификатор `disabled` -->
    <button 
        class="
            search-form__button
            search-form__button_disabled
        "
    >
        Найти
    </button>
</form>

/* index.css */
.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}

Когда создавать блок, когда — элемент?

Если фрагмент кода может использоваться повторно и не зависит от реализации других компонентов страницы.

Создавайте блок

Если фрагмент кода не может использоваться самостоятельно, без родительской сущности (блока).

Создавайте элемент

Cущность, определяющая внешний вид, состояние или поведение блока либо элемента.

Модификатор

Возможности БЭМ

• Простая поддержка структуры кода при росте проекта.
• Повторное использование кода.
• Точечные изменения с минимальными затратами:
  • обновление дизайна
  • добавление функциональных элементов
  • т. д.

Препроцессоры

 препроце́ссор (preprocessor) -  инструмент, преобразующий код из одного синтаксиса в другой

Список препроцессоров:

• less
• sass
• postcss

Список препроцессоров:

• less
• sass
• postcss

// style.css
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

// style.less
@import "library"; // library.less
@import "typo.css";

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm

#header {
  color: @light-blue;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

Автопрефиксер

node + npm

Вкратце, пакетом в Node.js называется один или несколько JavaScript-файлов, представляющих собой какую-то библиотеку или инструмент.
npm (аббр. node package manager) — это стандартный менеджер пакетов, автоматически устанавливающийся вместе с Node.js.

Он используется для скачивания пакетов из облачного сервера npm, либо для загрузки пакетов на эти сервера.

Файл package.json содержит в себе информацию о вашем приложении: название, версия, зависимости и тому подобное.

Любая директория, в которой есть этот файл, интерпретируется как Node.js-пакет, даже если вы не собираетесь публиковать его.

package.json

$ npm install canvas-chart

{
  "name": "canvas-project",
  "version": "0.1.0",
  "devDependencies": {
    "canvas-chart": "~1.3.0"
  }
}

• webpack
• live reload
• hot reload
• gulp

регрессионное тестирование

https://gemini-testing.github.io/

HTMLint

stylelint

http://htmlhint.com/

https://stylelint.io/

одиннадцатиклассница

https://habrahabr.ru/company/2gis/blog/246831/

var a,w=
document.createTreeWalker(document,NodeFilter.SHOW_TEXT);
while(a=w.nextNode()){
if(a.textContent.trim().length)
a.textContent='Одиннадцатиклассница пошла посмотреть на достопримечательность, она шла долго, несколько строчек, пока не пришла'
}

Сверстать кнопку

https://jsfiddle.net/c1xnfLve/

Давайте посчитаем

• 4 размера
• 6 состояний
• 3 позиции иконки
• div, a, span, button
• итого 288

• 4 браузера              
• итого 1152 

svg

https://github.com/jkphl/gulp-svg-sprite

Советы для студентов

Проходить собеседования

Полезные ссылки

Подкасты

• web standards
• RadioJSPodcast
• Frontflip Podcast

Общие

• Словари по фронтенду