Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SO META: Metaprogramming for the Web

Kevin Suttle
November 14, 2011

SO META: Metaprogramming for the Web

We’ve become comfortable. Our industry is growing up, and so are we (well, most of us). We’ve gotten into the same habits and same workflows, but is this enough for the multi-device, rapidly-iterating ‘One Web’ of today? Web development technologies and user contexts are evolving every day and are causing us to question our existing workflows. New meta-programming frameworks like SASS, CoffeeScript and HAML are causing us to revisit our best practices and make our code work for us, the way we’ve always wanted it to. We’ll take a look at each of these frameworks and how platforms like Ruby and Rails can be your co-pilots when creating web apps and sites. With automated tasks to support these new workflows, you’ll be more productive and efficient than ever, allowing you to focus on being creative and providing the best experience to your users. The web isn’t the same as it was just five years ago. The way we build it shouldn’t be either.

Kevin Suttle

November 14, 2011
Tweet

More Decks by Kevin Suttle

Other Decks in Programming

Transcript

  1. SO META Meta-programming for the Web

  2. HELLO Here’s a little about me. I write for: I

    speak at: I am a: + + +
  3. @ME I’m also on the web. Github: Dribbble: Quora: Twitter:

    } kevinSuttle kevinsuttle.com New blog:
  4. I’ve of cially part of Adobe history.

  5. T.O.C. What we’ll cover in this presentation. 1. The past

    and current states of web development 2. What we’re missing, and how we can nd it 3. Why Ruby isn’t a curse word and why Terminal will not eat your face off
  6. 2006 Our world, just 5 years ago 1. The “Bird”

    Flu 2. Big Momma's House 2 grossed $27,736,056 in its opening weekend ranking number one. 3. Goo Goo Dolls celebrated 20 years in the industry THINGS WERE GRIM
  7. 2006 Building the web, just 5 years ago 1. XHTML

    1.0 2. CSS 2.1 3. DHTML and AJAX were the Bieber Fever of the web development world 4. jQuery was introduced 5. Chicken wings were still the rst thing you thought of when someone used the word “app”
  8. 2011 The web of today 1. HMTL5 (Weee!) 2. CSS3

    (See above) 3. jQuery Mobile 4. Though still avian-themed, the word “app” now means something totally different. 5. The emergence of the “One Web” movement
  9. WHY DO I CARE? I hate things that suck. I’ve

    never understood why things continue to suck with the advances of science and technology. My formula for Tweets: “It’s $YEAR, why does $PRODUCT_OR_SERVICE still do $SOMETHING_STUPID_AND_AVOIDABLE?”
  10. SUCKY THINGS Why are we OK with this stuff? 1.

    Remote controls 2. Fondue, bottled water and other scams 3. Car dash displays still being in alarm clock fonts
  11. I WANT BETTER Let’s take things into our own hands.

  12. WEB DESIGN It’s been evolving by adding language and browser

    features. Ones we needed. Semantic elements @Font-face support of custom fonts ARIA roles Media queries Local storage All VERY GOOD
  13. IT’S NOT ENOUGH We need more than features. We need

    the languages to work for us.
  14. HISTORICAL FLOW Oh, this old song and dance. Idea Wireframes

    Mockups Browser When does the client see a site’s behavior? How long do large client changes take?
  15. GET RAPID Enter “rapid prototyping” Idea “Clickable” Prototype Browser Client

    can see what the design feels like in it’s intended medium.
  16. PROBLEM SOLVED Maybe. Demo time: Axure RP

  17. WHAT’S MISSING? As it turns out, a lot. Reusable code

    Multi-screen behavior True browser rendering differences It’s a prototype of a prototype, though delity is up to you depending on where you are in the process.
  18. BOOTSTRAP Twitter gives back. “Bootstrap is a toolkit from Twitter

    designed to kickstart development of webapps and sites.”
  19. WHAT’S MISSING? Looking good, but not quite there. Pros Arguably

    reusable code Browser rendering differences are displayed Cons No multi-screen, responsive behavior Not automated It’s someone else’s code
  20. FOUNDATION Responsive + bootstrapping? Awesome! “An easy to use, powerful,

    and exible framework for building prototypes and production code on any kind of device. Start here, build everywhere.”
  21. WHAT’S MISSING? SO close! Pros Arguably reusable code Browser rendering

    differences are displayed Cons How do you change major parts of code? Not automated Again, it’s someone else’s code
  22. ROLL YOUR OWN Going meta Pros Your code Big changes

    are easy to make The code works for you Cons Slight learning curve (is this really so bad)? You might have to use *GASP* Terminal (again, not so bad.
  23. WHY META? More like, ‘Why not?’ Really, think about HTML5,

    CSS3, and JS. How much work do these languages do for you? Let’s look at the MVC web stack and see where each area can bene t from meta-programming.
  24. MARKUP

  25. SMARTER MARKUP Form can now follow function. Markup is easily

    readable, maintainable, updateable, and dynamically generated for each app’s needs. It puts you in control.
  26. ERB Embedded Ruby in HTML “Using ERB, actual Ruby*code can

    be added to any plain text document for the purposes of generating document information details and/or ow control.”
  27. ERB Embedded Ruby in HTML <%  Ruby  code  -­‐-­‐  inline

     with  output  %> <%=  Ruby  expression  -­‐-­‐  replace  with  result  %> <%#  comment  -­‐-­‐  ignored  -­‐-­‐  useful  in  testing  %> %  a  line  of  Ruby  code  -­‐-­‐  treated  as  <%  line  %>  (optional  -­‐-­‐  see  ERB.new) %%  replaced  with  %  if  first  thing  on  a  line  and  %  processing  is  used <%%  or  %%>  -­‐-­‐  replace  with  <%  or  %>  respectively Basic usage Advanced usage
  28. ERB Embedded Ruby in HTML Demo: A WIP Rails app

  29. HAML Markup haiku “Haml is the next step in generating

    views in your application. Haml is a refreshing take that is meant to free us from the sh*tty templating languages we have gotten used to.” http://haml-lang.com
  30. HAML “Haml is based on one primary principle. Markup should

    be beautiful. ... If you sit down and try using HAML, you will learn it within 20 minutes.” Markup haiku
  31. HAML Demo: Vanilla Markup haiku

  32. WHICH TO USE? HAML allows you to write beautiful, yet

    minimal markup, while retaining semantics, dynamism, and productivity. “The beauty makes you faster.” *COUGH*HAML*COUGH*
  33. HAML Installation and usage. Simple. haml  index.html.haml  index.html Usage gem

     install  haml Installation
  34. JAVASCRIPT

  35. WTFJS? For me, coming to JS from ActionScript is like

    going from... OK, I can’t think of a witty analogy, but trust me, it’s a step backward in terms of Clean Code. Seriously, you’re making Flash look good.
  36. ONLY THE GOOD Sorry. I had to.

  37. COFFEE ANYONE? CoffeeScript is a new way to look at

    writing and compiling JavaScript, focusing on terseness, and expressed, returned values. It’s easier to show than tell. [Insert joke about syntactic sugar]
  38. COFFEESCRIPT number  =  -­‐42  if  opposite Examples if  (opposite)  number

     =  -­‐42; CoffeeScript Plain JavaScript
  39. COFFEESCRIPT square  =  (x)  -­‐>  x  *  x Examples square

     =  function(x)  {    return  x  *  x; }; CoffeeScript Plain JavaScript
  40. COFFEESCRIPT math  =    root:      Math.sqrt    square:

     square    cube:      (x)  -­‐>  x  *  square  x Examples math  =  {    root:  Math.sqrt,    square:  square,    cube:  function(x)  {        return  x  *  square(x);    } }; CoffeeScript Plain JavaScript
  41. COFFEESCRIPT alert  "I  knew  it!"  if  elvis? Examples if  (typeof

     elvis  !==  "undefined"  &&  elvis  !==  null)   alert("I  knew  it!"); CoffeeScript Plain JavaScript
  42. A FRESH CUP Getting tired of the coffee jokes yet?

    CoffeeScript is JavaScript, which means you can write jQuery in CoffeeScript too. CoffeeScript’s compiler itself is written in CoffeeScript (Yo DAWG). Everything in CoffeeScript returns an expression.
  43. USAGE Command Line Flags coffee  -­‐-­‐compile  -­‐-­‐output  lib/  src/ coffee

     -­‐-­‐watch  -­‐-­‐compile  scripts.coffee coffee  -­‐-­‐lint  scripts.coffee coffee  -­‐o  lib/  -­‐cw  src/   Usage npm  install  -­‐g  coffee-­‐script sudo  bin/cake  install Installation
  44. MORE INFO Web resources for CoffeeScript Etc. http://jashkenas.github.com/coffee-­‐script Docs +

    intro + sample code http://arcturo.github.com/library/coffeescript/index.html http://bodil.github.com/coffeescript/ http://speakerdeck.com/u/sstephenson/p/coffeescript-­‐is-­‐beautiful-­‐i-­‐never-­‐want-­‐ to-­‐write-­‐plain-­‐javascript-­‐again
  45. WHAT ABOUT CSS? Enter SASS and Compass “Sass makes CSS

    fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins,selector inheritance, and more.” http://sass-lang.com
  46. SASS USAGE Just a couple lines in Terminal gem  install

     sass Installation sass  -­‐-­‐watch  style.scss:style.css sass  -­‐-­‐watch  stylesheets/sass:stylesheets/compiled Compilation
  47. CHOICE OF SYNTAX Original SASS, or the newer SCSS SASS

    is whitespace dependent, and is devoid of { and ; SCSS is a superset of CSS3, allowing plain CSS3 to be inserted interchangeably.
  48. SASS OR SCSS Original SASS, or the newer SCSS SCSS

    $blue:  #3bbfce $margin:  16px .content-­‐navigation    border-­‐color:  $blue    color:  darken($blue,  9%) .border    padding:  $margin  /  2    margin:  $margin  /  2    border-­‐color:  $blue SASS $blue:  #3bbfce; $margin:  16px; .content-­‐navigation  {    border-­‐color:  $blue;    color:        darken($blue,  9%); } .border  {    padding:  $margin  /  2;    margin:  $margin  /  2;    border-­‐color:  $blue; }
  49. CSS VARS It’s about frickin’ time. Generated CSS $blue:  #3bbfce

    h1   color:  $blue SASS h1  {  color:  #3bbfce  } =>
  50. CSS MATH Evaluate on the y Generated CSS .border  

       padding:  $margin  /  2;    margin:  $margin  /  2;    border-­‐color:  $blue; SASS .border  {    padding:  8px;    margin:  8px;  } =>
  51. NESTING Making CSS readable Generated CSS table.hl    margin:  2em

     0    td.ln        text-­‐align:  right SASS table.hl  {    margin:  2em  0; } table.hl  td.ln  {    text-­‐align:  right; } =>
  52. SHORTHAND Combining inferred properties Generated CSS li    font:  

         family:  serif        weight:  bold        size:  1.2em SASS li  {    font-­‐family:  serif;    font-­‐weight:  bold;    font-­‐size:  1.2em; } = >
  53. INHERITANCE Furthering the selector cascade Generated CSS .error    border:

     1px  #f00    background:  #fdd .error.intrusion    font-­‐size:  1.3em    font-­‐weight:  bold .badError    @extend  .error    border-­‐width:  3px SASS .error,  .badError  {    border:  1px  #f00;    background:  #fdd; } .error.intrusion, .badError.intrusion  {    font-­‐size:  1.3em;    font-­‐weight:  bold; } .badError  {    border-­‐width:  3px; } =>
  54. COLOR FUNCTIONS Like CSS blend modes $link-­‐color:  lighten(#165b94,  3)  !default;

    $link-­‐color-­‐hover:  adjust-­‐color($link-­‐color,  $lightness:  10,  $saturation:  25)  ! default; $link-­‐color-­‐visited:  adjust-­‐color($link-­‐color,  $hue:  80,  $lightness:  -­‐4)  ! default; $link-­‐color-­‐active:  adjust-­‐color($link-­‐color-­‐hover,  $lightness:  -­‐15)  !default;
  55. ENTER COMPASS Super-charged SASS. Very meta. Compass is a set

    of utils for working with SASS that speed up development even further. http://compass-style.org/
  56. THE KEY Compass makes rolling your own framework a reality.

    Compass modularizes your SASS code even further, allowing you to make sweeping changes in a very short amount of time.
  57. COMPASS USAGE Let compass take control gem  install  compass Installation

    compass  create  /path/to/project cd  /path/to/project compass  watch Creation and watching
  58. FEATURES Sets of reusable code CSS3: cross-browser mixins with vendor

    pre xes pre-added Typography: Common font patterns, such as lists, links and vertical rhythm Resets: Browser resets for zeroing out style sheets Layout: Uses common layout patterns like grids and sticky footers Imports @import  "compass/typography" Usage
  59. COMMONALITIES What do HAML, ERB, SASS, and Compass have in

    common? Minimal code (D.R.Y.) Whitespace dependent Formatted, compiled, and error-checked The elegance, power, and simplicity Ruby
  60. RUBY IS FRIENDLY So is Terminal Ruby and Rails are

    an absolute pleasure to code in, and are simply my favorite languages. Period. And if you can understand complex CSS oat algorithms, then the Terminal is a breeze. TryRuby.org RailsCasts + tons of free resources
  61. THE END We now return you to regularly scheduled programming.

    Thanks!