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.

15 Lis 2019

Foldery w nodejs - kilka przydatnych metod.

Poniżej kila przydanych właściwości przy pracy z folderami.

Tworzenie nowego foldera

Do tego wykorzystamy fs.mkdir() lub fs.mkdirSync() oraz fs.existsSync()

const fs = require('fs')

const folderName = '/test'

try {
  if (!fs.existsSync(folderName)) {
    fs.mkdirSync(folderName)
  }
} catch (err) {
  console.error(err)
}

Najpierw sprawdzamy czy folder istnieje metodą !fs.existsSync(), a następnie tworzymy folder przez fs.mkdirSync().
Czym się różnią te dwie metody, fs.mkdir() od fs.mkdirSync().
fs.mkdir() jest asynchroniczne a fs.mkdirSync() synchroniczne. Można to poznać po dopisku Sync

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.

4 Lis 2019

Perfekcyjny htaccess?

Czy perfekcyjny? Na pewno działa tam gdzie dodawałem. Nie będę się za bardzo rozpisywać, stosuję praktycznie dla każdej strony. Czasami coś modyfikuję, sprawdza się bardzo dobrze.
Strony po tej konfiguracji są bardzo dobrze widziana przez PageSpeed Insights itp.
Wszystko ładnie jest kompresowane oraz keszowane.
Oczywiście aby strona była naprawdę zoptymalizowana to nie wystarczy, potrzebujemy jeszcze wiele elementów które składają się na całość:

  • optymalizacja zdjęć - progressive JPEG,
  • ładowanie zdjęć i wideo dopiero gdy pojawi się na stronie - lazy-loading,
  • minifikacja css, js, html oraz kompresja - defer oraz async
  • ładujemy tylko kod który jest potrzebny na stronie lub nawet dodawany dynamicznie,
  • ... oraz wiele innych elementów
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.