30 Sty 2020

Jak do Open Street Map i Leaflet dodać routing - OSRM

Jak do Open Street Map i Leaflet dodać routing - OSRM
Słowo się rzekło, a więc o to krótki wpis o tym jak podłączyć ruting do OSM.
Będziemy opierać się o OSRM Open Source Routing Machine oraz skorzystamy z pluginu Leaflet Routing Machine.

Na wstępie uprzedzę że przykład może nie działać za każdym razem, będę używać nominatim.openstreetmap.org w wersji demo. W związku z tym pod każdym kodem będę zamieszczał "print screen" 😉

Nie jest to także opis instalacji środowiska, maszyny z bazą danych. Taki opis możecie znaleźć tutaj osrm backend, a jeżeli komuś się zamarzyło postawienie takiej maszyny u siebie lokalnie niech najpierw przeczyta ten opis disk and memory requirements 😉

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://codepen.io, najlepiej kliknąć w Edit on codepen 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.

9 Sty 2020

Ciemny/Jasny motyw na stronie

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.

<div class="theme-switch-wrapper">
  <label class="theme-switch" for="checkbox">
    <input type="checkbox" id="checkbox" />
    <div class="slider round"></div>
  </label>
</div>
3 Sty 2020

Animacja kart css

card animation
Mały przerywnik, coś miłego dla oka - animacja kart.
Każda z kart składa się z nagłówka w którym jest ikona, oraz sekcji z opisem i buttonem "więcej". Powiedzmy 3 karty w rzędzie a gdy zmniejszymy stronę karty ustawiają się w pionie.

Zacznijmy od ikon, tutaj opisałem dokładnie jak dodajemy obecnie ikony svg do strony - nowy sposób serwowania ikon SVG

Najpierw ikony które dodajemy na górze strony.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="lightning" viewBox="0 0 32 32">
    <path d="M12 24l2 2-2 6 6-6-2-2 2-4-6 4zM32 8.427c0-3.072-2.5-5.57-5.573-5.57-.15 0-.298.005-.447.017C24.535 1.072 22.356 0 20 0c-2.355 0-4.535 1.072-5.98 2.874-.148-.012-.298-.017-.449-.017-3.07 0-5.57 2.499-5.57 5.57 0 .322.043.633.094.94-.034.044-.074.085-.107.13-.327-.047-.655-.07-.987-.07-3.859 0-7 3.141-7 7s3.141 7 7 7c.856 0 1.693-.156 2.482-.458.069.06.151.102.221.16l1.77-1.18c-.59-.418-1.141-.883-1.602-1.438-.813.572-1.801.915-2.871.915-2.762 0-5-2.237-5-5 0-2.76 2.238-5 5-5 .676 0 1.316.138 1.902.38.035-.068.078-.125.113-.19.352-.642.785-1.229 1.292-1.753 1.443-1.493 3.448-2.438 5.693-2.438 3.107 0 5.771 1.792 7.096 4.38.353-.146.729-.24 1.117-.302l.787-.078c.771 0 1.492.19 2.145.5.707.339 1.314.836 1.79 1.45.656.845 1.065 1.896 1.065 3.05 0 2.763-2.238 5-5 5-1.07 0-2.057-.344-2.871-.915-.875 1.055-2.027 1.848-3.322 2.348l-.374.746 1.141 1.141c1.066-.415 2.064-1.012 2.944-1.777.789.302 1.626.458 2.482.458 3.859 0 7-3.141 7-7 0-1.604-.565-3.068-1.479-4.25.911-.992 1.479-2.301 1.479-3.75zm-2.902 2.352c-1.155-.84-2.563-1.352-4.098-1.352-.332 0-.66.023-.987.07-1.867-2.543-4.814-4.07-8.013-4.07-2.133 0-4.145.691-5.809 1.897.467-1.428 1.796-2.467 3.379-2.467.484 0 .941.098 1.359.271C15.878 3.279 17.781 2 19.999 2s4.122 1.279 5.068 3.128c.421-.173.88-.271 1.359-.271 1.974 0 3.573 1.599 3.573 3.57 0 .906-.348 1.723-.902 2.352z"></path>
  </symbol>
  <symbol id="wind" viewBox="0 0 32 32">
    <path d="M26.938 12c-1.656 0-3 1.344-3 3 0 .353.073.685.184 1H4.938c-.552 0-1 .448-1 1s.448 1 1 1h22c1.656 0 3-1.344 3-3s-1.344-3-3-3zm-22 2h12c1.656 0 3-1.344 3-3s-1.344-3-3-3-3 1.344-3 3c0 .353.073.685.184 1H4.938c-.552 0-1 .448-1 1s.448 1 1 1zm16 6c-.059 0-.115.013-.174.018-.039-.003-.072-.018-.111-.018H5.225c-.711 0-1.287.448-1.287 1s.576 1 1.287 1h12.897c-.111.315-.184.648-.184 1 0 1.656 1.344 3 3 3s3-1.344 3-3-1.344-3-3-3z"></path>
  </symbol>
  <symbol id="sun" viewBox="0 0 32 32">
    <path d="M16 9c-3.859 0-7 3.141-7 7s3.141 7 7 7 7-3.141 7-7-3.141-7-7-7zm0 12c-2.762 0-5-2.238-5-5s2.238-5 5-5 5 2.238 5 5-2.238 5-5 5zm0-14c.552 0 1-.448 1-1V4c0-.552-.448-1-1-1s-1 .448-1 1v2c0 .552.448 1 1 1zm0 18c-.552 0-1 .448-1 1v2c0 .552.448 1 1 1s1-.448 1-1v-2c0-.552-.448-1-1-1zm7.777-15.365l1.414-1.414c.391-.391.391-1.023 0-1.414s-1.023-.391-1.414 0l-1.414 1.414c-.391.391-.391 1.023 0 1.414s1.023.391 1.414 0zM8.223 22.365l-1.414 1.414c-.391.391-.391 1.023 0 1.414s1.023.391 1.414 0l1.414-1.414c.391-.392.391-1.023 0-1.414s-1.023-.392-1.414 0zM7 16c0-.552-.448-1-1-1H4c-.552 0-1 .448-1 1s.448 1 1 1h2c.552 0 1-.448 1-1zm21-1h-2c-.552 0-1 .448-1 1s.448 1 1 1h2c.552 0 1-.448 1-1s-.448-1-1-1zM8.221 9.635c.391.391 1.024.391 1.414 0s.391-1.023 0-1.414L8.221 6.807c-.391-.391-1.023-.391-1.414 0s-.391 1.023 0 1.414l1.414 1.414zm15.558 12.728c-.392-.391-1.023-.391-1.414 0s-.392 1.023 0 1.414l1.414 1.414c.391.391 1.023.391 1.414 0s.391-1.023 0-1.414l-1.414-1.414z"></path>
  </symbol>
</svg>
16 Gru 2019

Gradient text CSS/JS

Poniżej wygląd tekstu jaki chcemy uzyskać.
gradient text in svg
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