Dzisiaj będzie o tym jak najszybciej i najprościej zrobić warstwę modalną, a dokładnie taką która ma ładną animacje opacity gdy warstwa się pojawia jak i gdy znika.
Pierwsza część, np. kliknięcie na element oraz pojawienie się warstwy modalnej jest proste do wykonania. Mamy div na stronie który jest naszą warstwą ukrywaną przez display: none do niej jest również ustawione transition oraz opacity: 0. Kliknięcie w element powoduje dodanie klasy do body, która to klasa zmienia display na block a także opacity ustawi na 1. No i mamy ładną animację opacity.
#shorts - zmniejsz/zwiększ font w edytorze wp
Wpis ten jest tak naprawdę uzupełnieniem wpisu dodanie niestandardowych przycisków za pomocą quicktag w wordpress
Niestety ale ten edytor quicktag jest bardzo prymitywny i jak dla mnie ma zbyt mały font ;). Nadszedł ten dzień w którym stwierdziłem że nie będę powiększał okna za pomocą ctrl + +/-
również powiększamy stronę w podglądzie - "to głupiego robota" ;).
W związku z tym powstał kod, który w skrócie, zmniejsza i powiększa font ale tylko w samym centrum edytora, dodaje dwa przyciski [A+, A-], zapisuje każde kliknięcie w localStorage
tak aby pamiętać wielkość fonta po zamknięciu okna a także obok buttona "Dodaj medium" dokleja informację jaka wielkość fontu jest obecnie ustawiona.
#shorts - instalowanie i update wordpress w docker-compose
Zaczynamy serię małych, krótkich wpisów. Coś na wzór yotube #shorts tylko że w wersji pisanej 😉
Tak jak tytuł sugeruje, dzisiaj będzie o wp na dokerze. Zazwyczaj gdy pracuję nad jakąś stroną staram się odzwierciedlić środowisko na którym ta strona będzie stała. Chodzi mi o to aby serwer, wersja czy baza oraz wszystkie dodatki były identyczne u mnie jak i na serwerze.
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.
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.