10 lut 2022

#shorts - szybki update wersji biblioteki we wszystkich plikach

Mam zawsze problem z tym, że zapominam zmienić wersję biblioteki we wszystkich miejscach w których występuje wzmianka o niej.
Dopiero na koniec gdy wszystko już zakomitowałem na githuba okazuje się że czegoś znowu nie zmieniłem 😉

Postanowiłem temu zapobiec i stworzyłem sobie mały skrypt - version.js

Skrypt na wrzucam do foldera scripts w głównym folderze projektu. I za każdym razem wywołuję przez dodanie do package.json w sekcji script przy budowaniu produkcyjnym.

"scripts": {
  ...
  "prod": "yarn build && yarn sass:prod && yarn lib:version",
  "lib:version": "node ./scripts/version.js",
  ...
},
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

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

8 cze 2018

Stworzenie sitemapy w node.js

Mały przyjemny kod 😉
Na początku pobieramy wszystkie pliki z foldera build za pomocą readdir, następnie pętelka po tych plikach. Robimy split po kropce aby dobrać się do rozszerzenia a interesuje nas oczywiście html
Jeżeli rozszerzeniem okaże się html to wszystko pakujemy do tablicy urlPart.
Na końcu budujemy xml sitemap i zapisujemy to przez writeFile i to tyle.

const fs = require("fs");

const htmlPlace = "build";
const ulrPart = [];

fs.readdir(`${htmlPlace}`, function (err, files) {
    if (err)
        throw err;
    for (let index in files) {
        let rest = files[index].split('.')[1];
        if (rest === 'html') {
            let path = `
                <url>
                    <loc>http://blog.grzegorztomicki.pl/${files[index]}</loc>
                    <changefreq>monthly</changefreq>
                </url>
            `;
            ulrPart.push(path);
        }

    }

    const template = `
        <?xml version="1.0" encoding="UTF-8"?>
        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
            ${ulrPart.join('')}</urlset>`;

    fs.writeFile(`./sitemap.xml`, template, function (err) {});
});