28 Paź 2019

Async / await w js

Async/await to nowe rozwiązanie do zapisu asynchronicznego kody, nowy sposób który ułatwia pisanie nam kodu. Jest to uporządkowanie znanych nam promisów.

Async

Zwraca nam zawsze obietnicę.

async function fetchData() {
  const data = await fetch();
  return data;
};

fetchData()
  .fetch(res => {
    console.log(res);
  });

Await

Javascript poczeka na wykonanie danej obietnicy do jej zakończenia i zwrócenia przez nią wyniku. Należy pamiętać aby await zawsze znajdowała się wewnątrz funkcji async.

25 Paź 2019

Uzupełnienie o zero inaczej zero wiodące

Prosta ale przydatna funkcja, dopełniająca na początku zero np. przy dopełnieniu miesiąca czy dni. Zamiast 1 robimy 01 (dzień/miesiąc)

// Do testów ustawiam 5 sierpnia
const now = new Date("Aug 5, 2019 10:10:10");
const zerofill = value => (value < 10 && value > -1 ? '0' : '') + value;

// Dzień: 05 (zamiast 5)
console.log(`Dzień: ${zerofill(now.getDate())}`);

// Miesiąc: 08 (zamiast 8)
console.log(`Miesiąc: ${zerofill(now.getMonth()+1)}`);
4 Wrz 2019

Animowany baner

Co to jest ten baner, to nic innego zdjęcie znajdujące się w div, które przesuwa się z góry na dół i ponownie na górę i tak w nieskończoność.
Oczywiście nic nas nie ogranicza można dodać np. jakiś tekst 🙂
Najpierw prosty html, na potrzeby tego przykładu kontener będzie centrowany w pionie i poziomie na całej stronie.

<div class="container">
  <div class="image-bgr">
    <img src="http://www.grzegorztomicki.pl/images/lwow/992/IMG_0014.jpg" alt="" class="image-responsive"/>
  </div>
</div>

Teraz odpowiedni styl do wyświetlenia tego zdjęcia centralnie.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.container {
  width: 100%;
  padding: 0 20px;
}

.image-bgr {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: auto;
  min-height: 220px;
  overflow: hidden;
  margin: auto;
}

.image-bgr img {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

Najważniejsze klasy to w naszym przykładzie „.image-bgr” oraz „.image-bgr img”
Pierwsza klasa tworzy box o wymiarach max 900px i min wysokości 220px.
Do tego posiada właściwość overflow hidden aby ukryć wszystko co wystaję poza obwód boxa.
Druga klasa, a dokładnie ta sam tylko że z elementem img dotyczy zdjęcia. Zdjęcie to ustawiamy jako position absolute. Centrujemy je tak aby było maksymalnie ustawione na 100% szerokości boxa. Do tego zdjęcie jest centrowane w pionie.

Teraz cześć najważniejsza – javascript

27 Sie 2019

Losowy kolor w js

Losowo generowany kolor, a do czego może się to przydać spytacie, a no nie wiem, tak może dla zabawy ;). Ja zrobię coś innego czyli zmiana koloru tła diva po otworzeniu strony, oraz oraz zmiana koloru podczas zmiany wielkości strony.

Najpierw style.

* {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}
.box {
  width: 200px;
  height: 200px;
}

Mały html

<div class="box"></div>

No i oczywiście javascript. Najpierw stwórzmy funkcję do zmiany kolor.

5 Sie 2019

Licznik komentarzy Disqus

Naszym celem jest dodanie przy każdym artykule liczby komentarzy, które są dodane do artykułu.

Najpierw konfigurujemy nasz kod. W zakładce

TWOJEKONTO.disqus.com/admin/settings/community/

znajdują się trzy pola „Zero comments”, „One comment”, „Multiple comments”.
Jeżeli chcemy mieć PL tłumaczenie należy je w tych miejscach zmienić.

Niestety w Disqus nie przewidzieli, że nasz język jest tak skomplikowany i występują pewne trudności, przydało by się jeszcze jedno miejsce na wpis.
Bo: 0 komentarzy, 1 komentarz, 2 komentarze ale gdzie miejsce na wpisać 10 komentarzy 🙂
No niestety nie da się tego obejść ja ostatnie pole zmodyfikowałem na taki wpis – komentarzy: 10

Teraz czas na konkrety, na dole strony dodajemy przed zamknięciem body

<script id="dsq-count-scr" src="//kodywig.disqus.com/count.js" async>