Čo robiť aby bol Váš front-endový kód prehľadnejší a znovupoužiteľnejší? O čom je BEM CSS, ako sa dnes píše JavaScript a čo je to ten Grunt a Gulp? Prednáška plná praktických tipov po ktorých aplikovaní nebudete rozumieť, prečo ste to niekedy robili inak.
Rýchly WordPress pre návštevníka aj správcu (WordCamp Bratislava 2016)Karol Vörös
Videl som WordPress weby, ktoré sa načítavajú viac ako 20 sekúnd ale aj také, ktorým to trvá menej ako sekundu. Bez ohľadu na ich veľkosť či návštevnosť. Čím to je? Ako to robiť správne? Rád sa s vami podelím o svoje skúsenosti s onpage optimalizáciou na webe i dimenzovaní infraštruktúry, na ktorej bežia veľké a navštevované, no stále krásne rýchle weby.
Čo robiť aby bol Váš front-endový kód prehľadnejší a znovupoužiteľnejší? O čom je BEM CSS, ako sa dnes píše JavaScript a čo je to ten Grunt a Gulp? Prednáška plná praktických tipov po ktorých aplikovaní nebudete rozumieť, prečo ste to niekedy robili inak.
Rýchly WordPress pre návštevníka aj správcu (WordCamp Bratislava 2016)Karol Vörös
Videl som WordPress weby, ktoré sa načítavajú viac ako 20 sekúnd ale aj také, ktorým to trvá menej ako sekundu. Bez ohľadu na ich veľkosť či návštevnosť. Čím to je? Ako to robiť správne? Rád sa s vami podelím o svoje skúsenosti s onpage optimalizáciou na webe i dimenzovaní infraštruktúry, na ktorej bežia veľké a navštevované, no stále krásne rýchle weby.
4. Šankiho veta o 3 browsroch
Časy, keď niekto používal aj Operu a
považovala sa za browser…
• Žiadna vec nefunguje naraz
vo viac ako 2 prehliadačoch.
“shanki”
6. Prečo je ťažké robiť HTML a CSS
Bordel de merde…
• Rôznosť implementácie v
prehliadačoch
• Veľa možností, ako spraviť to isté
• Je treba myslieť na veľmi veľa veci
• Narezať grafiku je “easy”, ale…
11. SASS
Style with attitude
• Podporuje všetko čo LESS
• Kompaktnejšia syntax
(zrušené zbytočné zátvorky a
znaky :-)
• Viac pre “programátorov”
• http://sass-lang.com
20. ZURB Foundation
http://foundation.zurb.com/
• Platia tie isté veci ako pri Bootstrap-e
• Postavné na SASS
• Určené viac pre csskárov – pripravené veci pre
customizáciu
• Viacero hotových layoutov
• Všetká háveď included…
23. Nástroje moderného web developera
• Javascript, javascript, javacsript…
• Balíčkovacie systémy
– npm, composer / Sématické verzionovania
• Git
• Livereload – ak to s CSS niekto myslí vážne
24. Sématicke verzionovanie
http://semver.org/
• Verzia X.Y.Z
– X = major, zmena public API
– Y = New feature
– Z = Patches
• 0.Y.Z – development, hocikedy sa môže zmeniť API
• Pre-release versions X.Y.Z-aplha, X.Y.Z-rc.1
• Ruby gems, npm, php composer, PyPI
• .... Viac na webe – odporúčam
25. Ikonky
One more thing…
• Webfonty s ikonkami
– Nekonečné zväčšovanie
– Len jedna farba
• Font Awesome - http://fortawesome.github.io/Font-Awesome/
• Glyphicons - http://glyphicons.com/
26. Záver
• Peknú webovú appku vie spraviť aj sám developer
• Veci sa už nerobia v staromódnom HTML a CSS
• Balíčkovanie knižníc a závislosti