4 Cze 2019

Czy justować tekst na stronie www?

Od razu odpowiem – NIE JUSTUJE SIĘ TEKSTU na stronach www.
Już tłumaczę dla czego, tego nie powinno się robić.

Obecnie wszystkie strony powinny być RWD (responsive web design), czyli najprościej tłumacząc szerokość stron jak i elementy stron dostosowują się do urządzeń automatycznie.
Justify bardzo dobrze się sprawdzało jeszcze kilka lat temu gdy nikt nie wiedział co to RWD i strony budowało się na szkielecie ‚table’ ach te czasy 😉

Tak jak w książce czy czasopiśmie mogliśmy łamać tekst dowolnie, aby to ładnie wyglądało, przenosić spójnik i przyimki do nowej linii, tak teraz jest to niemożliwe. Bo jeżeli wstawimy nową linię to po zmniejszeniu strony może się okazać i na pewno się okaże że koniec zdania wypadnie nam na środku strony, a chyba o to nam nie chodzi.

Budując strony staramy się aby tekst był dynamiczny, a dokładnie aby czcionka lub jak kto woli font 😉 zmieniała wielkość w zależności od szerokości strony. Zakłada się, że czcionka powinna mieć minimalnie 16px.
Poniżej umieściłem przykład tego jak źle wygląda tekst, który posiada 2 kolumny i jest justowany.

Czy widzieliście takie odstępy w książce czy czasopiśmie, na pewno nie. Wygląda to źle i bardzo męczy wzrok przy dłuższym czytaniu.

Przy budowaniu strony powinniśmy zwrócić na kilka istotnych elementów wpływający na komfort czytania.
Wypunktuję może kilka z nich i opiszę dla czego to takie ważne.

Wybieramy odpowiednią czcionkę.

Niestety ale urządzenia na których czytamy w większości mają powłokę błyszczącą, czytamy w słońcu, w ciemnym pomieszczeniu itp. Więc czcionka powinna być czytelna, nie tylko wielkość ale także kolor i krój ma znaczenie.
Na szczęście coraz rzadziej ale nadal się zdarza że „domorośli graficy” nie tylko używają po 10 różnych rodzajów czcionek, ale także czasami używają czcionki do których potrzebna jest licencja i to dość droga bo o tym oczywiście nie wiedzą 🙂

Rozmiar ma znaczenie

Czcionka którą wybierzemy musi być czytelna, odpowiednio dobrana wielkość czcionki to rozdzielczości ekranu. Tak jak wyżej pisałem 16px obecnie to minimum.
W jednym wierszu powinno być około 50-80 znaków. Szerokość elementów z tekstem to maksymalnie 960px. Oczywiście to tylko zalecenia.

Interlinia

Równie ważną rzeczą jest interlinia czyli odstęp między wierszami. Zależna jest ona od wielkości czcionki, rodzaju itp. Najlepiej jak by interlinia zmieniała się wraz z wielkością czcionki przy zmienianiu szerokości strony. Do tego możne użyć [ kalkulatorów online ] gdzie podajemy szerokość strony, rodzaj czcionki i font-size. W wyniku otrzymujemy line-height czyli interlinię.

Kontrast

Czcionka powinna być czytelna, tak samo jak kolor tła powinien być odpowiednio dobrany, tak aby czytanie nie męczyło nam wzroku.
Czasami możemy dodać możliwość zmiany koloru tła a wraz z nim koloru czcionki. Np. na youtube można ustawić kolor strony na ciemny. Warto sprawdzić czy użycie kolorów czcionki i tła jest odpowiednie, można to sprawdzić np. na tej [ stronie ]

To tylko kilka zasad którymi się kieruję przy projektowaniu strony. Oczywiście każdym ma swoje podejście do tego, ale sądzę że to najważniejsze elementy, które należy uwzględnić.
Nic tak nie drażni jak powiększanie strony, aby móc ją przeczytać 😉

28 Maj 2019

Dynamiczne ładowanie plików JavaScript

Większość użytkowników ma określony cel przeglądając witrynę. Na przykład jeden użytkownik może chcieć przeglądać katalog produktów tylko po to, aby zobaczyć, co masz w sklepie. Nie jest mu potrzebny kod js w zakładce „pokaż recenzje” bo tam po prostu nie trafi. Więc serwowanie kodu z całej witryny mija się z celem.

Jeżeli chcesz tworzyć szybkie witryny, musisz przesłać jak najmniej JavaScript do przeglądarek. Pobieranie pakietu JavaScript wymaga nie tylko czasu, ale przeglądarka musi także wyodrębnić kod i przeanalizować go, co również zajmuje dużo czasu.

Powolne działanie witryny sprawia, że użytkownicy odchodzą, optymalny czas ładowania strony to maksymalnie 2-3s. Takie podejście serwowania kodu w małych paczkach jest również dobre dla SEO – Google bardzo lubi szybkie strony ;).

To co powinieneś zrobić, to wysłać tyko JavaScript, którego użytkownik potrzebuje do przeglądania i interakcji z odwiedzanymi stronami. W ten sposób witryna ładuje się znacznie szybciej.

Takie ładowanie możemy przygotować za pomocą webpacka i dynamicznego ładowania.

Gdy korzystasz z importu dynamicznego, wstawiasz minimalną ilość javascirpt na stronie i ładujesz resztę dynamicznie, gdy i jeśli użytkownik tego potrzebuje.

Nasz przykład będzie bardzo prosty, na środku strony będzie znajdował się przycisk po kliknięciu którego zmienimy kolor tła strony. Kliknięcie spowoduje załadowanie pliku js który to właśnie zmieni nam to tło.

Jak skonfigurować dynamiczny import pakietów internetowych w webpack

Zacznijmy od webpacka. Mam nadzieję że wiesz jak instalować pakiety npm?. Masz zainstalowane node?. Jeśli nie, no cóż, może kiedyś powstanie jakiś artykuł. Na obecną chwilę polecam [ artykuł ].

Inicjalizacja projektu. Ja używam yarn, oczywiście nic nie stoi na przeszkodzie użycie npm.

yarn init -y
15 Maj 2019

IntersectionObserver czyli lazy loading

IntersectionObserver – w prosty sposób można opisać że jest to API za pomocą którego można wywołać zdarzenie, gdy element zniknie lub pojawi się w obrębie naszego ekranu, a jeszcze prościej na przykładzie np. galerii zdjęć. Wczytać tylko tyle zdjęcia które pojawią się w polu widzenia naszego okna.

Czyli nie ładujemy powiedzmy 100 zdjęć tylko doczytujemy pojedyncze zdjęcia przy skrolowaniu. Do tej pory wykorzystywaliśmy pluginy które nam to ułatwiały.

IntersectionObserver można wykorzystać nie tylko do wczytywania zdjęć, ale np. filmów, treści wszystko to dzieje się asynchronicznie.

Np. film włączony na stronie jeżeli zaczniemy przewijać i zniknie nam z „widoku” zostanie zastopowane odtwarzanie. Jeżeli ponownie się pojawi zostaje wznowione jego odtwarzanie.

Niestety jest jeden problem, w związku z tym że jest to nowa technologia nie jest obsługiwana przez starsze przeglądarki. Zerknijcie na [ Caniuse ] Sami sprawdźcie.

Żyjemy w czasach polyfill i na to również jest, działa nawet w IE7 😉 [ github ]

Dobra zaczynamy, najpierw mamy listę zwykłych obrazków a do tego możemy również wykorzystać picture

<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
...
8 Maj 2019

Prosty hamburger w js

Dzisiaj coś prostego, czyli hamburger menu.

Najpierw html:

<button class="hamburger">
  <div class="hamburger-center"></div>
</button>

Następnie style. Tutaj wykorzystam jak zwykle scss bo niech ktoś mi powie czy jest jeszcze jakaś osoba na Świecie nie korzystająca z preprocesorów css 😉

.hamburger {
  position: relative;
  padding: 35px;
  background-color: #00aeff;
  border: 1px solid lighten(#000, 90%);
  cursor: pointer;

  &.is-open {
    .hamburger-center {
      background-color: transparent;
      transition: background-color 0.25s ease-in;
    }

    &::before {
      transform: translateY(0) rotate(45deg);
      transition: transform 0.25s ease-in;
    }

    &::after {
      transform: translateY(0) rotate(-45deg);
      transition: transform 0.25s ease-in;
    }

  }

  .hamburger-center {
    position: absolute;
    content: '';
    width: 40px;
    height: 3px;
    background-color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%);
    transition: background-color 0.5s ease-in;
    z-index: 9999;
  }

  &::before,
  &::after {
    position: absolute;
    content: '';
    width: 40px;
    height: 3px;
    left: 15px;
    top: 50%;
    margin: auto;
    background-color: #fff;
    z-index: 9999;
  }

  &::before {
    transform: translateY(10px) rotate(0);
    transition: transform 0.25s ease-in;
  }

  &::after {
    transform: translateY(-10px) rotate(0);
    transition: transform 0.25s ease-in;
  }
}
2 Maj 2019

Dodanie shadow podczas scroll – overflow

Podstawowe założenia:
1. Cień z prawej strony, jeżeli scroll jest na pozycji skrajnej lewej.

2. Cień z lewej strony, jeżeli scroll jest na pozycji skrajnej prawej.

3. Cień po lewej jak i prawej stronie równocześnie, gdy skroll się porusza 😉

Najpierw html

Budujemy div w którym dodajemy nasze elementy.

<div id="scrollbox">
  <ul id="myDIV">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
  </ul>
</div>

Cień w za pomocą styli

Teraz nasz styl. Za jego pomocą wszystkie elementy li są w jednej linii.

#scrollbox {
  overflow-x: auto;
  width: 500px;
  max-height: 220px;
  margin: 50px auto;
}

#scrollbox ul {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
  min-width: 100vw;
  height: 130px;
  margin: 0;
  padding: 0;
  list-style: none
}

#scrollbox ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-width: 130px;
  border: 1px solid red;
  margin: 0 2px
}
1 2 3 15