WAT???

Какие технологии крутятся на frontend?

Пакетные менеджеры

Установка и

https://nodejs.org/en/

1) Установить

2) Установить пакетный менеджер

https://yarnpkg.com/en/docs/install

Ну тут больше делать ничего не

Инициализация проекта

Установка пакета

Обновление пакета

Удаление пакета

Установка зависимостей

Вывод списка зависимостей

yarn init (-y)

npm init

Yarn может работать оффлайн
yarn add --offline
yarn add @version --offline

HTML

HTML-препроцессоры

Плагины

Emmet

PugJS (Jade)

Установка:
Установить ruby, затем gem install haml
npm: npm i gulp-haml
yarn: yarn add

Syntax:
%h1 Hello World! - ->

Hello World!

PugJS (Jade)

npm: npm i gulp-pug
yarn: yarn add gulp-pug

Syntax:
h1 Hello World! - ->

Hello World!

Syntax:
span -->
|some --> some
|text --> text
-->
input( -->

CASE
- var friends = 10
case friends
when 0
p you have

CONDITIONALS
- var authorised = false
#user
if !authorised
h2.green Not Authorised
else

INCLUDES
//index.pug
include includes/head.pug
body
h1 some header
//head.pug
head
title My Site

PugJS (Jade)

some

ITERATION
ul
each val, index in ['zero', 'one', 'two']
li= index +

Emmet

Syntax:
> - вложенность
+ - следующий элемент на том же уровне
^ -

CSS

CSS-препроцессоры

Плагины

Emmet

Установка:
npm: npm i gulp-sass
yarn: yarn add gulp-sass

Установка через app:
compass.app, koala, livereload,

Syntax:
Variables:
$main-color: red;
body {
color: $main-color;
}
body {
color: red;
}

Nesting:
body {

Syntax:
Partials:
_partials.scss
@import “partials”

Mixins:
@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius:

Syntax:
Extends:
%message-shared { border: 1px solid #ccc; padding: 10px; color: #333; }
.success

Установка:
npm: npm i gulp-less
yarn: yarn add gulp-less

Syntax:
Variables:
@main-color: red;
body {
color: @main-color;
}
body {
color: red;
}

Nesting:
.main {

Syntax:
Merge:
.mixin() { box-shadow+: inset 0 0 10px #555; } .myclass { .mixin();

Syntax:
Mixins:
.my-hover-mixin() { &:hover { border: 1px solid red; } } button { .my-hover-mixin(); }

Imports:
@import

Установка:
npm: npm i gulp-stylus
yarn: yarn add gulp-stylus

Syntax:
Variables:
main-color = #f1f1f1
body {
color: main-color
}
body {
color: #f1f1f1;
}

. []

Syntax:
Mixins:
border-radius(n) -webkit-border-radius n -moz-border-radius n border-radius n form input[type=button] border-radius(5px)

form input[type=button] {

Syntax:
Functions:
add(a, b = a) a + b add(10, 5) // =>

Syntax:
@import and @require:
@require ‘header’
@import ‘footer.css’

@extend:
.message { padding: 10px; border: 1px solid

Emmet

Syntax:
+ - добавить свойство
* {
m0+p0
}
* {
margin: 0;
padding: 0;
}

CSS

Новый CSS

Преимущества:
Скорость
Модульность
Функции, невозможные на Sass

Новый проект

Task runners

Grunt

Установка:
npm: npm i grunt-cli -g
npm i grunt -D
touch Gruntfile.js
yarn:

Grunt

Grunt

Установка:
npm: npm i gulp-cli -g
npm i gulp -D
touch gulpfile.js
yarn:

Vinyl FS

Webpack

Вопросы?