Killing the Angle Bracket

< 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 markup
so you can markup while you markup.

CERN

This is pretty much how it happened.

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

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.

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>
5
6 <TITLE
STITLE="RPC
User
Manual">
7 <TITLE>RPC
User
Manual
8
9 <AUTHOR>T.J.
Berners&hyphen.Lee

CERN
DD/OC
10
11 <DATE>Version
3.0.0,
Last
Revised
April
1990
12 <COPYRIGHT>CERN
1986,
87,
88,
89,
90
13
14 Now
includes:
Use
of
the
internet
daemon,
15 Use
of
the
WAY
name
server.
16
17
18

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

But What Did GML Look Like?
1 :h1.Chapter
1:
Introduction
2 :p.GML
supported
hierarchical
containers,
such
as...
3
4 :ol
5

:li.Ordered
lists
(like
this
one),
6

:li.Unordered
lists,
and
7

:li.Definition
lists
8 :eol.
9
10 as
well
as
simple
structures.
11
12 :p.Markup
minimization
(later
generalized
and
formalized
in
SGML),
13 allowed
the
end-‐tags
to
be
omitted
for
the
"h1"
and
"p"
elements.
14
15
16
17
18
“Minimization,” ha ha

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

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
adipiscing
12

elit.
<a
href="http://www.example.com">My
link
goes
here.</a>
13

</p>
I don’t use syntax
14
15 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

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

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

Use HTML Pre-Processing

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)

+ +

MARKDOWN
http://daringfireball.net/
projects/markdown/syntax

http://haml.info

http://slim-lang.com

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

Markdown

Slim / Haml

FOR STRUCTURE

VS.

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

1 !!!
5
2 %html
3

%head
4

%meta{:charset
=>
"utf-‐8"}
5

%title
My
Website
6

%link{:type

=>
"text/css",
7

:rel

=>
"stylesheet",
8

:href

=>
"styles.css"}
9

%body
10

=
render
:partial
=>
"sidebar"
11
12

.content#main
13

Lorem
ipsum
dolor
sit
amet
consecteteur
adipiscing
elit.
14

%a{:href
=>
"http://www.example.com"}
My
link
goes
here.
15

=
yield
16
17

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

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

1 doctype
html
2 html
3

head
4

meta
charset="utf-‐8"
5

title
My
Website
6

link
type="text/css"
rel="stylesheet"
href="styles.css"
7

body
8

=
render
"sidebar"
9
10

.content#main
11

|
Lorem
ipsum
dolor
sit
amet
consecteteur
adipiscing
elit.
12

a(href="http://www.example.com")
My
link
goes
here.
13

=
yield
14
15

script
src="js/jQuery.js"
16

script
src="js/app.js"
17
18

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

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

That looks suspiciously like...

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

1 Largest
Heading
2 ===============
3
4 Floating
content
like
this
automatically
ends
up
in
a
paragraph
tag.
5
6 Smaller
Heading
7 -‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐
8
9 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.
13
14 Use
asterisks
for
**bold**
or
*italics*;
use
ticks
for
`inline(code)`.
15
16 ```
17 Large
code
blocks
go
between
sets
of
three
ticks.
18 ```

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

Installation

INSTALL
>
gem
install
haml

INSTALL
>
gem
install
slim

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

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 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”

PIZZA

SMART PHONES SMOOCHES

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

}

}
} }

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

What Can I Do With Sass?

Scss. Clarendon
(for css compatibility. widely preferred.)

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;
}

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

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; }
}

BENEFIT 4: Mixin Functions
//
scss /*
css
*/

@mixin
rounded($radius:
4px)
{ #content
{

-‐webkit-‐border-‐radius
:
$radius;

:
25px;

-‐moz-‐border-‐radius
:
$radius;

:
25px;

border-‐radius
:
$radius;

border-‐radius
:
25px;
} }

#content
{ #content
#inner-‐content
{

@include
rounded(25px);
//
25px
radius

:
4px;

:
4px;

#inner-‐content
{

border-‐radius
:
4px;

@include
rounded();

//
4px
radius }

}
}

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
}
}
*/

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, Pith, RakeWeb, Rassmalog, Rog, Rote, RubyFrontier, Stasis, StaticMatic, StaticMatic2, StaticWeb,
Webby, Webgen, Yurt CMS, ZenWeb

Python 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: dadt.com/ Example:
uglybetty jgnewman.github.io/
spright/

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

SCSS goes here.
Markdown goes here in our case.

Slim goes here.

Workflow

DON’T
FORGET
BUNDLER

>

gem
install
bundler

INSTALL

>
gem
install
middleman

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

Killing the Angle Bracket

More Related Content

What's hot

Similar to Killing the Angle Bracket

Recently uploaded

Killing the Angle Bracket