killing the angle bracket
Post on 15-Jun-2015
1.495 Views
Preview:
DESCRIPTION
TRANSCRIPT
< KILLING THE ANGLE BRACKET />John Newman - April 11, 2013
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.
A QUICK HISTORY OF <HTML>
CERN
This is pretty much how it happened.
• 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
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
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
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
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
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”
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>
THE COMMAND LINE
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.
MARKDOWN
http://slim-lang.com
http://haml.info
http://daringfireball.net/projects/markdown/syntax
+ +
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.
Here’s How It Works
Slim / Haml
Markdown
FOR STRUCTURE
VS.
(Both of these are sub-optimal for content.)
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"}
• 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?
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"
• 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/
• 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...
That looks suspiciously like...
At least clone the lines out all the way, come on!
FOR CONTENT
MARKDOWN
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  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.```
• 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!
PUTTING IT ALL TOGETHER
Installation
INSTALL > gem install slim
INSTALL > gem install haml
Markdown is a specification so there are lots of different implementations out there.
Usage - Manual
>$ haml [options] [INPUT] [OUTPUT]
Depends on your gem/module
>$ slimrb [options]
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
DID YOU SAY, “CSS PRE-PROCESSING” ??
“CSS Pre-Processors Are Not Necessary”
SMART PHONES
PIZZA
SMOOCHES
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
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.
What Can I Do With Sass?
Scss.(for css compatibility. widely preferred.)
Clarendon
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;}
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...
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;}
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;}
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
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 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)
MIDDLEMAN NANOC JEKYLL
Example: cedexis.com Example: jgnewman.github.io/
spright/
Example: dadt.com/uglybetty
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
Where you put stuff.
Slim goes here.
Markdown goes here in our case.SCSS goes here.
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
Thank You!
John Newman
Twitter: @jnewmanux
Github: jgnewman
Email: jnewman@basho.com
top related