21 Maj 2019

Tworzenie fragmentów dokumentu

CreateDocumentFragment jest metodą, która tworzy fragment dokumentu, jest to wirtualny dokument. Jest on podobny do diva, ale przy wstawianiu go do dokumentu, wstawiamy jego dzieci.

Gdzie to stosować, tam gdzie zależy Ci na wydajności i danych których wstawiasz jest dużo. Gdy wstawiamy do html nowy element całe drzewo DOM musi być za każdym razem przebudowywane.

const fragment = document.createDocumentFragment();
const ul = document.createElement("ul");

for (let i = 0; i < 10; i += 1) {
  ul.appendChild(document.createElement('li'))
    .appendChild(document.createTextNode("li element " + (i + 1)));
  fragment.appendChild(ul);
}

document.body.appendChild(fragment);
// wynik dostaniemy listę 10 elementów
// lista 1
// ...
// lista 10
8 Maj 2019

Prosty hamburger w js

Dzisiaj coś prostego, czyli hamburger menu.

Najpierw html:

<button class="hamburger">
  <div class="hamburger-center"></div>
</button>

Następnie style. Tutaj wykorzystam jak zwykle scss bo niech ktoś mi powie czy jest jeszcze jakaś osoba na Świecie nie korzystająca z preprocesorów css 😉

.hamburger {
  position: relative;
  padding: 35px;
  background-color: #00aeff;
  border: 1px solid lighten(#000, 90%);
  cursor: pointer;

  &.is-open {
    .hamburger-center {
      background-color: transparent;
      transition: background-color 0.25s ease-in;
    }

    &::before {
      transform: translateY(0) rotate(45deg);
      transition: transform 0.25s ease-in;
    }

    &::after {
      transform: translateY(0) rotate(-45deg);
      transition: transform 0.25s ease-in;
    }

  }

  .hamburger-center {
    position: absolute;
    content: '';
    width: 40px;
    height: 3px;
    background-color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%);
    transition: background-color 0.5s ease-in;
    z-index: 9999;
  }

  &::before,
  &::after {
    position: absolute;
    content: '';
    width: 40px;
    height: 3px;
    left: 15px;
    top: 50%;
    margin: auto;
    background-color: #fff;
    z-index: 9999;
  }

  &::before {
    transform: translateY(10px) rotate(0);
    transition: transform 0.25s ease-in;
  }

  &::after {
    transform: translateY(-10px) rotate(0);
    transition: transform 0.25s ease-in;
  }
}
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.

1 2 3 5