< KILLING THE ANGLE BRACKET />       John Newman - April 11, 2013
I miss this meme.                               Yo Dawg,I heard you like markup so I preprocessed your meta-markup into ma...
A QUICK HISTORY OF <HTML>
CERNThis is pretty much how it happened.
Tim Berners-Lee•   1980 - Created a document    sharing system for CERN    called ENQUIRE (precursor to    WWW)•   1989 - ...
MOSAIC: THE INSPIRATION           Tags           Many of today’s tag names are based on           IBM’s Generalized Markup...
What Did SGML Look Like?1    <!DOCTYPE	  SGMLguid>2    <SET	  TAG=H1	  ITEM=BODY	  VALUE=TOP>3    <SET	  TAG=P	  ITEM=SK	 ...
But What Did GML Look Like?1    :h1.Chapter	  1:	  Introduction2    :p.GML	  supported	  hierarchical	  containers,	  such...
And, Of Course, Today We Have...1    <!DOCTYPE	  html>2    <html>3    	  	  	  	  <head>4    	  	  	  	  	  	  	  	  <meta...
HTML Bothers Us Because:•   Inconsistencies based on features we don’t need (for example,    link is self-closing but scri...
SO WHAT CAN WE DO ABOUT IT?        h2.sans-­‐font	  Use	  HTML	  Pre-­‐processing<h2	  class="sans-­‐font">Use	  HTML	  Pr...
THE COMMAND LINE
CAVEAT              This is not necessarily the tool for every job.•   Lots of pages/posts•   Dynamic values (such as in R...
+                                             +                   MARKDOWN                    http://daringfireball.net/  ...
Here’s How It Works1. Design your layouts with slim/haml.  • Created as alternatives to .erb which dynamically    generate...
Here’s How It Works Markdown               Slim / Haml
FOR STRUCTURE                   VS.(Both of these are sub-optimal for content.)
1    !!!	  52    %html3    	  	  %head4    	  	  	  	  %meta{:charset	  =>	  "utf-­‐8"}5    	  	  	  	  %title	  My	  Webs...
•   No angle brackets, tags identified by percent sign•   Inline Ruby follows (-), inserting dynamic values follows (=)•  ...
1    doctype	  html2    html3    	  	  head4    	  	  	  	  meta	  charset="utf-­‐8"5    	  	  	  	  title	  My	  Website6...
•   No angle brackets, tag are assumed to begin lines unless otherwise specified•   Inline Ruby follows (-), inserting dyn...
Advantages To Each                               Wait a tick...•   Tags are clearly marked    •   Markup is smaller•   Att...
That looks suspiciously like...
At least clone the lines out all the way, come on!
FOR CONTENT MARKDOWN
1    Largest	  Heading2    ===============34    Floating	  content	  like	  this	  automatically	  ends	  up	  in	  a	  pa...
•   Designed for large portions of content not in need of heavy tag usage•   It’s a “writing format” not a “publishing for...
PUTTING IT ALL TOGETHER
Installation INSTALL	  >	  gem	  install	  haml INSTALL	  >	  gem	  install	  slimMarkdown is a specification so there are...
Usage - Manual  >$	  haml	  [options]	  [INPUT]	  [OUTPUT]  >$	  slimrb	  [options] Depends on your gem/module
Solutions•   If you like Rails, you’re golden.•   If you MUST use a SQL-based CMS, lots of plugins are available.    For e...
DID YOU SAY, “CSS PRE-PROCESSING” ??
“CSS Pre-Processors Are Not Necessary”               PIZZASMART PHONES                   SMOOCHES
THE CONTENDERS$myColor	  :	  rgb(180,	  41,	  71);                          @myColor	  :	  rgb(180,	  41,	  71);          ...
How Do I Choose?                                                                                      MEH.•   Runs on Ruby...
What Can I Do With Sass?                  Scss.                         Clarendon   (for css compatibility. widely preferr...
BENEFIT 1: Nesting//	  scss                                                     /*	  css	  */#content	  {                 ...
BENEFIT 2: Variables//	  scss                                             /*	  css	  */$opaque-­‐red	  :	  rgba(160,	  0,	...
BENEFIT 3: Extensible Classes //	  scss                                                /*	  css	  *///	  COMPILED	  OUTPUT...
BENEFIT 4: Mixin Functions//	  scss                                                                 /*	  css	  */@mixin	  ...
BENEFIT 5: Conditions                                            BENEFIT 6: Loops //	  $h	  =	  horizontal	  location     ...
You want me to learn Slim, Markdown, AND Sass?
AND, OF COURSE, THERE ARE          TOOLS
• Supports everything in the universe• We’re not going to get into it.
Static Site Generators  Ruby    Ace, Awestruct, Bonsai, Deplot, Fairytale, Frank, Hobix, Jekyll, Korma, Machined, Magneto,...
MIDDLEMAN                 NANOC                JEKYLLExample: cedexis.com   Example: dadt.com/        Example:            ...
Basho/Riak Docs          •   Built on Eric Redmond’s hulked out version              of Middleman          •   Supports mu...
Where you put stuff.
SCSS goes here.                  Markdown goes here in our case.              Slim goes here.
WorkflowDON’T	  FORGET	  BUNDLER	  	  >	  	  	  gem	  install	  bundlerINSTALL	  	  	  	  >	  gem	  install	  middlemanINI...
Thank You!    John Newman  Twitter: @jnewmanux    Github: jgnewmanEmail: jnewman@basho.com
Upcoming SlideShare
Loading in …5
×

Killing the Angle Bracket

1,999 views

Published on

Sooner or later we all have to work with HTML, despite its verbosity. Those of us who claim to love HTML may just be victims of Stockholm Syndrome, both praising yet secretly loathing it.

Basho designer John Newman is making the trek from the swamps of Florida to show us the way. In the modern world of markup preprocessors, these alternative syntaxes allow you to write simpler, cleaner, more concise code in a shorter amount of time. Certain techniques can even allow your team members who may be less-tech-savvy to contribute content directly without forcing you to wire up a WYSIWYG style CMS.

This talk explores great alternatives to plain HTML and CSS, and covers how Basho put these tools together to facilitate a painless, team-oriented approach to building sites and web apps.

Published in: Technology, Design
  • Be the first to comment

Killing the Angle Bracket

  1. 1. < KILLING THE ANGLE BRACKET /> John Newman - April 11, 2013
  2. 2. I miss this meme. Yo Dawg,I heard you like markup so I preprocessed your meta-markup into markup so you can markup while you markup.
  3. 3. A QUICK HISTORY OF <HTML>
  4. 4. CERNThis is pretty much how it happened.
  5. 5. Tim Berners-Lee• 1980 - Created a document sharing system for CERN called ENQUIRE (precursor to WWW)• 1989 - Proposed an internet-based hypertext system• 1990 - Specified HTML, wrote a browser and server software
  6. 6. MOSAIC: THE INSPIRATION Tags Many of today’s tag names are based on IBM’s Generalized Markup Language developed in the 1960s. For example: h1, p, ol, li Syntax HTML itself descends from SGML (particularly CERN’s version: SGMLguid) that added angle brackets and attribute=value syntax to GML.
  7. 7. What Did SGML Look Like?1 <!DOCTYPE  SGMLguid>2 <SET  TAG=H1  ITEM=BODY  VALUE=TOP>3 <SET  TAG=P  ITEM=SK  VALUE=0>4 <SET  TAG=UL  ITEM=SK  VALUE=0>56 <TITLE  STITLE="RPC  User  Manual">7 <TITLE>RPC  User  Manual89 <AUTHOR>T.J.  Berners&hyphen.Lee      CERN  DD/OC1011 <DATE>Version  3.0.0,  Last  Revised  April  199012 <COPYRIGHT>CERN  1986,  87,  88,  89,  901314 Now  includes:  Use  of  the  internet  daemon,15 Use  of  the  WAY  name  server.161718 www.w3.org/History/1992/nfs_dxcern_mirror/rpc/doc/User/rpcuser.sgml
  8. 8. But What Did GML Look Like?1 :h1.Chapter  1:  Introduction2 :p.GML  supported  hierarchical  containers,  such  as...34 :ol5    :li.Ordered  lists  (like  this  one),6    :li.Unordered  lists,  and7    :li.Definition  lists8 :eol.910 as  well  as  simple  structures.1112 :p.Markup  minimization  (later  generalized  and  formalized  in  SGML),13 allowed  the  end-­‐tags  to  be  omitted  for  the  "h1"  and  "p"  elements.1415161718 “Minimization,” ha ha http://en.wikipedia.org/wiki/IBM_Generalized_Markup_Language
  9. 9. And, Of Course, Today We Have...1 <!DOCTYPE  html>2 <html>3        <head>4                <meta  charset="utf-­‐8">5                <title>My  Website</title>6                <link  type="text/css"  rel="stylesheet"  media="screen"  href="styles.css">7        </head>8        <body>9                <h1>Big  Heading</h1>10                <p  class="foo">11                        Lorem  ipsum  dolor  sit  amet  consecteteur  adipiscing12                        elit.  <a  href="http://www.example.com">My  link  goes  here.</a>13                </p> I don’t use syntax1415 highlighting because                <script  src="js/jQuery.js"></script>16 I’m not a child.                <script  src="js/app.js"></script>17        </body>18 </html> Doug Crockford - JavaScript: The Good Parts - JSLint
  10. 10. HTML Bothers Us Because:• Inconsistencies based on features we don’t need (for example, link is self-closing but script is not)• Annoying, useless steps. • <html> Duh! You just made me specify the doctype.• No indentation required (results in total chaos and anarchy)• Verbose syntax, meant to be “machine readable”
  11. 11. SO WHAT CAN WE DO ABOUT IT? h2.sans-­‐font  Use  HTML  Pre-­‐processing<h2  class="sans-­‐font">Use  HTML  Pre-­‐processing</h2> Use HTML Pre-Processing
  12. 12. THE COMMAND LINE
  13. 13. CAVEAT This is not necessarily the tool for every job.• Lots of pages/posts• Dynamic values (such as in Rails)• Many hands in the pot (some less tech-savvy)
  14. 14. + + MARKDOWN http://daringfireball.net/ projects/markdown/syntaxhttp://haml.info http://slim-lang.com
  15. 15. Here’s How It Works1. Design your layouts with slim/haml. • Created as alternatives to .erb which dynamically generates HTML (.erb is somewhat like .jsp / .php)2. Your team writes pages/posts with markdown. • Created for generating content to fit in a predefined layout3. Compile & deploy.
  16. 16. Here’s How It Works Markdown Slim / Haml
  17. 17. FOR STRUCTURE VS.(Both of these are sub-optimal for content.)
  18. 18. 1 !!!  52 %html3    %head4        %meta{:charset  =>  "utf-­‐8"}5        %title  My  Website6        %link{:type    =>  "text/css",7                    :rel      =>  "stylesheet",8                    :href    =>  "styles.css"}9    %body10        =  render  :partial  =>  "sidebar"1112        .content#main13            Lorem  ipsum  dolor  sit  amet  consecteteur  adipiscing  elit.14            %a{:href  =>  "http://www.example.com"}  My  link  goes  here.15            =  yield1617        %script{:src  =>  "js/jQuery.js"}18        %script{:src  =>  "js/app.js"}
  19. 19. • No angle brackets, tags identified by percent sign• Inline Ruby follows (-), inserting dynamic values follows (=)• Indentation-sensitive• Shortcut for doctype (produces “XHTML5”)• Divs can be extra-shortened to simply aThis doesn’t actually matter, right? I mean, you class/id wouldn’t ever be compiling LIVE would you?• Attributes done with Ruby hash (or the HTML way inside parens) • %tag{:attr  =>  "value"} • %tag(attr="value") Maybe. Who knows WTF happens in Rails?• Compiles roughly 300% slower than .erb • https://gist.github.com/luislavena/626215 • http://www.kuwata-lab.com/erubis/
  20. 20. 1 doctype  html2 html3    head4        meta  charset="utf-­‐8"5        title  My  Website6        link  type="text/css"  rel="stylesheet"  href="styles.css"7    body8        =  render  "sidebar"910        .content#main11            |  Lorem  ipsum  dolor  sit  amet  consecteteur  adipiscing  elit.12            a(href="http://www.example.com")  My  link  goes  here.13            =  yield1415        script  src="js/jQuery.js"16        script  src="js/app.js"1718
  21. 21. • No angle brackets, tag are assumed to begin lines unless otherwise specified• Inline Ruby follows (-), inserting dynamic values follows (=)• Indentation-sensitive• Doctype as a standard tag, produces what you tell it to• Divs can be extra-shortened to simply a class/id• Attributes done the HTML way and simply follow tags (use parens if before content) • tag  attr="value" • tag(attr="value")  Inner  content  here• Compiles roughly 33% FASTER than .erb • https://gist.github.com/luislavena/626215 • http://www.kuwata-lab.com/erubis/
  22. 22. Advantages To Each Wait a tick...• Tags are clearly marked • Markup is smaller• Attributes are always • Faster benchmarks (again, contained (consistent how much does this separation from content) matter?)• More syntactical choices • More readable
  23. 23. That looks suspiciously like...
  24. 24. At least clone the lines out all the way, come on!
  25. 25. FOR CONTENT MARKDOWN
  26. 26. 1 Largest  Heading2 ===============34 Floating  content  like  this  automatically  ends  up  in  a  paragraph  tag.56 Smaller  Heading7 -­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐89 You  can  create  a  [link](/somedir/somefile.html)  with  brackets  followed  by  parens  10 containing  the  url  and  an  ![image](/img/someimage.png)  by  doing  the  same  thing  11 but  putting  an  exclamation  point  in  the  front.    In  this  case,  the  text  in  the  12 brackets  will  be  alt  text.1314 Use  asterisks  for  **bold**  or  *italics*;  use  ticks  for  `inline(code)`.1516 ```17 Large  code  blocks  go  between  sets  of  three  ticks.18 ```
  27. 27. • Designed for large portions of content not in need of heavy tag usage• It’s a “writing format” not a “publishing format”• Extremely readable, incredibly easy for anyone to learn• IMO, once you get used to it, you’ll prefer it to a WYSIWYG because it’s FASTER.*• Intended* to help markup devs to make smarter, simpler styling choices.• A markdown page CAN contain HTML blocks.• An HTML block CAN NOT contain markdown (usually).• “&” symbols and “<“ symbols are automatically escaped when not inside HTML• Contains shortcuts for: • h1  -­‐  h6,  paragraphs,  blockquotes,  unordered  lists,  ordered  lists,  inline   NO SUPPORT FOR code,  code  blocks,  horizontal  rules,  links,  italics,  bold,  oblique,  images   TABLES! (╯°□°)╯︵ ┻━┻ * Controversial point.
  28. 28. PUTTING IT ALL TOGETHER
  29. 29. Installation INSTALL  >  gem  install  haml INSTALL  >  gem  install  slimMarkdown is a specification so there are lots of differentimplementations out there.
  30. 30. Usage - Manual >$  haml  [options]  [INPUT]  [OUTPUT] >$  slimrb  [options] Depends on your gem/module
  31. 31. Solutions• If you like Rails, you’re golden.• If you MUST use a SQL-based CMS, lots of plugins are available. For example, Haml and Markdown are available for Wordpress.• Static site generators (anyone can do it!) • Create “blog-aware” site skeletons in minutes using layouts and includes as you would in Rails • Examples: Jekyll, Middleman, Nanoc • Comes with CSS pre-processing as part of the package
  32. 32. DID YOU SAY, “CSS PRE-PROCESSING” ??
  33. 33. “CSS Pre-Processors Are Not Necessary” PIZZASMART PHONES SMOOCHES
  34. 34. THE CONTENDERS$myColor  :  rgb(180,  41,  71); @myColor  :  rgb(180,  41,  71); myColor  =  rbg(180,  41,  71)#myDiv  { #myDiv  { #myDiv    @extend  .sans-­‐font;    .sans-­‐font;    @extends  .sans-­‐font    @include  rounded();    .rounded();    rounded()    span  {    span  {    span        display          :  block;        display          :  block;        display  block        font-­‐weight  :  bold;        font-­‐weight  :  bold;        font-­‐weight  bold        color              :  $myColor;        color              :  @myColor;        color  myRed    }    }} }
  35. 35. How Do I Choose? MEH.• Runs on Ruby • Runs on Node.js • Runs on Node.js• 2 Available versions (use • Less efficient compiled code • Good compiled efficiency SCSS) than Sass or Stylus • Potentially much smaller• Extra functionality with • Heavy “@” usage, more syntax Compass likely to cause conflicts • Indentation sensitivity• SCSS is compatible with CSS • Compatible with CSS • Less-widely used but• Widely used • Widely used gaining popularity
  36. 36. What Can I Do With Sass? Scss. Clarendon (for css compatibility. widely preferred.)
  37. 37. BENEFIT 1: Nesting//  scss /*  css  */#content  { #content  {    background  :  black;    background  :  black;    color            :  white;    color            :  white;    a  { }        color  :  red;        &:hover  { #content  a  {            text-­‐decoration  :  underline;    color  :  red;        } }    }} #content  a:hover  {    text-­‐decoration  :  underline; }
  38. 38. BENEFIT 2: Variables//  scss /*  css  */$opaque-­‐red  :  rgba(160,  0,  0,  .75); #content  a  {    color  :  rgba(160,  0,  0,  .75);#content  a  { }    color  :  $opaque-­‐red;} /* 1000  lines  later.../* */1000  lines  later...*/ #sidebar  a  {    color  :  ...  crap,  what  was  it?#sidebar  a  { }    color  :  $opaque-­‐red;} scroll... scroll... scroll...
  39. 39. BENEFIT 3: Extensible Classes //  scss /*  css  *///  COMPILED  OUTPUT .special-­‐text  { #content  p  {.special-­‐text,  #content  p,  #sidebar  p  {    font-­‐family  :  "lato",  sans-­‐serif;    font-­‐family  :  "lato",  sans-­‐serif;    font-­‐family  :  "lato",  sans-­‐serif;    font-­‐size      :  90%;    font-­‐size      :  90%;    font-­‐size      :  90%;    font-­‐weight  :  normal;    font-­‐weight  :  normal;    font-­‐weight  :  normal;    color              :  #ffffff;    color              :  #ffffff;    color              :  #ffffff; } }}#content  p  { #sidebar  p  {    @extend  .special-­‐text;    font-­‐family  :  "lato",  sans-­‐serif;}    font-­‐size      :  90%;    font-­‐weight  :  normal;#sidebar  p  {    color              :  #ffffff;    @extend  .special-­‐text; }}
  40. 40. BENEFIT 4: Mixin Functions//  scss /*  css  */@mixin  rounded($radius:  4px)  { #content  {    -­‐webkit-­‐border-­‐radius  :  $radius;    -­‐webkit-­‐border-­‐radius  :  25px;          -­‐moz-­‐border-­‐radius  :  $radius;          -­‐moz-­‐border-­‐radius  :  25px;                    border-­‐radius  :  $radius;                    border-­‐radius  :  25px;} }#content  { #content  #inner-­‐content  {    @include  rounded(25px);  //  25px  radius    -­‐webkit-­‐border-­‐radius  :  4px;          -­‐moz-­‐border-­‐radius  :  4px;    #inner-­‐content  {                    border-­‐radius  :  4px;        @include  rounded();      //  4px  radius }    }}
  41. 41. BENEFIT 5: Conditions BENEFIT 6: Loops //  $h  =  horizontal  location //  create  some  lists //  $v  =  vertical  location $brands  :  a,  b,  c; //  $y  =  y  axis  position  such  as  "top" $val        :  blue,  red,  yellow; @mixin  absLeft($h:  0,  $v:  0,  $y:  top)  { //  do  a  for  loop!    position  :  absolute; @for  $i  from  1  through  length($brands)  {    left          :  $h;    .#{nth($brands,  $i)}-­‐color  {    @if  $y  ==  "top"  {        color  :  nth($val,  $i);        top  :  $v;    }    }  @else  { }        bottom  :  $v;    } /*  This  produces... }  *  *  .a-­‐color  {  color  :  blue  } #box  {  *  .b-­‐color  {  color  :  red  }    @include  absLeft(10px,  10px,  bottom);  *  .c-­‐color  {  color  :  yellow  } }  */
  42. 42. You want me to learn Slim, Markdown, AND Sass?
  43. 43. AND, OF COURSE, THERE ARE TOOLS
  44. 44. • Supports everything in the universe• We’re not going to get into it.
  45. 45. Static Site Generators Ruby Ace, Awestruct, Bonsai, Deplot, Fairytale, Frank, Hobix, Jekyll, Korma, Machined, Magneto, Middleman, Nanoc, Pith, RakeWeb, Rassmalog, Rog, Rote, RubyFrontier, Stasis, StaticMatic, StaticMatic2, StaticWeb, Webby, Webgen, Yurt CMS, ZenWebPython Acrylamid, Blogofile, Cactus, Chisel, Composer, Cyrax, Hyde, Jinjet, Markbox, Markdoc, Mynt, Nikola, Pelican, Pilcrow, Poole, Socrates, Speechhub, Staticjinja, Tahchee, WokNode.js Blacksmith, Petrify, Punch, Quill, Romulus, Wintersmith, Yassg PHP Phrozn, PieCrust, Sculpin, Second CrackOthers Coleslaw (Lisp), FMPP (Java), Fugitive (Shell), Gostatic (Go), Graze (C#), Hakyll (Haskell), Hammer (lang- agnostic), Hastie (Go), JKL (Go), Nitrogen (Erlang), Pagegen (Bash), Rizzo (Groovy), Ruhoh (lang-agnostic), Ultra Simple Site Maker (Ocaml), Website Meta Language (C & Perl), YST (Haskell)
  46. 46. MIDDLEMAN NANOC JEKYLLExample: cedexis.com Example: dadt.com/ Example: uglybetty jgnewman.github.io/ spright/
  47. 47. Basho/Riak Docs • Built on Eric Redmond’s hulked out version of Middleman • Supports multiple languages • Responsive markup • Is touched by MANY hands docs.basho.com
  48. 48. Where you put stuff.
  49. 49. SCSS goes here. Markdown goes here in our case. Slim goes here.
  50. 50. WorkflowDON’T  FORGET  BUNDLER    >      gem  install  bundlerINSTALL        >  gem  install  middlemanINITIALIZE  >  middleman  init  my_projectDEVELOP        >  bundle  exec  middleman  serverEXPORT          >  bundle  exec  middleman  build
  51. 51. Thank You! John Newman Twitter: @jnewmanux Github: jgnewmanEmail: jnewman@basho.com

×