Mały przerywnik, coś miłego dla oka - animacja kart.
Każda z kart składa się z nagłówka w którym jest ikona, oraz sekcji z opisem i buttonem "więcej". Powiedzmy 3 karty w rzędzie a gdy zmniejszymy stronę karty ustawiają się w pionie.
Zacznijmy od ikon, tutaj opisałem dokładnie jak dodajemy obecnie ikony svg do strony - nowy sposób serwowania ikon SVG
Najpierw ikony które dodajemy na górze strony.
Poniżej wygląd tekstu jaki chcemy uzyskać.
Będą to dwa przykłady. Pierwszy w czystym css, nie będzie kompatybilny ze starymi przeglądarkami czyli IE11 i niżej, druga zaś będzie wersją opartą na SVG + javascript i co najzabawniejsze działa nawet w IE9 przetestowane 😉
Wielkość czcionki będzie ustawiania dynamicznie za po pomocą vw - viewport width, na temat jednostek polecam skarbnicę wiedzy w postaci tej strony developer.mozilla.org
W obecnym świecie frontendu wszystko zmienia się bardzo szybko. Powstaje mnóstwo nowych bibliotek, pluginów, framewoorków css czy js. Minęły czasy w których używało się notatnika do pisania stron 😉
Narzędzie które dzisiaj opiszę to PostCSS. Tak naprawdę najważniejszą częścią tego narzędzia są dodatki, pluginy których są setki.
Do czego można to wykorzystać, a no do miliona rzeczy 😉 Najczęściej używany plugin prze zemnie to autoprefixer.
Co on nam daje, a no to że nie musimy martwić dodawaniem prefiksów. Powiedzmy piszemy display: flex; a w wyniku dostajemy display: -webkit-box;display: -ms-flexbox;display: flex; Oczywiście zależne to jest od tego co ustalimy w package.json
Trochę zagmatwany tytuł ale nie mam pojęcia jaki inny byłby adekwatny dla tego problemu, jakieś sugestie?
Najpierw opiszę co mi jest potrzebne, chcę co jakiś interwał czasowy odpalać funkcję. W ciągu powiedzmy 8 godzin muszę odpalić tą funkcję 40 razy.
Funkcja musi mi zwrócić tablicę liczb w milisekundach, bo będę używał setTimeout. Oczywiście tablica ma być posortowana. I najważniejsza część tej zagwozdki te liczby nie mogą się powtarzać.
Coś na szybko a mianowicie pobranie losowej linii z pliku w nodejs.
Nasz plik wygląda tak jak poniżej.
github
gmap
google
google adsens
grid
gulp workflow
hamburger
hex na rgb
hosting
htaccess
html
httpPlik ten powiedzmy że będzie nazywać się words.txt Teraz czas na js, plik nazwiemy getRandomLine.js