Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML
preprocessors challenge
Vladimír Macháček
Macdom vs Haml vs Jade vs Slim
<!DOCTYPE html> 

<html>

<head>

<meta charset="utf-8"/>

<meta content="width=device-widt...
Macdom vs Haml
!5
html
head
utf-8
viewport width=device-width
favicon includes/favicon.ico
title HTML preprocessors challe...
Macdom vs Jade
!5
html
head
utf-8
viewport width=device-width
favicon includes/favicon.ico
title HTML preprocessors challe...
Macdom vs Slim
doctype html
html
head
meta charset="utf-8"
meta content="width=device-width" name="viewport"
link href="in...
Where to find them
• Macdom - https://github.com/Machy8/Macdom
• Slim - http://slim-lang.com/
• Jade - http://jade-lang.co...
Upcoming SlideShare
Loading in …5
×

Html preprocessors challenge

336 views

Published on

Comparison of the Macdom, Slim, Jade and Haml preprocessor on one example. How simple the way of writing html can be if you use one of them.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Html preprocessors challenge

  1. 1. HTML preprocessors challenge Vladimír Macháček
  2. 2. Macdom vs Haml vs Jade vs Slim <!DOCTYPE html> 
 <html>
 <head>
 <meta charset="utf-8"/>
 <meta content="width=device-width" name="viewport"/>
 <link rel="shortcut icon" href="includes/favicon.ico"/>
 <title>HTML preprocessors challenge!</title>
 </head>
 <body>
 <h1 id="title" class="titles main-title">Hello world</h1>
 <nav>
 <a target="blank" href="http://www.google.com" class="first-link">Link on - Google</a>
 <a target="blank" href="http://www.yahoo.com">Link on - Yahoo</a>
 <a target="blank" href="http://www.github.com">Link on - Github</a>
 </nav>
 <div id="wrapper">
 Some text <b>here</b>.
 </div>
 <script async="" type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
 </body>
 </html>
  3. 3. Macdom vs Haml !5 html head utf-8 viewport width=device-width favicon includes/favicon.ico title HTML preprocessors challenge! body h1 #title .titles .main-title Hello world nav @ a $http://www.[@].com $blank Link on - [google] .first-link Google [yahoo] Yahoo [github] Github div #wrapper Some text <b>here</b>. js-async //code.jquery.com/jquery-1.12.0.min.js !!! %html %head %meta{:charset => "utf-8"} %meta{:content => "width=device-width", :name => "viewport"} %link{:href => "includes/favicon.ico", :rel => "shortcut icon"} %title HTML preprocessors challenge! %body %h1#title.titles.main-title Hello world %nav %a.first-link{:href => "http://www.google.com", :target => "blank"} Link on - Google %a{:href => "http://www.yahoo.com", :target => "blank"} Link on - Yahoo %a{:href => "http://www.github.com", :target => "blank"} Link on - Github #wrapper Some text <b>here</b>. %script{:async => "", :src => "//code.jquery.com/jquery-1.12.0.min.js", :type => "text/javascript"}
  4. 4. Macdom vs Jade !5 html head utf-8 viewport width=device-width favicon includes/favicon.ico title HTML preprocessors challenge! body h1 #title .titles .main-title Hello world nav @ a $http://www.[@].com $blank Link on - [google] .first-link Google [yahoo] Yahoo [github] Github div #wrapper Some text <b>here</b>. js-async //code.jquery.com/jquery-1.12.0.min.js doctype html html head meta(charset='utf-8') meta(content='width=device-width', name='viewport') link(rel='shortcut icon', href='includes/favicon.ico') title HTML preprocessors challenge! body h1#title.titles.main-title Hello world nav a.first-link(target='blank', href='http://www.google.com') Link on - Google a(target='blank', href='http://www.yahoo.com') Link on - Yahoo a(target='blank', href='http://www.github.com') Link on - Github #wrapper Some text <b>here</b>. script(async='', type='text/javascript', src='//code.jquery.com/jquery-1.12.0.min.js')
  5. 5. Macdom vs Slim doctype html html head meta charset="utf-8" meta content="width=device-width" name="viewport" link href="includes/favicon.ico" rel="shortcut icon" title HTML preprocessors challenge! body h1#title.titles.main-title Hello world nav a.first-link href="http://www.google.com" target="blank" Link on - Google a href="http://www.yahoo.com" target="blank" Link on - Yahoo a href="http://www.github.com" target="blank" Link on - Github #wrapper Some text <b>here</b>. script async="" src="//code.jquery.com/jquery-1.12.0.min.js" type="text/javascript" !5 html head utf-8 viewport width=device-width favicon includes/favicon.ico title HTML preprocessors challenge! body h1 #title .titles .main-title Hello world nav @ a $http://www.[@].com $blank Link on - [google] .first-link Google [yahoo] Yahoo [github] Github div #wrapper Some text <b>here</b>. js-async //code.jquery.com/jquery-1.12.0.min.js
  6. 6. Where to find them • Macdom - https://github.com/Machy8/Macdom • Slim - http://slim-lang.com/ • Jade - http://jade-lang.com/ • Haml - http://haml.info/

×