Mixin’ Up Design and Development

There are a couple of slides that were originally video.

Transcript

1. Mixin’ Up Design & Development (with Static Site Generators) Mixin’ Up Design & Development @brett_jay
2. Hello Mixin’ Up Design & Development @brett_jay
3. @brett_jay Mixin’ Up Design & Development @brett_jay
4. Mixin’ Up Design & Development @brett_jay
5. Mixin’ Up Design & Development @brett_jay
6. Mixin’ Up Design & Development @brett_jay
7. Mixin’ Up Design & Development @brett_jay
8. Mixin’ Up Design & Development @brett_jay
9. Mixin’ Up Design & Development @brett_jay
10. Mixin’ Up Design & Development @brett_jay
11. Mixin’ Up Design & Development @brett_jay
12. Mixin’ Up Design & Development @brett_jay
13. Ugh Mixin’ Up Design & Development @brett_jay
14. Lot of repetition. Mixin’ Up Design & Development @brett_jay
15. What if we want to update it? Mixin’ Up Design & Development @brett_jay
16. Cast your mind back… Mixin’ Up Design & Development @brett_jay
18. Mixin’ Up Design & Development @brett_jay
19. Mixin’ Up Design & Development @brett_jay
20. Static Pages Dynamic Sites Getting Started Updating Content Deploying Mixin’ Up Design & Development @brett_jay
21. Static Pages Dynamic Sites Getting Started Easy Updating Content Hard Deploying Easy Mixin’ Up Design & Development @brett_jay
22. Static Pages Dynamic Sites Getting Started Easy Hard Updating Content Hard Easy Deploying Easy Depends Mixin’ Up Design & Development @brett_jay
23. Mixin’ Up Design & Development @brett_jay
24. Mixin’ Up Design & Development @brett_jay
25. Mixin’ Up Design & Development @brett_jay
26. “static site generator” Mixin’ Up Design & Development @brett_jay
27. Mixin’ Up Design & Development @brett_jay
28. Mixin’ Up Design & Development @brett_jay
29. What is a static site generator? Mixin’ Up Design & Development @brett_jay
30. A pre–processor for your website. Mixin’ Up Design & Development @brett_jay
31. SASS CSS Mixin’ Up Design & Development @brett_jay
32. ES6 JS Mixin’ Up Design & Development @brett_jay
33. ERB HTML Middleman Dynamic page logic is compiled to static files. Mixin’ Up Design & Development @brett_jay
34. Develop with a dynamic language Build static files Deploy however you wish Life Cycle Mixin’ Up Design & Development @brett_jay
35. Static Pages Dynamic Sites Static Site Generators Getting Started Easy Hard Tie Updating Content Hard Easy Easy Deploying Easy Depends Easy Mixin’ Up Design & Development @brett_jay
36. *Not always suitable Mixin’ Up Design & Development @brett_jay
37. But when it is, it’s awesome Mixin’ Up Design & Development @brett_jay
38. So, how can it help? Mixin’ Up Design & Development @brett_jay
39. HTML CSS JS Mixin’ Up Design & Development @brett_jay
40. YAML HTML CSS JS Mixin’ Up Design & Development @brett_jay
41. What? Mixin’ Up Design & Development @brett_jay
42. YAML HTML CSS JS Mixin’ Up Design & Development @brett_jay
43. Mixin’ Up Design & Development @brett_jay
44. YAML Mixin’ Up Design & Development @brett_jay
45. YAML Mixin’ Up Design & Development @brett_jay
46. YAML Mixin’ Up Design & Development @brett_jay
47. HTML YAML Mixin’ Up Design & Development @brett_jay
48. YAML HAML Mixin’ Up Design & Development @brett_jay
49. YAML HAML DISCLAIMER Haml is not for everyone. Mixin’ Up Design & Development @brett_jay
50. YAML HAML Mixin’ Up Design & Development @brett_jay
51. YAML HAML Mixin’ Up Design & Development @brett_jay
52. YAML HAML Mixin’ Up Design & Development @brett_jay
53. YAML HAML Mixin’ Up Design & Development @brett_jay
54. YAML HAML Mixin’ Up Design & Development @brett_jay
55. YAML HAML Mixin’ Up Design & Development @brett_jay
56. YAML HAML Mixin’ Up Design & Development @brett_jay
57. YAML HAML Mixin’ Up Design & Development @brett_jay
58. YAML HAML Mixin’ Up Design & Development @brett_jay
59. YAML HAML Mixin’ Up Design & Development @brett_jay
60. YAML HAML Mixin’ Up Design & Development @brett_jay
62. We can take it further. Mixin’ Up Design & Development @brett_jay
63. Mixin’ Up Design & Development @brett_jay
64. Mixin’ Up Design & Development @brett_jay
65. Mixin’ Up Design & Development @brett_jay
66. Mixin’ Up Design & Development @brett_jay
67. Manage changes Mixin’ Up Design & Development @brett_jay
68. We’ve all had clients who need changes made. Mixin’ Up Design & Development @brett_jay
69. Mixin’ Up Design & Development @brett_jay
70. Mixin’ Up Design & Development @brett_jay
71. Mixin’ Up Design & Development @brett_jay
72. <Organisation Name> <Organisation Bio> <Speaker Photo> <Speaker Name> <Speaker Position> <Speaker Bio> <Speaker Photo> <Speaker Name> <Speaker Position> <Speaker Bio> Mixin’ Up Design & Development @brett_jay
73. Mixin’ Up Design & Development @brett_jay
74. Mixin’ Up Design & Development @brett_jay
75. Faster changes Mixin’ Up Design & Development @brett_jay
76. Maintain consistency Mixin’ Up Design & Development @brett_jay
77. Greater confidence Mixin’ Up Design & Development @brett_jay
78. Faster Feedback Loop Mixin’ Up Design & Development @brett_jay
79. Speeding up repetitive tasks Mixin’ Up Design & Development @brett_jay
80. Mixin’ Up Design & Development @brett_jay
81. Mixin’ Up Design & Development @brett_jay
82. Mixin’ Up Design & Development @brett_jay
83. Mixin’ Up Design & Development @brett_jay
84. Mixin’ Up Design & Development @brett_jay
85. Mixin’ Up Design & Development @brett_jay
86. Easier to update markup without affecting content Mixin’ Up Design & Development @brett_jay
87. Easier to update content without affecting markup Mixin’ Up Design & Development @brett_jay
88. Mixin’ Up Design & Development @brett_jay
89. Easier to update. Mixin’ Up Design & Development @brett_jay
90. Caveat: *If Brett doesn’t write kludgey CSS Mixin’ Up Design & Development @brett_jay
91. Anyway… Mixin’ Up Design & Development @brett_jay
92. But what about those fancy modals? Mixin’ Up Design & Development @brett_jay
93. Mixin’ Up Design & Development @brett_jay
94. Mixin’ Up Design & Development @brett_jay
95. Mixin’ Up Design & Development @brett_jay
96. Proxy pages Mixin’ Up Design & Development @brett_jay
97. YAML HAML Mixin’ Up Design & Development @brett_jay
98. Mixin’ Up Design & Development @brett_jay
99. Mixin’ Up Design & Development @brett_jay
100. Mixin’ Up Design & Development @brett_jay
101. Mixin’ Up Design & Development @brett_jay
102. Mixin’ Up Design & Development @brett_jay
103. Mixin’ Up Design & Development @brett_jay
104. Mixin’ Up Design & Development @brett_jay
105. Mixin’ Up Design & Development @brett_jay
106. Mixin’ Up Design & Development @brett_jay
107. What now? Mixin’ Up Design & Development @brett_jay
108. Mixin’ Up Design & Development @brett_jay
109. Mixin’ Up Design & Development @brett_jay
110. Mixin’ Up Design & Development @brett_jay
111. YAML HAML HTML andrew-clarke HTML una-kravets HTML joel-califa HTML jina-bolton HTML mike-riethmuller HTML alice-lee HTML espen-brunborg Source Control Built, static files. Mixin’ Up Design & Development @brett_jay
112. Mixin’ Up Design & Development @brett_jay
113. Pretty directory indexes Mixin’ Up Design & Development @brett_jay
114. HTML andrew-clarke.html Mixin’ Up Design & Development @brett_jay
115. Mixin’ Up Design & Development @brett_jay
116. Mixin’ Up Design & Development @brett_jay
117. Mixin’ Up Design & Development @brett_jay
118. Bringing it all together. Mixin’ Up Design & Development @brett_jay
119. Design and Developing with the medium Mixin’ Up Design & Development @brett_jay
120. Mixin’ Up Design & Development @brett_jay
121. Mixin’ Up Design & Development @brett_jay
122. Mixin’ Up Design & Development @brett_jay
123. Mixin’ Up Design & Development @brett_jay
124. CLICK HERE Mixin’ Up Design & Development @brett_jay
125. C L I C K H E R E Mixin’ Up Design & Development @brett_jay
126. CLICK HERE Mixin’ Up Design & Development @brett_jay
127. Design in the browser Mixin’ Up Design & Development @brett_jay
128. Design in the browser Mixin’ Up Design & Development @brett_jay
129. Design in the browser Let the browser inform your design Mixin’ Up Design & Development @brett_jay
130. Design Code Mixin’ Up Design & Development @brett_jay
131. Design Code Mixin’ Up Design & Development @brett_jay
132. Faster Feedback Loop Mixin’ Up Design & Development @brett_jay
133. (so much for DRY ) Mixin’ Up Design & Development @brett_jay
134. YAML HTML CSS JS Treat content as important as HTML, CSS and Javascript. Mixin’ Up Design & Development @brett_jay
135. Thanks ✌ @brett_jay Mixin’ Up Design & Development @brett_jay