Krátká prezentace poslední verze Macdom preprocesoru. Ukázka syntaxe, předvedení práce s textem, selektory, makry, replikátorem a quick atributy. Seznam možností v nastavení a srovnánÍ s preprocesory jako je Haml, Jade a Slim.
Macdom lze nalézt na https://github.com/Machy8/Macdom.
The backbone of Progressive Web Apps has to be the ServiceWorker. A new browser paradigm, nearly every new browser api that controls network events, offline functionality, push notifications, background sync, and more are all powered by it. We will go over the path that led to the ServiceWorker design, as well as how to implement a number of cutting ed features on your website or webapp today!
Crea un tema compatibile con le ultime novità WordPressSkillsAndMore
Presentazione rilasciata al WordCamp Torino 2017 all'interno della quale vengono presentate le novità per creare un tema WordPress e migliorare il nostro lavoro da sviluppatori.
Trovi tutte le informazioni necessarie a questo indirizzo: https://skillsandmore.org/corso/crea-il-tuo-primo-tema-wordpress/
The backbone of Progressive Web Apps has to be the ServiceWorker. A new browser paradigm, nearly every new browser api that controls network events, offline functionality, push notifications, background sync, and more are all powered by it. We will go over the path that led to the ServiceWorker design, as well as how to implement a number of cutting ed features on your website or webapp today!
Crea un tema compatibile con le ultime novità WordPressSkillsAndMore
Presentazione rilasciata al WordCamp Torino 2017 all'interno della quale vengono presentate le novità per creare un tema WordPress e migliorare il nostro lavoro da sviluppatori.
Trovi tutte le informazioni necessarie a questo indirizzo: https://skillsandmore.org/corso/crea-il-tuo-primo-tema-wordpress/
8. Replikátor
<nav>
<a href="twitter.com" target="blank" class="trida1 trida2 trida3">
<i class="icon-twitter"></i> Jsme na Twitteru
</a>
<a href="facebook.com" target="blank" class="trida1 trida2 trida3">
<i class="icon-facebook"></i> Najdete nás na Facebooku
</a>
<a href="instagram.com" target="blank" class="trida1 trida2 trida3">
<i class="icon-instagram"></i> Prohlédněte si náš Instagram
</a>
</nav>
9. Replikátor
nav
@navLink a $[@].com $blank .trida1 .trida2 .trida3
@ i .icon-[@]
navLink [twitter]
[twitter] Jsme na Twitteru
navLink [facebook]
[facebook] Najdete nás na Facebooku
navLink [instagram]
[instagram] Prohlédněte si náš Instagram
10. Něco málo k nastavení
• Přidat & odebrat
• Elementy, atributy a makra
• Nekompilované oblasti a elementy
• Změnit
• Rychlé atributy, čím bude odsazen zpracovaný kód, způsob odsazení
• Povolit & zakázat
• Automatické odsazení dokumentu
• Úpravu výsledného kódu dle XHTML
• Komprese zpracovaného kódu
• Uzavírání nepárových tagů lomítkem
• Celý zápis boolean atributů
11. Challenge
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>Macdom example</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>
12. Macdom vs Haml
!5
html
head
utf-8
viewport width=device-width
favicon includes/favicon.ico
title Macdom example
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 Macdom example
%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
.
%script{:async => "", :src => "//code.jquery.com/jquery-1.12.0.min.js", :type => "text/javascript"}
13. Macdom vs Jade
!5
html
head
utf-8
viewport width=device-width
favicon includes/favicon.ico
title Macdom example
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 Macdom example
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
| .
script(async='', type='text/javascript', src='//code.jquery.com/jquery-1.12.0.min.js')
14. Macdom vs Slimdoctype html
html
head
meta charset="utf-8" /
meta content="width=device-width" name="viewport" /
link href="includes/favicon.ico" rel=("shortcut icon") /
title Macdom example
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
| .
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 Macdom example
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