Wydajne Tworzenie Stron WWW
2 godz. 2 min · Full-stack i Programowanie
Piotr PalarzWeb DeveloperNiezależnie od tego jak skomplikowana jest dana strona czy aplikacja internetowa, zawsze składa się ona z przynajmniej dwóch komponentów - struktury opisanej w HTML i wyglądu nadanego w CSS. Praca z tymi językami może czasami przyprawić o ból głowy, szczególnie wtedy, gdy tracimy czas na szukanie powodu "rozjeżdżającego się" layoutu lub złej wielkości fontu i miejsca, w którym został on nadpisany. W takich sytuacjach Chrome DevTools to nieoceniona pomoc. Dzięki temu narzędziu w mgnieniu oka znajdziesz zbyt szeroki element, zmienisz jego style "na żywo" i upewnisz się, że problem został rozwiązany. W kursie poznasz wszystkie techniki pracy z HTML i CSS, których wykorzystanie znacznie przyspieszy i uprości Twoją pracę.
Przygotowywanie stron na urządzenia mobilne nie należy do najłatwiejszych zadań. Składa się na to przede wszystkim fakt, iż do czynienia mamy z bardzo wieloma rozdzielczościami telefonów czy tabletów. W kursie zobaczysz, w jaki sposób skalować swoją stronę odwzorowując różne urządzenia, wyświetlać Media Queries czy emulować sensory ruchu. Dowiesz się również jak symulować wolniejsze połączenie internetowe, z którym mamy często do czynienia w mobilnych sieciach, a także jak spowolnić procesor, aby odwzorować słabszy sprzęt, jakim bez wątpienia są urządzenia mobilne.
Współczesne strony internetowe to nie tylko HTML i CSS. To także JavaScript - a nawet... sporo JavaScriptu. Z tego powodu narzędzia deweloperskie przeglądarek oferują i na tym polu wiele możliwości. Jedną z nich jest konsola, która pozwala wykonywać kod JavaScript w obrębie aktualnie otwartej strony. To właśnie tam możemy eksperymentować, podglądać logi czy błędy. Kiedy jednak stajemy przed rozwiązaniem trudniejszego problemu, często niezbędne jest skorzystanie z tzw. debuggera. Z kursu dowiesz się jak debugować swoje aplikacje, aby proces ich tworzenia był jak najprzyjemniejszy. Poznasz sposoby wykonywnania kodu linijka po linijce, gdzie na każdym etapie uzyskasz wgląd we wszystkie dane niezbędne do znalezienia problemu lub przetestowania tworzonego rozwiązania.
Nim dowolna strona internetowa zostanie wyświetlona, musi najpierw zostać do przeglądarki przesłana z serwera w formie kodu. Początkowo to tylko kod HTML, chwilę później CSS, JavaScript, fonty, obrazki, multimedia. Wszystkie te zasoby mają wpływ na szybkość ładowania się strony, a także jej renderowania. Tworząc serwis, bardzo łatwo "przesadzić" i stracić kontrolę nad wydajnością tego procesu.Tutaj z pomocą przychodzi panel Network, który omówimy w kursie. To tam znajdziemy wszystkie zapytania wysłane do serwera, dokładne dane na temat czasu pobierania każdego zasobu, statusy odpowiedzi ciasteczka i wiele więcej.
Choć zarówno komputery osobiste jak i urządzenia mobilne z roku na rok stają się coraz wydajniejsze, to i technologie tworzenia aplikacji internetowych idą do przodu. Oznacza to tylko tyle, że coraz bardziej zaawansowane aplikacje, wymagają do płynnego działania, coraz mocniejszych urządzeń. Trend ten można jednak w pewnym stopniu zatrzymać, skupiając się na tym, czy aby na pewno tworzone przez nas rozwiązania są dobrze przemyślane i wolne od błędów, które mogą powodować nadmierne zużycie pamięci czy czasu procesora. W kursie zobaczysz jak badać wydajność naszego kodu w kontekście CPU i pamięci RAM oraz na jakie pułapki zwracać szczególną uwagę.
Kurs ten jest dla wszystkich osób tworzących strony i aplikacje internetowe. Nieważne czy dopiero rozpoczynasz swoją przygodę z Web Developmentem czy jesteś już weteranem w tej branży. Materiał ten pokaże Ci nowoczesne techniki pracy, które przyspieszą i uproszczą proces tworzenia i testowania stron WWW. Kurs został podzielony w taki sposób, aby zarówno osoby znające wyłącznie HTML i CSS, jak i te korzystające już z języka JavaScript, znalazły porady odnośnie tych tematów.
W chrome devtools znajduje się jeszcze jedna zakładka której nie omówiliśmy aczkolwiek
w niej nie ma zbyt wiele do omawiania więc szybko ci ją pokażę jest to zakładka
security i ona nam pozwala pokazać czy nasza strona mówiąc wprost jest
bezpieczna a więc z jakich protokołów korzystmy i tak dalej tutaj widzimy że
jesteśmy na local hoście więc tak naprawdę zbyt wiele się nie dowiemy ale
dowiedzieliśmy się na przykład że zewnętrzny serwer który tutaj gdzieś mamy czyli code
eduweb.pl do którego wysyłaliśmy jakieś zapytanie że
ten serwer jest na http a powinien być na https widzimy
z kolei że fonty które pobieramy czy css-y już są z https tutaj
możemy zobaczyć dokładnie jakie protokoły są wykorzystywane i tak dalej lepszym
przykładem będzie strona eduweb.pl gdzie możemy przejść do security i tu z kolei
zobaczymy że ta strona jest bezpieczna dlatego że ma poprawny
certyfikat https możemy zobaczyć ten certyfikat gdybyśmy chcieli tutaj
są jego szczegóły do kiedy jest aktywny przez kogo został wydany no i
możemy zobaczyć jakie tutaj jest szyflowanie i tak dalej nie ma tutaj żadnych innych błędów natomiast
gdyby na stronie eduweb.pl były podlinkowane jakieś inne zasoby które nie są bezpieczne na
przykład jakiś formularz który jest po http moglibyśmy to tutaj zobaczyć
tak więc warto sobie tutaj rzucić okiem jeżeli będą jakieś problemy one się tutaj będą
pojawiać natomiast jeżeli chodzi o samo https to oczywiście jest
dobrą praktyką używanie takiego certyfikatu na każdej stronie nie tylko
tam gdzie są jakieś wrażliwe dane tym bardziej że możemy korzystać z darmowych certyfikatów
takich jak let's encrypt i w zasadzie dzisiaj każdy hosting oferuje wygenerowanie
takiego certyfikatu a jeżeli korzystasz z jakiegoś innego serwera na przykład
vps to możesz sam taki certyfikat za darmo wygenerować z użyciem
tak zwanego certbot-a dzięki temu twoja strona nie tylko będzie bezpieczniejsza
ale także będzie wyżej w rankingu jeżeli chodzi o pozycjonowanie
stron a więc w rankingu google dlatego że strony z https są
premiowane nad stronami które nie mają bezpiecznego połączenia