Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Современный станок верстальщика

160 views

Published on

5 мая 2012 года мы с Женей Батовским рассказали о том, какие инструменты используют фронтендеры Яндекса. Это было больше чем просто доклад.

Я рассказал о сборке и оптимизации кода, а это было ещё до появления гранта, галпа и вебпака. И почти все утилиты написали коллеги из Яндекса.

Женя рассказал о том, как можно на одном компе собрать все браузеры и установить несколько версий одного браузера.

Это было 8 лет назад, тогда ещё лидировал Firefox, мы работали в Яндексе и у меня были дреды :)

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Современный станок верстальщика

  1. 1. Николай Птущук Евгений Батовский Я.Субботник, Киев, 5 мая 2012 года Современный станок верстальщика
  2. 2. 2
  3. 3. 3
  4. 4. 4
  5. 5. 5
  6. 6. Наш современный станок 6
  7. 7. Наш современный станок — Аналитика пользователей 6
  8. 8. Наш современный станок — Аналитика пользователей — Зоопарк браузеров 6
  9. 9. Наш современный станок — Аналитика пользователей — Зоопарк браузеров — Оптимизация 6
  10. 10. Наш современный станок — Аналитика пользователей — Зоопарк браузеров — Оптимизация — Сопровождение 6
  11. 11. Аналитика пользователей
  12. 12. Firefox Opera Chrome IE Safari 20% 27% 30% 16% 1% 8
  13. 13. 9 Firefox Chrome IE Opera Safari 12 – 1,7% 18 – 12,6% 9 – 9,7% 11.6 – 14,3% 5 – 0,7% 11 – 13,9% 17 – 5,4% 8 – 12,9% 11.5 – 1,4% 10 – 2,8% 16 – 0,9% 7 – 3% 11.1 – 0,6% 9 – 1,8% 15 – 0,6% 6 – 1,7% 8 – 1,3% 7,6,5,4 – 0,7% 3.6 – 4,3% 3.5 – 0,9% Итого 23 браузера > 0,5%
  14. 14. 10
  15. 15. 11
  16. 16. Graceful degradation 12
  17. 17. Graceful degradation — Доступные контент и функциональность 12
  18. 18. Graceful degradation — Доступные контент и функциональность — Браузерозависимые стили 12
  19. 19. 13
  20. 20. Зоопарк браузеров
  21. 21. 15 БРАУЗЕРЫ Ну почему вас так много?
  22. 22. Как проверяем верстку 16
  23. 23. Как проверяем верстку 1 верстальщик = 7 компьютеров 16
  24. 24. Как проверяем верстку 1 верстальщик = 7 компьютеров 30 верстальщиков = 210 компьютеров 16
  25. 25. 17 Это почти правда
  26. 26. Кто они — наши пользователи? 18
  27. 27. 19
  28. 28. 19
  29. 29. 19
  30. 30. забывают обновлять браузер 20
  31. 31. устанавливают альфа и бета версии 21
  32. 32. свой набор медиа плагинов, «баров» 22
  33. 33. собственные сборки браузера 23
  34. 34. 24
  35. 35. 25 Разработчику нужно быть ближе к пользователю
  36. 36. 26 Разработчик интерфейсов? ORLY? Установи JAWS, какой-нибудь сниффер http/ https, Fiddler к примеру, прокси сервер туда же для отладки, privoxy и OpenVPN туннель еще нужен...
  37. 37. 27 Разработчик интерфейсов? ORLY? — Протестировать страницы для печати — Проверить адаптивность страниц — Настроить браузеры «под себя»
  38. 38. 28
  39. 39. 29
  40. 40. Образы виртуальных машин MS VPC clck.ru/10L4i 30
  41. 41. MS VPC + VirtualBox = ievms clck.ru/10L6k 31
  42. 42. MS Windows XP IE6 MS Windows Vista IE7 MS Windows 7 IE8 MS Windows 7 IE9 32
  43. 43. Универсальные комбайны 33 IETester Multiply IE IECollection Adobe BrowserLab
  44. 44. 34 Wine VMWare ThinApp Виртуализация приложений
  45. 45. 34 Wine VMWare ThinApp Novell ZENWorks Application Virtualisation Виртуализация приложений
  46. 46. 35 Выбор платформы для виртуализации ОС
  47. 47. 35 Выбор платформы для виртуализации ОС
  48. 48. 35 Выбор платформы для виртуализации ОС
  49. 49. 35 Выбор платформы для виртуализации ОС
  50. 50. 2048 Mб памяти 15 Гб на диске 36
  51. 51. MS Windows Volume Licence 7 Pro 32-bit ZENworks Application Virtualization User License + 1-Year Standard Maintenance 37
  52. 52. IE9 IE8 IE7 IE6 38 + Developer ToolBar
  53. 53. releases.mozilla.org/pub/ mozilla.org/firefox/releases/ firefox.exe -p FF3016 + FireBug FireFox/3016/ 39
  54. 54. ftp.opera.com/pub/ Opera/11.01/opera.exe + DragonFly 40
  55. 55. google.com/chrome oldapps.com + Web Inspector portableapps.com 41
  56. 56. www.andlinux.org 42
  57. 57. Оптимизация
  58. 58. 46
  59. 59. 47
  60. 60. 48
  61. 61. 49 Каждый день консоль! ssh, tcpdump, find, sed, awk, svn/ git/hg, ack, shell script, make, node, npm...
  62. 62. 50 UglifyJS github.com/mishoo/UglifyJS
  63. 63. 51 как работает uglifyjs > uglifyjs -o blockA.js blockB.js js/script.js
  64. 64. 52 reset.css body { ... } ol, ul { ... } table { ... }
  65. 65. 53 layout.css .wrapper { ... } .column-left { ... } .column-right { ... }
  66. 66. 54 style.css .header { ... } .content { ... } .footer { ... }
  67. 67. 55 подключение стилей <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="style.css">
  68. 68. 56 style.css @import "reset.css"; @import "layout.css"; .header { ... } .content { ... } .footer { ... }
  69. 69. 57 borschik github.com/veged/borschik
  70. 70. 58 как работает borschik > borschik -t css -i style.css -o main.css
  71. 71. 59 main.css body { ... } ol, ul { ... } table { ... } .wrapper { ... } .column-left { ... } .column-right { ... } .header { ... } .content { ... } .footer { ... }
  72. 72. 60 style.css .block { margin: 20px; color: #f00; margin-bottom: 25px; font-size: 0.6em; }
  73. 73. 61 csso github.com/css/csso
  74. 74. 62 style.css .block { margin: 20px; color: #f00; margin-bottom: 25px; font-size: 0.6em; }
  75. 75. 63 как работает csso > csso -i style.css -o main.css
  76. 76. 64 main.css .block{color:red;margin:20px 20px 25px;font-size:.6em}
  77. 77. 65 как работает csso margin: 20px; margin-bottom: 25px; margin: 20px 20px 25px;
  78. 78. 66 как работает csso color: #f00; color: red;
  79. 79. 67 папка с картинками images/ logo.png css/ style.css
  80. 80. 68 style.css .logo { background: url(/images/logo.png); }
  81. 81. 69 перенос картинок images/ static/img/
  82. 82. 70 cssrb github.com/afelix/cssrb
  83. 83. 71 .cssrb.js exports.config = { fromBase: '/Users/user/site/images/', toBase: '/Users/user/site/static/img/', patterns: { '^/?images': '/static/img/' } }
  84. 84. 72 как работает cssrb > cssrb -c .cssrb.js style.css main.css -mv
  85. 85. 73 style.css .logo { background: url(/static/img/logo.png); }
  86. 86. 74 оптимизация картинок imagemagick pngout optipng pngrewrite exiftool advpng jpegtran gifsicle pngnq defluff
  87. 87. 75 imgo github.com/imgo/imgo
  88. 88. 76 как работает imgo > imgo images/
  89. 89. 77 как работает imgo Result: Processed: 13 files of 13, total size 1520795 bytes Profit: 146579 bytes (9%) Total time: 00:00:51 (HH:MM:SS)
  90. 90. Дальнейшая поддержка кода
  91. 91. 79 BEM bem.github.com/bem-method/ clubs.ya.ru/bem/
  92. 92. 80 BEM-Tools
  93. 93. 80 BEM-Tools github.com/bem/bem-tools
  94. 94. 80 BEM-Tools github.com/bem/bem-tools > bem server
  95. 95. mcslayer@yandex-team.ru mcslayer Евгений Батовский uncleb@yandex-team.ru batovsky Вопросы? Николай Птущук

×