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.

28 Paź 2019

async/await w js

Async/await to nowe rozwiązanie do zapisu asynchronicznego kody, nowy sposób który ułatwia pisanie nam kodu. Jest to uporządkowanie znanych nam promisów.

Async

Zwraca nam zawsze obietnicę.

async function fetchData() {
  const data = await fetch();
  return data;
};

fetchData()
  .fetch(res => {
    console.log(res);
  });

Await

Javascript poczeka na wykonanie danej obietnicy do jej zakończenia i zwrócenia przez nią wyniku. Należy pamiętać aby await zawsze znajdowała się wewnątrz funkcji async.

25 Paź 2019

Uzupełnienie o zero inaczej zero wiodące

Prosta ale przydatna funkcja, dopełniająca na początku zero np. przy dopełnieniu miesiąca czy dni. Zamiast 1 robimy 01 (dzień/miesiąc)

// Do testów ustawiam 5 sierpnia
const now = new Date("Aug 5, 2019 10:10:10");
const zerofill = value => (value < 10 && value > -1 ? '0' : "") + value;

// Dzień: 05 (zamiast 5)
console.log(`Dzień: ${zerofill(now.getDate())}`);

// Miesiąc: 08 (zamiast 8)
console.log(`Miesiąc: ${zerofill(now.getMonth()+1)}`);
4 Wrz 2019

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 src="http://www.grzegorztomicki.pl/images/lwow/992/IMG_0014.jpg" alt="" class="image-responsive"/>
  </div>
</div>

Teraz odpowiedni styl do wyświetlenia tego zdjęcia centralnie.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.container {
  width: 100%;
  padding: 0 20px;
}

.image-bgr {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: auto;
  min-height: 220px;
  overflow: hidden;
  margin: auto;
}

.image-bgr img {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

Najważniejsze klasy to w naszym przykładzie ".image-bgr" oraz ".image-bgr img"
Pierwsza klasa tworzy box o wymiarach max 900px i min wysokości 220px.
Do tego posiada właściwość overflow hidden aby ukryć wszystko co wystaję poza obwód boxa.
Druga klasa, a dokładnie ta sam tylko że z elementem img dotyczy zdjęcia. Zdjęcie to ustawiamy jako position absolute. Centrujemy je tak aby było maksymalnie ustawione na 100% szerokości boxa. Do tego zdjęcie jest centrowane w pionie.

Teraz cześć najważniejsza - javascript

27 Sie 2019

Losowy kolor w js

Losowo generowany kolor, a do czego może się to przydać spytacie, a no nie wiem, tak może dla zabawy ;). Ja zrobię coś innego czyli zmiana koloru tła diva po otworzeniu strony, oraz oraz zmiana koloru podczas zmiany wielkości strony.

Najpierw style.

* {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}
.box {
  width: 200px;
  height: 200px;
}

Mały html

<div class="box"></div>

No i oczywiście javascript. Najpierw stwórzmy funkcję do zmiany kolor.