1 wrz 2021

blur/focus jak podglądnąć dane które znikają?

Zapewne się spotkałeś/łaś z tym, że czasami chcąc podglądnąć dane które pojawiają się np. na warstwie nagle znikają. Wszystko jest dobrze do czasu gdy klikniesz w menu kontekstowe w Chrome - ostatni element "zbadaj" otwiera się DevTools w chrome i ta warstwa znika.

Posłużę się przykładem a dokładnie stroną z takim zachowaniem, będzie to www.algolia.com. Nie będę tutaj opisywał czym jest "algolia" bo to można znaleźć na tejże stronie, a przejdę od razu do zachowania "Autocomplete".

Poniżej tak wygląda autocomplete gdy kliknę w pole input.
agolia autocomplete

25 cze 2021

react-leaflet w przykładach

Tak, stało się. Przepisałem zbiór przykładów użycia leafelt w czystym js z tego adresu leaflet-examples na reacta, a dokładnie za pomocą bibliotek react-leaflet i leaflet.
Wszystkie przykłady w react znajdują się pod tym adresem react-leaflet-examples
Oczywiście nie przeniosłem jeszcze wszystkiego i raczej na to się nie zanosi 😉

Jeżeli ktoś ma pomysły na jakieś inne przykłady chętnie zapoznam się z propozycjami.

12 maj 2021

Dodanie niestandardowych przycisków za pomocą QuickTag w WordPress

wstaw kod
Najpierw co to jest QuickTag?. Jest to API w wordpressie, które umożliwia dodanie przycisków (button) do edytora tekstu w panelu administratora.
Przydaje się na takich stronach jak ta 😉

Aby dodać szybki tag, musisz podłączyć niestandardową funkcję do hooka admin_print_footer_scripts. Chodzi o dodanie niestandardowego kodu javascript w stopce administratora. Interfejs API udostępnia wbudowaną funkcję o nazwie addButton:

1 maj 2021

Proste udostępnianie w sieci dzięki navigator.share

Metoda navigator.share() jest częścią interfejsu API Web Share. Na czym to polega? Z poziomu strony mamy dostęp do mechanizmu udostępniania, które to występuje w aplikacjach natywnych.

Poniżej przykład jak to wygląda w praktyce.
metoda navigator.share() jest częścią interfejsu API Web Share

Mamy przycisk "podziel się", kliknięcie w niego otwiera nam natywne menu, a z niego mamy możliwość wybrania interesującej nasz aplikacji.

13 mar 2021

Interesująca właściwość shape-outside

lemon polygon

Starsi "webowcy" zapewne pamiętają czasy używania float. Właściwość ta była używana do praktycznie wszystkiego, od pozycjonowania grafik w tekście "oblewanie grafiki tekstem" czy przez ustawianie divów. W tamtym czasie nie było czegoś takiego jak flex czy grid. Wszędzie wstawiało się clearfix ale nie o tym mowa.