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.

11 wrz 2019

Animacja 3d w css

3D animation
Animacja 3d w css możliwa już od wersji IE10, za pomocą przychodzi nam parametr perspective.
Nasza animacja będzie polegała na obracaniu sześcianu. Jak wiemy sześcian to sześć ścian więc zaczniemy od nich.

<div class="scene">
  <div class="cube">
    <div class="cube__wall cube__front">front</div>
    <div class="cube__wall cube__back">back</div>
    <div class="cube__wall cube__right">right</div>
    <div class="cube__wall cube__left">left</div>
    <div class="cube__wall cube__top">top</div>
    <div class="cube__wall cube__bottom">bottom</div>
  </div>
</div>

Jak widać nic szczególnego, scene - która zawiera div [cube] wraz z sześcioma ścianami. Każda ze ścian posiada napis tak aby można było zauważysz rotację tej kostki.
Teraz same "mięsko" a mianowicie css. Zaczynamy od podstaw zbudowanie podstaw, body na 100% wysokości do tego dodam animację backgroundu - tutaj wykorzystałem z generatora gradientów

4 wrz 2019

Animowany baner w js

animowany baner w js

Co to jest ten baner, to nic innego zdjęcie znajdujące się w div, które przesuwa się z góry na dół i ponownie na górę i tak w nieskończoność.
Oczywiście nic nas nie ogranicza można dodać np. jakiś tekst 🙂
Najpierw prosty html, na potrzeby tego przykładu kontener będzie centrowany w pionie i poziomie na całej stronie.

<div class="container">
  <div class="image-bgr">
    <img decoding="async" src="http://www.grzegorztomicki.pl/images/lwow/992/IMG_0014.jpg" alt="" class="image-responsive"/>
  </div>
</div>