Pierwszą część tekstu znajdziesz pod tym adresem.
Zdjęcie główne artykułu pochodzi z pl.depositphotos.com
1. Emmet
Większość edytorów tekstu pozwala na przechowywanie i ponowne używanie często wykorzystywanych fragmentów kodu (ang. snippets). Jest to bardzo dobry sposób na zwiększenie wydajności. Emmet posługuje się pomysłem snippetów pozwalając użytkownikowi na wpisywanie komend podobnych do wyrażeń języka CSS, które analizuje i zamienia w kod. Autorzy rozwijają i optymalizują narządzie pod programistów bazujących na technologiach takich jak HTML/XML i CSS, ale może być stosowany również w innych językach.
Głównie wspierane:
Wsparcie stworzone przez użytkowników:
Przykłady:
Zagnieżdżanie
Mnożenie
Operacje na atrybutach
Dodawanie treści
Złożony przykład
2. Chrome Developer Tools
Narzędzie Chrome Developer Tools służy do tworzenia i debugowania stron internetowych, wbudowane w przeglądarkę Chrome. Zapewnia im dostęp do wewnętrznych części przeglądarki odpowiadających za działanie i wyświetlanie strony internetowej.
Główne grupy narzędzi jakie tam znajdziemy:
- Elementy – dostarcza widok wszystkich elementów DOM w formie drzewa. Pozwala na inspekcję i edycję z podglądem każdego z nich. Często używany, aby sprawdzić konkretny element na stronie. Wystarczy najechać na niego kursorem, wcisnąć prawy przycisk myszy i wybrać opcję “zbadaj”. Użytkownik od razu widzi wszystkie style przypisane do elementu oraz jaki identyfikator czy klasy są mu przypisane.
- Konsola – miejsce gdzie programista może zobaczyć wszystkie błędy, ostrzeżenia oraz informacje wysyłane przez API np. poprzez funkcję console.log(), a także pisać i wykonywać kod JavaScript.
- Pliki źródłowe – wszystkie pliki HTML, CSS i JavaScript, pobierane podczas ładowania strony, podzielone na źródła, z których pochodzą.
- Sieć – zawiera wszystkie informacje o żądaniach, których nasza strona potrzebuje do załadowania się. Wśród tych informacji możemy sprawdzić, ile czasu i pamięci potrzebuje każde z nich. Pozwala to między innymi na dokładną analizę obrazów ładujących się na naszej stronie i optymalizację tych, które potrzebują za dużo czasu lub zajmują za dużo pamięci.
- Wydajność – Oś czasu zawierająca dane na temat ilości klatek na sekundę, obciążenia procesora oraz zrzuty ekranu ładującej się strony i wiele innych.
- Audyt – sprawdza stronę pod kątem spełniania standardów Progressive Web App. Weryfikuje jak długo trwa załadowanie zawartości i kiedy strona jest gotowa do użytku. Analizuje czy spełnia wszystkie współcześnie stosowane praktyki oraz czy zastosowane są udogodnienia dla osób niepełnosprawnych.
3. PageSpeed Insights
PageSpeed Insights to narzędzie stworzone przez firmę Google. Mierzy wydajność strony internetowej pod kątem urządzeń mobilnych, jak i również tych desktopowych. Sprawdza czy zostały użyte wszystkie, powszechnie używane za standard praktyki. Wyniki wyświetla w skali od 0 do 100 i przydziela do jednego z trzech priorytetów:
Wśród szczegółowych wyników możemy znaleźć propozycje wykorzystania pamięci podręcznej przeglądarki, optymalizacji obrazów, plików CSS czy JavaScript. Poza radami poprawiającymi wydajność naszej strony, otrzymujemy paczkę z zoptymalizowanymi plikami. Należy jednak pamiętać, że otrzymany wynik może pogorszyć zewnętrzne skrypty, których optymalizacja nie zawsze jest możliwa oraz obrazy, których większa kompresja może znacznie pogorszyć jakość naszej strony. Dobrą praktyką jest używanie kilku tego typu narzędzi jednocześnie. Podobną stroną gdzie można przeprowadzić równie dokładną analizę jest GTmetrix.
Przykładowy wynik:
4. Webpack
Narzędzie optymalizujące moduły aplikacji napisanych w JavaScript. Pobiera wskazane pliki, łączy je według potrzeb i skompresowane oraz pozbawione duplikatów zapisuje we wskazanym miejscu. Co najważniejsze, Webpack analizując pliki pobiera tylko wykorzystywane w nich zależności pomijając zbędne dane. Pozwala na rozbijanie kodu na wiele plików. Dzięki temu nasz kod staje się czytelny i zoptymalizowany.
Instalacja
Do instalacji wymagany jest pakiet Node.js
lokalnie:
npm install –save-dev webpack
globalnie:
npm install –global webpack
5. RWD (Responsive Web Design)
Podejście stosowane w projektowaniu i programowaniu stron internetowych polegające na wyświetlaniu tej samej zawartości na komputerach osobistych jak i najróżniejszych urządzeniach mobilnych. Możliwe jest to dzięki zastosowaniu media queries języka CSS, stworzeniu projektu używając układu kolumnowego oraz obrazów dopasowujących się do rozmiaru strony.
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
Dzięki takiej linijce kodu HTML w nagłówku, nasza strona będzie rozciągnięta do 100% szerokości obszaru ekranu i pozostanie w skali 1:1 z możliwością skalowania.
Media queries to część języka CSS pozwalająca na tworzenie punktów kontrolnych i aktywowanie stylów między innymi w zależności od szerokości, wysokości czy orientacji ekranu.
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
Do testowania responsywności Internet oferuje wiele narzędzi. Najpopularniejszym sposobem jest emulacja urządzeń wbudowana we wcześniej opisywane narzędzie – Google Chrome Developer Tools. pozwala na wybór popularnych modeli telefonów lub tabletów jak i również ustawienie niestandardowych rozdzielczości.
Chrome Developer Tools – przełącznik widoku urządzeń
Chrome Developer Tools – iPhone 6 Portrait
Chrome Developer Tools – iPad Landscape
Istnieją również narzędzia wykonujące zrzut ekranu dla zadanych rozdzielczości. Takie rozwiązanie idealne jest dla rozbudowanych systemów, w których wprowadza się dużo zmian. Wtedy programista ma wgląd w każdą podstronę i na bieżąco monitoruje responsywność strony.
Podsumowanie
Powyższe zestawienie niezbędnika programisty, w moim przekonaniu jest obowiązkowym „must have”. Listę można by jeszcze długo rozwijać… Na rynku dostępnych jest wiele różnych narzędzi, które znacznie usprawniają pracę. Jedne zwiększają nasz komfort pracy, inne wydajność, a jeszcze inne mają za zadanie pilnować jakości naszego kodu i tego by użytkownik zobaczył nasze dzieło jak najszybciej. Zapewne, ile osób, tyle jest praktyk i przyzwyczajeń. Warto śledzić nowości i testować coraz to nowsze rozwiązania.
A Wy z czego korzystacie w pracy?
–
Amadeusz Kozłowski
Front End Developer w HighSolutions
Firmowy ekspert od optymalizacji serwisów internetowych oraz kodowania grafiki zgodnie z zasadami Responsive Web Design. To dzięki niemu nasze realizacje szybko się ładują oraz są wygodne do przeglądania także na mniejszych wyświetlaczach urządzeń mobilnych.
