During the past six months here at Wimdu, we have been working on making our front end pure, by incrementally introducing Redux, ImmutableJS, and higher-order components, all under the restrictions of a Rails application and constant requests for new features. I will share the techniques, tools, and processes we have been using along with pitfalls to avoid.
This speech was presented at Berlin React meetup on 30 May 2016 (http://www.meetup.com/React-Berlin/events/231265387/)
SVG bude pro tvorbu uživatelských rozhraní hotová revoluce. To si pište. Flexbox spolu s novými CSS3 vlastnostmi zase zjednodušuje postupy, které dřív z kodérů lezly jako z chlupaté deky. Designéři, vezměte svého kodéra a přijďte se ruku v ruce inspirovat novými technologickými možnostmi frontendu.
CSS je skoro všude. Pomocí CSS tvořím weby, připravuji jejich tiskové verze, sázím e-booky a menší PDF… Můj odvěký sen ale byl dostat se s CSS také do tiskárny při sazbě pořádné knihy. Jak to dopadlo? To se dozvíte v téhle přednášce.
node.js: zápisky z fronty (Battle guide to node.js)almadcz
[czech] V Apiary používáme node.js v produkci už přes rok.
Proč se zamyslet nad tím, zda ho chcete? A na co se připravit a na co si dát pozor, pokud se do toho pustíte?
Google introduced the AMP ecosystem 15 months ago. In symbolic 15 points, Robin introduces the technology, sums up the development and reception since, and sneak peaks its future revealed on the recent AMP Conf.
Recording: https://www.youtube.com/watch?v=74eg0wgSIuQ
During the past six months here at Wimdu, we have been working on making our front end pure, by incrementally introducing Redux, ImmutableJS, and higher-order components, all under the restrictions of a Rails application and constant requests for new features. I will share the techniques, tools, and processes we have been using along with pitfalls to avoid.
This speech was presented at Berlin React meetup on 30 May 2016 (http://www.meetup.com/React-Berlin/events/231265387/)
SVG bude pro tvorbu uživatelských rozhraní hotová revoluce. To si pište. Flexbox spolu s novými CSS3 vlastnostmi zase zjednodušuje postupy, které dřív z kodérů lezly jako z chlupaté deky. Designéři, vezměte svého kodéra a přijďte se ruku v ruce inspirovat novými technologickými možnostmi frontendu.
CSS je skoro všude. Pomocí CSS tvořím weby, připravuji jejich tiskové verze, sázím e-booky a menší PDF… Můj odvěký sen ale byl dostat se s CSS také do tiskárny při sazbě pořádné knihy. Jak to dopadlo? To se dozvíte v téhle přednášce.
node.js: zápisky z fronty (Battle guide to node.js)almadcz
[czech] V Apiary používáme node.js v produkci už přes rok.
Proč se zamyslet nad tím, zda ho chcete? A na co se připravit a na co si dát pozor, pokud se do toho pustíte?
Google introduced the AMP ecosystem 15 months ago. In symbolic 15 points, Robin introduces the technology, sums up the development and reception since, and sneak peaks its future revealed on the recent AMP Conf.
Recording: https://www.youtube.com/watch?v=74eg0wgSIuQ
Motivace, definice, zadání a řešení úlohy responzivních obrázků pomocí <picture> elementu (především) c Google Chrome. Přednáška na pražském DevFest 2014 (http://devfest.cz/).
How to Turn Your Ugly Old CSS into a Clean Future-Ready BeautyRobin Pokorny
Slides from my WebExpo presentation: http://webexpo.net/prague2013/talk/how-to-turn-your-ugly-old-css-into-clean-future-ready-beauty/
I hope to add annotations soon.
Motivace, definice, zadání a řešení úlohy responzivních obrázků pomocí <picture> elementu (především) c Google Chrome. Přednáška na pražském DevFest 2014 (http://devfest.cz/).
How to Turn Your Ugly Old CSS into a Clean Future-Ready BeautyRobin Pokorny
Slides from my WebExpo presentation: http://webexpo.net/prague2013/talk/how-to-turn-your-ugly-old-css-into-clean-future-ready-beauty/
I hope to add annotations soon.
2. V roce 1996 vznikla první verze CSS, první česká komerční stránka
vypadala takto, já šel do první třídy a Spice girls vydaly první album.
3. Používám CSS
Dnes jsou ovšem kaskádové styly zdrojem problémů, především u
velkých projektů. Obsahují totiž zásadní návrhové omyly.
4. Globální
Za prvé, vše je globální. V ostatních jazycích jsou globální proměnné
považovány za špatné. V CSS to jinak nejde.
5. .hero {
color: 'red'
}
.hero--active {
color: 'thistle'
}
Každý selektor má stejný zásah — vše. Aplikuje se na celou stránku.
Celkem obyčejný kód v ukázce zavádí dvě nové globální proměnné.
6. devel.cz
bootstrap
1 800
2 500
facebook ?
Kolik globálních prvků mají běžně stránky? Facebook neustále
asynchronně nahrává další. Odhaduji celkem desítky tisíc.
8. Izolace
Není možné zařídit, aby se styly neovliňovaly. Disciplínou se dá něco
uhlídat. Narušení izolace se velmi špatně testuje automaticky.
9. .button {
background: 'red'
}
Komu se nestalo něco podobného? Píšu červená, vidím modrá. Nové
prohlížeče umí najít zdroj chyby. Vyřešit ji musíte sami.
10. Odstraňování
Kdy už konečně budu moct odstranit ten ošklivý legacy kód?
Myslím, že se nikde nepoužívá. Ale jak to ověřit?
11. grep -r hero--active ./src
Odpověď: to nelze! Můžete vyhledat výskyt klíčového slova. Ovšem
co když se sestavuje dynamicky? Co když jej používá třetí strana?
15. Hack
Nástroji, metodikami a disciplínou dokážeme eliminovat mnoho
popsaných problémů. Platí ale, že to jsou pouze hacky.
16. Nedávno se objevila věc, která všechno řeší. Jednoduše. Tím, že pro
stylování se používá nejmocnější jazyk v prohlížeči — JavaScript.
17. Ano, React trochu neplánovaně řídí revoluci i v oblasti stylování.
Následuje ukázka. Prosím, zachovejte si otevřenou mysl…
18. let styles = {
marginTop: 20,
color: 'bisque'
}
return <div style={styles}>
…
</div>;
Tadá! — Ano, vypadá to jako inline styly, ale nejsou to ty inline styly,
před kterými vás všichni varovali. Zde dávají smysl.