Miesiąc: Lipiec 2019

Jako programiści jesteśmy odpowiedzialni za kod który piszemy.

Zgadza się?

Nie, nie do końca. Jesteśmy odpowiedzialni za kod, który zostawiamy. Chcemy, żeby nasze programy były jak najbardziej optymalne, stąd pamiętajmy również o usuwaniu zbędnego kodu.

Ciekawym narzędziem do sprawdzania tego ile kodu faktycznie jest używane na stronach internetowych jest zakładka Coverage w narzędziach developerskich Chrome.

Możemy ją znaleźć w ten sposób:

Teraz możemy zbadać ile realnie naszego kodu CSS i JS używane jest na stronie, którą załadowaliśmy.

Po rozpoczęciu audytu wyświetla nam się piękna tabelka, która pokazuje źródło, z którego pobierany jest kod, typ (plik JS lub CSS). Mamy również podane wielkości plików oraz ilość bajtów, które nie zostały użyte na danej stronie.

Po kliknięciu na dane źródło będziemy mogli zobaczyć, dokładnie które linie kodu są wykorzystywane. To, że jakiś kod nie jest wykorzystywany na dalej stronie nie znaczy, że definitywnie trzeba go usunąć. Warto po prostu się zastanowić do czego służy i czy jest niezbędny. Polecam eksplorację tej części narzędzi developerskich.

Masz jakieś inne sprawdzone sposoby na identyfikowanie niepotrzebnego kodu? Podziel się koniecznie w komentarzu.

Od kiedy poznałam narzędzie SVG OMG już zawsze dbam aby kod SVG, który dodaję do projektu zawsze był jak najlżejszy i bardziej czytelny. To genialne narzędzie stworzone przez Jakea Archibald i opisane jako:

SVGOMG is SVGO‚s Missing GUI, aiming to expose the majority, if not all the configuration options of SVGO.

Jak korzystać z SVG OMG?

Kiedy dostajemy grafikę w formacie SVG często znajduje się tam sporo kodu, który zupełnie nie jest potrzebny. Do tego pewne kształty i krzywe można znacznie uprościć. Warto zadbać o optymalizację, dzięki temu narzędziu zyskamy mniejszy rozmiar pliku oraz większą czytelność kodu.

Wchodzimy na stronę: SVG OMG i wklejamy nasz snippet lub ładujemy nasz plik SVG. W głównym panelu powinniśmy mieć podgląd naszej grafiki. Na stronie dostępne jest demo, polecam zapoznanie się z dostępnymi opcjami.

Jak widać z powyższego obrazka dzięki SVG OMG plik został zmniejszony o prawie 60%. Dostępne są dwa widoki: możemy sprawdzić wygląd grafiki oraz mamy podgląd kodu. Jednym z ważniejszych parametrów jest dokładność jaka jest zachowana względem oryginalnej grafiki. Warto mieć na uwadze to, że program upraszcza krzywe i kształty, stąd mogą się pojawić drobne różnice.

SVG OMG dostarcza nam sporo opcji, które możemy dostosować do własnych potrzeb.

Polecam wprowadzenie używania tego narzędzia jako standard w Twoich projektach. 😉

Masz jeszcze jakieś inne metody na optymalizację SVG? Znasz jakieś inne ciekawe narzędzia? Koniecznie podziel się w komentarzu!

Style do druku stron internetowych

CSS media otwierają nam wiele możliwości. Dzięki nim nie tylko możemy dodawać style, które będą aplikowane o różnych rozdzielnościach urządzeń, czy orientacji urządzenia mobilnego (wertykalne/ horyzontalne). Warto pamiętać, że mamy również możliwość stylowania stron internetowych do druku.

Spotkałeś/spotkałaś się z zapisem @media screen? Aby zaaplikować dodatkowe style do druku należy dodać do pliku CSS @media print. Inną metodą dodawania stylów jest przez link do osobnego pliku.

<link rel="stylesheet"
      src="print.css"
      type="text/css"
      media="print" />

Dla ciekawskich jest jeszcze kilka innych opcji, które możemy dodać oprócz wyżej wymienionych screen i print, na przykład speech, tv a nawet  braille. Więcej przeczytasz tutaj.

Symulator w narzędziach developerskich Chrome

Narzędzia developerskie Chrome umożliwiają nam na symulowanie strony do druku. Wystarczy wejść w zakładkę Rendering. Na samym dole znajdziemy zakładkę Emulate CSS media. Najprawdopodobniej będziesz mieć wybraną opcję no emulation albo screen. Po kliknięciu pokazują nam się trzy opcje i możemy wybrać print.

A po jaką cholerę potrzebne mi style do druku?

W obecnych czasach raczej rzadko korzystamy z drukowania stron internetowych. Czasami jednak może to być przydatne dla naszych użytkowników.  Warto zadbać o to, aby taka strona do druku nie była w totalnej rozsypce. Flexbox i CSS grid nie będą wyglądać najlepiej po wydrukowaniu.

Przykładowe sytuacje w których faktycznie może się to przydać?

• Strona podsumowania zamówienia w sklepie internetowym. Ważne, żeby po wydrukowaniu wyglądała czytelnie.
• Wydruki z banku internetowego.
• I jeszcze jeden przypadek, na który natknęłam się osobiście w pracy. Zastanów się, czy widziałeś kiedyś logotyp na stornie internetowej, który był biały? Domyślasz się zatem jak wygląda na białej kartce? Czasami małe rzeczy mają spore znaczenie 😉

Dodatkowe źródła

Poniżej znajdziesz kilka przydatnych linków, które zawierają dużo więcej informacji o stylowaniu stron o druku.

A Guide To The State Of Print Stylesheets In 2018; Rachel Andrew, Smashing Magazine

How to Create Printer-friendly Pages with CSS; Craig Buckler, Sitepoint

Masz jakieś fajne wskazówki odnośnie stylowania stron internetowych do druku? Koniecznie podziel się w komentarzu!