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.

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!