2 Sty 2019

Kilka przydatnych Chrome Dev Tools trików

Kilka użytecznych przykładów użycia „console”.

Najpierw stwórzmy sobie plik html

< !DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <p>DZISIAJ W ...</p>
    <script src="console.js"></script>
  </body>
</html>

Później tworzę plik console.js a w nim będą przykłady użycia różnych zapisów „console”

const persons = [{ name: "Adam", age: 18 }, { name: "Greg", age: 20 }];

// podstawowe użycie
console.log("Podstawowy");

// interpolacja danych do stringa na dwa sposoby
console.log("Hellow World %s", "💩");
// lub template
const poop = "💩";
console.log(`Hellow World ${poop}`);

// style
console.log("%c Hellow World %s", "font-size: 50px; color: red");

// Ostrzeżenie wyświetlane na żółto
console.warn("Warn");

// Bład wyświetlany na czerwono
console.error("Error");

// informacja
console.info("Info");

// test
const p = document.querySelector("p");
console.assert(p.classList.contains("ouch"), "Brak klasy");

// czyszczenie
// console.clear();

// Podglad elementów DOM
console.log(p);
console.dir(p);

// Grupowanie elementów
persons.forEach(person =&gt; {
// console.group(`${person.name}`);
console.groupCollapsed(`${person.name}`);
console.log(`To jest ${person.name}`);
console.log(`${person.name} ma ${person.age} lat`);
console.groupEnd(`${person.name}`);
});

// Zliczanie występowania tych samych elementów
console.count("Test");
console.count("Test");
console.count("Greg");
console.count("Test");
console.count("Greg");
console.count("Test");

// np. czas pobierania danych
console.time("pobranie danych");
fetch("https://api.github.com/users/tomik23")
.then(data =&gt; data.json())
.then(data =&gt; {
console.timeEnd("pobranie danych");
console.log(data);
});

// Prezentowanie tabelaryczne
console.table(persons);
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) {});
});
19 Mar 2018

Ładowanie CSS i CSS modules w tym samym czasie Webpack

W react możemy importować css jak i css jako moduły.
Ale co jeśli chcemy zrobić do w tym samym czasie powiedzmy dodać globalny styl np. normalize.css?

Importowanie jako moduł:

import React from 'react'
import styles from './moj-komponent.css';

const MyComponent => <div className={styles.jakasKlasa}></div>

No ale jak użyć css powiedzmy jakieś zewnętrznej biblioteki:

import React from 'react'
import './moj-komponent-zewnetrzny.css';

const MyComponent => <div className="jakasKlasa"></div>

Aby tego dokonać należy zmodyfikować webpack. Ja korzystam z create-react-app i modyfikuję zarówno wersję dev jak i prod webpacka.

module: {
    rules: [
        {
            // wcześniej było /\.css$/
            test: /^(?!.*?\.module).*\.css$/,
           
            // dalej zostawiamy jak było czyli
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true,
                  localIdentName: '[name]__[local]__[hash:base64:5]'
                },
                ...
        },
        // dodajemy następną regułę dla zewnętrznych css
        {
            test: /\.module\.css$/,
            use: [
                require.resolve('style-loader'),
                require.resolve('css-loader')
            ],
        },
    ]
}

Teraz możemy użyć w jednym komponencie zarówno css modułów jak i zewnętrznych bibliotek.
Należy pamiętać że zewnętrzny komponent musi mieć w nazwie *.module.css

import React from 'react'
import styles from './moj-komponent.css';
import './jakis-zewnetrzny.module.css'

const MyComponent => <div className={`${styles.jakasKlasa} jakas-klasa-z-zewnatrz`}></div>

W wersji produkcyjnej webpack kopiuję całą regułę css i wstawiam poniżej,
zmieniam test: /\.css$/, na test: /\.module\.css$/,
Ustawiam modules: false i tyle.

11 Mar 2018

Importowanie absolutne w Create React App

Jak pozbyć się zagnieżdżonych ścieżek w pejekcie.
Np. taka nieładna ścieżka jak poniżej.

import TopImage from '../../../components/TopImage/TopImage';

Chcemy mieć coś takiego, czy do foldera components czy do containers czy innych folderów w src.

import TopImage from 'components/TopImage/TopImage';

Najprościej jak można to tworzymy plik w folderze src o nazwie .env tak z kropką na początku.
W nim wpisujemy NODE_PATH=src/ robimy save i uruchamiamy project jak zwykle przez npm run start

Od tej chili zamiast podawać całą ścieżkę podajemy components, containers, hoc czy inne foldery jakie mamy w projekcie.

Innym sposobem jest modyfikacja package.json

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build"
}

Dodajemy NODE_PATH=src/

"scripts": {
   "start": "NODE_PATH=src/ react-scripts start",
   "build": "NODE_PATH=src/ react-scripts build"
}

Jest jeden problem z użytkownikami windowsa jak zwykle 😉 NODE_PATH=src/ w package.json nie zadziała.
Należy zainstalować moduł cross-env czyli npm install –save-dev cross-env i zmodyfikować package.json, oczywiście to tylko w wypadku windowsa.

"scripts": {
   "start": "cross-env NODE_PATH=src/ react-scripts start",
   "build": "cross-env NODE_PATH=src/ react-scripts build"
}

I to tyle chyba ten pierwszy sposób jest mniej inwazyjny i powinien zadziałać na wszystkich platformach.

9 Mar 2018

ES6, var vs let

Przykład użycia let oraz var

for (var i = 0; i < 5; ++i) {
  setTimeout(function () {
    console.log(i); // Wynik 5 razy 5 :)
  }, 100);  
}
for (let i = 0; i < 5; ++i) {
  setTimeout(function () {
    console.log(i); // Wynik 0, 1, 2, 3, 4
  }, 100);  
}

Żeby to wykonać bez let można by zrobić tak jak poniżej.

for (var i = 0; i < 5; ++i) {
    (function(n) {
        setTimeout(function(){
            console.log(n); // Wynik 0, 1, 2, 3, 4
        }, 100);
    }(i));
}