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.
Zwraca nam zawsze obietnicę.
async function fetchData() {
const data = await fetch();
return data;
};
fetchData()
.fetch(res => {
console.log(res);
});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.
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)}`);
Założenia naszego przykładu to:
- markery w różnych kolorach
- kolory markerów opisane w legendzie po prawej stornie na dole
Aby markery miały różne kolory najlepiej wykonać je w svg a kolory uzyskujemy przez dodanie parametru fill="nasz-color". Oczywiście jest wiele innych możliwości, jak wykorzystanie png, czy nawet font awesome i kolorowanie odpowiednie i wiele innych.
Animacja 3d w css możliwa już od wersji IE10, za pomocą przychodzi nam parametr perspective.
Nasza animacja będzie polegała na obracaniu sześcianu. Jak wiemy sześcian to sześć ścian więc zaczniemy od nich.
<div class="scene">
<div class="cube">
<div class="cube__wall cube__front">front</div>
<div class="cube__wall cube__back">back</div>
<div class="cube__wall cube__right">right</div>
<div class="cube__wall cube__left">left</div>
<div class="cube__wall cube__top">top</div>
<div class="cube__wall cube__bottom">bottom</div>
</div>
</div>Jak widać nic szczególnego, scene - która zawiera div [cube] wraz z sześcioma ścianami. Każda ze ścian posiada napis tak aby można było zauważysz rotację tej kostki.
Teraz same "mięsko" a mianowicie css. Zaczynamy od podstaw zbudowanie podstaw, body na 100% wysokości do tego dodam animację backgroundu - tutaj wykorzystałem z generatora gradientów
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 decoding="async" src="http://www.grzegorztomicki.pl/images/lwow/992/IMG_0014.jpg" alt="" class="image-responsive"/>
</div>
</div>