30 Cze 2019

RGB na HEX

Oczywiście poprzednio było HEX na RGB to oczywiście logiczne jest aby też podać i konwersję w drugą stronę 😉

function rgbToHex(rgb) {
  let hex = Number(rgb).toString(16);
  if(hex.length < 2) {
    hex = '0' + hex;
  }
  return hex;
}

function colorHex(r,g,b) {
  return rgbToHex(r) + rgbToHex(g) + rgbToHex(b);
}

A wywołanie to zwyczajne przekazanie funkcji trzech liczb na które składa się kolot rgb(0, 161, 255).

console.log(colorHex(0, 161,255));
// => w wyniku otrzymujemy #00a1ff
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) {});
});