Галопом по фронтенду

Сентябрь 13, 2022

Главная
Алгебра
Галопом по фронтенду

Содержание

3. Главные герои сегодняшнего вечера
4. Популярные препроцессоры
5. Что может sass? Переменные Наглядная вложенность Расширенная поддержка арифметики Импортирование из других файлов Наследование Миксины (функции)
6. Сборка с одним файлом на входе @import "features/feature1.scss"; @import "features/feature2.scss"; h1 { font-size: 26px !important }
7. Sourcemaps
8. Sourcemaps
9. Sourcemaps { "version": 3, "file": "index.css", "sources": [ "../src/index.scss", "../src/features/feature1.scss", "../src/features/feature2.scss" ], "names": [], "mappings": "ACAA,AAAA,CAAC,AAAC,CACE,KAAK,CAAE,eAAe,CACtB,OAAO,CAAE,IAAI,CAChB,ACHD,AAAA,EAAE,AAAC,CACC,SAAS,CAAE,eAAe,CAC7B,AFCD,AAAA,CAAC,AAAC,CACE,UAAU,CAAE,YACd,CAAC"
10. Звёздочки и восклицания
11. Browsersync (★ 10561 ❗ 424 )
12. Stylelint (★ 6315 ❗ 121 )
13. Stylelint { "extends": "stylelint-config-standard", "plugins": [ "stylelint-scss" ], "rules": { "color-hex-case": "lower", "color-hex-length": "short", "color-no-invalid-hex": true
14. PostCSS (★ 20391 ❗ 15 )
15. Autoprefixer (★ 16755 ❗ 12 )
16. Autoprefixer .item { display: flex; flex-flow: row wrap; } .item { display: -webkit-flex; display: -ms-flexbox; display:
17. Browserlist (★ 5212 ❗ 13 ) [production staging] > 1% ie 10 [development] last 1 chrome
19. CSSNano (★ 2946 ❗ 36 ) /* normalize selectors */ h1::before, h1:before { /* reduce shorthand
21. Babel
22. Babel (★ 32275 ❗ 678 )
23. Babel var a = () => { console.log("Hello from the future!") } var a = function
24. Основные preset(ы) — @babel/preset-env — @babel/preset-flow — @babel/preset-react — @babel/preset-typescript
25. Babel var a = () => { console.log("Hello”!); }; var b = new Promise(); БЫЛО БУДЕТ
26. Babel var a = () => { console.log("Hello”!); }; var b = new Promise(); БЫЛО БУДЕТ
27. Preset react const element = ( Hello! ); index.jsx index.js var element = React.createElement( "div", null,
28. Stage-x плагины const tvShow = +100_500; БЫЛО СТАЛО var tvShow = +100500;
29. Eslint (★ 13545 ❗ 97 ) var x = 5; index.js РЕЗУЛЬТАТ 1:1 error Unexpected var,
30. Typescript (★ 46298 ❗ 3436 )
31. Typescript function greeting(message: string): void { console.log(message); } index.ts index.js function greeting(message) { console.log(message); }
32. Typescript + babel = function greeting(message: string): void { console.log(message); } const promise = new Promise(()
33. Webpack (★ 47643 ❗ 456 ) Основные концепции: — Entry — Output — Loaders — Plugins
34. Webpack console.log("hello-world"); index.js
35. Webpack
36. Webpack console.log("hello-world"); const x = new Promise(); index.js
37. Что мы говорим готовым решениям?
38. Демонстрационный проект https://github.com/discomaps/discomaps.github.io
40. Скачать презентацию

Слайд 2

Слайд 3

Главные герои сегодняшнего вечера

Слайд 4

Что может sass?
Переменные
Наглядная вложенность
Расширенная поддержка арифметики
Импортирование из других файлов
Наследование
Миксины (функции)
Директивы (циклы

+ if-else)

Слайд 6

Сборка с одним файлом на входе
@import "features/feature1.scss";
@import "features/feature2.scss";
h1 {
font-size: 26px

!important
}
a {
transition: transform 4s
}

index.scss

index.css

*{
color: red !important;
display: flex;
}

feature1.scss

h1 {
font-size: 26px !important;
}

feature2.scss

Выход

Вход

Компилируется
libsass

Слайд 7

Sourcemaps

Слайд 8

Sourcemaps

Слайд 9

Sourcemaps
{
"version": 3,
"file": "index.css",
"sources": [
"../src/index.scss",
"../src/features/feature1.scss",
"../src/features/feature2.scss"
],
"names": [],
"mappings": "ACAA,AAAA,CAAC,AAAC,CACE,KAAK,CAAE,eAAe,CACtB,OAAO,CAAE,IAAI,CAChB,ACHD,AAAA,EAAE,AAAC,CACC,SAAS,CAAE,eAAe,CAC7B,AFCD,AAAA,CAAC,AAAC,CACE,UAAU,CAAE,YACd,CAAC"
}

Слайд 10

Звёздочки и восклицания

Слайд 11

Browsersync (★ 10561 ❗ 424 )

Слайд 12

Stylelint (★ 6315 ❗ 121 )

Слайд 13

Stylelint
{
"extends": "stylelint-config-standard",
"plugins": [
"stylelint-scss"
],
"rules": {
"color-hex-case": "lower",

"color-hex-length": "short",
"color-no-invalid-hex": true
}
}

Слайд 14

PostCSS (★ 20391 ❗ 15 )

Слайд 15

Autoprefixer (★ 16755 ❗ 12 )

Слайд 16

Autoprefixer
.item {
display: flex;
flex-flow: row wrap;
}
.item {
display: -webkit-flex;
display:

-ms-flexbox;
display: -webkit-box;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}

src/index.css

dist/index.css

Слайд 17

Browserlist (★ 5212 ❗ 13 )
[production staging]
> 1%
ie 10
[development]
last 1

chrome version
last 1 firefox version

Слайд 18

Слайд 19

CSSNano (★ 2946 ❗ 36 )
/* normalize selectors */
h1::before, h1:before

{
/* reduce shorthand even further */
margin: 10px 20px 10px 20px;
/* reduce color values */
color: #ff0000;
/* remove duplicated properties */
font-weight: 400;
font-weight: 400;
/* reduce position values */
background-position: bottom right;
/* normalize wrapping quotes */
quotes: '«' "»";

Слайд 20

Слайд 21

Babel

Слайд 22

Babel (★ 32275 ❗ 678 )

Слайд 23

Babel
var a = () => {
console.log("Hello from the future!")
}
var a

= function () {
console.log("Hello from the future!");
};

БЫЛО

БУДЕТ

Слайд 24

Основные preset(ы)
— @babel/preset-env
— @babel/preset-flow
— @babel/preset-react
— @babel/preset-typescript

Слайд 25

Babel
var a = () => {
console.log("Hello”!);
};
var b = new Promise();
БЫЛО
БУДЕТ
var

a = function a() {
console.log("Hello!”);
};
var b = new Promise();

Слайд 26

Babel
var a = () => {
console.log("Hello”!);
};
var b = new Promise();
БЫЛО
БУДЕТ
require("core-js/modules/es6.promise");
var

a = function a() {
console.log("Hello!”);
};
var b = new Promise();

Слайд 27

Preset react
const element = (

Hello!

);
index.jsx
index.js
var element = React.createElement(

"div",
null,
React.createElement("h1", null, "Hello!")
);

Слайд 28

Stage-x плагины
const tvShow = +100_500;
БЫЛО
СТАЛО
var tvShow = +100500;

Слайд 29

Eslint (★ 13545 ❗ 97 )
var x = 5;
index.js
РЕЗУЛЬТАТ

1:1

error Unexpected var, use let or const instead no-var
1:5 error 'x' is assigned a value but never used no-unused-vars
1:11 error Newline required at end of file but not found eol-last
✖ 3 problems (3 errors, 0 warnings)
2 errors and 0 warnings potentially fixable with the `--fix` option.

Слайд 30

Typescript (★ 46298 ❗ 3436 )

Слайд 31

Typescript
function greeting(message: string): void {
console.log(message);
}
index.ts
index.js
function greeting(message) {
console.log(message);
}

Слайд 32

Typescript + babel =
function greeting(message: string): void {
console.log(message);
}
const promise

= new Promise(() => {
console.log(42);
});

index.ts

index.js

require("core-js/modules/es6.promise");
function greeting(message) {
console.log(message);
}
var promise = new Promise(function () {
console.log(42);
});

Слайд 33

Webpack (★ 47643 ❗ 456 )
Основные концепции:
— Entry
— Output
— Loaders
—

Plugins
— Mode
— Browser Compatibility

Слайд 34

Webpack
console.log("hello-world");
index.js

Слайд 35

Webpack

Слайд 36

Webpack
console.log("hello-world");
const x = new Promise();
index.js

Слайд 37

Что мы говорим готовым решениям?

Слайд 38

Галопом по фронтенду

Содержание

Главные герои сегодняшнего вечера

Популярные препроцессоры

Что может sass?ПеременныеНаглядная вложенностьРасширенная поддержка арифметикиИмпортирование из других файловНаследованиеМиксины (функции)Директивы (циклы

Сборка с одним файлом на входе @import "features/feature1.scss";@import "features/feature2.scss";h1 { font-size: 26px

Sourcemaps

Sourcemaps

Звёздочки и восклицания

Browsersync (★ 10561 ❗ 424 )

Stylelint (★ 6315 ❗ 121 )

Stylelint{ "extends": "stylelint-config-standard", "plugins": [ "stylelint-scss" ], "rules": { "color-hex-case": "lower",

PostCSS (★ 20391 ❗ 15 )

Autoprefixer (★ 16755 ❗ 12 )

Autoprefixer.item { display: flex; flex-flow: row wrap;}.item { display: -webkit-flex; display:

Browserlist (★ 5212 ❗ 13 ) [production staging]> 1%ie 10[development]last 1

CSSNano (★ 2946 ❗ 36 ) /* normalize selectors */h1::before, h1:before

Babel

Babel (★ 32275 ❗ 678 )

Babelvar a = () => { console.log("Hello from the future!")}var a

Основные preset(ы) — @babel/preset-env— @babel/preset-flow— @babel/preset-react— @babel/preset-typescript

Babelvar a = () => { console.log("Hello”!);};var b = new Promise();БЫЛОБУДЕТvar

Babelvar a = () => { console.log("Hello”!);};var b = new Promise();БЫЛОБУДЕТrequire("core-js/modules/es6.promise");var

Preset reactconst element = ( Hello! );index.jsxindex.jsvar element = React.createElement(

Hello!

Stage-x плагиныconst tvShow = +100_500;БЫЛОСТАЛОvar tvShow = +100500;

Eslint (★ 13545 ❗ 97 ) var x = 5;index.jsРЕЗУЛЬТАТ 1:1

Typescript (★ 46298 ❗ 3436 )

Typescriptfunction greeting(message: string): void { console.log(message);}index.tsindex.jsfunction greeting(message) { console.log(message);}

Typescript + babel = function greeting(message: string): void { console.log(message);}const promise

Webpack (★ 47643 ❗ 456 ) Основные концепции:— Entry— Output— Loaders—

Webpackconsole.log("hello-world");index.js

Webpack

Webpackconsole.log("hello-world");const x = new Promise();index.js

Что мы говорим готовым решениям?

Демонстрационный проектhttps://github.com/discomaps/discomaps.github.io

Похожие презентации

Что может sass?
Переменные
Наглядная вложенность
Расширенная поддержка арифметики
Импортирование из других файлов
Наследование
Миксины (функции)
Директивы (циклы

Сборка с одним файлом на входе
@import "features/feature1.scss";
@import "features/feature2.scss";
h1 {
font-size: 26px

Stylelint
{
"extends": "stylelint-config-standard",
"plugins": [
"stylelint-scss"
],
"rules": {
"color-hex-case": "lower",

Autoprefixer
.item {
display: flex;
flex-flow: row wrap;
}
.item {
display: -webkit-flex;
display:

Browserlist (★ 5212 ❗ 13 )
[production staging]
> 1%
ie 10
[development]
last 1

CSSNano (★ 2946 ❗ 36 )
/* normalize selectors */
h1::before, h1:before

Babel
var a = () => {
console.log("Hello from the future!")
}
var a

Основные preset(ы)
— @babel/preset-env
— @babel/preset-flow
— @babel/preset-react
— @babel/preset-typescript

Babel
var a = () => {
console.log("Hello”!);
};
var b = new Promise();
БЫЛО
БУДЕТ
var

Babel
var a = () => {
console.log("Hello”!);
};
var b = new Promise();
БЫЛО
БУДЕТ
require("core-js/modules/es6.promise");
var

Preset react
const element = (

Hello!

);
index.jsx
index.js
var element = React.createElement(

Stage-x плагины
const tvShow = +100_500;
БЫЛО
СТАЛО
var tvShow = +100500;

Eslint (★ 13545 ❗ 97 )
var x = 5;
index.js
РЕЗУЛЬТАТ

1:1

Typescript
function greeting(message: string): void {
console.log(message);
}
index.ts
index.js
function greeting(message) {
console.log(message);
}

Typescript + babel =
function greeting(message: string): void {
console.log(message);
}
const promise

Webpack (★ 47643 ❗ 456 )
Основные концепции:
— Entry
— Output
— Loaders
—

Webpack
console.log("hello-world");
index.js

Webpack
console.log("hello-world");
const x = new Promise();
index.js

Демонстрационный проект
https://github.com/discomaps/discomaps.github.io