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
Correspondence：共に生成していく過程
Avatar for Akira Motomura akiramotomura
0
190
Treasure_Hunting
Avatar for Sol Metts solmetts
0
240
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
140
Liquid GlassとApp Intents
Avatar for touyou touyou
0
810
hicard_credential_202601
Avatar for hicard hicard
0
150
【pmconf2025】PdMの頭の中を見える化する体験構造図
Avatar for Shigeyuki Kameda kamechi7222222
1
1.9k
Franks Myth
Avatar for George Frank Hayford-Taylor gfht1
1
410
AIでデザインをつくる：基礎編
Avatar for 太田賢一 kenichiota0711
3
2.5k
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
790
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
930
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
610
mount_company_profile
Avatar for mount inc. mount_inc
0
4.9k

Featured

See All Featured
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
8k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
200
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
340
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2k
Between Models and Reality
Avatar for mayunak mayunak
1
190
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.3k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
240

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