16 Gru 2019

Gradient text CSS/JS

Poniżej wygląd tekstu jaki chcemy uzyskać.
gradient text in svg
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

12 Gru 2019

PostCSS narzędzie do przekształcania CSS w JavaScript

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

20 Lis 2019

Jak usunąć nadmiarowy css, tailwindcss, purgecss oraz postcss

Każdy wie, że największą bolączką obecnych stron jest nadmiarowość wszelakiego kodu. Często same style dochodzą do 1MB a gdzie reszta, DOM, obrazki, skrypty, analityka google, reklamy? Do tego wszystkie te pliki css, js itd. ładowane są za jednym razem.

Większość z nas aby przyspieszyć sobie pracę korzysta z css frameworków. Czy to będzie bootstrap, semantic ui, materialize css, fundation i mógłbym jeszcze tak wymieniać i wymieniać. Najlepiej sami zobaczcie ile tego jest - awesome-css-frameworks, ale czy na pewno potrzebny nam jest cały kod np. takiego bootstrapa, no raczej nie?

Frameworki te mają też jedną poważną wadę, przynajmniej dla mnie, składają się z komponentów które jeżeli chcemy zmodyfikować to musimy nieźle się nagimnastykować z !important. Wszystko trzeba nadpisywać!.

A może by tak użyć frameworka, który nie będzie posiadał komponentów ale czyste style. Wiąże się to oczywiście z pisaniem wszystkie we własnym zakresie, ale tak możemy użyć Tailwindcss, poniżej informacja ze strony czym dokładnie jest ten framework.

9 Lis 2019

Jak dodać mapę Google do strony.

Opiszę bardzo prosty sposób dodania Google Maps np. do stron WordPress.
Oczywiście można dodać ją do każdej strony ale musimy mieć dostęp - możliwość wstawiania kodu html.

Niestety ale od 2018 Google wprowadziło nowy model licencjonowania map:

  • płatność w trybie miesięcznym, po przekroczeniu limitów
  • miesięczny darmowy limit w wysokości 200$

Najgorsza jest to, że aby uzyskać klucz licencyjny należy podłączyć kartę płatniczą, a to nie wszystkim się podoba.

Jeżeli potrzebujesz tylko mapy aby pokazać jedno miejsce nie trzeba ci całej "machiny", wystarczy że dodasz iframe. Jak to zrobić opiszę poniżej.

16 Paź 2019

Jak dodać kolorowe markery w postaci svg oraz legendę do map z leaflet

leafleat marker svg and legend
Założenia naszego przykładu to:
- markery w różnych kolorach
- kolory markerów opisane w legendzie po prawej stornie na dole

Markery

Aby markery miały różne kolory najlepiej wykonać je w svg a kolory uzyskujemy przez dodanie parametru fill="nasz-color". Oczywiście jest wiele innych możliwości, jak wykorzystanie png, czy nawet font awesome i kolorowanie odpowiednie i wiele innych.