Animacje – setInterval() vs requestAnimationFrame()

Tym razem zajmiemy się animacjami w JS. Porównamy sobie rozwiązania wykorzystujące setInterval() oraz requestAnimationFrame(). Postaram się przedstawić zalety tego drugiego rozwiązania i wyjaśnić na jakie zasadzie ono działa.

Pseudo-elementy (before, after) i JavaScript

Pseudo-elementy w CSS są bardzo użytecznym narzędziem, który pozwala uzupełnić listę dzieci o pierwszy i ostatni element selektora. Dla wspomnianych elementów możemy definiować dowolne reguły CSS (więc mogą być typu inline lub block itp.), co pozwala nam osiągnąć niezwykle ciekawe efekty. Poniżej zamieszczam prosty przykład użycia pseudo-elementów before i after.

Node.js – wprowadzenie

Node.js jest środowiskiem, w którym możemy uruchomić aplikacje JavaScript. Oznacza to, że teraz nasz kod JS uruchomimy nie tylko za pomocą przeglądarki internetowej, ale również bez niej. Node.js używa silnika V8, który został napisany przez firmę Google i zaimplementowany w jego przeglądarkę internetową tj. Chrome. Platforma ta powstała w 2009r., a jej twórcą jest Ryan Dahl.

Implementacja metody .sort() w JavaScript

W poprzednim wpisie opisywałem zasadę działania metody .sort(). Teraz nadszedł czas na przemyślenia dotyczące samej implementacji. Postaram się pokazać w jaki sposób silnik JavaScript implementuje funkcje .sort(). To jeszcze lepiej pozwoli nam zrozumieć na jakiej zasadzie działa sortowanie elementów tablicy w JS.

Metoda .sort() w JavaScript jako wprowadzenie do programowania funkcyjnego

Wpis ten ma za zadanie wyjaśnić zasadę działania funkcji sortującej, która jest dostępna dla obiektu Array. Pozwala ona sortować dowolne elementy dodane do tablicy. Wszystko dzięki przekazywanej jako parametr funkcji, która definiuje nam co chcemy ze sobą porównać. Takie rozwiązanie (funkcja jako parametr) jest stosowane w programowaniu funkcyjnym, które staje się bardzo popularne.

Wyśrodkowanie Google Maps na podstawie pozycji markerów

Korzystając z Google Maps dodajemy do niej zazwyczaj więcej niż jeden marker (punkt na mapie). Następnie chcemy, aby nasza mapa była wyśrodkowana względem tych wszystkich punktów. Na szczęście nie musimy obliczać tego sami. Google udostępnia nam narzędzie „bounds”. Jak z niego skorzystać dowiesz się z tego wpisu.

slideUp w Vanilla JS

jQuery posiada w swojej bibliotece bardzo dużo przydatnych animacji. Ja w tym wpisie postaram się przedstawić rozwiązanie napisane w czystym JS, które przedstawi jak napisać funkcję slideUp() znaną z jQuery, która zmniejsza wysokość elementu do zera w zadanym odstępie czasu. 

Same-origin policy & Cross-Origin Resource Sharing

Korzystając z różnych API przy pomocy AJAX-a być może napotkałeś na problem z polityką same-origin (SOP) lub CORS. Uwidacznia się ona przez wyświetlenie błędu w konsoli, który brzmi mniej więcej tak: XMLHttpRequest cannot load (…). No ‚Access-Control-Allow-Origin’ header is present on the requested resource (…).