:sparkles: PWA :sparkles:
Twarz autora bloga

Piotr Kowalski

Organizator WarsawJS Trener YouTuber

DevMeetings: Responsive Web Design [Relacja Live]


Dziś DevMeetings zawitał do stolicy! Temat: Responsive Web Design

Miejsce: Golden Floor Sky al. Jerozolimskie 123A (26 piętro), Warszawa
Prowadzący: Hubert Burdach z Front-Stream - responsivehero.com/
Skład: 30 osób (w tym 4 damy)

Responsive Web Design - temat bardzo 'na czasie'. Każda szanująca się firma o profilu webdeveloperskim posiada responsywne portfolio.

Przykłady:

Przykłady innych stron:

Baner reklamujący artykuł

9:00

  • Rozpoczęcie szkolenia! Po 2 latach przerwy :smile:

9:07

  • prezentacja IT Crowd - Krzysztof Miksa
    • founded in 2011
    • 7 developers
    • 50% remote workers
    • web applications
    • Back-end systems
    • enterprise systems
    • messaging soluctions
    • cloud computing
    • business process management
    • big data
    • ERP
    • Java

9:26

  • styletiles.html - wszystkie możliwe komponenty prosto od designera, dla klienta, aby nie wysyłać *.psd'ków

9:28

  • zaczynamy przygodę z RWD!

9:34

  • jednostki: px, %, em, rem
  • em - względem kontenera w którym się znajdują
  • rem - względem korzenia (>html<)
  • target / context * 100 - pixele na procenty

9:38

  • rem - nie możemy używać poniżej IE8

9:41

  • Firefox - opcja "Powiększ tylko tekst" - różnica pomiędzy px i em

9:43

  • co to jest BEM? Block Element Modifier - http://bem.info/method/
  • długie nazwy CSS Class
  • wydzielamy:
    • bloki np. box
    • elementy - np. box__element
    • modyfikatory - np. box box--wide
    <!-- BLOCK -->
    
    <div class="box"></div>
    
    <!-- ELEMENT -->
    
    <div class="box">
        <div class="box__element"></div>
    </div>
    
    <!-- MODIFIER -->
    
    <div class="box box--wide">
        <div class="box__element"></div>
    </div>

9:46

  • nie zwiększamy specifity selectora, rozwiązaniem jest BEM!
    .username {
        background: red;
    }
    
    .login-box .status .username {
        background: green;
    }

9:50

  • LESS, SASS, Compass - http://css-tricks.com/sass-vs-less/
  • SASS - placeholdery, są kompilowane w momencie kiedy są one potrzebne - prawdopodobnie nowy temat DevMeetingu!

10:00

  • pierwsze zadanie - konwersja pixele na remy i emy

10:20

  • Media Queries - kolejne zadanko

10:22

  • Reflector - narzędzie do duplikowania ekranu

10:24

  • ustawienie viewport
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • iPad & iPhone domyślnie ma 981px
  • operator not tylko przed media types (np. screen, print, all, projectos)
  • media queries features np. min-width, max, width
  • można definiować media type przy tagu
    <link rel="stylesheet" type="text/css" href="02_mq_03.css" media="screen and (min-width:600px)">
  • zawsze pobierze plik - każda przeglądarka

10:36

  • media type only - przeglądarki, które nie rozumieją media queries, zapis umowny, może być "xxx"
    @media only screen, (min-width: 960px) {
        body { background: red; }
    }
  • czy pisać media queries w pikselach? przy resize'owaniu font'a ma to znaczenie, gdy mamy zdefiniowany media queries w em'ach
  • co jest browser nie wspiera? Z pomocą respond
  • CSS3 w arkuszach dla IE6 selectivizr

10:43

  • wykrywanie w JS czy browser wspiera media queries?
    window.matchMedia("(min-width: 768px)").matches
  • eCSSential - dołączanie plików css tylko dla konkretnych warunków, reszta plików jest ściągana asynchronicznie

10:50

  • quickconcat - ściąganie jednego pliku *.php który będzie miał zawartość innych plików

10:55

  • przerwa... uff, pora na ciasteczko :smile:

11:20

  • zadanie z media queries - dodanie zachowania dla 960px

11:39

  • pierwszy! - prezentuję swoją przeróbkę przed grupą najlepszych developerów

11:42

  • Mobile First / Mobile Last (Desktop First)

11:44

  • każdy chwali się swoim doświadczeniem
  • przekrój developerów jest ogromny, są i programiści Javy, Ruby (Rails) oraz typowi Front-end-owcy i designerzy
  • doświadczenie niektórych jest bardzo duże, swoje

11:59

  • patterny do nawigacji
    • of canvas pattern - menu wyjeżdża z lewej strony
    • zamiast menu zastąpienie go <select>'em
    • footer navigation - nawigacja na dole strony (link na górze przenosi nas niżej)
    • hamburger pattern
    • do nothing approach

12:03

  • trzecie zadanko - menu "of canvas pattern"

12:36

  • pierwszy - kolejny raz :smile:
  • prezentuje swoje mini dzieło całej grupie
  • nie robi to piorunującego wrażenia ale zadanie zrealizowane!

12:43

  • coffee break! ... pora na ciasteczko!

13:00

13:10

13:17

  • pizza time - wszyscy szybko pobiegli za jedzeniem... biegnę i ja, jednak tylko na ciasteczka :smile:

13:50

14:10

  • prezentacja nt. flexbox'a otwiera mi szeroko oczy na projektowanie interfejsu
    .flex {
        display: flex;
        flex-direction:row;
    }

14:25

  • czwarte zadanie - responsywny slider

14:35

  • jak zrobić responsywne obrazki?
    <img src="http://placebear.com/200/300" alt="" />
    img { max-width: 100% }
  • ale co jeśli obrazek ma określone wymiary?
    <img src="http://placebear.com/200/300" alt="" width="200" height="300" />
    img { max-width: 100%; height: auto; }

14:51

  • prosty temat (responsywny slider) ale jednak mnie przerósł :smile:
  • wierzę, że po zakończeniu warsztatów zasiądę do projektu kolejny raz ale produkt będzie spełniał oczekiwania!
  • ciekawe kto zaprezentuje swoje dzieło? może jakaś pani?

15:01

  • przykład z iosSlider
  • translate3d korzysta z akceleracji sprzętowej, przerzuca process z CPU na GPU
  • ale nie robimy z * translate3d
  • Safari ma w sobie remote debugger, gdy urządzenie Apple jest podłączone
  • ghost lab
  • wayne dalton remote control
  • www.browserstack.com
  • prosta biblioteka do rozwiązać hammer.js

15:20

  • jeśli jest powyżej 15-20 to musimy wyłączyć kosztowne efekty wizualne
    • Show paint rectangles
    • Force accelerated compositing / Enable continuous page repainting
  • badanie performance DevTools
    .box {
        position: fixed; /* ciężkie dla przeglądarek */
        -webkit-transform: translateZ(0); /* solucja */
    }
  • przeglądarka pobiera obrazek kiedy potrzebuje, np. media queries to stwierdzają
  • display: none; pobiera zawsze obrazki
  • background-image: -webkit...
  • picturefill.js polyffil dla tagu >picture<
  • działa tylko w nightly Google Chrome:
    <img srcset="" alt="" />
  • css-tricks.com/foresight-js/
  • font-family i content - możemy przekazać dowolny string
  • resrc.it/
  • mobify.com/mobifyjs/ - proces capturingu
  • ress.io/
  • github.com/adamdbradley/focal-point

15:41

  • lekkie zmęczenie materiału
  • resizowanie tła: background-size: (cover, auto 100%, 100% auto, 100% 100%)

15:44

  • padding-bottom - szerokość / wysokość * 100 px
  • obliczanie po stronie serwera
  • appelsiini.net/projects/lazyload
  • nie trafimy lini czytania na mobile
  • nie mamy repaint & reflow

15:46

  • przerwa na wodę :smile:

16:01

  • ostatnia część
  • -webkit-overflow-scrolling: touch;
  • -webkit-column-count: 3;
  • -webkit column-style: 1px solid red;
  • pomiędzy 45 a 75 jest najlepsze do czytania oraz do 10 słów
  • przydatne narzędzie: http://nerd.vasilis.nl/code/measure-help/
  • zmiana układu strony dla różnych języków:
    :lang(de) div {
        -webkit-count-column: 2;
    }
  • nowa dyrektywa:
    .par {
        font: -applce-system-body; /* domyślna czcionka w iOS7 */
    }
  • w iOS7 wprowadzono dynamiczne fonty, jeśli w ustawieniach urządzenia zmienimy rozmiar będzie to aktywne na wszystkich stronach z poprzednią dyrektywą
  • icomoon.io/
  • nowy iOS wprowadza "ulepszenia":
    .foo {
        -webkit-font-smoothing- antialiased;
        -moz-osx-font-smoothing- grayscale; /* OS X domyślnie pogrubia niektóre elementy elementy */
    }
  • text-rendering: optimizeLegibility
  • l20n.org/
  • Network Link Conditioner - spowolnienie łącza na macOS
  • ładowanie fontów - WebFontConfig

16:37

  • pattern dla przeglądania tabelek:
  • thead, tbody, tfooter - display: block
  • tbody - overflow: scroll

16:42

  • skalowanie materiałów wideo - fitvidsjs.com
  • wykrywanie feature-rów: modernizr, has.js
  • konfiguracja r.js:
    ...
    has: {
        "audio-mp3": true // dołącza tylko te warunki, które są spełniane
    }
    ...

17:00 - Koniec szkolenia

To było niesamowite, znowu poczuć się na warsztatach DevMeetings, choć nie było niestety, autora tego zamieszania Piotra Zwolińskiego, ani żadnego baneru reklamowego DevMeetings.

Dziękuję serdecznie, za mocne przygotowanie teoretyczne oraz praktyczne.

PS. Na dodatek ten certyfikat robi wrażenie: