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

Mixin’ Up Design and Development

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
Avatar for Yu Morita securecat
0
200
AIでデザインをつくる：基礎編
Avatar for 太田賢一 kenichiota0711
3
2.5k
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
0
1.2k
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
Avatar for Hiroki Nagasawa pixyzehn
0
130
Ralph Penel Portfolio
Avatar for ralphpenel ralphpenel
PRO
0
260
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
Avatar for インクルーシブデザインスタジオCULUMU culumu
1
570
デザイナーがAIを使い倒して爆速プロダクト開発！社内ハッカソンでの取り組み紹介
Avatar for 都村　美帆 abokadotyann
9
3k
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
Avatar for 株式会社ルート root_recruit
0
380
mount_company_profile
Avatar for mount inc. mount_inc
0
4.9k
kintone Style Book
Avatar for kintone kintone
6
10k
TUNAG BOOK 2024
Avatar for 株式会社スタメン stmn
PRO
0
1.4k
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
4
690

Featured

See All Featured
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
1.9k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
660
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
62
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.6k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
350
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
180
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k

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