CSS - Strona 9 - Kody, triki, sztuczki

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.

Czytaj dalej

8 maj 2019

Prosty hamburger w js

Dzisiaj coś prostego, czyli hamburger menu.

Najpierw html:

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

Czytaj dalej

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 😉

Czytaj dalej

18 kwi 2019

Kolumny w css oraz szukanie w html

Powiedzmy że mamy bardzo długą listę linków. Chciałbym aby ta lista łamała się na 2, 3 a może więcej kolumn. W naszym przykładzie lista będzie składać się z 20 elementów.

Taką listę można uzyskać przez emmet aby nie klepać tego samodzielnie wystarczy wpisać ul#ul>li{text $}*20

<ul id="ul">
  <li>text 1</li>
  <li>text 2</li>
  <li>text 3</li>
  <li>text 4</li>
  ...
</ul>

Chciałby aby ta lista została podzielona na dwie kolumny. Do tego użyjemy column-count Które jest wpierane nawet przez IE od wersji 10
Oczywiście też trochę upiększymy wygląd naszej listy.

Czytaj dalej

14 kwi 2019

Optymalizacja wordpress - pobranie js i css z hash

W poście poniżej opisałem jak usunąć "?ver" ze statycznych linków - [ tutaj ]
Po tej zmianie pojawił się problem z "cashowaniem" plików. Rozwiązanie jest dość proste.

W związku z tym że do generowania plików użyty został "gulp" oraz biblioteka "gulp-rev" za pomącą której do nazw plików dodany jest hash - style-ecf06381de.css

Problem jaki napotykamy to jak wczytać pliki css i js w wordpressie, które za każdym razem gdy zmieniamy coś we frontendzie mają inną nazwę.
Na potrzeby tego bloga stworzyłem poniższą funkcję.

/**
 * match file name
 */
function kodywig_matchFile($partOfName, $folder)
{
  $handler = get_template_directory() . '/assets/' . $folder;
    $openHandler = opendir($handler);
    while ($file = readdir($openHandler)) {
      if ($file !== '.' && $file !== '..') {
        if (preg_match("/^" . $partOfName . "\w+.(" . $folder . ")/i", $file, $name)) {
	  return $name[0];
	}
      }
    }
    closedir($openHandler);
}

Do powyższej funkcji przekazywane są dwa parametry, pierwszy $partOfName czyli cześć nazwy. Drugi parametr $folder czyli gdzie znajduje się nasz plik css|js

Najpierw budujemy ścieżkę do folderu, później w pętli wyciągamy nazwę pliku przez preg_match i zwracamy nazwę z dopasowania.

Czytaj dalej