To nejlepší z WebExpa 2016

Letošní WebExpo, stále možná největší webová konference ve střední Evropě, probíhala v krásném prostoru pražské Lucerny. I když je tato podzemní stavba krásnou exkurzí do pozdní secese a raného modernismu, prostor není úplně ideální pro pořádání konference této velikosti. Nicméně i přes prostorové nedostatky bylo na Webexpo k vidění a slyšení mnoho kvalitních přednášek. A s User Technologies jsme byli u toho. Vybrali jsme to, co bylo podle našeho názoru na konferenci nejlepší.

Jan Kvasnička — Nejčastější chyby při návrhu mobilního a responzivního webu prakticky

Přednáška z hlediska UX, kde autor ukázal opravdu vyčerpávající seznam chyb na mnoha českých e-shopech. Smutně nás pobavil například web společnosti IKEA, která patří v nepoužitelnosti mobilního webu na přední příčky. Přednáška obsahovala i množství rad a tipů, jak mobilní verze webů dělat lépe, takže nešlo jen o bezhlavou kritiku. Jan Kvasnička strávil přípravou na přednášku hodně času a kromě přednášky samotné sepsal o tomto tématu i skvělý, byť trochu vyčerpávající článek. Určitě stojí za přečtění! http://blog.kvasnickajan.cz/prakticky-pruvodce-nejcastejsimi-chybami-pri-navrhu-mobilniho-a-responzivniho-webu/

Ukázka nepovedené úvodní stránky IKEA. Doporučuji povšimnou si duplicitních modrých tlačítek “Přihlašte se” a “Přihlásit se”, společně s informací o cookies, která nejde zavřít. (© Jan Kvasnička)

Tomasz Ducin — JavaScript + Java = TypeScript

Tomasz hezky popsal v čem je TypeScript dobrý, které problémy vyřešit nedokáže a které sám způsobuje. Přirovnal TypeScript k jazyku někde mezi JavaScriptem a Javou. Z Javy si bere silnou typovost, OOP a třídy. JavaScriptu se TypeScript podobá díky asynchronnosti, jednovláknovosti, funkcionánímu programování a také podporou jazyka na klientské i serverové straně. Také bylo řečeno, proč je CoffeeScript mrtvý, proč ES6 nestačí a proč je TypeScript nejlepší volbou, co v JavaScriptu, co v současné době máme (jen pro info, někteří tvrdí, že nejlepší volbou je Elm).

Přednáška se nesnažila přinést za každou cenu nové informace o této technologii, ale spíše přehledně shrnula argumenty, proč používat právě TypeScript.

http://slides.com/ducin/javascript-plus-java-equals-typescript-webexpo

JavaScript fatigue. Správně vybrat technologie v JS není vůbec jednoduchý problém. (© Tomasz Ducin)

Harry Roberts — Refactoring CSS Without Losing Your Mind

Refaktorování CSS trápí snad každého, kdo s CSS někdy přišel do styku. Udržovat jej na velkém projektu je bez striktních naming konvencí a pravidel psaní kódu velmi problematické a samotné refaktorování je noční můrou každého kodéra. Harry Roberts pěkně shrnul obecné postřehy, jak refaktorovat CSS, řekl nám, že si máme vytvořit soubor “shame.css”a do něj dávat styly, na které nejsme pyšní (například, když použijeme “!important”). Postupem času bychom měli tento soubor zmenšovat a styly předělávat do lepší formy.

Zajímavou vlastností, kterou můžeme při refactoringu využít je také nastavení všeho na původní hodnoty pomocí “all: initial”. Mnoho z popsaných zásad se navíc nevztahuje pouze na CSS, ale je možno je aplikovat i na refaktorování v ostatních jazycích. Týkají se například toho, že bychom měli vždy raději refaktorovat kód po menších částech a nesnažit se přepsat celou aplikaci najednou, což autor popsal pěkným příměrem k tunelu, na jehož konci bychom vždy měli vidět světlo.

Harry nás také seznámil se svým kamarádem, který se z pozemního inženýra změnil v programátora a podnítil ho k zajímavému zamyšlení:

Refactoring is a second chance that most industries don’t get.

Proto se radujme, že můžeme refaktorovat. Architekti, stavaři a většina dalších oborů toto štěstí nemají. Jakmile jednou jako stavební inženýr postavíte most, pravděpodobně už nebudete mít šanci jej opravit nebo předělat, protože jste v prvním projektu s něčím nepočítali.

Celé Harryho video i se slidy je možno zhlédnout zde: https://slideslive.com/38898201/refactoring-css-without-losing-your-mind

Vu Hoang Anh — The price of not selling your company

Byznysovým přednáškám jsme se většinou jakožto vývojáři vyhýbali, ale nutno říci, že povídání od člověka, s jehož podpisem nám chodí newslettery z Avocode, nás hodně zajímalo. V Avocode máme mnoho kamarádů a rádi jejich produkt používáme. Vu je zjevně dobrý a velmi vtipný řečník. Vyprávěl nám příběh o tom, kdy kvůli nákupu piva málem nestihli let za investorem do USA. Také jsme zjistili, že Avocode se dá rozepsat na “A vo co de?”

Rachel Andrew — The right layout tool for the job

Pravděpodobně nejzajímavější přednášku na celém WebExpu měla Rachel Andrew. Působí jako přizvaná expertka v organizaci CSS Working Group a je držitelkou licence Google Developer Expert for Web Technologies.

Rachel začala povídáním o Flexboxu, dnes už relativně hojně používaném způsobu rozvrhování prvků na stránce. Zdůraznila však, že Flexbox není ideální na každý typ layoutu, má i některé nevýhody, jako je větší náročnost na výkon a proto vznikl CSS Grid Layout.

Zaskočila nás informace, že s Grid Layoutem přišli vývojáři z Internet Exploreru, nicméně podle Rachel odvedli velice dobrou práci. Bohužel Internet Explorer a Edge je zatím v podstatě jediným prohlížečem, který Grid Layout podporuje (ostatní browsery již podporu také obsahují, ale zatím jen jako experimentální technologii, kterou si uživatel musí explicitně zapnout). Nicméně to se má brzy změnit a začátkem příštího roku by podle Rachel měla být tato funkcionalita běžně použitelná.

CSS Grid Layout přináší mnoho zajímavých možností, které jsme zatím v CSS marně hledali a museli jsme je řešit složitými CSS hacky nebo nedej Bože přes JavaScript. Vůbec nejvíce nás zaujala vlastnost “grid-flow: dense”, která dokázala optimalizovat seřazení prvků v gridu tak, aby v něm nevznikaly mezery.

Ukázka CSS Grid Layoutu s použitím vlastnosti“grid-flow: dense”, která optimalizuje zarovnání jednotlivých elementů v gridu. Toto nešlo řešit jinak než přes JavaScript. (© Rachel Andrew)

Velmi zajímavou ukázkou od Rachel byly také Feature Queries. Pomocí nich můžeme v CSS ověřit, zda prohlížeč podporuje danou vlastnost a přizpůsobit si podle toho styly.

@supports(display: flex){
.has-grid{
display: block;
}
)

Celá přednáška od Rachel, včetně odkazů na další zajímavé zdroje, je k dispozici zde: https://rachelandrew.co.uk/speaking/event/webexpo-2016

Benjamin Keyser — From Pages to Threads: Designing the future of Messaging

Komunikace přesMessenger už brzy nebude jen o posílání zpráv ostatním lidem (© Benjamin Keyser)

Zajímavým nahlédnutím do (nedaleké) budoucnosti byla přednáška Benjamina Keysera o nových možnostech využití messengeru. Ukázal například, jak by mohlo vypadat objednání jídla v restauraci McDonald’s. Uživatel otevře seznam kontaktů a vyhledá McDonald’s. Aplikace zná jeho aktuální polohu, a tak mu po zahájení konverzace ukáže seznam nejbližších restaurací a naviguje ho na místo. Během cesty uživatel vytvoří objednávku a rovnou zaplatí — vše v okně messengeru. Po příchodu do restaurace si už jen jídlo bez zbytečného zdržování vyzvedne a může se pustit do jídla.

Více je možné dočíst se v jeho článku: https://blog.intercom.com/killer-feature-messaging-no-ones-talking/

Bruno Imbrizi — There is also canvas

O skvělou tečku na konec se postaral Brazilec, který prý neumí hrát fotbal — Bruno Imbrizi a hlavně jeho skvěle připravené slidy. Tato přednáška patřila mezi ty inspirativní přednášky, kdy máte chuť sednout si k počítači a pustit se rovnou do programování (to jsme také s kolegy po přednášce udělali).

Bruno ukázal po krocích interaktivní demo toho, jak snadno se dá v canvasu vytvořit složitá animace. Také ukázal svoji práci na projektech jako web pro film Kingsman a několik dalších komerčních výzev. Velmi zajímavé byly mimo jiné i jeho zmínky o nástrojích pro designery, které vyvinul vždy pro konkrétní projekt a situaci (například rozhraní, ve kterém mohl grafik naklikat trasu, kudy pak projíždělo animované auto).

Celá přednáška včetně interaktivních ukázek je k dispozici zde: https://brunoimbrizi.github.io/webexpo-2016/dist/

Canvas umí skoro všechno (© Bruno Imbrizi)

Na závěr se hodí dodat ještě jeden inspirativní citát, který jsme zachytili na WebExpu:

Good code is like a good joke. It needs no explanation.

A které přednášky se líbily vám?

Autoři: Jan Václavík & Martin Doubek & Dan Rys