CSS - Strona 2 - Kody, triki, sztuczki

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.

Czytaj dalej

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

Czytaj dalej

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:

Czytaj dalej

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.

Czytaj dalej

30 sty 2021

Dodanie numeracji wierszy do prismjs lub highlightjs

Większość technicznych stron chcąc prezentować kod posiłkuje się bibliotekami takimi jak highlightjs lub prismjs.

Nie inaczej jest na tej stronie, użyłem highlightjs. W tych dwóch bibliotekach brakowało mi jednej rzeczy a mianowicie numeracji wierszy. Bardzo się przydaje przy informowaniu o błędzie czy gdy ktoś chce zadać pytanie odnośnie danej linii kodu.
Oczywiście istnieją dodatkowe biblioteki, czy możliwość włączenia numeracji, ale to zawsze dodatkowy kod, a w przypadku takiego prismjs to jest dodatkowy niepotrzebny kod który zwiększa ilość elementów DOM. Biblioteka ta generuje tyle samo elementów span co ilość wierszy!.

Jest bardzo sprytne obejście tego problemu bez grzebania w js, wystarczy css

Czytaj dalej