JavaScript – Kody, triki, sztuczki

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

25 Cze 2019

HEX na RGB

Teraz coś małego ale jakże przydatnego. Konwersja HEX koloru np. #00a1ff na RGB.

function hexTorgb(fullhex) {
const hex = fullhex.substring(1,7);
return {
R: parseInt(hex.substring(0,2), 16),
G: parseInt(hex.substring(2,4), 16),
B: parseInt(hex.substring(4,6), 16)
}
}

A wywołanie to zwyczajne przekazanie stringa do funkcji.

console.log(hexTorgb('#00a1ff'));
// => {R: 0, G: 161, B: 255 } w wyniku mamy obiekt

Oczywiście nic nie stoi na przeszkodzie aby modyfikować tą funkcję.

28 Maj 2019

Dynamiczne ładowanie plików JavaScript

Większość użytkowników ma określony cel przeglądając witrynę. Na przykład jeden użytkownik może chcieć przeglądać katalog produktów tylko po to, aby zobaczyć, co masz w sklepie. Nie jest mu potrzebny kod js w zakładce „pokaż recenzje” bo tam po prostu nie trafi. Więc serwowanie kodu z całej witryny mija się z celem.

Jeżeli chcesz tworzyć szybkie witryny, musisz przesłać jak najmniej JavaScript do przeglądarek. Pobieranie pakietu JavaScript wymaga nie tylko czasu, ale przeglądarka musi także wyodrębnić kod i przeanalizować go, co również zajmuje dużo czasu.

Powolne działanie witryny sprawia, że użytkownicy odchodzą, optymalny czas ładowania strony to maksymalnie 2-3s. Takie podejście serwowania kodu w małych paczkach jest również dobre dla SEO – Google bardzo lubi szybkie strony ;).

To co powinieneś zrobić, to wysłać tyko JavaScript, którego użytkownik potrzebuje do przeglądania i interakcji z odwiedzanymi stronami. W ten sposób witryna ładuje się znacznie szybciej.

Takie ładowanie możemy przygotować za pomocą webpacka i dynamicznego ładowania.

Gdy korzystasz z importu dynamicznego, wstawiasz minimalną ilość javascirpt na stronie i ładujesz resztę dynamicznie, gdy i jeśli użytkownik tego potrzebuje.

Nasz przykład będzie bardzo prosty, na środku strony będzie znajdował się przycisk po kliknięciu którego zmienimy kolor tła strony. Kliknięcie spowoduje załadowanie pliku js który to właśnie zmieni nam to tło.

Jak skonfigurować dynamiczny import pakietów internetowych w webpack

Zacznijmy od webpacka. Mam nadzieję że wiesz jak instalować pakiety npm?. Masz zainstalowane node?. Jeśli nie, no cóż, może kiedyś powstanie jakiś artykuł. Na obecną chwilę polecam [ artykuł ].

Inicjalizacja projektu. Ja używam yarn, oczywiście nic nie stoi na przeszkodzie użycie npm.

yarn init -y

Czytaj dalej …

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

18 Maj 2019

new Map jak i do czego używać.

Map jest prostym obiektem mapującym klucze na wartości – definicja.
Obiekt Map ma kilka właściwości:

Map.prototype.clear()
Map.prototype.delete()
Map.prototype.entries()
Map.prototype.forEach()
Map.prototype.get()
Map.prototype.has()
Map.prototype.keys()
Map.prototype.set()
Map.prototype.values()

Opiszę tylko kilka z tych właściwości.
Powiedzmy że mamy prosty obiekt i chciałbym sprawdzić ile jest elementów w obiekcie.
Poniżej ten obiekt.

const size = {
desktop: 992,
tablet: 768,
phone: 576
}

Czytaj dalej …

1 2 3 … 40 Następne »