🗊Презентация Галопом по фронтенду

Категория: Интернет
Нажмите для полного просмотра!
Галопом по фронтенду, слайд №1Галопом по фронтенду, слайд №2Галопом по фронтенду, слайд №3Галопом по фронтенду, слайд №4Галопом по фронтенду, слайд №5Галопом по фронтенду, слайд №6Галопом по фронтенду, слайд №7Галопом по фронтенду, слайд №8Галопом по фронтенду, слайд №9Галопом по фронтенду, слайд №10Галопом по фронтенду, слайд №11Галопом по фронтенду, слайд №12Галопом по фронтенду, слайд №13Галопом по фронтенду, слайд №14Галопом по фронтенду, слайд №15Галопом по фронтенду, слайд №16Галопом по фронтенду, слайд №17Галопом по фронтенду, слайд №18Галопом по фронтенду, слайд №19Галопом по фронтенду, слайд №20Галопом по фронтенду, слайд №21Галопом по фронтенду, слайд №22Галопом по фронтенду, слайд №23Галопом по фронтенду, слайд №24Галопом по фронтенду, слайд №25Галопом по фронтенду, слайд №26Галопом по фронтенду, слайд №27Галопом по фронтенду, слайд №28Галопом по фронтенду, слайд №29Галопом по фронтенду, слайд №30Галопом по фронтенду, слайд №31Галопом по фронтенду, слайд №32Галопом по фронтенду, слайд №33Галопом по фронтенду, слайд №34Галопом по фронтенду, слайд №35Галопом по фронтенду, слайд №36Галопом по фронтенду, слайд №37Галопом по фронтенду, слайд №38Галопом по фронтенду, слайд №39
Скачать
Вы можете ознакомиться и скачать презентацию на тему Галопом по фронтенду. Доклад-сообщение содержит 39 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


Галопом по фронтенду
Описание слайда:
Галопом по фронтенду

Слайд 2


Галопом по фронтенду, слайд №2
Описание слайда:

Слайд 3


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

Слайд 4


Популярные препроцессоры
Описание слайда:
Популярные препроцессоры

Слайд 5


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

Слайд 6


Сборка с одним файлом на входе @import "features/feature1.scss"; @import "features/feature2.scss";
Описание слайда:
Сборка с одним файлом на входе @import "features/feature1.scss"; @import "features/feature2.scss";

Слайд 7


Sourcemaps
Описание слайда:
Sourcemaps

Слайд 8


Sourcemaps
Описание слайда:
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" }
Описание слайда:
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 )
Описание слайда:
Browsersync (★ 10561 ❗ 424 )

Слайд 12


Stylelint (★ 6315 ❗ 121 )
Описание слайда:
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 } }
Описание слайда:
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 )
Описание слайда:
PostCSS (★ 20391 ❗ 15 )

Слайд 15


Autoprefixer (★ 16755 ❗ 12 )
Описание слайда:
Autoprefixer (★ 16755 ❗ 12 )

Слайд 16


Autoprefixer .item { display: flex; flex-flow: row wrap; }
Описание слайда:
Autoprefixer .item { display: flex; flex-flow: row wrap; }

Слайд 17


Browserlist (★ 5212 ❗ 13 ) [production staging] > 1% ie 10 [development] last 1 chrome version last 1 firefox version
Описание слайда:
Browserlist (★ 5212 ❗ 13 ) [production staging] > 1% ie 10 [development] last 1 chrome version last 1 firefox version

Слайд 18


Галопом по фронтенду, слайд №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: '«' "»";
Описание слайда:
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


Галопом по фронтенду, слайд №20
Описание слайда:

Слайд 21


Babel
Описание слайда:
Babel

Слайд 22


Babel (★ 32275 ❗ 678 )
Описание слайда:
Babel (★ 32275 ❗ 678 )

Слайд 23


Babel var a = () => { console.log("Hello from the future!") }
Описание слайда:
Babel var a = () => { console.log("Hello from the future!") }

Слайд 24


Основные preset(ы) — @babel/preset-env — @babel/preset-flow — @babel/preset-react — @babel/preset-typescript
Описание слайда:
Основные preset(ы) — @babel/preset-env — @babel/preset-flow — @babel/preset-react — @babel/preset-typescript

Слайд 25


Babel var a = () => { console.log("Hello”!); }; var b = new Promise();
Описание слайда:
Babel var a = () => { console.log("Hello”!); }; var b = new Promise();

Слайд 26


Babel var a = () => { console.log("Hello”!); }; var b = new Promise();
Описание слайда:
Babel var a = () => { console.log("Hello”!); }; var b = new Promise();

Слайд 27


Preset react const element = ( <div> <h1>Hello!</h1> </div> );
Описание слайда:
Preset react const element = ( <div> <h1>Hello!</h1> </div> );

Слайд 28


Stage-x плагины const tvShow = +100_500;
Описание слайда:
Stage-x плагины const tvShow = +100_500;

Слайд 29


Eslint (★ 13545 ❗ 97 ) var x = 5;
Описание слайда:
Eslint (★ 13545 ❗ 97 ) var x = 5;

Слайд 30


Typescript (★ 46298 ❗ 3436 )
Описание слайда:
Typescript (★ 46298 ❗ 3436 )

Слайд 31


Typescript function greeting(message: string): void { console.log(message); }
Описание слайда:
Typescript function greeting(message: string): void { console.log(message); }

Слайд 32


Typescript + babel = function greeting(message: string): void { console.log(message); } const promise = new Promise(() => { console.log(42); });
Описание слайда:
Typescript + babel = function greeting(message: string): void { console.log(message); } const promise = new Promise(() => { console.log(42); });

Слайд 33


Webpack (★ 47643 ❗ 456 ) Основные концепции: — Entry — Output — Loaders — Plugins — Mode — Browser Compatibility
Описание слайда:
Webpack (★ 47643 ❗ 456 ) Основные концепции: — Entry — Output — Loaders — Plugins — Mode — Browser Compatibility

Слайд 34


Webpack console.log("hello-world");
Описание слайда:
Webpack console.log("hello-world");

Слайд 35


Webpack
Описание слайда:
Webpack

Слайд 36


Webpack console.log("hello-world"); const x = new Promise();
Описание слайда:
Webpack console.log("hello-world"); const x = new Promise();

Слайд 37


Что мы говорим готовым решениям?
Описание слайда:
Что мы говорим готовым решениям?

Слайд 38


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

Слайд 39


Спасибо за внимание
Описание слайда:
Спасибо за внимание

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию