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 tej lekcji pokażę ci w jaki sposób możesz debugować swoje strony internetowe
na iphonie lub ipadzie czyli musisz mieć system ios a
także musisz mieć przeglądarkę safari czyli tak naprawdę jeżeli pracujesz na macu i
i tworzysz stronę którą chcesz przetestować na iphonie lub ipadzie możesz
to zrobić z użyciem przeglądarki safari natomiast mamy tutaj kilka rzeczy
które musimy zrobić najpierw po pierwsze telefon od tablet musi być podłączony do twojego
komputera na którym masz przeglądarkę safari za pomocą kabla usb to
jest pierwsza rzecz a druga musimy na urządzeniu czyli w iphonie przejść
sobie do ustawień tutaj przejdziemy do safari musimy
coś takiego znaleźć następnie na sam dół do zaawansowane
i musimy włączyć inspektor www czyli to musi być w ten sposób na
zielono to jest bardzo istotne i teraz wystarczy że na swoim telefonie
lub tablecie przejdziesz na dowolną stronę internetową ja sobie przeszedłem
na eduweb które mam uruchomione lokalnie tak naprawdę na swoim komputerze więc
po adresie lokalnym przeszedłem do tej strony ale tu możesz przeczytać stronę
również z adresu internetowego dowolnego otwierasz przeglądarkę safari
i na tejże przeglądarce klikasz develop następnie iphone
jak widzisz tutaj iphone Piotr i masz tutaj listę stron jeżeli bylibyśmy na stronie eduweb.pl
tutaj byłoby to napisane ale że jestem po adresie ip to wygląda to w ten sposób i
to wygląda tak że widzimy tutaj całe drzewo dom w narzędziach deweloperskich przeglądarki
safari i możemy wykonywać tutaj różne rzeczy takie jak pokazałem
ci już przeglądarce google chrome w zasadzie to działa tutaj bardzo bardzo podobnie więc
można już bezpośrednio na urządzeniu sobie to zdebugować i to co jest istotne
to jeżeli na przykład byśmy sobie tutaj przeszli gdzieś do main zauważ
że jak ja tutaj zaznaczam ten element tą na telefonie również jest to podświetlane
czyli na żywo widzę z czym pracuję mogę sobie usunąć jakiś
element powiedzmy że jeżeli to bym usunął delete znika to również na mojej
stronie na telefonie super ciekawa rzecz natomiast to co jest jeszcze świetne
to mamy tutaj dostęp do konsoli i chociaż jeszcze w tym kursie o tym nie mówiliśmy
to być może wiesz jak ona działa otóż w konsoli możemy wykonywać język
javascript więc jeżeli bym sobie tutaj wpisał na przykład alert hello to
zauważ że taki alert pojawił się również na telefonie i dzięki temu
będziemy mogli w swoim kodzie javascript w plikach wpisywać różne console logi i inne
rzeczy i chociaż na telefonie normalnie nie mielibyśmy możliwość ich podejrzenia to
kiedy będziemy debugować w przeglądarce safari to zobaczymy to dokładnie
tutaj a więc tyle jeżeli chodzi o debugowanie jest to bardzo proste na tym przycisku
tutaj możemy odświeżyć stronę no i w zasadzie poza tym możemy korzystać z
wszystkich rzeczy dostępnych tutaj w narzędziach deweloperskich przeglądarki safari