21 Sie 2019

Responsive font – dynamiczna wielkość czcionki

Jednym z problemów jakie napotykamy podczas tworzenia strony responsywnej jest problem ze skalowaniem czcionek. Za każdym razem za pomocą breakpoints ustawiać wielkość czcionki. Dla konkretnego elementu.
W związku z tym że praktycznie zawsze korzystam z „rem” oraz „px” to aby podawać pełne wartości nie milion cyfr po przecinku np. „1.52293848rem” ustawiam pewien hack który to ułatwia.
Do elementu html dodaję:

html {
 font-size: 62.5%;
}

Jedynie za pomocą tej wartości mogę zrobić coś takiego jak ustawić „font-size: 20px” a także „font-size: 2rem” 🙂
Nie muszę przeliczać px na rem chodź i tak można zrobić to automatycznie w scss czy less, jakoś wolę ładne cyferki.

A może jest lepszy sposób na to aby za każdym razem nie zmieniać czcionki za pomocą breakpoints. No oczywiście że jest, ale raczej do wykorzystania do stron mało skomplikowanych jak landing page, jakieś prezentacje, itd. Nie widziałem tego rozwiązania w dużych projektach, ale może się mylę.

Dobra zaczynamy. Na początek zwykły tekst który będzie poddawany testom 🙂

<h1>JAKAŚ TREŚĆ</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque sunt quasi quis voluptate tempora laboriosam. Ipsa sequi earum debitis facilis. Modi dolor deserunt voluptatem, earum debitis suscipit blanditiis voluptate doloribus.</p>
10 Sie 2018

Gulp workflow: minimalizacja zdjęć i konwersja na webp

Kiedyś w zamierzchłych czasach używałem perla + lib ImageMagick do konwersji zdjęć, ale mamy XXI wiek i Node 😉
Od jakiegoś czasu zmienił się mój workflow dotyczący obróbki zdjęć na potrzeby stron internetowych.
Do tej pory używałem gulp-image, gulp-imagemin i wiele innych, ale zawsze coś było nie tak, zawsze czegoś brakowało.
Ostatnio używam takiego zapisu jak poniżej

<picture>
    <source class="img-responsive" srcset="./images/thumbnail/IMG_5600.webp" type="image/webp"/>
    <source class="img-responsive" srcset="./images/thumbnail/IMG_5600.jpg" type="image/jpeg"/>
    <img class="img-responsive" src="./images/thumbnail/IMG_5600.jpg" alt=""/>
</picture>

i potrzebowałem również webp, no i co następna biblioteka gulp-webp jest potrzebna 🙁
Mały research i okazało się że jest biblioteka sharp, która bardzo dobrze zastępuje ImageMagick więcej na tej stronie. Biblioteka ta jest w stanie zastąpić wszystko co do tej poru używałem.

Obecnie korzystam z pluginu gulp-responsive który pod spodem używa tejże biblioteki sharp.
Zmiana rozmiaru obrazu za pomocą tej biblioteki jest zazwyczaj 4x-5x szybsza niż w przypadku najszybszych ustawień ImageMagick i GraphicsMagick, a więc czemu jej nie używać. Oczywiście ta bibliotek nie tylko do zmniejsza grafiki ale również przycina, zmieniania formatu, zapisu do grayscale czyli szarości i wiele innych użytecznych rzeczy potrafi 🙂

Dobra zaczynamy cały proces.
Oczywiście musimy mieć zainstalowane node w naszym środowisku ale to nie temat na ten artykuł.

Na początek tworzymy package.json

npm init -y

Instalujemy wszystkie potrzebne biblioteki

npm i -D gulp gulp-responsive gulp-load-plugins