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
Drawing for Animation
Avatar for Mandalyn Teo lynteo
2
190
「自分の仕事はどこまで？」と問い続けたら。デザイナーの「視座」を考える
Avatar for Takeru Mukai mukai_takeru
0
300
Figmaレクチャー会Part2 もっと使いこなす編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
1
260
Connpass-Xperia_Camera_App_by_HCD.pdf
Avatar for ソニー株式会社 sony
0
480
結びながら、ひらく - にじむ境界のデザイン
Avatar for Hiroki Tani hilokifigma
3
1.3k
【サイバーエージェント】Creative Switch 会社説明資料
Avatar for 【CyberAgent】クリエイター新卒採用 cyberagent_creators
0
5.1k
第18回サイゼミ
Avatar for LW lw
1
3.3k
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
Avatar for Muture muture
PRO
0
430
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
Avatar for 株式会社ログラス loglass2019
1
7k
【MIXI MEETUP！ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ！生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
Avatar for MIXI DESIGN mixi_design
PRO
0
200
チームをデザイン対象にする / Design for your team
Avatar for 株式会社カミナシ kaminashi
1
540
アクセシビリティ推進を続けられるようにするヒント - Accessibility Conference CHIBA 2025
Avatar for uto usui uto
0
180

Featured

See All Featured
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
32k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
210
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
910
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
0
1.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
140
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
150
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
170
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.2k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k

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