Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Mixin’ Up Design and Development

Avatar for brettjay brettjay
November 02, 2016
Design
36
0

Mixin’ Up Design and Development

There are a couple of slides that were originally video.

Avatar for brettjay

brettjay

November 02, 2016

Other Decks in Design

See All in Design
信頼をデザインし、ブランドで市場を拓く。/ Designship2026
Avatar for Assured Inc. assuredjp
PRO
0
240
作品が生まれ続けるコミュニティデザイン ― 研究室でも会社でもないサードプレイス ― / designship26-iwaken
Avatar for Kenta Iwasaki iwaken71
0
170
エンジニア経験0のデザイナーが アプリを0からリリースまで 作ってみる
Avatar for 都村　美帆 abokadotyann
2
400
Agentic Design Workflowを育てる 「三層デザインハーネス」の現在地
Avatar for Sayaka Kubouchi sayadesign2
0
790
開閉UIのアニメーション設計
Avatar for hiro hiro0218
2
1.1k
The decksh tutorial
Avatar for Anthony Starks ajstarks
1
100
コールセンターのオペレーターに6時間だけなってみた
Avatar for Hiroki Hosaka h0sa
0
140
クリエイティブディレクター 両角 高寛 の自己紹介
Avatar for GYRO両角 morogyro
0
210
デザインツールを開く前に その画面は誰に何と言わせたい？受託UIデザイナーが顧客解像度を高める 「打ち合わせの場での確かめ方」
Avatar for @Garyuten garyuten
1
280
Look Dev Meetup #50
Avatar for Baku Hashimoto baku89
1
520
Where Imagination Ends AI Begins
Avatar for R-524 r5ni4
0
470
デザインレビューを「他者へのおすそわけ」に再定義し、たのしい場にする試み
Avatar for Beeworks Marketing Design webnaut
0
110

Featured

See All Featured
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
550
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.5k
Building an army of robots
Avatar for Kyle Neath kneath
307
47k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.6k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
10
37k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
710
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
7.1k
Between Models and Reality
Avatar for mayunak mayunak
4
500
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
240
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.8k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
580

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