Kategoria: JavaScript

JavaS cript

13 Sty 2020

Alternatywa dla google maps – Open Street Map oraz Leaflet

Inspirację do napisania tego wpisu było zebranie całej wiedzy w jednym miejscu. Nigdzie nie spotkałem się z całościowym artykułem, wszystko jest porozrzucane po internecie i trzeba nieźle się naszukać.

Wszystkie przykłady będą opierały się o OSM – Open Street Map jest darmowa i dostępna dla wszystkich. Oczywiście jeżeli chcesz ją wykorzystać w większym zakresie to lepiej samemu postawić serwer, który będzie serwować mapy do tego również warto dodać serwer z routingiem bo OSM ich nie posiadają.

Aby mapa w ogóle miała sens należy użyć jakieś biblioteki do obsługi tejże mapy. W naszym przypadku użyjemy Leaflet.

Do każdego punktu postaram się dodać przykłady zrobione w https://jsfiddle.net, najlepiej kliknąć w Edit in JSFiddle aby zobaczyć wynik bo nie zawsze poprawnie na tej stronie się wyświetlają przykłady.

Niestety jedną wielką bolączką OSM jest to, że nie ma w nich zaszytego routingu tak jak w google maps. W związku z tym nie jesteśmy w stanie wyznaczyć trasy a punktu A do punktu B. Jest oczywiście inny serwis który to wspiera i można to z powodzeniem połączyć z OSM.
Więcej informacji za i przeciw mapom OSM w podsumowaniu.

Czytaj dalej …
9 Sty 2020

Ciemny/Jasny motyw na stronie

Coraz więcej programów ale również i stron posiada motyw ciemny. Nie będę tutaj się zajmował tym czy i dlaczego używać ciemnego motywu. Takie informacje Sami jesteście wstanie znaleźć w internecie.
Dla mnie ciemny motyw jest idealny do pracy, mniej męczy oczy, jest też część techniczna bo ciemny motyw na urządzeniach OLED czy AMOLED nie zużywa energii itd.
Tak naprawdę to nie jest istotne czy strona jest jasna czy ciemna ale to jaki jest kontrast między elementami tło/tekst.

Przejdźmy do konkretów. Strona będzie posiadała przełącznik między ciemnym/jasnym motywem. Dane będą zapisywane w localStorage, a to po to aby po odświeżeniu strony nasz wybór nadal był aktualny. Oczywiście nic nie stoi na przeszkodzie aby gdzie indziej zapisywać te informacje.

Nie chcemy aby po wybraniu ciemnego motywu i po przejściu na inną stronę motyw z powrotem zmienił się na jasny. Domyślnie strona jest w motywie jasnym, dopiero kliknięcie na przełącznik zmienia nam motyw.

Najpierw porcja prostego html. Zaczniemy od przełącznika.

<nav>
  <div class="theme-switch-wrapper">
    <label class="theme-switch" for="checkbox">
      <input type="checkbox" id="checkbox" />
      <div class="slider round"></div>
    </label>
  </div>
</nav>
Czytaj dalej …
16 Gru 2019

Gradient text CSS/JS

Poniżej wygląd tekstu jaki chcemy uzyskać.

Będą to dwa przykłady. Pierwszy w czystym css, nie będzie kompatybilny ze starymi przeglądarkami czyli IE11 i niżej, druga zaś będzie wersją opartą na SVG + javascript i co najzabawniejsze działa nawet w IE9 przetestowane 😉
Wielkość czcionki będzie ustawiania dynamicznie za po pomocą vw – viewport width, na temat jednostek polecam skarbnicę wiedzy w postaci tej strony developer.mozilla.org

Czytaj dalej …
12 Gru 2019

PostCSS narzędzie do przekształcania CSS w JavaScript

W obecnym świecie frontendu wszystko zmienia się bardzo szybko. Powstaje mnóstwo nowych bibliotek, pluginów, framewoorków css czy js. Minęły czasy w których używało się notatnika do pisania stron 😉
Narzędzie które dzisiaj opiszę to PostCSS. Tak naprawdę najważniejszą częścią tego narzędzia są dodatki, pluginy których są setki.

Do czego można to wykorzystać, a no do miliona rzeczy 😉 Najczęściej używany plugin prze zemnie to autoprefixer.
Co on nam daje, a no to że nie musimy martwić dodawaniem prefiksów. Powiedzmy piszemy display: flex; a w wyniku dostajemy display: -webkit-box;display: -ms-flexbox;display: flex; Oczywiście zależne to jest od tego co ustalimy w package.json
W naszym package.json musimy dodać taki wpis, oczywiście ten wpis jest uzależniony od tego jakie przeglądarki chcemy wspierać:

"browserslist": [
  "last 2 version",
  ">1%",
  "not dead"
],

Ten wpis można by opisać tak, ostatnie 2 wersje przeglądarek, więcej niże 1% używa tych przeglądarek, no i ostatni wpis „nie martwe” czyli takie przeglądarki, które nadal są używane. Jeżeli chcemy zobaczyć jak budować tą listę polecam zapoznać się z browserslist oraz sprawdzić jakie jest pokrycie tego wpisu na tej stronie browserl.ist

Czytaj dalej …
10 Gru 2019

Tworzymy losową tablicę na podstawie czasu.

Trochę zagmatwany tytuł ale nie mam pojęcia jaki inny byłby adekwatny dla tego problemu, jakieś sugestie?
Najpierw opiszę co mi jest potrzebne, chcę co jakiś interwał czasowy odpalać funkcję. W ciągu powiedzmy 8 godzin muszę odpalić tą funkcję 40 razy.
Funkcja musi mi zwrócić tablicę liczb w milisekundach, bo będę używał setTimeout. Oczywiście tablica ma być posortowana. I najważniejsza część tej zagwozdki te liczby nie mogą się powtarzać.

function randomTime(hours, howManyTimes) {
  const randomNumber = [];
  const milliseconds = 60000 * 60 * hours;
  for (let i = 0; i < howManyTimes; i += 1) {
    const number = Math.floor(Math.random() * milliseconds);
    const genNumber = randomNumber.indexOf(number);
    if (genNumber === -1) {
      randomNumber.push(number);
    }
  }
  const randomtime = randomNumber.sort((a, b) => a - b);

  return randomtime;
};

Krótki opis co tutaj się dzieje.
Do funkcji przekazujemy liczbę która reprezentuje godziny hours, oraz ile liczb ma być zwróconych howManyTimes.
Później deklarujemy nazwę tablicy – randomNumber oraz milliseconds.
Milliseconds jest to 60000 jedna minuta * 60 minut * ilość godzin = 28800000‬ czyli dokładnie jest 8 godzin w milisekundach.
Później generujemy liczbę w milisekundach, następnie sprawdzamy czy znajduje się ta liczba w tablicy, jeżeli nie to dodajemy tą liczbę do tablicy.
Na końcu tablica jest sortowana.

Pozostało mi wywołać tą funkcję.

const random = randomTime(8,40);
console.log(random);
123…42