killing the angle bracket

51
< KILLING THE ANGLE BRACKET /> John Newman - April 11, 2013

Upload: jnewmanux

Post on 15-Jun-2015

1.495 views

Category:

Technology


2 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: Killing the Angle Bracket

< KILLING THE ANGLE BRACKET />John Newman - April 11, 2013

Page 2: Killing the Angle Bracket

Yo Dawg,I heard you like markup so I preprocessed your meta-markup into markup

so you can markup while you markup.

I miss this meme.

Page 3: Killing the Angle Bracket

A QUICK HISTORY OF <HTML>

Page 4: Killing the Angle Bracket

CERN

This is pretty much how it happened.

Page 5: Killing the Angle Bracket

• 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

Tim Berners-Lee

Page 6: Killing the Angle Bracket

HTML itself descends from SGML (particularly CERN’s version: SGMLguid) that added angle brackets and attribute=value syntax to GML.

Many of today’s tag names are based on IBM’s Generalized Markup Language developed in the 1960s.For example: h1, p, ol, li

MOSAIC: THE INSPIRATIONTags

Syntax

Page 7: Killing the Angle Bracket

123456789101112131415161718

What Did SGML Look Like?

<!DOCTYPE  SGMLguid><SET  TAG=H1  ITEM=BODY  VALUE=TOP><SET  TAG=P  ITEM=SK  VALUE=0><SET  TAG=UL  ITEM=SK  VALUE=0>

<TITLE  STITLE="RPC  User  Manual"><TITLE>RPC  User  Manual

<AUTHOR>T.J.  Berners&hyphen.Lee      CERN  DD/OC

<DATE>Version  3.0.0,  Last  Revised  April  1990<COPYRIGHT>CERN  1986,  87,  88,  89,  90

Now  includes:  Use  of  the  internet  daemon,Use  of  the  WAY  name  server.

www.w3.org/History/1992/nfs_dxcern_mirror/rpc/doc/User/rpcuser.sgml

Page 8: Killing the Angle Bracket

123456789101112131415161718

But What Did GML Look Like?

:h1.Chapter  1:  Introduction:p.GML  supported  hierarchical  containers,  such  as...

:ol    :li.Ordered  lists  (like  this  one),    :li.Unordered  lists,  and    :li.Definition  lists:eol.

as  well  as  simple  structures.

:p.Markup  minimization  (later  generalized  and  formalized  in  SGML),allowed  the  end-­‐tags  to  be  omitted  for  the  "h1"  and  "p"  elements.

http://en.wikipedia.org/wiki/IBM_Generalized_Markup_Language

“Minimization,” ha ha

Page 9: Killing the Angle Bracket

123456789101112131415161718

And, Of Course, Today We Have...

<!DOCTYPE  html><html>        <head>                <meta  charset="utf-­‐8">                <title>My  Website</title>                <link  type="text/css"  rel="stylesheet"  media="screen"  href="styles.css">        </head>        <body>                <h1>Big  Heading</h1>                <p  class="foo">                        Lorem  ipsum  dolor  sit  amet  consecteteur  adipiscing                        elit.  <a  href="http://www.example.com">My  link  goes  here.</a>                </p>

               <script  src="js/jQuery.js"></script>                <script  src="js/app.js"></script>        </body></html>

I don’t use syntaxhighlighting because

I’m not a child.

Doug Crockford- JavaScript: The Good Parts- JSLint

Page 10: Killing the Angle Bracket

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”

Page 11: Killing the Angle Bracket

SO WHAT CAN WE DO ABOUT IT?h2.sans-­‐font  Use  HTML  Pre-­‐processing

Use HTML Pre-Processing

<h2  class="sans-­‐font">Use  HTML  Pre-­‐processing</h2>

Page 12: Killing the Angle Bracket

THE COMMAND LINE

Page 13: Killing the Angle Bracket

CAVEAT

• Lots of pages/posts

• Dynamic values (such as in Rails)

• Many hands in the pot (some less tech-savvy)

This is not necessarily the tool for every job.

Page 15: Killing the Angle Bracket

Here’s How It Works

1. 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 layout

3. Compile & deploy.

Page 16: Killing the Angle Bracket

Here’s How It Works

Slim / Haml

Markdown

Page 17: Killing the Angle Bracket

FOR STRUCTURE

VS.

(Both of these are sub-optimal for content.)

Page 18: Killing the Angle Bracket

123456789101112131415161718

!!!  5%html    %head        %meta{:charset  =>  "utf-­‐8"}        %title  My  Website        %link{:type    =>  "text/css",                    :rel      =>  "stylesheet",                    :href    =>  "styles.css"}    %body        =  render  :partial  =>  "sidebar"

       .content#main            Lorem  ipsum  dolor  sit  amet  consecteteur  adipiscing  elit.            %a{:href  =>  "http://www.example.com"}  My  link  goes  here.            =  yield

       %script{:src  =>  "js/jQuery.js"}        %script{:src  =>  "js/app.js"}

Page 19: Killing the Angle Bracket

• 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 a class/id

• Attributes done with Ruby hash (or the HTML way inside parens)• %tag{:attr  =>  "value"}

• %tag(attr="value")

• Compiles roughly 300% slower than .erb

• https://gist.github.com/luislavena/626215

• http://www.kuwata-lab.com/erubis/

This doesn’t actually matter, right? I mean, you wouldn’t ever be compiling LIVE would you?

Maybe. Who knows WTF happens in Rails?

Page 20: Killing the Angle Bracket

123456789101112131415161718

doctype  htmlhtml    head        meta  charset="utf-­‐8"        title  My  Website        link  type="text/css"  rel="stylesheet"  href="styles.css"    body        =  render  "sidebar"

       .content#main            |  Lorem  ipsum  dolor  sit  amet  consecteteur  adipiscing  elit.            a(href="http://www.example.com")  My  link  goes  here.            =  yield

       script  src="js/jQuery.js"        script  src="js/app.js"

Page 21: Killing the Angle Bracket

• 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/

Page 22: Killing the Angle Bracket

• Tags are clearly marked

• Attributes are always contained (consistent separation from content)

• More syntactical choices

Advantages To Each

• Markup is smaller

• Faster benchmarks (again, how much does this matter?)

• More readable

Wait a tick...

Page 23: Killing the Angle Bracket

That looks suspiciously like...

Page 24: Killing the Angle Bracket

At least clone the lines out all the way, come on!

Page 25: Killing the Angle Bracket

FOR CONTENT

MARKDOWN

Page 26: Killing the Angle Bracket

123456789101112131415161718

Largest  Heading===============

Floating  content  like  this  automatically  ends  up  in  a  paragraph  tag.

Smaller  Heading-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐

You  can  create  a  [link](/somedir/somefile.html)  with  brackets  followed  by  parens  containing  the  url  and  an  ![image](/img/someimage.png)  by  doing  the  same  thing  but  putting  an  exclamation  point  in  the  front.    In  this  case,  the  text  in  the  brackets  will  be  alt  text.

Use  asterisks  for  **bold**  or  *italics*;  use  ticks  for  `inline(code)`.

```Large  code  blocks  go  between  sets  of  three  ticks.```

Page 27: Killing the Angle Bracket

• 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  code,  code  blocks,  horizontal  rules,  links,  italics,  bold,  oblique,  images  

* Controversial point.(╯°□°)╯( ┻━┻

NO SUPPORT FORTABLES!

Page 28: Killing the Angle Bracket

PUTTING IT ALL TOGETHER

Page 29: Killing the Angle Bracket

Installation

INSTALL  >  gem  install  slim

INSTALL  >  gem  install  haml

Markdown is a specification so there are lots of different implementations out there.

Page 30: Killing the Angle Bracket

Usage - Manual

>$  haml  [options]  [INPUT]  [OUTPUT]

Depends on your gem/module

>$  slimrb  [options]

Page 31: Killing the Angle Bracket

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

Page 32: Killing the Angle Bracket

DID YOU SAY, “CSS PRE-PROCESSING” ??

Page 33: Killing the Angle Bracket

“CSS Pre-Processors Are Not Necessary”

SMART PHONES

PIZZA

SMOOCHES

Page 34: Killing the Angle Bracket

THE CONTENDERS

$myColor  :  rgb(180,  41,  71);

#myDiv  {    @extend  .sans-­‐font;    @include  rounded();

   span  {        display          :  block;        font-­‐weight  :  bold;        color              :  $myColor;    }}

@myColor  :  rgb(180,  41,  71);

#myDiv  {    .sans-­‐font;    .rounded();

   span  {        display          :  block;        font-­‐weight  :  bold;        color              :  @myColor;    }}

myColor  =  rbg(180,  41,  71)

#myDiv    @extends  .sans-­‐font    rounded()

   span        display  block        font-­‐weight  bold        color  myRed

Page 35: Killing the Angle Bracket

How Do I Choose?

• Runs on Ruby

• 2 Available versions (use SCSS)

• Extra functionality with Compass

• SCSS is compatible with CSS

• Widely used

• Runs on Node.js

• Less efficient compiled code than Sass or Stylus

• Heavy “@” usage, more likely to cause conflicts

• Compatible with CSS

• Widely used

• Runs on Node.js

• Good compiled efficiency

• Potentially much smaller syntax

• Indentation sensitivity

• Less-widely used but gaining popularity

MEH.

Page 36: Killing the Angle Bracket

What Can I Do With Sass?

Scss.(for css compatibility. widely preferred.)

Clarendon

Page 37: Killing the Angle Bracket

BENEFIT 1: Nesting//  scss

#content  {    background  :  black;    color            :  white;    a  {        color  :  red;        &:hover  {            text-­‐decoration  :  underline;        }    }}

/*  css  */

#content  {    background  :  black;    color            :  white;}

#content  a  {    color  :  red;}

#content  a:hover  {    text-­‐decoration  :  underline;}

Page 38: Killing the Angle Bracket

BENEFIT 2: Variables//  scss

$opaque-­‐red  :  rgba(160,  0,  0,  .75);

#content  a  {    color  :  $opaque-­‐red;}

/*1000  lines  later...*/

#sidebar  a  {    color  :  $opaque-­‐red;}

/*  css  */

#content  a  {    color  :  rgba(160,  0,  0,  .75);}

/*1000  lines  later...*/

#sidebar  a  {    color  :  ...  crap,  what  was  it?}

scroll... scroll... scroll...

Page 39: Killing the Angle Bracket

BENEFIT 3: Extensible Classes//  scss

.special-­‐text  {    font-­‐family  :  "lato",  sans-­‐serif;    font-­‐size      :  90%;    font-­‐weight  :  normal;    color              :  #ffffff;}

#content  p  {    @extend  .special-­‐text;}

#sidebar  p  {    @extend  .special-­‐text;}

/*  css  */

#content  p  {    font-­‐family  :  "lato",  sans-­‐serif;    font-­‐size      :  90%;    font-­‐weight  :  normal;    color              :  #ffffff;}

#sidebar  p  {    font-­‐family  :  "lato",  sans-­‐serif;    font-­‐size      :  90%;    font-­‐weight  :  normal;    color              :  #ffffff;}

//  COMPILED  OUTPUT

.special-­‐text,  #content  p,  #sidebar  p  {    font-­‐family  :  "lato",  sans-­‐serif;    font-­‐size      :  90%;    font-­‐weight  :  normal;    color              :  #ffffff;}

Page 40: Killing the Angle Bracket

BENEFIT 4: Mixin Functions//  scss

@mixin  rounded($radius:  4px)  {    -­‐webkit-­‐border-­‐radius  :  $radius;          -­‐moz-­‐border-­‐radius  :  $radius;                    border-­‐radius  :  $radius;}

#content  {    @include  rounded(25px);  //  25px  radius

   #inner-­‐content  {        @include  rounded();      //  4px  radius    }}

/*  css  */

#content  {    -­‐webkit-­‐border-­‐radius  :  25px;          -­‐moz-­‐border-­‐radius  :  25px;                    border-­‐radius  :  25px;}

#content  #inner-­‐content  {    -­‐webkit-­‐border-­‐radius  :  4px;          -­‐moz-­‐border-­‐radius  :  4px;                    border-­‐radius  :  4px;}

Page 41: Killing the Angle Bracket

BENEFIT 5: Conditions

//  $h  =  horizontal  location//  $v  =  vertical  location//  $y  =  y  axis  position  such  as  "top"

@mixin  absLeft($h:  0,  $v:  0,  $y:  top)  {    position  :  absolute;    left          :  $h;    @if  $y  ==  "top"  {        top  :  $v;    }  @else  {        bottom  :  $v;    }}

#box  {    @include  absLeft(10px,  10px,  bottom);}

//  create  some  lists$brands  :  a,  b,  c;$val        :  blue,  red,  yellow;

//  do  a  for  loop!@for  $i  from  1  through  length($brands)  {    .#{nth($brands,  $i)}-­‐color  {        color  :  nth($val,  $i);    }}

/*  This  produces...  *  *  .a-­‐color  {  color  :  blue  }  *  .b-­‐color  {  color  :  red  }  *  .c-­‐color  {  color  :  yellow  }  */

BENEFIT 6: Loops

Page 42: Killing the Angle Bracket

You want me to learn Slim, Markdown, AND Sass?

Page 43: Killing the Angle Bracket

AND, OF COURSE, THERE ARE TOOLS

Page 44: Killing the Angle Bracket

• Supports everything in the universe• We’re not going to get into it.

Page 45: Killing the Angle Bracket

Static Site GeneratorsRuby

Python

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, ZenWeb

Acrylamid, Blogofile, Cactus, Chisel, Composer, Cyrax, Hyde, Jinjet, Markbox, Markdoc, Mynt, Nikola, Pelican, Pilcrow, Poole, Socrates, Speechhub, Staticjinja, Tahchee, Wok

Node.js Blacksmith, Petrify, Punch, Quill, Romulus, Wintersmith, Yassg

PHP Phrozn, PieCrust, Sculpin, Second Crack

Others 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)

Page 46: Killing the Angle Bracket

MIDDLEMAN NANOC JEKYLL

Example: cedexis.com Example: jgnewman.github.io/

spright/

Example: dadt.com/uglybetty

Page 47: Killing the Angle Bracket

Basho/Riak Docs

docs.basho.com

• Built on Eric Redmond’s hulked out version of Middleman

• Supports multiple languages

• Responsive markup

• Is touched by MANY hands

Page 48: Killing the Angle Bracket

Where you put stuff.

Page 49: Killing the Angle Bracket

Slim goes here.

Markdown goes here in our case.SCSS goes here.

Page 50: Killing the Angle Bracket

Workflow

INSTALL        >  gem  install  middleman

DON’T  FORGET  BUNDLER    >      gem  install  bundler

INITIALIZE  >  middleman  init  my_project

DEVELOP        >  bundle  exec  middleman  server

EXPORT          >  bundle  exec  middleman  build

Page 51: Killing the Angle Bracket

Thank You!

John Newman

Twitter: @jnewmanux

Github: jgnewman

Email: [email protected]