Алексей Авдеев (Mish) — Как подружиться c фронтенд-разработчиком

Transcript

9. 9 Дистанция
10. Как стать ближе? 10
11. 9 Компоненты 11
17. Компоненты
18. Проектируйте, а не рисуйте 18
19. 8 Адаптив 19
20. Веб адаптивен по-умолчанию 20
22. Сколько брейкпойнтов? 22
25. Только то, что изменяется 25
27. CSS Container Queries 27
33. Flexbox .block { display: flex; flex-flow: row wrap; justify-content: flex-end; } 01. 02. 03. 04. 05. 33
34. Auto Layout
35. Продумывайте адаптив 35
36. 7 Платформа 36
37. Закон Якоба 37
41. Не проектируйте заново нативные 41
42. 6 Шрифты 42
44. url("/fonts/OpenSans-Regular-webfont.woff2") @font-face @font-face { font-family: "Open Sans"; src: format("woff2"); } h1 { font-family: "Open Sans" } 01. 02. 03. 04. 05. 06. 07. 08. 44
48. Стек системных шрифтов 48
49. Sans-serif font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; 01. 02. 03. 49
50. Преимущества Быстрая загрузка Отличная поддержка Привычный пользователям 1. 2. 3. 50
51. Изучайте популярные шрифты 51
52. 5 Скролл 52
54. 60 кадров в секунду (FPS) 54
57. Минимум вычислений на скрол 57
58. 4 Состояния 58
63. Сверьтесь с чеклистом 63
65. 3 Контент 65
68. Работайте с контентом 68
69. 2 Рефакторинг 69
72. Смотрят чаще, чем редактируют 72
85. Уменьшайте дизайн-долг 85
86. 1 Разработка 86
89. Представляйте конечную цель 89
91. Идеальный конечный результат 91
93. Нет разработчика — нет проблем 93
100. Изучайте разные инструменты 100
101. Сокращаем дистанцию
103. Проектируйте макеты, будто верстать их будет склонный к насилию психопат, который знает, где вы живете 103
104. 👏 Спасибо! 👨 Алексей Авдеев 🌐 github.com/avdeev 🌐 twitter.com/avdeev_alexey 🌐 Продуктовая лаборатория Mish — — — — 104