26 Cze 2020

Dodawanie, przesuwanie i kasowanie markerów – Leaflet

Ten wpis pokaże w jaki sposób dodać, przesuwać oraz kasować markery. Przykład ten można fajnie wykorzystać. Jeżeli chcemy poznać współrzędne np. firmy. Moglibyśmy zrobić formularz w popupie który przechwyci kliknięcie i współrzędne geograficzne, jakieś pole na nazwę firmy, pole na opis firmy. Przydał by się również przycisk który zapisze te dane w bazie, a później wyświetlić te informacje wraz z markerem na produkcyjnej mapie.

To jak konfigurujemy prostą mapę opisałem tutaj alternatywa dla google maps OSM oraz leaflet więc nie będę się już rozpisywał na ten temat.

<div class="marker-position">click on the map, move the marker, click on the marker</div>
<div id="map"></div>
16 Cze 2020

Użycie GeoJson z Leaflet

Wracamy do serii artykułów w których opisuję różne użycia Leaflet. Dzisiaj poruszymy temat GeoJson.

GeoJson jest to nic innego jak plik JSON, który reprezentuje cechy geograficzne. Nie posiada on formalnych standardów, może reprezentować punty, adresy i lokalizacje, kraje, prowincje i wiele innych elementów. Zerknijcie na wpis w wiki

26 Kwi 2020

Proste menu restauracyjne RWD

Dzisiaj coś „prostego” menu które wygląda jak prawdziwe menu z restauracji do tego działa w RWD.

Powiecie co jest w tym tak trudnego?. Zobaczcie na kropki uzupełniające oraz cenę. Jeżeli ostatnie słow/słowa spadają do drugiej linii wtedy również linia oraz cena „podąża” za ostatnim wyrazem.

25 Mar 2020

Nauczanie online – przydatne aplikacje oraz strony

Dzisiaj będzie bardzo szybko. Wiem że nie jest to nic związanego z programowaniem, ale mam nadzieję że ten post dotrze do jak najwięcej liczby osób.
W związku z obecną sytuacją tak na szybko postanowiłem stworzyć małą listę mam nadzieję że przydatnych aplikacji i stron nie tylko dla nauczycieli ale również dla uczniów.
Jeżeli ktoś chce ją uzupełnić, ma nowy pomysł to polecam NauczanieOnline

Udostępniajcie ten link gdzie się da, komuś na pewno się przyda.
Dziękuję

19 Lut 2020

Usuwamy nadmiarowy Bootstrap + purgecss + webpack + pug template

Dzisiaj będzie krótko. Usuniemy nadmiarowe style z Bootstrap. Do tego zadania potrzebne nam będzie webpack, plugin purgecss-webpack-plugin, a za template posłuży nam pug oraz html.

Do testów użyłem dwóch przykładów ze strony bootstrapa, album oraz sign-in. Tak aby móc porównać czy działanie jest identyczne w wersji html i pug.

Najpierw tworzymy package.js

yarn init -y

Następnie dodamy wszystkie pluginy:

yarn add -D @babel/core @babel/preset-env autoprefixer babel-loader clean-webpack-plugin core-js cross-env css-loader cssnano html-webpack-plugin mini-css-extract-plugin node-sass postcss-cli postcss-loader pug pug-loader purgecss-webpack-plugin sass-loader style-loader terser-webpack-plugin webpack webpack-cli webpack-dev-server