Верстка и другие
развлечения
Юрий Артюх, SEConf, 2014
Привет!
• Меня зовут Юра	

• Я верстаю сайты	

• Давно
Зачем верстать?
проще всего начать
получать
удовольствие
можно показать
девушке
Написал код
Сверстал сайт
работать можно где-
угодно
как верстаю я
Постоянно
• 5-6 проектов одновременно	

• 10 часов в день
Текстовый редактор
!
Некоторые школы предпочитают
сверхдлинные мечи. Это слабые школы.
Они не принимают принципа «рубить врага
любыми средств...
Emmet
Hayaku
Emmet-Hayaku
•
https://gist.github.com/akella/9757676
Photoshop
CSS Hat
PNG Hat
Препроцессоры
Зачем они
• Чтобы работать быстрее	

• Так делают все модные пацаны (и
девчонки, ок)
Переменные
Вложенность
Свои функции
На самом деле:
+s(bigorel) - миксин
icons.png
Наследование
Чем это
компилировать
github.com/akella/sass
Методология верстки
• БЭМ
• MCSS
• UBERCSS
• PonyCSS
• WTFCSS
• MLP:FIM
плевать какая
лишь бы она была
Например БЭМ
Полезный Grunt
Что там есть
• Автоматическое тестирование
• Проверка вашего кода
• Сжатие файлов и картинок
• Автоматизация всех задач
HTML инклуды
https://github.com/alanshaw/grunt-include-replace
Сохранять только в SVG
PNG автоматически
https://github.com/filamentgroup/grunticon
Всякие модные слова
• Angular	

• Backbone	

• React	

• Responsive Web Design	

• SASS/LESS/Stylus	

• Node.js
Коммерческая верстка	

или как срубить бабла
• Почитать про все что я рассказал пару
месяцев (спросить меня что читать)	

...
занимайтесь только тем	

что вам интересно
занимайтесь только тем	

что вам интересно!
занимайтесь только тем	

что вам интересно!!
Изучайте новое каждый день
Получайте удовольствие от процесса
Идите и живите жизнь
Спасибо!
Спросите же хоть что-то!
!
Юрий Артюх
cssing.org.ua
facebook.com/akella
twitter.com/akella
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Верстка и другие развлечения, Seconf
Upcoming SlideShare
Loading in...5
×

Верстка и другие развлечения, Seconf

565

Published on

Published in: Career
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
565
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
19
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Верстка и другие развлечения, Seconf

  1. 1. Верстка и другие развлечения Юрий Артюх, SEConf, 2014
  2. 2. Привет! • Меня зовут Юра • Я верстаю сайты • Давно
  3. 3. Зачем верстать?
  4. 4. проще всего начать
  5. 5. получать удовольствие
  6. 6. можно показать девушке
  7. 7. Написал код
  8. 8. Сверстал сайт
  9. 9. работать можно где- угодно
  10. 10. как верстаю я
  11. 11. Постоянно • 5-6 проектов одновременно • 10 часов в день
  12. 12. Текстовый редактор
  13. 13. ! Некоторые школы предпочитают сверхдлинные мечи. Это слабые школы. Они не принимают принципа «рубить врага любыми средствами». Они предпочитают особо длинный меч. Книга пяти колец, XVII век, Миямото Мусаси
  14. 14. Emmet Hayaku
  15. 15. Emmet-Hayaku •
  16. 16. https://gist.github.com/akella/9757676
  17. 17. Photoshop
  18. 18. CSS Hat
  19. 19. PNG Hat
  20. 20. Препроцессоры
  21. 21. Зачем они • Чтобы работать быстрее • Так делают все модные пацаны (и девчонки, ок)
  22. 22. Переменные
  23. 23. Вложенность
  24. 24. Свои функции
  25. 25. На самом деле:
  26. 26. +s(bigorel) - миксин icons.png
  27. 27. Наследование
  28. 28. Чем это компилировать
  29. 29. github.com/akella/sass
  30. 30. Методология верстки • БЭМ • MCSS • UBERCSS • PonyCSS • WTFCSS • MLP:FIM
  31. 31. плевать какая лишь бы она была
  32. 32. Например БЭМ
  33. 33. Полезный Grunt
  34. 34. Что там есть • Автоматическое тестирование • Проверка вашего кода • Сжатие файлов и картинок • Автоматизация всех задач
  35. 35. HTML инклуды https://github.com/alanshaw/grunt-include-replace
  36. 36. Сохранять только в SVG PNG автоматически https://github.com/filamentgroup/grunticon
  37. 37. Всякие модные слова • Angular • Backbone • React • Responsive Web Design • SASS/LESS/Stylus • Node.js
  38. 38. Коммерческая верстка или как срубить бабла • Почитать про все что я рассказал пару месяцев (спросить меня что читать) • Сделать десяток любых сайтов используя знания • Profit
  39. 39. занимайтесь только тем что вам интересно
  40. 40. занимайтесь только тем что вам интересно!
  41. 41. занимайтесь только тем что вам интересно!!
  42. 42. Изучайте новое каждый день Получайте удовольствие от процесса Идите и живите жизнь
  43. 43. Спасибо! Спросите же хоть что-то! ! Юрий Артюх cssing.org.ua facebook.com/akella twitter.com/akella
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×