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.
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. 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. 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
8. 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
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
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
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. 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
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)
15. 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.
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. 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
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. 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
26. 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
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 ```
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.
29. Installation
INSTALL
>
gem
install
haml
INSTALL
>
gem
install
slim
Markdown is a specification so there are lots of different
implementations out there.
30. Usage - Manual
>$
haml
[options]
[INPUT]
[OUTPUT]
>$
slimrb
[options]
Depends on your gem/module
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
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. What Can I Do With Sass?
Scss. Clarendon
(for css compatibility. widely preferred.)
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. 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...
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
