Video (in Spanish) http://youtu.be/bDchXm0avPk Frontenders has almost two years, and also its website!. It is time to move from a static web to more updatable one. For this we are going to use "Middleman", a static site generator. This talk is about the migration process and the advantages of using this kind of tools. Tony Camaiani @tonycamaiani is Frontender at peerTransfer, co-founder & co-organizer of @frontendersVLC meetup.

1. Generating static web sites with
MiddlemanFrontenders Valencia - Enero 2015
By Tony Camaiani @tonycamaiani

2. Hi, I'm
Tony Camaiani
-tony.camaiani.me @tonycamaiani
born grew up aging
Laurea in Computer Science, University of Bologna
“Usability Guidelines and User-Centered Design“
Frontend Web Developer
Web Designer & UX

3. About this Talk
Old Version
New Version
Middleman
Layout
Styles
Data
Config
Heroku
Next Steps

4. Old Version
Static Html / Css
2 index.html
Copy index.html to past.html
Add talks slides
Css images for sponsors
Header and Footer duplicated

9. Why change?
Update content more easily
Separate content from markup
No css edits
Status of Event
HAML & SASS
Common Header and Footer

10. Static Site Generators
A static-site generator simply takes your pre-compiled (and pre-processed) languages like Haml, Jade,
Sass, LESS, Stylus, CoffeeScript, and others, and compiles them into the equivalent language that is
understood by the browser; HTML, CSS, and JavaScript, respectively.
http://drewbarontini.com/articles/middleman/
Middleman Jekyll Assemble.io
...
https://www.staticgen.com
CodeKit Hammer Mixture
...

11. Middleman
middlemanapp.com
Command-line tool for creating static websites, with Ruby and the Sinatra web framework.
ERb, Haml, Sass, CoffeeScript
Multiple asset management solutions, including Sprockets
Pretty URLs
LiveReload extension
CSS minification and Javascript compression
Support for numerous templating languages to simplify your HTML development, which will allow you
to add variables, call methods and use loops and 'if' statements.

12. Middleman: Install
middlemanapp.com

13. Middleman: Init
middlemaninitnew_project

14. Middleman: Server
middlemanserver

15. Middleman: Build
middlemanbuild

16. Frontenders Valencia Middleman

17. Layout
HAML
Layouts
Partials
Pages

18. Layout.haml
!!!
%html
%head
...
%link{:href=>"http://fonts.googleapis.com/css?family=Rambla:400,700",:rel=>"stylesheet",:
=stylesheet_link_tag"all"
=javascript_include_tag "libs/modernizr"
%body
=partial'partials/header'
=yield
=partial'partials/footer'
...

19. Partials: _header.haml
%header
%hgroup
%h1
=link_todata.static[:h1_logo_text],"/",:title=>data.static[:h1_title]
%span=data.static[:h1_logo_subtext]
%h2
=data.static[:h2_scream_line_1]
%span=data.static[:h2_scream_line_2]
%span=data.static[:h2_scream_line_3]
%nav
%ul
%li
=link_todata.static[:nav_page_1],"/frontenders.html",:title=>data.static[:nav_page_
%li
=link_todata.static[:nav_page_2],"/past.html",:title=>data.static[:nav_page_2_title

20. Partials: _footer.haml
%footer
.fgroup
.first
%h3=data.static[:participate]
%p
=data.static[:participate_how]
=mail_todata.static[:participate_email],data.static[:participate_email]
.middle
%h3=data.static[:follow]
%p
=link_to"@frontendersVLC","https://twitter.com/frontendersVLC",:title=>"@frontendersV
%p
=link_to"#frontendersVLC","https://twitter.com/search?q=%23frontendersVLC",:title=>"H
.last
%h3=data.static[:partner]
%p
=link_todata.static[:partner_name],data.static[:partner_url],:title=>data.static[:par

21. Index.haml
---
title:ameetupforFrontend UIDevelopers,UX WebDesigners
ready:true
---
...
%main{:role=>"main"}
%p.main_paragraph
=data.static[:main_paragraph_text_1]
=link_todata.static[:partner_name],data.static[:partner_url],:title=>data.static[:partner
=data.static[:main_paragraph_text_2]
=link_todata.static[:main_paragraph_link_text],"frontenders.html"
%h2.title
=data.static[:next_meetup]
%time
=data.static[:week_day]
#{date}
=data.static[:day_hour]
%section{:class=>"#{type}"}
-homepage.talks.eachdo|f|
%article
%h3=f[:title]
-f.text.eachdo|t|
%p=t
-ifactive
-f.author.eachdo|t|
%p
=t[:name]

22. frontenders.haml
---
title:¿Quees?Frontenders
---
%main{:role=>"main"}
%section
%h2.title=data.static[:frontenders_title]
%p
%b=data.static[:frontenders_def_text_1]
=data.static[:frontenders_def_text_2]
%cite
=link_todata.static[:frontenders_def_source_text],data.static[:frontenders_def_source_url
%p=data.static[:frontenders_text_1]
%p=data.static[:frontenders_text_2]
%p=data.static[:frontenders_text_3]
%p
=data.static[:frontenders_text_4]
=succeed'.'do
=mail_todata.static[:participate_email],data.static[:participate_email]

23. past.haml
---
title:Loseventosanteriores
---
%main{:role=>"main"}
%h2.title=data.static[:past_title]
-data.archive.meetups.eachdo|m|
%h2.section_title
=data.static[:week_day]
=m[:date]
-ifm[:hangout_url]
=link_tom[:hangout_url],m[:hangout_url],:class=>"icohangout",:target=>"_blank"
%section{:class=>"#{m.type}"}
-m.talks.eachdo|f|
%article
%h3=f[:title]
-f.author.eachdo|t|
=t[:name]
=twitter_url(t[:twitter])
-f.text.eachdo|t|
%p=t
-iff.links
-f.links.eachdo|t|
%p.links
=link_tot[:label],t[:url],:target=>"_blank"

24. Styles
SASS
Partials
Flexbox
Mobile First
Own breakpoints

25. Styles

26. Styles: _variables.scss
//_varables.scss
////BasicColors
$white:#fff;
$gray:#53585e;/*text*/
$gray_light:#f5f5f5;/*background*/
$gray_lighter:rgba(161,161,161,0.5);
$orange:rgb(230,126,34);
$orange_light:rgb(243,156,18);
$orange_dark:rgba(211,84,0,0.5);
$orange_darker:rgb(220,105,17);
$blue:#1ea0ce;
$blue_light:#339ACC;
////BackgroundColors
$background_color_body:$gray_light;
$background_color_header:$orange;
$background_color_button:$orange_light;
$background_color_button_hover:$orange_dark;
$shadow_color_header:$gray_lighter;
$shadow_color_article:$gray_lighter;
$border_color_article:$white;

27. Flexbox: footer
footer{
.fgroup{
display:flex;
justify-content:center;
div{
margin:0;
flex-grow:1;
flex-basis:0;
&.first{text-align:left;}
&.last{text-align:right;}
}//div
}//.fgroup
}//footer

28. Flexbox: article
main{
section{
article{
margin:02%30px;
p{font-size:18px;}
}//article
&.double{
display:flex;
flex-flow:rowwrap;
justify-content:center;
article{
flex-grow:1;
flex-basis:0;
}
div{flex:1100%;}
}//section.double
}//section
}//main

29. Breakpoints
@mediaonlyscreenand(min-width:768px){...}
@mediaonlyscreenand(min-width:896px){...}
@mediaonlyscreenand(min-width:1024px){...}
“Start with the small screen first, then
expand until it looks like shit. Time for a
breakpoint!” - Stephen Hay

30. Data

31. Data: default.yml
meetup:
date:"8enero2015"
type:"double"
talks:
-title:Espaciolibre
text:
-¿Tienesalgointeresantequecontarsobretemasdedesarrollofrontend,diseñoweb,UIyUX
-Envíanosuncorreoa<ahref="mailto:frontendersvalencia@gmail.com">frontendersvalencia@gma
-title:Espaciolibre
text:
-¿Tienesalgointeresantequecontarsobretemasdedesarrollofrontend,diseñoweb,UIyUX
-Envíanosuncorreoa<ahref="mailto:frontendersvalencia@gmail.com">frontendersvalencia@gma

32. Data: new.yml
meetup:
date:"8enero2015"
type:"double"
eventbrite:https://frontenders-enero-2015.eventbrite.es
talks:
-title:"GenerandositioswebestáticosconMiddleman"
text:
-"Frontenderstienecasidosaños,¡ytambiénsuweb!.Hallegadoelmomentodepasardeuna
-"Paraellovamosahacerusode“Middleman”,ungeneradordesitiosestáticos.Hablaremosd
author:
-name:"TonyCamaiani"
twitter:"tonycamaiani"
bio:"esFrontenderen@peerTransfer&coorganizadorde@frontendersVLC."
-title:"Diseñayvenderás"
text:
-"¿Porquéunusuarioentraamiwebynosabeadondeir?¿Cómoconsigodarconfianzaamis
-"UnbuendiseñopuedeserlaclaveparaconseguirtuobjetivoenInternet,peronolaúnica
author:
-name:"JuanmaMartínez"
twitter:"juanmamartinez"
bio:"esWebDesigner&UXen@Increnta,agenciaespecializadaenInboundMarketingyMarketi
sponsor:
name:"Kuombo-Consultoríaydesarrollodecomercioelectrónico"
url:"http://kuombo.com/"
image:"logo_kuombo.png"

33. Data: archive.yml
meetups:
-meetup:
date:"13noviembre2014"
hangout_url:"https://plus.google.com/u/0/events/c43la6lak11lgpo6g7q6bgumfpc"
type:double
talks:
-title:"¿Compraronlineesunaexperiencia?UXparaecommerce"
text:
-"Elcomercioonlineesunmercadodurísimodondelasempresasinviertenmultitudderecur
-"Enestacharlaaprenderemoslossecretosparacrearexperienciasenfocadasenelusuario
links:
-url:"/slides/Dani_Frontenders_UX_ecommerce.pdf"
label:"slides»"
author:
-name:"DaniCatalan"
twitter:"dani_catalan"
bio:"esDesarrolladorFrontenden@kuombo,agenciaespecializadaeneldesarrollodelnego
-title:"MaquetaciónconFlexbox"
text:
-'CSSempezóconmalpiecuandonosdioel"float"comomediodedistribucióndeelementos
-'PeroahoratenemoselmódulodeFlexbox,conelquepodemosmaquetarconpropiedadessim
links:
-url:"/slides/Wakkos_Frontenders_Flexbox.pdf"
label:"slides»"
author:
-name:"DanielMartínez"
twitter:"Wakkos"
bio:"esFrontendytutor/profesordeArquitecturaCSSyresponsivedesignen@EscuelaIty
-meetup:
date:"11septiembre2014"

34. Data: static.yml
#Header
h1_title:"FrontendersValencia"
h1_logo_text:"<frontenders/>"
h1_logo_subtext:"Valencia"
h2_scream_line_1:"ameetupfor"
h2_scream_line_2:"Frontend&UIDevelopers,"
h2_scream_line_3:"UX&WebDesigners"
nav_page_1:"¿Quees?"
nav_page_1_title:"¿QueesFrontenders?"
nav_page_2:"Anteriores"
nav_page_2_title:"Loseventosanteriores"
#Footer
participate:"Participa"
participate_how:"¿Quieresparticiparenunadelaspróximasreuniones?Escribea"
participate_email:"frontendersvalencia@gmail.com"
follow:"Síguenos"
partner:"Partner"
partner_name:"GeeksHubs"
partner_url:"http://geekshubs.com/es/?utm_source=comunidades&utm_medium=web&utm_campaign=frontende
partner_url_title:"ComunidadGeekyEmprendedorestechies"
#Index
main_paragraph_text_1:"Frontendersesunareuniónmensualcentradaentemasdedesarrollofrontend
main_paragraph_text_2:",enAvenidaCataluña,11(Valencia)."
main_paragraph_link_text:"¿Quieressabermás?"
next_meetup:"Próximomeetup:"
week_day:"jueves"
day_hour:",19:00h"
sponsor:"Patrocinador"
attend_text:"AsistiréalFrontendersValencia"

35. Using the data
index.haml
---
title:ameetupforFrontend UIDevelopers,UX WebDesigners
ready:true
---
-active=current_page.data.ready
-ifactive
-homepage=data.new.meetup
-else
-homepage=data.default.meetup
-date=homepage.date
-type=homepage.type
-homepage.talks.eachdo|f|
%article
%h3=f[:title]
-f.text.eachdo|t|
%p=t
-ifactive
-f.author.eachdo|t|
%p
=t[:name]
=twitter_url(t[:twitter])
=t[:bio]

36. Using the data
frontenders.haml
%main{:role=>"main"}
%section
%h2.title=data.static[:frontenders_title]
%p
%b=data.static[:frontenders_def_text_1]
=data.static[:frontenders_def_text_2]
%cite
=link_todata.static[:frontenders_def_source_text],data.static[:frontenders_def_source_url
%p=data.static[:frontenders_text_1]
%p=data.static[:frontenders_text_2]
%p=data.static[:frontenders_text_3]
%p
=data.static[:frontenders_text_4]
=succeed'.'do
=mail_todata.static[:participate_email],data.static[:participate_email]

37. Config: config.rb
activate:livereload
set:css_dir,'stylesheets'
set:js_dir,'javascripts'
set:images_dir,'images'
set:haml,{:ugly=>true,:format=>:html5}
activate:directory_indexes
#Build-specificconfiguration
configure:builddo
activate:minify_css
activate:minify_javascript
activate:asset_hash
end
helpersdo
defis_page_selected(page)
current_page.url==page?"selected":''
end
deftwitter_url(username)
"<atarget="_blank"href="https://twitter.com/#{username}">@#{username}</a>"
end
end

38. Config: config.ru
require"rubygems"
require"rack"
require"middleman/rack"
require"rack/contrib/try_static"
map"/"do
runlambda{|env|
[
200,
{
'Content-Type' =>'text/html',
'Cache-Control'=>'public,max-age=86400'
},
File.open('build/index.html',File::RDONLY)
]
}
end
map"/frontenders.html"do
runlambda{|env|
[
200,
{
'Content-Type' =>'text/html',
'Cache-Control'=>'public,max-age=86400'
},
File.open('build/frontenders.html',File::RDONLY)
]
}
end

39. Deploy a Heroku
http://www.randomerrata.com/articles/2013/middleman-on-heroku/
Gemfile
source'http://rubygems.org'
ruby"2.0.0"
gem"middleman","~>3.0.13"
gem"rack-contrib"
gem"puma"
Config.ru
#Buildthestaticsitewhentheappboots
` `
#EnableproperHEADresponses
useRack::Head
#AttempttoservestaticHTMLfiles
useRack::TryStatic,
:root=>"build",
:urls=>%w[/],
:try=>['.html','index.html','/index.html']
bundleexecmiddlemanbuild

40. Deploy a Heroku
http://www.randomerrata.com/articles/2013/middleman-on-heroku/
Procfile
web:bundleexecpuma-p$PORT-e$RACK_ENV
...set up Heroku and
gitpushherokumaster

41. Next Steps
SVG
Social Icon Font
More generic
...suggestions?

42. That's all, Folks!
Repo
https://github.com/frontenders/valencia-middleman
These slides
http://tony.camaiani.me/frontenders-middleman-talk
made with reveal.js
Any question?

43. Thanks!
Tony Camaiani
-tony.camaiani.me @tonycamaiani