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

11 gru 2020

Jak najprościej do WooCommerce dodać InPost

Wordpress + WooCommerce
Jest to najprostszy sposób na dodanie paczkomatów InPost do sklepu - Woocommerce. Nie użyjemy tutaj żadnego dedykowanego pluginu. Przykład ten dodaje jedynie pole gdzie możemy wybrać, czy wyszukać nasz paczkomat. Dodamy te dane do zamówienia ale ich nie przeliczymy. Informacje o paczkomacie pojawiają się również w zamówieniu oraz mailu który jest wysyłany do właściciela sklepu.

8 lis 2020

Stylowanie przycisków radio/checkbox

Stylowanie przycisków radio/checkbox
Dzisiaj będzie o stylowaniu radio oraz checkbox butonów. Przykład jest w połączeniu z przekreślaniem treści, przydało się ostatnio w budowaniu składników przepisów.
Zacznę od html, są to dwa formularze z butonami po kliknięciu których wstawimy w h3 te opcje (value) które zaznaczyliśmy.
Poniżej skrócona wersja html, zaś na samym końcu wpisu cały przykład w codepen.io

27 paź 2020

Ciekawy efekt z cieniem na każdej literze

Mała odskocznia i trochę styli na wieczór. Dzisiaj prosty przykład użycia text-shadow.
Zaczynamy oczywiście od prostego html. Na podstawie klasy 'add-shadow' pobieramy tekst i każdą literę owijamy w span

<div class="content">
  <h1 class="add-shadow">Frontend development</h1>
</div>