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.
Čtvrtkon #71 - Marian Benčat - Angular a NativeScriptCtvrtkoncz
Téma: Angular a NativeScript: Pro enterprise level web, desktop a nativní mobilní aplikace, více info na: http://ctvrtkon.cz/pozvanka-na-ctvrtkon-71-30-srpna-2018/
Přednáška proběhla v rámci hospodských srazů Frontendisti Brno. V rámci přenášky jsem popsal zůsob organizace CSS ve webové aplikaci projektu ContentKing.
Vývoj frontendu na redakčním systému? ... aneb jak udržet pořádek v š...Martin Pešout
Pokud začínáte nový projekt, je vždy důležitou volbou správné struktování dat. Dlouhou dobu mě trápilo, že frontend vývojáři dělají řadu chyb hned na začátcích, pokud tvoří projekt nasazený radakčních systémech jako Wordpress nebo Drupal. Chtěl bych vám ukázat svůj způsob jak strukturovat frontend pro šablony, jak pracovat s gitem a hlavně jak vytvořit projekt, který s vámi bude růst a nebude se zanášet “balastem”.
Čtvrtkon #71 - Marian Benčat - Angular a NativeScriptCtvrtkoncz
Téma: Angular a NativeScript: Pro enterprise level web, desktop a nativní mobilní aplikace, více info na: http://ctvrtkon.cz/pozvanka-na-ctvrtkon-71-30-srpna-2018/
Přednáška proběhla v rámci hospodských srazů Frontendisti Brno. V rámci přenášky jsem popsal zůsob organizace CSS ve webové aplikaci projektu ContentKing.
Vývoj frontendu na redakčním systému? ... aneb jak udržet pořádek v š...Martin Pešout
Pokud začínáte nový projekt, je vždy důležitou volbou správné struktování dat. Dlouhou dobu mě trápilo, že frontend vývojáři dělají řadu chyb hned na začátcích, pokud tvoří projekt nasazený radakčních systémech jako Wordpress nebo Drupal. Chtěl bych vám ukázat svůj způsob jak strukturovat frontend pro šablony, jak pracovat s gitem a hlavně jak vytvořit projekt, který s vámi bude růst a nebude se zanášet “balastem”.
This document summarizes an ID meeting on performance optimization that took place on January 13, 2010. It discusses why front-end optimization is important, including better user experience, more traffic and revenue, and reduced costs. It then provides 34 best practices for performance optimization, such as making fewer HTTP requests, using content delivery networks, gzipping components, putting stylesheets at the top and scripts at the bottom of pages. Specific techniques for optimizing CSS are also outlined, like combining CSS files, inlining images, lazy-loading stylesheets, writing efficient CSS with shorthand and inheritance, and minifying CSS.
This document summarizes strategies for optimizing front-end performance discussed at a meeting on June 30th, 2011. It identifies blocking scripts, slow CSS selectors, unnecessary data requests, expensive DOM manipulations, and late script loading as potential issues. It recommends leveraging event delegation, reducing the DOM size, batching CSS changes, storing DOM lookups in variables, and deferring non-critical scripts.
This document provides a list of proofreading symbols and their meanings. It includes over 30 symbols such as delete, insert, lowercase, new paragraph, and more. It also lists 10 rules of effective proofreading such as never proofreading your own work, reading backwards to catch spelling errors, taking breaks, and making legible marks. The symbols and rules are intended to help editors and proofreaders clearly communicate changes that need to be made to documents to eliminate errors.
The document provides instructions for practicing critical thinking skills with a partner by exploring paintings at the Metropolitan Museum of Art. Learners are told to take turns asking and answering open-ended questions about what is happening in each painting, what occurred just before or just after the scene, and common elements among the paintings, with the goal of having a discussion and considering different perspectives.
The document summarizes strategies for optimizing JavaScript performance. It discusses how browsers have optimized JavaScript engines and techniques like placing scripts at the bottom, minifying code, and avoiding excessive DOM manipulation. Specific tips are provided for efficient data access, DOM usage, flow control, strings, Ajax calls, and responsive interfaces. The goal is to write code that minimizes download size, parsing and execution time to improve responsiveness.
This document summarizes a presentation on geolocation. It defines geolocation as using location technologies to determine the real-world geographic location of a device. It discusses the history and rise of geolocation on the web from 2009 onward. It then covers various location technologies like IP geolocation, triangulation, GPS, Wi-Fi and cell towers. It provides code examples and applications of using geolocation such as finding nearby points of interest, turn-by-turn navigation, and geotagging photos taken on mobile devices.
Here are the key services provided by Aarong:
- Clothing and accessories for men, women, and children made by artisans using traditional techniques like weaving, embroidery, pottery, woodwork, etc. This includes items like kurtas, shirts, saris, jewelry, bags, home decor.
- Support for over 65,000 artisans and craftspeople across Bangladesh, primarily rural women, by providing stable income, training, healthcare and other services.
- Marketing and sales of artisan products through Aarong retail stores in major cities in Bangladesh as well as international exports.
- Collaboration with NGO BRAC to further their poverty alleviation and community development missions. A portion of
This document introduces React, describing it as a JavaScript library for building user interfaces by rendering components rather than mutating the DOM directly. It discusses how React uses a virtual DOM for fast re-rendering, building components instead of templates, and the use of JSX syntax to write HTML-like code. Components have state and props, and the whole app re-renders when state changes to guarantee updates.
This document provides an overview of React, including initial reactions to it, fundamental concepts like components and one-way data flow, and how the virtual DOM works. Some key points covered include:
- Initial reactions to React were mixed, with some finding it "ugly" but others seeing benefits like separation of concerns with components.
- Everything in React is a component, with data flowing in one direction from parent to child via props. State is mutable within a component.
- By using a virtual DOM, React can efficiently update the real DOM by only making necessary changes, keeping the interface fast and pure.
s React.js a library or a framework? In any case, it is a new way of working that represents a revolution in the way of building web projects. It has very particular characteristics that allow us, for instance, to render React code from the server side, or to include React components from Twig tags. During this talk we will present React.js, we will explore how to take advantage of it from PHP projects and we will give answers to practical problems such as universal (isomorphical) rendering and the generation of React.js forms from Symfony forms without duplication of efforts.
React is a different way to write JavaScript apps. When it was introduced at JSConf US in May, the audience was shocked by some of its design principles. One sarcastic tweet from an audience member ended up describing React’s philosophy quite accurately: https://twitter.com/cowboy/status/339858717451362304
We’re trying to push the limits of what’s possible on the web with React. My talk will start with a brief introduction to the framework, and then dive into three controversial topics: Throwing out the notion of templates and building views with JavaScript, “re-rendering” your entire application when your data changes, and a lightweight implementation of the DOM and events.
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
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?
This document summarizes an ID meeting on performance optimization that took place on January 13, 2010. It discusses why front-end optimization is important, including better user experience, more traffic and revenue, and reduced costs. It then provides 34 best practices for performance optimization, such as making fewer HTTP requests, using content delivery networks, gzipping components, putting stylesheets at the top and scripts at the bottom of pages. Specific techniques for optimizing CSS are also outlined, like combining CSS files, inlining images, lazy-loading stylesheets, writing efficient CSS with shorthand and inheritance, and minifying CSS.
This document summarizes strategies for optimizing front-end performance discussed at a meeting on June 30th, 2011. It identifies blocking scripts, slow CSS selectors, unnecessary data requests, expensive DOM manipulations, and late script loading as potential issues. It recommends leveraging event delegation, reducing the DOM size, batching CSS changes, storing DOM lookups in variables, and deferring non-critical scripts.
This document provides a list of proofreading symbols and their meanings. It includes over 30 symbols such as delete, insert, lowercase, new paragraph, and more. It also lists 10 rules of effective proofreading such as never proofreading your own work, reading backwards to catch spelling errors, taking breaks, and making legible marks. The symbols and rules are intended to help editors and proofreaders clearly communicate changes that need to be made to documents to eliminate errors.
The document provides instructions for practicing critical thinking skills with a partner by exploring paintings at the Metropolitan Museum of Art. Learners are told to take turns asking and answering open-ended questions about what is happening in each painting, what occurred just before or just after the scene, and common elements among the paintings, with the goal of having a discussion and considering different perspectives.
The document summarizes strategies for optimizing JavaScript performance. It discusses how browsers have optimized JavaScript engines and techniques like placing scripts at the bottom, minifying code, and avoiding excessive DOM manipulation. Specific tips are provided for efficient data access, DOM usage, flow control, strings, Ajax calls, and responsive interfaces. The goal is to write code that minimizes download size, parsing and execution time to improve responsiveness.
This document summarizes a presentation on geolocation. It defines geolocation as using location technologies to determine the real-world geographic location of a device. It discusses the history and rise of geolocation on the web from 2009 onward. It then covers various location technologies like IP geolocation, triangulation, GPS, Wi-Fi and cell towers. It provides code examples and applications of using geolocation such as finding nearby points of interest, turn-by-turn navigation, and geotagging photos taken on mobile devices.
Here are the key services provided by Aarong:
- Clothing and accessories for men, women, and children made by artisans using traditional techniques like weaving, embroidery, pottery, woodwork, etc. This includes items like kurtas, shirts, saris, jewelry, bags, home decor.
- Support for over 65,000 artisans and craftspeople across Bangladesh, primarily rural women, by providing stable income, training, healthcare and other services.
- Marketing and sales of artisan products through Aarong retail stores in major cities in Bangladesh as well as international exports.
- Collaboration with NGO BRAC to further their poverty alleviation and community development missions. A portion of
This document introduces React, describing it as a JavaScript library for building user interfaces by rendering components rather than mutating the DOM directly. It discusses how React uses a virtual DOM for fast re-rendering, building components instead of templates, and the use of JSX syntax to write HTML-like code. Components have state and props, and the whole app re-renders when state changes to guarantee updates.
This document provides an overview of React, including initial reactions to it, fundamental concepts like components and one-way data flow, and how the virtual DOM works. Some key points covered include:
- Initial reactions to React were mixed, with some finding it "ugly" but others seeing benefits like separation of concerns with components.
- Everything in React is a component, with data flowing in one direction from parent to child via props. State is mutable within a component.
- By using a virtual DOM, React can efficiently update the real DOM by only making necessary changes, keeping the interface fast and pure.
s React.js a library or a framework? In any case, it is a new way of working that represents a revolution in the way of building web projects. It has very particular characteristics that allow us, for instance, to render React code from the server side, or to include React components from Twig tags. During this talk we will present React.js, we will explore how to take advantage of it from PHP projects and we will give answers to practical problems such as universal (isomorphical) rendering and the generation of React.js forms from Symfony forms without duplication of efforts.
React is a different way to write JavaScript apps. When it was introduced at JSConf US in May, the audience was shocked by some of its design principles. One sarcastic tweet from an audience member ended up describing React’s philosophy quite accurately: https://twitter.com/cowboy/status/339858717451362304
We’re trying to push the limits of what’s possible on the web with React. My talk will start with a brief introduction to the framework, and then dive into three controversial topics: Throwing out the notion of templates and building views with JavaScript, “re-rendering” your entire application when your data changes, and a lightweight implementation of the DOM and events.
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
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?
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ě.
Péhápkaři v Pecce: Naše cesta k read-modelu – Vojtěch Buba –18. 5. 2022PeckaDesign.cz
Na začátku jsme si vysvětlili co je to read-model, v čem je dobrý a proč se skvěle hodí pro e-commerce. Jelikož je třeba umět read-model invalidovat, řekli jsme si, co jsou to doménové eventy a jak je používáme pro invalidaci. Nakonec jsme se podívali do praxe na to, jak jsme vše implementovali při redesignu velkého eshopu.
6. 7 „problémů“ CSS
• Všechno je v globálním namespace
• Závislosti
• Eliminace mrtvého kódu
• Minifikace
• Sdílení konstant
• Umístění ve stylopisu hraje roli
• Izolace
10. 7 „problémů“ CSS
• Všechno je v globálním namespace
• Závislosti
• Eliminace mrtvého kódu
• Minifikace
• Sdílení konstant
• Umístění ve stylopisu hraje roli
• Izolace
11. Nevýhody CSS v JS
• Globální styly
• Použití stávajících knihoven
• Styly pro různé prohlížeče / uživatele
• Svázání konkrétního vzhledu s
komponentou
• Svázání konkrétní technologie s
komponentou
12. Nevýhody in-line CSS
• (Ne)ukládání do mezipaměti
• Velikost HTML hraje roli
• :hover/:focus/:active
• Media queries (@ pravidla)
• CSS Animace
• Stylování pro různé prohlížeče
• DevTools / SourceMaps
16. Ideální řešení
• Sass, Less, nebo PostCSS syntaxe
• Nezávislé na frameworku
• Nezávislé na CSS názvosloví
• Žádná extra režie při renderování stylů na
klientu
17. Jak si zvolit konvence?
• Velikost projektu
• Externí knihovny
• Časová náročnost
• Don’t Repeat Yourself
• Modifikace
• Izolace
S komponentama se v poslední době roztrhl pytel
Polymer má custom elementy
Angular má direktivy
W3C má Web Components
React má komponenty
V dokumentaci Reactu se dokonce dočteme, že …
React a JSX?
React a JSX!
Sloučení HTML a JavaScriptu dává smysl
Konec 2014
Nelze aplikovat pouze na určitou část markupu
CSS v čase narůstá
Může přinést řadu problémů např. při asynchronním načítání
Celá komponenta je pohromadě
Nechce vytvořit dogma, ale otevřít debatu
Michele Bertoli
Drtivá většina převzala myšlenku Chrise
Je opravdu chyba v návrhu CSS?
První návrh koncem roku 1994
IE 3 a Netscape Navigator 4 měly dost úděsnou implementaci CSS
Reálné nasazení CSS přišlo s IE 4 (koncem roku 1997)
CSS parser je rychlej
JavaScript bylo v té době sprostý slovo
BEM / SUIT
Dobrá architektura
uncss
Gulp / WebPack / gzip
SASS / LESS / PostCSS
Dobrá architektura / zvýšení specificity
OOCSS
Testování…
Kam patří normalize? A co typografie?
…
Co komponenty, které budeme chtít použít na jiném projektu, nebo publikovat na internetu?
Pokud do nich nacpeme CSS, nutime ostatni, aby pouzivali to samy reseni.
How do you do :hover/:focus/:active in inline styles? You don't. You fake it.
ES7 decorator, používá css-loader
…
Mark Dalgleish - Dokumentace “standardu”, postcss moduly, příklady použití s webpackem, browserify a jspm
Rozšíření téhož
css-loader je webpack loader pro css
no extra dependencies
can be used with React, Angular, Ember
can use BEM, SUIT
Takže ideální řešení je vlastně hlavně o nastavení a dodržování konvencí
Kolik lidí bude zároveň na stylech pracovat?
Kolik času bude potřeba na přípravu dev stacku VS kolik času tím potenciálně ušetříme do budoucna při psaní nových komponent?
Jaké externí knihovny se budou používat? Bootstrap ani GMD nepoužívá BEM/SUIT
Jak moc mi danné řešení umožní reuse stylů?
Umožní mi danné řešení odlišit konkrétní instanci komponenty od ostatních?
Můžu v případě potřeby ovlivnit např. sourozence?
Harry Roberts
Převrácený trojúhelník
Settings: Global variables, config switches.
Tools: Default mixins and functions.
Generic: Ground-zero styles (Normalize.css, resets, box-sizing).
Base: Unclassed HTML elements (type selectors).
Objects: Cosmetic-free design patterns.
Components: Designed components, chunks of UI.
Trumps: Helpers and overrides.
v React Native jsou pouze inliny styly
Shadow DOM umožňuje zapouzdření JavaScriptu, CSS a šablony do Web Componenty.
Modular Style Sheet