Learn to love the Middleman

Or, how I optimize the web 
design integration process using Middleman
(and some other tools).

Transcript

1. Learn to love the Middleman Or, how I optimize the web 
 design integration process using Middleman
 (and some other tools). B Y R AY B R O W N
2. Introduction
3. Who am I? • Web designer, front-end developer, and owner
 of Bitmanic. • Pixel wrangler for 12 years,
 professionally since 2007 • Started as a designer but became obsessed with coding
4. About Middleman
5. What is Middleman? • Static site generator built on top of Rails • Delivers some of the niceties of Ruby on Rails without the bloat • Lightweight local server and preprocessor
6. How’s it different than X? • Lots of similar tools: Grunt, Jekyll, Cactus, Harp, Octopress, Pelican, Assemble, & Wintersmith (to name a few) • Each tool has pros and cons - find one that works best for you
7. What do I need? • A computer • Ruby on Rails • RubyGems package manager
8. Installing Middleman 1 gem install middleman …yep, that’s it.
9. Creating a project 1 middleman init PROJECT_NAME …yep, that’s it…again.
10. What does “init” do? • Creates a starting point for your static website • Includes a default config file • That…that’s about it
11. Starting the server 1 cd PROJECT_NAME 2 middleman and then head on over to http://localhost:4567
13. Preprocessing
14. Preprocessing • Comes bundled with support for Erb, Haml, Sass, Scss & CoffeeScript, with additional support for: Slim Liquid Kramdown Radius WikiCloth Erubis RDiscount Maruku Markaby Yajl Less CSS Redcarpet RedCloth Nokogiri Stylus Builder BlueCloth RDoc Creole
15. Preprocessing • /source/MY_HTML.html.haml becomes
 http://localhost:4567/MY_HTML.html • /source/MY_CSS.css.sass becomes
 http://localhost:4567/MY_CSS.css • /source/MY_JS.js.coffee becomes
 http://localhost:4567/MY_JS.js
16. Config options
18. Config options • Dictate asset directories • Configure template language options • Enable LiveReload • Adjust layout options • Manipulate the build process
19. Build config
20. Build config • Minify HTML, CSS, & JS files • Optimize image sizes • Toggle relative asset linking • Plus much more
21. Building the project 1 middleman build
22. Building the project • A new /build/ folder will be created • Contains compiled assets for the project • Incredibly useful for handing off to devs, running static, websites, or creating interactive prototypes
23. More nice features
24. Local data • YAML-formatted data can be stored as 
 /data/MY_DATA.yml • Keeps content separate from 
 structure & presentation • This data is accessible throughout the project • Each page can contain its own YAML or JSON data (available to layouts & partials)
25. Plays well with Bower • Append the Bower component directory to Sprockets’ asset path • Reference third-party assets from within project • Keeps third-party assets out of your project - and out of your repo
26. Real world application
27. Static websites Simple sites for small businesses, 
 restaurants, or individuals
28. Polished deliverables Turn designs into static HTML, CSS, and JS that’s ready to be integrated into a dynamic system
29. Interactive Prototypes Create quick and dirty prototypes of projects that can be refactored or tossed away without much expense
30. Other useful tools
31. Middleman is great, but it’s just a site generator As a designer and developer, I need tools that help me bridge the gap between the two disciplines
32. Composite
33. Composite • iOS design tool for Photoshop • Syncs current PSD file to configured iOS devices • Turns Photoshop layer comps into interactive app preview
34. DevRocket
35. DevRocket • Photoshop extension • Creates and previews templates for mobile development • Uses Photoshop layer naming conventions to export retina- ready images from a PSD
36. DevRocket layer export This feature alone saves me gobs and gobs of time
37. DevRocket layer export This feature alone saves me gobs and gobs of time
38. ImageOptim
39. ImageOptim • Utilitarian image optimizer, as the name implies • Doesn’t affect appearance of the images it converts • Great to do this before adding images to a repo
40. Fontastic
41. Fontastic • Web app for creating 
 custom icon fonts • Upload your own SVG files or choose from existing libraries • Customize character mapping and download production- ready icon font packages
42. Conclusion
43. Tools I love • Middleman is an easy-to-use tool that gets out of your way when it comes to writing front-end code • Composite, DevRocket, ImageOptim, and Fontastic are pretty rad for front-enders • There’s a lot out there that I don’t know about - these are simply the tools that I’ve found and loved
44. What am I missing? • What tools do you use and enjoy? • What sort of new tools do you see emerging? • What sort of tools are missing from your toolbox?
45. Let me know @bitmanic
46. ( ͡ ° ͜ ʖ ͡ °) Thanks!