23 wrz. 2021

#shorts - modal

modal
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.

15 wrz. 2021

#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

Zmiana fontu w panelu administracyjnym wp

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.

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

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:

13 marzec 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.