SlideShare ist ein Scribd-Unternehmen logo
1 von 39
Downloaden Sie, um offline zu lesen
GOOD FRONT END -
BAD FRONT END.
<p>или что отличает хорошего и плохого
front end разработчика</p>
INTRODUCTION...
- кто я?
- front-end vs VERSTALSHIK
- немного по теме
ДЛЯ ТЕХ - КТО НЕ ВКУРСЕ =)
t
119
1970 - ARPAnet
1971 - @
1972 - FIRST MAIL CLIENT
1983 TCP/IP
1990 http://info.cern.ch/
Good front end -  bad  front-end (Vladimir Gutorov)
Good front end -  bad  front-end (Vladimir Gutorov)
1994 CSS
1996
Good front end -  bad  front-end (Vladimir Gutorov)
FRONT END
ВОПРОСЫ:
- Про скилы...
- Как стать лучше
- Роль FrontEnd в процесе разработки и
как подружится с backend dev… ?
- В чем сила?
ПРО СКИЛЫ...
HTML
GIT
jQuery
JS
LESS/SAAS
CSS
AJAX
GRUNT
WebGL
NODE JS
ANGULAR
TWITTER BOOTSTRAP
PHOTOSHOP
PIXEL PERFECT
МОТИВАЦИЯ
ГИБКОСТЬ
ВЫ и ВАШИ ЦЕЛИ
Как стать лучше...
?
??
Good front end -  bad  front-end (Vladimir Gutorov)
? ??
Good front end -  bad  front-end (Vladimir Gutorov)
Good front end -  bad  front-end (Vladimir Gutorov)
Роль FrontEnd в процесе
разработки
Good front end -  bad  front-end (Vladimir Gutorov)
проект
дизайн
front end
back end
дизайнер
Front End
разработчик
Back End
разработчик
FRONTEND
process
+ + + = HAPPY
BACKEND
https://c9.io/
Good front end -  bad  front-end (Vladimir Gutorov)
Good front end -  bad  front-end (Vladimir Gutorov)
Good front end -  bad  front-end (Vladimir Gutorov)
Good front end -  bad  front-end (Vladimir Gutorov)
>_<
а теперь время магии....
Good front end -  bad  front-end (Vladimir Gutorov)
https://github.com/LumoSpark/cloud9-wp/tree/frontend
1
2
3
4
6
5
https://github.com/LumoSpark/cloud9-wp/tree/frontend
Cloud 9
1) https://c9.io/
2) https://community.c9.io/?_ga=1.215652951.1515587168.1457940211
Grunt JS
3) http://gruntjs.com/
Less
4) http://lesscss.org/
Wordpress
5) https://wordpress.org/
Git
6) https://git-scm.com/
Linux command line
7) http://www.comptechdoc.org/os/linux/usersguide/linux_ugbasics.html
8) http://linuxcommand.org/learning_the_shell.php
https://github.com/LumoSpark

Weitere ähnliche Inhalte

Andere mochten auch

«Путь от инди-разработчика до гейм-дизайнера в студии»
«Путь от инди-разработчика до гейм-дизайнера в студии»«Путь от инди-разработчика до гейм-дизайнера в студии»
«Путь от инди-разработчика до гейм-дизайнера в студии»Stfalcon Meetups
 
LESS, SASS, HAML: 4 буквы, изменившие frontend development
LESS, SASS, HAML: 4 буквы, изменившие frontend developmentLESS, SASS, HAML: 4 буквы, изменившие frontend development
LESS, SASS, HAML: 4 буквы, изменившие frontend developmentKonstantin Kudryashov
 
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)Ontico
 
Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi
Разработка Web-приложений на Angular JS. Архитектурные семинары SoftengiРазработка Web-приложений на Angular JS. Архитектурные семинары Softengi
Разработка Web-приложений на Angular JS. Архитектурные семинары SoftengiSoftengi
 
Анимация БВШД 2016
Анимация БВШД 2016Анимация БВШД 2016
Анимация БВШД 2016Igor Silkin
 

Andere mochten auch (7)

«Путь от инди-разработчика до гейм-дизайнера в студии»
«Путь от инди-разработчика до гейм-дизайнера в студии»«Путь от инди-разработчика до гейм-дизайнера в студии»
«Путь от инди-разработчика до гейм-дизайнера в студии»
 
LESS, SASS, HAML: 4 буквы, изменившие frontend development
LESS, SASS, HAML: 4 буквы, изменившие frontend developmentLESS, SASS, HAML: 4 буквы, изменившие frontend development
LESS, SASS, HAML: 4 буквы, изменившие frontend development
 
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)
 
Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi
Разработка Web-приложений на Angular JS. Архитектурные семинары SoftengiРазработка Web-приложений на Angular JS. Архитектурные семинары Softengi
Разработка Web-приложений на Angular JS. Архитектурные семинары Softengi
 
Анимация БВШД 2016
Анимация БВШД 2016Анимация БВШД 2016
Анимация БВШД 2016
 
reveal.js 3.0.0
reveal.js 3.0.0reveal.js 3.0.0
reveal.js 3.0.0
 
DDA portfolio
DDA portfolioDDA portfolio
DDA portfolio
 

Ähnlich wie Good front end - bad front-end (Vladimir Gutorov)

FrontEnd: JS + css + html
FrontEnd: JS + css + htmlFrontEnd: JS + css + html
FrontEnd: JS + css + htmlIntersog
 
DevNightDnepr 2015: «Взаимодействие менеджера и дизайнера: техническое задани...
DevNightDnepr 2015: «Взаимодействие менеджера и дизайнера: техническое задани...DevNightDnepr 2015: «Взаимодействие менеджера и дизайнера: техническое задани...
DevNightDnepr 2015: «Взаимодействие менеджера и дизайнера: техническое задани...DevGAMM Conference
 
Жесточайшая оптимизация производительности веб-страниц. Google pagespeed.
Жесточайшая оптимизация производительности веб-страниц. Google pagespeed.Жесточайшая оптимизация производительности веб-страниц. Google pagespeed.
Жесточайшая оптимизация производительности веб-страниц. Google pagespeed.Dmitry Dudin
 
Солянка seo хитростей для работы в арбитраже
Солянка seo хитростей для работы в арбитражеСолянка seo хитростей для работы в арбитраже
Солянка seo хитростей для работы в арбитражеNaZapad
 
Sintez Education Center на Всероссийском Дне Тренингов 22 апреля 2017
Sintez Education Center на Всероссийском Дне Тренингов 22 апреля 2017Sintez Education Center на Всероссийском Дне Тренингов 22 апреля 2017
Sintez Education Center на Всероссийском Дне Тренингов 22 апреля 2017Gleb Bulykin
 
FUCK UP! Облажаться и сделать из этого вывод — #CampusKazan2016
FUCK UP! Облажаться и сделать из этого вывод — #CampusKazan2016FUCK UP! Облажаться и сделать из этого вывод — #CampusKazan2016
FUCK UP! Облажаться и сделать из этого вывод — #CampusKazan2016Mario Khabibullin
 
5 правил успешной разработки приложений для бренда
5 правил успешной разработки приложений для бренда 5 правил успешной разработки приложений для бренда
5 правил успешной разработки приложений для бренда Heads&Hands
 
Dmitry Menshikov "Release after the year of development: fierce debug to the ...
Dmitry Menshikov "Release after the year of development: fierce debug to the ...Dmitry Menshikov "Release after the year of development: fierce debug to the ...
Dmitry Menshikov "Release after the year of development: fierce debug to the ...Fwdays
 
Дайджест вакансий, сентябрь 2013
Дайджест вакансий, сентябрь 2013Дайджест вакансий, сентябрь 2013
Дайджест вакансий, сентябрь 2013it-park
 
Баба-Яга против! — Роман Дворнов, Ostrovok.ru
Баба-Яга против! — Роман Дворнов, Ostrovok.ruБаба-Яга против! — Роман Дворнов, Ostrovok.ru
Баба-Яга против! — Роман Дворнов, Ostrovok.ruYandex
 
Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaS...
Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaS...Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaS...
Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaS...Yandex
 
Баба Яга против!
Баба Яга против!Баба Яга против!
Баба Яга против!Roman Dvornov
 
Опыт разработки SEO софта на примере FastTrust и ComparseR
Опыт разработки SEO софта на примере FastTrust и ComparseRОпыт разработки SEO софта на примере FastTrust и ComparseR
Опыт разработки SEO софта на примере FastTrust и ComparseRАлександр Алаев
 
Ликбез для HR'ов в IT
Ликбез для HR'ов в ITЛикбез для HR'ов в IT
Ликбез для HR'ов в ITAlexander Krass
 
Акторы на C++: стоило ли оно того?
Акторы на C++: стоило ли оно того?Акторы на C++: стоило ли оно того?
Акторы на C++: стоило ли оно того?Yauheni Akhotnikau
 
От заката до рассвета | Максим Безуглый | Zlit Tech
От заката до рассвета | Максим Безуглый | Zlit TechОт заката до рассвета | Максим Безуглый | Zlit Tech
От заката до рассвета | Максим Безуглый | Zlit TechZlit
 
Cps 2014 cinesoft
Cps 2014 cinesoftCps 2014 cinesoft
Cps 2014 cinesoftCineSoft
 
Why TDD doesn't work? (Кому что мешает, или почему TDD не работает?)
 Why TDD doesn't work? (Кому что мешает,   или почему  TDD  не работает?) Why TDD doesn't work? (Кому что мешает,   или почему  TDD  не работает?)
Why TDD doesn't work? (Кому что мешает, или почему TDD не работает?)Acceptic
 

Ähnlich wie Good front end - bad front-end (Vladimir Gutorov) (20)

FrontEnd: JS + css + html
FrontEnd: JS + css + htmlFrontEnd: JS + css + html
FrontEnd: JS + css + html
 
DevNightDnepr 2015: «Взаимодействие менеджера и дизайнера: техническое задани...
DevNightDnepr 2015: «Взаимодействие менеджера и дизайнера: техническое задани...DevNightDnepr 2015: «Взаимодействие менеджера и дизайнера: техническое задани...
DevNightDnepr 2015: «Взаимодействие менеджера и дизайнера: техническое задани...
 
Жесточайшая оптимизация производительности веб-страниц. Google pagespeed.
Жесточайшая оптимизация производительности веб-страниц. Google pagespeed.Жесточайшая оптимизация производительности веб-страниц. Google pagespeed.
Жесточайшая оптимизация производительности веб-страниц. Google pagespeed.
 
Солянка seo хитростей для работы в арбитраже
Солянка seo хитростей для работы в арбитражеСолянка seo хитростей для работы в арбитраже
Солянка seo хитростей для работы в арбитраже
 
Sintez Education Center на Всероссийском Дне Тренингов 22 апреля 2017
Sintez Education Center на Всероссийском Дне Тренингов 22 апреля 2017Sintez Education Center на Всероссийском Дне Тренингов 22 апреля 2017
Sintez Education Center на Всероссийском Дне Тренингов 22 апреля 2017
 
FUCK UP! Облажаться и сделать из этого вывод — #CampusKazan2016
FUCK UP! Облажаться и сделать из этого вывод — #CampusKazan2016FUCK UP! Облажаться и сделать из этого вывод — #CampusKazan2016
FUCK UP! Облажаться и сделать из этого вывод — #CampusKazan2016
 
5 правил успешной разработки приложений для бренда
5 правил успешной разработки приложений для бренда 5 правил успешной разработки приложений для бренда
5 правил успешной разработки приложений для бренда
 
Dmitry Menshikov "Release after the year of development: fierce debug to the ...
Dmitry Menshikov "Release after the year of development: fierce debug to the ...Dmitry Menshikov "Release after the year of development: fierce debug to the ...
Dmitry Menshikov "Release after the year of development: fierce debug to the ...
 
Дайджест вакансий, сентябрь 2013
Дайджест вакансий, сентябрь 2013Дайджест вакансий, сентябрь 2013
Дайджест вакансий, сентябрь 2013
 
Баба-Яга против! — Роман Дворнов, Ostrovok.ru
Баба-Яга против! — Роман Дворнов, Ostrovok.ruБаба-Яга против! — Роман Дворнов, Ostrovok.ru
Баба-Яга против! — Роман Дворнов, Ostrovok.ru
 
Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaS...
Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaS...Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaS...
Игорь Шевченко — Новая выдача Поиска для сайта - кастомные теги, CSS3 и JavaS...
 
Баба Яга против!
Баба Яга против!Баба Яга против!
Баба Яга против!
 
Опыт разработки SEO софта на примере FastTrust и ComparseR
Опыт разработки SEO софта на примере FastTrust и ComparseRОпыт разработки SEO софта на примере FastTrust и ComparseR
Опыт разработки SEO софта на примере FastTrust и ComparseR
 
Ликбез для HR'ов в IT
Ликбез для HR'ов в ITЛикбез для HR'ов в IT
Ликбез для HR'ов в IT
 
Pj 2013 4
Pj 2013 4Pj 2013 4
Pj 2013 4
 
Акторы на C++: стоило ли оно того?
Акторы на C++: стоило ли оно того?Акторы на C++: стоило ли оно того?
Акторы на C++: стоило ли оно того?
 
От заката до рассвета | Максим Безуглый | Zlit Tech
От заката до рассвета | Максим Безуглый | Zlit TechОт заката до рассвета | Максим Безуглый | Zlit Tech
От заката до рассвета | Максим Безуглый | Zlit Tech
 
Cps 2014 cinesoft
Cps 2014 cinesoftCps 2014 cinesoft
Cps 2014 cinesoft
 
Why TDD doesn't work? (Кому что мешает, или почему TDD не работает?)
 Why TDD doesn't work? (Кому что мешает,   или почему  TDD  не работает?) Why TDD doesn't work? (Кому что мешает,   или почему  TDD  не работает?)
Why TDD doesn't work? (Кому что мешает, или почему TDD не работает?)
 
Оптимизация скорости загрузки сайта
Оптимизация скорости загрузки сайтаОптимизация скорости загрузки сайта
Оптимизация скорости загрузки сайта
 

Mehr von LumoSpark

Getting started with HTTPS | LumoSpark webinar
Getting started with HTTPS | LumoSpark webinar Getting started with HTTPS | LumoSpark webinar
Getting started with HTTPS | LumoSpark webinar LumoSpark
 
How to turn any dynamic website into a static site | 24.01.2018 | Artem Danil...
How to turn any dynamic website into a static site | 24.01.2018 | Artem Danil...How to turn any dynamic website into a static site | 24.01.2018 | Artem Danil...
How to turn any dynamic website into a static site | 24.01.2018 | Artem Danil...LumoSpark
 
Разработка статических сайтов | Artem Daniliants | LumoSpark
Разработка статических сайтов | Artem Daniliants | LumoSparkРазработка статических сайтов | Artem Daniliants | LumoSpark
Разработка статических сайтов | Artem Daniliants | LumoSparkLumoSpark
 
ValoStartup Meetup #9 "Как шаг за шагом написать чат-бот для Telegram на Python"
ValoStartup Meetup #9 "Как шаг за шагом написать чат-бот для Telegram на Python"ValoStartup Meetup #9 "Как шаг за шагом написать чат-бот для Telegram на Python"
ValoStartup Meetup #9 "Как шаг за шагом написать чат-бот для Telegram на Python"LumoSpark
 
Artem Daniliants / Банкротство - это лучшее что произошло в моей бизнес-карьере
Artem Daniliants / Банкротство - это лучшее что произошло в моей бизнес-карьереArtem Daniliants / Банкротство - это лучшее что произошло в моей бизнес-карьере
Artem Daniliants / Банкротство - это лучшее что произошло в моей бизнес-карьереLumoSpark
 
Going back to static html sites / Artem Daniliants / LumoSpark
Going back to static html sites / Artem Daniliants / LumoSparkGoing back to static html sites / Artem Daniliants / LumoSpark
Going back to static html sites / Artem Daniliants / LumoSparkLumoSpark
 
Marketing automatisation (Artem Daniliants)
Marketing automatisation (Artem Daniliants)Marketing automatisation (Artem Daniliants)
Marketing automatisation (Artem Daniliants)LumoSpark
 
Web development automatisation for fun and profit (Artem Daniliants)
Web development automatisation for fun and profit (Artem Daniliants)Web development automatisation for fun and profit (Artem Daniliants)
Web development automatisation for fun and profit (Artem Daniliants)LumoSpark
 
Принципы эффективного веб-дизайна 2.0 (Artur Galustyan)
Принципы эффективного веб-дизайна 2.0 (Artur Galustyan)Принципы эффективного веб-дизайна 2.0 (Artur Galustyan)
Принципы эффективного веб-дизайна 2.0 (Artur Galustyan)LumoSpark
 

Mehr von LumoSpark (9)

Getting started with HTTPS | LumoSpark webinar
Getting started with HTTPS | LumoSpark webinar Getting started with HTTPS | LumoSpark webinar
Getting started with HTTPS | LumoSpark webinar
 
How to turn any dynamic website into a static site | 24.01.2018 | Artem Danil...
How to turn any dynamic website into a static site | 24.01.2018 | Artem Danil...How to turn any dynamic website into a static site | 24.01.2018 | Artem Danil...
How to turn any dynamic website into a static site | 24.01.2018 | Artem Danil...
 
Разработка статических сайтов | Artem Daniliants | LumoSpark
Разработка статических сайтов | Artem Daniliants | LumoSparkРазработка статических сайтов | Artem Daniliants | LumoSpark
Разработка статических сайтов | Artem Daniliants | LumoSpark
 
ValoStartup Meetup #9 "Как шаг за шагом написать чат-бот для Telegram на Python"
ValoStartup Meetup #9 "Как шаг за шагом написать чат-бот для Telegram на Python"ValoStartup Meetup #9 "Как шаг за шагом написать чат-бот для Telegram на Python"
ValoStartup Meetup #9 "Как шаг за шагом написать чат-бот для Telegram на Python"
 
Artem Daniliants / Банкротство - это лучшее что произошло в моей бизнес-карьере
Artem Daniliants / Банкротство - это лучшее что произошло в моей бизнес-карьереArtem Daniliants / Банкротство - это лучшее что произошло в моей бизнес-карьере
Artem Daniliants / Банкротство - это лучшее что произошло в моей бизнес-карьере
 
Going back to static html sites / Artem Daniliants / LumoSpark
Going back to static html sites / Artem Daniliants / LumoSparkGoing back to static html sites / Artem Daniliants / LumoSpark
Going back to static html sites / Artem Daniliants / LumoSpark
 
Marketing automatisation (Artem Daniliants)
Marketing automatisation (Artem Daniliants)Marketing automatisation (Artem Daniliants)
Marketing automatisation (Artem Daniliants)
 
Web development automatisation for fun and profit (Artem Daniliants)
Web development automatisation for fun and profit (Artem Daniliants)Web development automatisation for fun and profit (Artem Daniliants)
Web development automatisation for fun and profit (Artem Daniliants)
 
Принципы эффективного веб-дизайна 2.0 (Artur Galustyan)
Принципы эффективного веб-дизайна 2.0 (Artur Galustyan)Принципы эффективного веб-дизайна 2.0 (Artur Galustyan)
Принципы эффективного веб-дизайна 2.0 (Artur Galustyan)
 

Good front end - bad front-end (Vladimir Gutorov)