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
W naszym package.json musimy dodać taki wpis, oczywiście ten wpis jest uzależniony od tego jakie przeglądarki chcemy wspierać:

"browserslist": [
  "last 2 version",
  ">1%",
  "not dead"
],

Ten wpis można by opisać tak, ostatnie 2 wersje przeglądarek, więcej niże 1% używa tych przeglądarek, no i ostatni wpis „nie martwe” czyli takie przeglądarki, które nadal są używane. Jeżeli chcemy zobaczyć jak budować tą listę polecam zapoznać się z browserslist oraz sprawdzić jakie jest pokrycie tego wpisu na tej stronie browserl.ist

10 Gru 2019

Tworzymy losową tablicę na podstawie czasu.

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ć.

function randomTime(hours, howManyTimes) {
  const randomNumber = [];
  const milliseconds = 60000 * 60 * hours;
  for (let i = 0; i < howManyTimes; i += 1) {
    const number = Math.floor(Math.random() * milliseconds);
    const genNumber = randomNumber.indexOf(number);
    if (genNumber === -1) {
      randomNumber.push(number);
    }
  }
  const randomtime = randomNumber.sort((a, b) => a -- b);

  return randomtime;
};

Krótki opis co tutaj się dzieje.
Do funkcji przekazujemy liczbę która reprezentuje godziny hours, oraz ile liczb ma być zwróconych howManyTimes.
Później deklarujemy nazwę tablicy – randomNumber oraz milliseconds.
Milliseconds jest to 60000 jedna minuta * 60 minut * ilość godzin = 28800000‬ czyli dokładnie jest 8 godzin w milisekundach.
Później generujemy liczbę w milisekundach, następnie sprawdzamy czy znajduje się ta liczba w tablicy, jeżeli nie to dodajemy tą liczbę do tablicy.
Na końcu tablica jest sortowana.

Pozostało mi wywołać tą funkcję.

const random = randomTime(8,40);
console.log(random);
22 Lis 2019

Jak ubić proces w windows 10 z linii komend

Niestety czasami dziwne rzeczy dzieją się z dockerem pod windowsem, kilka dni temu projekt działał na tych ustawianiach i nagle przestał 😉
Jakiś proces zajął mi domyślny proces mysql czyli 3306. No więc go musiałem skilować bez patrzenia na to co tam się zagnieździło.

Uruchamiam powershella jako administrator.

netstat -aon | findstr 3306

W wyniku mamy:

TCP  0.0.0.0:3306  0.0.0.0.0  LIETENIN  3428

Oczywiście jeżeli coś znajdzie, to interesuje nas ostatnia cyfra 3428
No i ubijanko 😉

taskkill /f /pid 3428
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.