Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mixin’ Up Design and Development

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for brettjay brettjay
November 02, 2016
Design
0
28

Mixin’ Up Design and Development

There are a couple of slides that were originally video.

Avatar for brettjay

brettjay

November 02, 2016
Tweet

Other Decks in Design

See All in Design
AIでデザインをつくる：基礎編
Avatar for 太田賢一 kenichiota0711
3
2.5k
アイデアを加速させる！Firefly ボードで発想の幅を広げよう
Avatar for コネクリ connecre
1
300
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
Avatar for Goodpatch Inc. goodpatch
3
3.1k
デザインするために「多様性」について考える
Avatar for なつ iflection
0
180
UI/UX & Web Design Portfolio 2025｜Madoka Kumagai
Avatar for Madoka madoka_portfolio
2
130
Figmaレクチャー会Part2 もっと使いこなす編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
1
260
【サイバーエージェント】Creative Switch 会社説明資料
Avatar for 【CyberAgent】クリエイター新卒採用 cyberagent_creators
0
5.1k
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
160
Storyboard Assignment: Storyboard from Comic Strip
Avatar for Mandalyn Teo lynteo
3
180
From the Visible Crossroads: Turning Outputs into Outcomes
Avatar for takai_kanako takaikanako
2
1.1k
「自分の仕事はどこまで？」と問い続けたら。デザイナーの「視座」を考える
Avatar for Takeru Mukai mukai_takeru
0
300
hicard_credential_202601
Avatar for hicard hicard
0
150

Featured

See All Featured
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
62
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
130
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
86
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
130
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
660
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
220
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
0
210
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
2.1k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
66
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
49
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
1
130
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
120

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

  17. None

  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

  61. None

  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