Psát CSS je snadné. Díky tomu dokážeme snadno nastylovat malé dokumenty a nemusíme se zdržovat formalitami. Na velkých projektech si ale s tím samým přístupem vylámeme zuby. Potřebujeme řád a organizaci. Jak zorganizovat CSS, aby i ve velkém měřítku fungovalo stejně úžasně jako v tom malém?
Potřebuje Reactista stylopis? A jaký postoj k této ožehavé problematice zvolit? Je vůbec modulární přístup k CSS přínosem? Nahlédneme pod pokličku několika knihoven, které jsou v současnosti spolu s Reactem nejpoužívanější, zhodnotíme jejich klady a zápory a ukážeme, na co si dát při výběru pozor.
Slides for my talk about styling React Native applications I gave at Blueberry Meetup at Node5 on 2016/06/28 #blueberrymeetup
GitHub repo: https://github.com/janmarsicek/blueberry-meetup-talk
Photos from the meetup: https://flic.kr/s/aHskz7hzax
Blueberry Meetup website: http://www.blueberry.cz/meetup
Trápí vás chybový a špatně udržovatelný kód? Nezvládáte krotit množství nepoužitého CSS ani svoji vášeň pro preprocesory? Nevyznáte se v HTML a CSS od svých kolegů, nebo dokonce ve vlastním kódu, který jste psali před půl rokem? Podívejte se, jak zavést do praxe lintování, code review, automatizaci a štábní kulturu obecně.
Potřebuje Reactista stylopis? A jaký postoj k této ožehavé problematice zvolit? Je vůbec modulární přístup k CSS přínosem? Nahlédneme pod pokličku několika knihoven, které jsou v současnosti spolu s Reactem nejpoužívanější, zhodnotíme jejich klady a zápory a ukážeme, na co si dát při výběru pozor.
Slides for my talk about styling React Native applications I gave at Blueberry Meetup at Node5 on 2016/06/28 #blueberrymeetup
GitHub repo: https://github.com/janmarsicek/blueberry-meetup-talk
Photos from the meetup: https://flic.kr/s/aHskz7hzax
Blueberry Meetup website: http://www.blueberry.cz/meetup
Trápí vás chybový a špatně udržovatelný kód? Nezvládáte krotit množství nepoužitého CSS ani svoji vášeň pro preprocesory? Nevyznáte se v HTML a CSS od svých kolegů, nebo dokonce ve vlastním kódu, který jste psali před půl rokem? Podívejte se, jak zavést do praxe lintování, code review, automatizaci a štábní kulturu obecně.
Stejně jako dospívání, také uzrávání design systému je dobrodružná, ale i nelehká životní fáze. Zatímco vy byste ještě rádi leccos změnili a vydali se na pár průzkumných výprav, okolí už po vás žádá zralost a stabilitu. Ba co hůř, hlavně nesahat na nic, co je hotové. Nebo aspoň co nejméně. V přednášce si ukážeme, jak se jako design systém tým připravit na zkoušku z dospělosti svého produktu, jak komunikovat s produktovými týmy o breaking changes, i když jste se zavázali, že je nebudete dělat, a jak týmům pomoci je překonávat.
Design systémy vytváří firmy, které chtějí zrychlit a zlevnit vývoj svých produktů. Jak jim ale design systém pomůže s UX? Ukážeme si, co všechno z toho, co pod UX spadá, zvládne vyřešit design systém, jak dosáhnout co nejvyšší samostatnosti a pohodlí vývojářů a jak nám to celé funguje v multi-brand design systému Spirit v LMC.
Když má váš design systém obsloužit produkty rozkročené mezi Reactem a starým dobrým PHP, nemusí to být problém, ale příležitost. Příběh o tom, jak jsme dosáhli stejného zápisu v Twig i JSX, co jsme tím získali a co nám to přinese do budoucna.
Nové CSS vlastnosti pro rok 2022 a jak je využítAdam Kudrna
Že už jste o lecjakých novotách v CSS slyšeli, ale k ničemu vám nejsou, protože je prohlížeče beztak nepodporují? Rok 2022 je pro CSS přelomový tím, kolik novinek je skutečně implementováno do prohlížečů. Kromě povinného nahlédnutí do lákavé brzké budoucnosti se podíváme především na ty CSS vlastnosti, které možná ještě neznáte a které můžete začít využívat hned teď. Budete překvapeni, kolik toho je.
Design systems and UI libraries are a popular topic more than ever before. The most challenging tasks for front-end developers is to ensure the technical functionality. The decisions we make today have an impact on the team’s work for several years ahead. Our goal is not to change our minds on a frequent basis. How can we adopt a design system successfully rather than being it a disaster? What tools, methods and processes can we apply?
If you are using any methodology to organise your CSS, it's probably BEM. SUIT CSS is a less known, yet more powerful methodology. How does BEM stand against SUIT CSS?
Design systémy a UI knihovny jsou dnes tématem víc než kdy předtím. Zajistit, aby takový systém fungoval také technicky je pro frontend vývojáře jeden z nejnáročnějších úkolů vůbec. Dnešní rozhodnutí ovlivní práci týmu na roky dopředu a není možné je často měnit. Jaké nástroje, metodiky a procesy zvolit, aby zavedení design systému bylo pro tým i produkt úspěchem a nikoli katastrofou?
Už vám někdy něco v aplikaci nefungovalo tak, jak jste si představovali ve wireframe? S živými HTML prototypy dotáhnete user experience až k finálnímu produktu.
Photoshop v dnešním workflow frontendistyAdam Kudrna
Jaká jsou pro a proti webdesignu ve Photoshopu? Jaká jsou úskalí tradičního grafického návrhu a jaké požadavky při návrhu webu dnes? V čem je na web lepší Illustrator a kdy je Photoshop nenahraditelný?
1. S Photoshopem na věčné časy
2. Moderní web a dnešní workflow
3. Ukázky využití
Frontendisti 31. 10. 2014, Praha
Stejně jako dospívání, také uzrávání design systému je dobrodružná, ale i nelehká životní fáze. Zatímco vy byste ještě rádi leccos změnili a vydali se na pár průzkumných výprav, okolí už po vás žádá zralost a stabilitu. Ba co hůř, hlavně nesahat na nic, co je hotové. Nebo aspoň co nejméně. V přednášce si ukážeme, jak se jako design systém tým připravit na zkoušku z dospělosti svého produktu, jak komunikovat s produktovými týmy o breaking changes, i když jste se zavázali, že je nebudete dělat, a jak týmům pomoci je překonávat.
Design systémy vytváří firmy, které chtějí zrychlit a zlevnit vývoj svých produktů. Jak jim ale design systém pomůže s UX? Ukážeme si, co všechno z toho, co pod UX spadá, zvládne vyřešit design systém, jak dosáhnout co nejvyšší samostatnosti a pohodlí vývojářů a jak nám to celé funguje v multi-brand design systému Spirit v LMC.
Když má váš design systém obsloužit produkty rozkročené mezi Reactem a starým dobrým PHP, nemusí to být problém, ale příležitost. Příběh o tom, jak jsme dosáhli stejného zápisu v Twig i JSX, co jsme tím získali a co nám to přinese do budoucna.
Nové CSS vlastnosti pro rok 2022 a jak je využítAdam Kudrna
Že už jste o lecjakých novotách v CSS slyšeli, ale k ničemu vám nejsou, protože je prohlížeče beztak nepodporují? Rok 2022 je pro CSS přelomový tím, kolik novinek je skutečně implementováno do prohlížečů. Kromě povinného nahlédnutí do lákavé brzké budoucnosti se podíváme především na ty CSS vlastnosti, které možná ještě neznáte a které můžete začít využívat hned teď. Budete překvapeni, kolik toho je.
Design systems and UI libraries are a popular topic more than ever before. The most challenging tasks for front-end developers is to ensure the technical functionality. The decisions we make today have an impact on the team’s work for several years ahead. Our goal is not to change our minds on a frequent basis. How can we adopt a design system successfully rather than being it a disaster? What tools, methods and processes can we apply?
If you are using any methodology to organise your CSS, it's probably BEM. SUIT CSS is a less known, yet more powerful methodology. How does BEM stand against SUIT CSS?
Design systémy a UI knihovny jsou dnes tématem víc než kdy předtím. Zajistit, aby takový systém fungoval také technicky je pro frontend vývojáře jeden z nejnáročnějších úkolů vůbec. Dnešní rozhodnutí ovlivní práci týmu na roky dopředu a není možné je často měnit. Jaké nástroje, metodiky a procesy zvolit, aby zavedení design systému bylo pro tým i produkt úspěchem a nikoli katastrofou?
Už vám někdy něco v aplikaci nefungovalo tak, jak jste si představovali ve wireframe? S živými HTML prototypy dotáhnete user experience až k finálnímu produktu.
Photoshop v dnešním workflow frontendistyAdam Kudrna
Jaká jsou pro a proti webdesignu ve Photoshopu? Jaká jsou úskalí tradičního grafického návrhu a jaké požadavky při návrhu webu dnes? V čem je na web lepší Illustrator a kdy je Photoshop nenahraditelný?
1. S Photoshopem na věčné časy
2. Moderní web a dnešní workflow
3. Ukázky využití
Frontendisti 31. 10. 2014, Praha
2. ADAM KUDRNA
◾ Consultant User Interface Engineer
◾ mentoring a vývoj udržitelného a škálovatelného CSS
◾ JavaScript (React), PHP (Twig, Smarty, Latte)
10. NEDOSTATKY VÝVOJÁŘŮ
◾ dokumentace
◾ struktura
◾ malá obeznámenost s CSS nebo i se samotným
projektem
◾ individuální preference
◾ nezohlednění toho, co již existuje
14. SPECIFICITA JE MOCNÁ (KOMPLIKACE)
◾ i s promyšleným pořadím v kódu
◾ i s promyšleným využitím kaskády
◾ i s jakoukoli metodikou pro
pojmenování (BEM, SUIT CSS, …)
24. NECILTE NA HTML ZNAČKY
◾ (pokud nestylujete jejich základní vzhled)
◾ neumíme předvídat budoucnost – co je
dnes UL, může být zítra DIV
◾ domino efekt – jedno malé zanoření
způsobí vršení dalších
25. ◾ ZANOŘOVÁNÍ SE NELZE ZCELA VYHNOUT
◾ … ALE LZE MINIMALIZOVAT ŠKODY