12 grudzień 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

8 grudzień 2019

Losowa linia z pliku - nodejs

Coś na szybko a mianowicie pobranie losowej linii z pliku w nodejs.
Nasz plik wygląda tak jak poniżej.

github
gmap
google
google adsens
grid
gulp workflow
hamburger
hex na rgb
hosting
htaccess
html
http

Plik ten powiedzmy że będzie nazywać się words.txt Teraz czas na js, plik nazwiemy getRandomLine.js

15 listopad 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 czerwiec 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) {});
});