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
   

   View Slide

2. Introduction
   

   View Slide

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
   

   View Slide

4. About Middleman
   

   View Slide

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
   

   View Slide

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
   

   View Slide

7. What do I need?
   • A computer
   • Ruby on Rails
   • RubyGems package manager
   

   View Slide

8. Installing Middleman
   1 gem install middleman
   …yep, that’s it.
   

   View Slide

9. Creating a project
   1 middleman init PROJECT_NAME
   …yep, that’s it…again.
   

   View Slide

10. What does “init” do?
    • Creates a starting point for
    your static website
    • Includes a default config file
    • That…that’s about it
    

    View Slide

11. Starting the server
    1 cd PROJECT_NAME
    2 middleman
    and then head on over to http://localhost:4567
    

    View Slide

12. View Slide

13. Preprocessing
    

    View Slide

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
    

    View Slide

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
    

    View Slide

16. Config options
    

    View Slide

17. View Slide

18. Config options
    • Dictate asset directories
    • Configure template language options
    • Enable LiveReload
    • Adjust layout options
    • Manipulate the build process
    

    View Slide

19. Build config
    

    View Slide

20. Build config
    • Minify HTML, CSS, & JS files
    • Optimize image sizes
    • Toggle relative asset linking
    • Plus much more
    

    View Slide

21. Building the project
    1 middleman build
    

    View Slide

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
    

    View Slide

23. More nice features
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

26. Real world application
    

    View Slide

27. Static websites
    Simple sites for small businesses, 

    restaurants, or individuals
    

    View Slide

28. Polished deliverables
    Turn designs into static HTML, CSS, and JS that’s
    ready to be integrated into a dynamic system
    

    View Slide

29. Interactive Prototypes
    Create quick and dirty prototypes of projects that can be
    refactored or tossed away without much expense
    

    View Slide

30. Other useful tools
    

    View Slide

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
    

    View Slide

32. Composite
    

    View Slide

33. Composite
    • iOS design tool for Photoshop
    • Syncs current PSD file to
    configured iOS devices
    • Turns Photoshop layer comps
    into interactive app preview
    

    View Slide

34. DevRocket
    

    View Slide

35. DevRocket
    • Photoshop extension
    • Creates and previews
    templates for mobile
    development
    • Uses Photoshop layer naming
    conventions to export retina-
    ready images from a PSD
    

    View Slide

36. DevRocket layer export
    This feature alone saves me gobs and gobs of time
    

    View Slide

37. DevRocket layer export
    This feature alone saves me gobs and gobs of time
    

    View Slide

38. ImageOptim
    

    View Slide

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
    

    View Slide

40. Fontastic
    

    View Slide

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
    

    View Slide

42. Conclusion
    

    View Slide

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
    

    View Slide

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?
    

    View Slide

45. Let me know
    @bitmanic
    

    View Slide

46. ( ͡
    ° ͜
    ʖ ͡
    °)
    Thanks!
    

    View Slide