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”.
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.
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/)
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”.
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.
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/)
Martin Michálek: Bootstrap 4 - Jednou to muselo přijítDevelcz
Technologické novinky čtvrté verze vás neohromí: flexbox, SASS, nebo utility třídy… Nuda. V jedné věci se ale starý dobrý Bootstrap změnil dost zásadně a právě na tu se zaměřím.
Č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 z 2.6.2011 z akce Internet Session Brno. Martin Pešout a Marek Hulán představili výhody vývoje webových aplikací ve frameworku Ruby on Rails.
Nové »bezhlavé« CMS — přechod od monolitů ke službámJaroslav Vrána
Přednáška zaměřená na důvody k opuštění monolitu podložené výzvami a očekáváním jednotlivých rolí, které pracují s CMS.
Instance Strapi CMS na jedno kliknutí https://fastandcomfy.io/strapi?for=frontendisti-brno
Plná animace včetně skrytých snímků https://youtu.be/QuBJf_tLbBo
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
Martin Michálek: Bootstrap 4 - Jednou to muselo přijítDevelcz
Technologické novinky čtvrté verze vás neohromí: flexbox, SASS, nebo utility třídy… Nuda. V jedné věci se ale starý dobrý Bootstrap změnil dost zásadně a právě na tu se zaměřím.
Č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 z 2.6.2011 z akce Internet Session Brno. Martin Pešout a Marek Hulán představili výhody vývoje webových aplikací ve frameworku Ruby on Rails.
Nové »bezhlavé« CMS — přechod od monolitů ke službámJaroslav Vrána
Přednáška zaměřená na důvody k opuštění monolitu podložené výzvami a očekáváním jednotlivých rolí, které pracují s CMS.
Instance Strapi CMS na jedno kliknutí https://fastandcomfy.io/strapi?for=frontendisti-brno
Plná animace včetně skrytých snímků https://youtu.be/QuBJf_tLbBo
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
2. Proč jsem před dvěma lety
zvolil Foundation?
• Vývoj webů v prostředí jazyka Ruby on Rails
• LESS nebo SASS?
• Výběr “grid-system” ze stávající nabídky;
malá nabídka responsivních frameworků
• Front-end framework, který půjde nejsnadněji
integrovat do aplikací v Ruby on Rails
3. V čem už je řadu let
vyjímečný?
• Dlouhou dobu podporuje Mobile first
• Nemusíme použít všechny komponenty
• Dobře zdokumentovaný
• Pouze základní design
pro snadné redesignování
• Řada odladěných pluginů
4. Dálší zajímavé vlastnosti
• Integrovaný fastclick.js
• Připravené SASS mixiny můžeme dále
používat (ukázka dále)
• Plugin pro Sublime Text ulehčí psaní
• Nenabízí kolekci fontových / SVG ikonek
5. Připravené rozmezí pro media queries
small - 641 px - medium - 1025 px - large
(hodnoty přepočítané při základním písmu 16 px)
!
k dispozici i 2 další breakpointy pro veliké monitory
6. Interchange
• Plugin, který mohou jiné nástroje pouze
závidět
• Využívá media queries k dynamickému
načítání obsahu
• Příklady využití: načítání obrázků, načítání
mapy
8. Ve výchozím nastavení se
mně nelibí :-(
• Aplikuje styly na všechny výskyty následujících
prvků bez použití speciálních tříd:
• tabulky <table>
• formuláře <form>
• speciální typografické styly na všechny základní
HTML tagy jako <h1>, <h2>, <p> apod.
• Lze manuálně vypnout a nastavit na konrkétní třídy
9. Rozdíl mezi Foundation 4 a 5
• Zurb Foundation 5 nepodporuje IE 8
• V ČR je třeba stále zvážit zda nepoužít verzi 4
• IE8 nepodporuje:
• REM jednotky
• Media queries
• HTML5 tagy
• Foundation 4 se už nadále nevyvíjí
10. Kdy Foundation nepoužiji?
• Potřebuji pouze mřížku
• Zbytečné používat framework, jehož
komponenty stejně povypínám
• Existují pěkné alternativy:
• Jeet Grid System - Bower, Yeoman generátor
http://jeet.gs/
• Gridle - Bower http://gridle.org/
11. Kdy Foundation nepoužiji?
• Nedá dohodnout s grafikem
• Grafik odmítá připravit design pro hotové
komponenty Zurb Foundation
12. Metodika B.E.M.
<form method="get" action="/search" class="search">!
<label class="search__label">!
Hledaný text!
<input type="text" name="search" class="search__field" />!
</label>!
<input type="submit" value="Vyhledat" class="search__action"/>!
</form>
• Foundation klade důraz na sémantiku - ?
• Metodika BEM není podporována
• Vlastní systém tříd lze dodefinovat za použití
SASS mixinů
15. @import "foundation/components/grid";!
!
.layout {!
// Na `layout` aplikujeme styly řádku z Foundation!
@include grid-row();!
!
.layout-content {!
// Mobile-first: uděláme `layout-container` 100% široký!
@include grid-column(12);!
!
// Na tabletech a větších zařízení uděláme `layout-container` 9 sloupců široký!
@media #{$medium-up} {!
@include grid-column(9);!
}!
}!
!
.layout-sidebar {!
// Mobile-first: uděláme `layout-sidebar` 100% široký!
@include grid-column(12);!
!
// Na tabletech a větších zařízení uděláme `layout-sidebar` 3 sloupce široký!
@media #{$medium-up} {!
@include grid-column(3);!
}!
}!
}
16. Jak postupuji já?
• Nepoužívám předkompilované CSS
• Zdrojové SCSS na github.com/zurb/foundation/
• Nastavím základní proměnné: fonty, základní
barvy
• Povypínám zbytečné moduly - JS i SCSS
17. Zkušenosti s integrací do
Drupalu
• Drupal - redakční systém
• Snadnou integrace pomocí instalace modulu
• K dispozici další moduly umožňující
integrovat jednotlivé komponenty z
Foundation - fotogalerie, Interchange