ℹ️ Przede wszystkim: dla programisty kluczowe są aspekty związane z efektywnym, skalowalnym i utrzymanym kodem (inaczej mówiąc: aktualizowanym), oraz z optymalizacją wydajności strony (to tzw. performance).
A w ogóle, więcej o pracy jako programista frontend dowiesz się więcej z tego odcinka naszego podcastu. Też warto tam zajrzeć!
🔢 O kodzie! 🙏
Programiści (programistki) zwracają uwagę na czytelność i odpowiednią strukturę kodu. Używanie przyjętego nazewnictwa (sprawdź nasz ✨ Słowniczek designera ✨), zachowanie modularności (czyli projekt strony jest jak matrioszka – baba w babie, boks w boksie, a o modułach doczytasz w innym wpisie na naszym blogu: tutaj) oraz zastosowanie sprawdzonych wzorców projektowych (navbar na górze strony, stopka na dole, itepe, itede) pomaga w utrzymaniu kodu w dobrej kondycji.
W końcu potem o higienę takiego kodu trzeba dbać.
Co powinno być ważne dla designera: porządek w projekcie ⚠️. ****Odpowiednio grupujemy i nazywamy frame’y, komponenty, wszystkie assety… Jak my nie zagubimy się w tych wszystkich elementach, to pół biedy. Jeszcze jest programist(k)a, który później wchodzi w zupełnie obcą dla niego strukturę, no i musi się w niej połapać, coby wszystko działało jak należy.
🕸️ Pamiętamy tutaj też o odpowiednim gridzie. Siatki (gridy) są jak szkielet strony. Pozwalają na elastyczność w rozmieszczeniu elementów, ale i nadanie im odpowiedniej struktury. Dla osoby odpowiedzialnej za zakodowanie projektu istotne są też wielkości zastosowane w projekcie, czy spacingi (odległości) pomiędzy elementami. Dlatego te kwestie też muszą być spójne.
👉 A co więcej, dobrze udokumentowany kod ułatwia współpracę z innymi kodziarzami. 🤓 Stworzenie jasnej dokumentacji oraz przestrzeganie standardów (w tym wypadku wspólnej pracy 🤝) przyspiesza rozwój projektu stonks.
⚒️ Kompatybilność
Programiści (programistki) często korzystają z dostępnych narzędzi i bibliotek open source, które są rozwijane przez społeczność i posiadają stabilną dokumentację. Otwarty kod pozwala na większą reużywalność, elastyczność, i dostosowanie do konkretnych potrzeb projektów.
💡 Oczywiście, programiści (programistki) jako dobrą praktykę przyjmują też unikanie blokujących skryptów. Wszystko po to, aby zoptymalizować ładowanie zasobów, a także minimalizować ilość niepotrzebnego kodu. A takim zewnętrznym skryptem jest np. Google Fonts – świetny wybór, ale jednak ma też swój udział w performance strony.
📈 Badanie i poprawa czasów ładowania strony to stały proces, który bardzo mocno przekłada się nie tylko na doświadczenie użytkowników, ale i efekty marketingowe (np. SEO, czyli pozycję strony w wyszukiwarce, a nawet i działania SEM, czyli płatne kampanie).
Oczywiście, ważne jest też utrzymanie kompatybilności kodu z różnymi przeglądarkami i urządzeniami. Unikamy rozwiązań, które mogą generować problemy z obsługą. Oczywiście króluje nam też podejście mobile-first, a bardzo często implementacja kodu rozpoczyna się właśnie od tego widoku.
🔁 Testowanie
Testowanie to fundament poprawności działania kodu. Nie wiesz, czy coś działa, dopóki tego nie sprawdzisz na żywca.
Testowanie jednostkowe pozwala sprawdzać poszczególne fragmenty kodu, podczas gdy testowanie funkcjonalne skupia się na sprawdzaniu, czy całość systemu działa zgodnie z założeniami.
Regularne i kompleksowe testy pomagają utrzymać stabilność systemu, nawet w miarę wprowadzania nowych funkcji czy poprawek. Oczywiście, do takiego kodu też prowadzi się odpowiednią dokumentację, w której odnotowuje się komentarze i poprawki.
Naszym wspólnym celem jest stworzenie strony, która nie tylko wygląda świetnie, ale także działa efektywnie i zgodnie z założeniami projektowymi. Dlatego komunikacja to klucz! 🔑
🤓 Chcesz dowiedzieć się więcej o perspektywie kodowania?
Sprawdź, czy nasz kurs, w pełni poświęcony animacjom, protoypowaniu i interakcjom – Interaction Designer jest w sprzedaży. Czeka w nim na Ciebie specjalny moduł poświęcony wywiadowi z programistą frontend, który omawia temat ciekawych makiet UI w Figmie ze swojej perspektywy – dosłownie.
A jak nie wiesz, czy prototypowanie i animacje są dla Ciebie – zapisz się na darmowe lekcje. Wystarczy, że klikniesz ten link, a na Twój adres e-mail pofruną aż cztery, bardzo treściwe wideo-materiały.
