Оцените презентацию от 1 до 5 баллов!
Тип файла:
ppt / pptx (powerpoint)
Всего слайдов:
20 слайдов
Для класса:
1,2,3,4,5,6,7,8,9,10,11
Размер файла:
3.14 MB
Просмотров:
66
Скачиваний:
0
Автор:
неизвестен
Слайды и текст к этой презентации:
№1 слайд![Practical Design Systems for](/documents_6/f83450825cdf8f8eace5a7f0fd0d9fa2/img0.jpg)
Содержание слайда: Practical Design Systems for Developers
Практические Дизайн Системы для Девелоперов
№2 слайд![Что мы узнаем? Что такое](/documents_6/f83450825cdf8f8eace5a7f0fd0d9fa2/img1.jpg)
Содержание слайда: Что мы узнаем?
Что такое дизайн система?
Какие есть инструменты для разработчиков?
Как общаться с дизайнерами?
№3 слайд![Что такое дизайн система? A](/documents_6/f83450825cdf8f8eace5a7f0fd0d9fa2/img2.jpg)
Содержание слайда: Что такое дизайн система?
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
Design System – the complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards.
№4 слайд![https designsystemsrepo.com](/documents_6/f83450825cdf8f8eace5a7f0fd0d9fa2/img3.jpg)
Содержание слайда: https://designsystemsrepo.com/design-systems/
№5 слайд![Разработчик должен понимать](/documents_6/f83450825cdf8f8eace5a7f0fd0d9fa2/img4.jpg)
Содержание слайда: Разработчик должен понимать как организовать систему в проекте
https://medium.com/uxcollections/design-system-resources-d8985ae689b4
№6 слайд![Atomic design - Атомический](/documents_6/f83450825cdf8f8eace5a7f0fd0d9fa2/img5.jpg)
Содержание слайда: Atomic design - Атомический Дизайн
http://atomicdesign.bradfrost.com/chapter-2/
№7 слайд![Написание CSS](/documents_6/f83450825cdf8f8eace5a7f0fd0d9fa2/img6.jpg)
Содержание слайда: Написание CSS
№8 слайд![SASS https www.sitepoint.com](/documents_6/f83450825cdf8f8eace5a7f0fd0d9fa2/img7.jpg)
Содержание слайда: SASS
https://www.sitepoint.com/architecture-in-sass/
https://sass-lang.com/
№9 слайд![Practical Cases of SASS https](/documents_6/f83450825cdf8f8eace5a7f0fd0d9fa2/img8.jpg)
Содержание слайда: Practical Cases of SASS
https://hugogiraudel.com/2015/06/18/styling-react-components-in-sass/
https://medium.com/@kswanie21/css-modules-sass-in-create-react-app-37c3152de9
№10 слайд![Webpack setup? https](/documents_6/f83450825cdf8f8eace5a7f0fd0d9fa2/img9.jpg)
Содержание слайда: Webpack setup?
https://hackernoon.com/a-tale-of-webpack-4-and-how-to-finally-configure-it-in-the-right-way-4e94c8e7e5c1
№11 слайд![PostCSS? https](/documents_6/f83450825cdf8f8eace5a7f0fd0d9fa2/img10.jpg)
Содержание слайда: PostCSS?
https://www.postcss.parts/
https://www.sitepoint.com/an-introduction-to-postcss/
№12 слайд![CSS-in-JS https](/documents_6/f83450825cdf8f8eace5a7f0fd0d9fa2/img11.jpg)
Содержание слайда: CSS-in-JS
https://hackernoon.com/all-you-need-to-know-about-css-in-js-984a72d48ebc
№13 слайд![Libraries React https](/documents_6/f83450825cdf8f8eace5a7f0fd0d9fa2/img12.jpg)
Содержание слайда: Libraries (React)
https://www.styled-components.com/docs
№14 слайд![Альтернативы https emotion.sh](/documents_6/f83450825cdf8f8eace5a7f0fd0d9fa2/img13.jpg)
Содержание слайда: Альтернативы
https://emotion.sh/
https://alligator.io/react/css-in-js-roundup-styling-react-components/
https://jsramblings.com/2017/10/17/things-to-consider-when-choosing-a-react-styling-framework.html
http://www.npmtrends.com/
№15 слайд![Документация https](/documents_6/f83450825cdf8f8eace5a7f0fd0d9fa2/img14.jpg)
Содержание слайда: Документация
https://storybook.js.org/basics/introduction/
https://www.docz.site/
№16 слайд![Tecтирование https](/documents_6/f83450825cdf8f8eace5a7f0fd0d9fa2/img15.jpg)
Содержание слайда: Tecтирование
https://storybook.js.org/testing/react-ui-testing/
https://www.creativebloq.com/features/the-5-best-visual-regression-testing-tools
№17 слайд![](/documents_6/f83450825cdf8f8eace5a7f0fd0d9fa2/img16.jpg)
№18 слайд![ДизайнеRы https zeplin.io](/documents_6/f83450825cdf8f8eace5a7f0fd0d9fa2/img17.jpg)
Содержание слайда: ДизайнеRы
https://zeplin.io/
https://www.figma.com/file/oj3taaBNJX8PCVegyDpwAF/Sample-File
https://framer.com/
№19 слайд![](/documents_6/f83450825cdf8f8eace5a7f0fd0d9fa2/img18.jpg)
№20 слайд![Спасибо!](/documents_6/f83450825cdf8f8eace5a7f0fd0d9fa2/img19.jpg)
Содержание слайда: Спасибо!