25 cze 2019

HEX na RGB

Teraz coś małego ale jakże przydatnego. Konwersja HEX koloru np. #00a1ff na RGB.

function hexTorgb(fullhex) {
  const hex = fullhex.substring(1,7);
  return {
    R: parseInt(hex.substring(0,2), 16),
    G: parseInt(hex.substring(2,4), 16),
    B: parseInt(hex.substring(4,6), 16)
  }
}

A wywołanie to zwyczajne przekazanie stringa do funkcji.

console.log(hexTorgb('#00a1ff')); 
// => {R: 0, G: 161, B: 255 } w wyniku mamy obiekt

Oczywiście nic nie stoi na przeszkodzie aby modyfikować tą funkcję.

4 cze 2019

Czy justować tekst na stronie www?

Czy justować tekst na stronie www?

Od razu odpowiem - NIE JUSTUJE SIĘ TEKSTU na stronach www.
Już tłumaczę dlaczego, 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 😉

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.

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 te 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.