killing the angle bracket
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/1.jpg)
< KILLING THE ANGLE BRACKET />John Newman - April 11, 2013
![Page 2: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/2.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/3.jpg)
A QUICK HISTORY OF <HTML>
![Page 4: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/4.jpg)
CERN
This is pretty much how it happened.
![Page 5: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/5.jpg)
• 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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/6.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/7.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/8.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/9.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/10.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/11.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/12.jpg)
THE COMMAND LINE
![Page 13: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/13.jpg)
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 14: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/14.jpg)
MARKDOWN
http://slim-lang.com
http://haml.info
http://daringfireball.net/projects/markdown/syntax
+ +
![Page 15: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/15.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/16.jpg)
Here’s How It Works
Slim / Haml
Markdown
![Page 17: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/17.jpg)
FOR STRUCTURE
VS.
(Both of these are sub-optimal for content.)
![Page 18: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/18.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/19.jpg)
• 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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/20.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/21.jpg)
• 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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/22.jpg)
• 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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/23.jpg)
That looks suspiciously like...
![Page 24: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/24.jpg)
At least clone the lines out all the way, come on!
![Page 25: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/25.jpg)
FOR CONTENT
MARKDOWN
![Page 26: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/26.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/27.jpg)
• 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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/28.jpg)
PUTTING IT ALL TOGETHER
![Page 29: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/29.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/30.jpg)
Usage - Manual
>$ haml [options] [INPUT] [OUTPUT]
Depends on your gem/module
>$ slimrb [options]
![Page 31: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/31.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/32.jpg)
DID YOU SAY, “CSS PRE-PROCESSING” ??
![Page 33: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/33.jpg)
“CSS Pre-Processors Are Not Necessary”
SMART PHONES
PIZZA
SMOOCHES
![Page 34: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/34.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/35.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/36.jpg)
What Can I Do With Sass?
Scss.(for css compatibility. widely preferred.)
Clarendon
![Page 37: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/37.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/38.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/39.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/40.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/41.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/42.jpg)
You want me to learn Slim, Markdown, AND Sass?
![Page 43: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/43.jpg)
AND, OF COURSE, THERE ARE TOOLS
![Page 44: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/44.jpg)
• Supports everything in the universe• We’re not going to get into it.
![Page 45: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/45.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/46.jpg)
MIDDLEMAN NANOC JEKYLL
Example: cedexis.com Example: jgnewman.github.io/
spright/
Example: dadt.com/uglybetty
![Page 47: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/47.jpg)
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](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/48.jpg)
Where you put stuff.
![Page 49: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/49.jpg)
Slim goes here.
Markdown goes here in our case.SCSS goes here.
![Page 50: Killing the Angle Bracket](https://reader034.vdocuments.net/reader034/viewer/2022052600/557db45ad8b42a11428b4c8b/html5/thumbnails/50.jpg)
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