12-tygodniowy plan II - tydzień dziewiąty (36)
Kolejny solidnie przepracowany tydzień za mną i kolejny (przedostatni
już) kwartał tego 12-tygodniowego cyklu za mną. W poniedziałek zrobiłem
przegląd tygodnia i wprowadziłem dane do mojego pliku i naprawdę wygląda
to solidnie. To był zdecydowanie najbardziej produktywny kwartał od
początku tego cyklu. Fakt, że zredukowałem nieco liczbę zadań, w
porównaniu do pierwotnych planów, ale nie było sensu się oszukiwać, że
jestem w stanie to wszystko ogarnąć.
Przede wszystkim udało mi się dokończyć kurs z JS. Trochę już mnie męczył ten kurs, bo za
bardzo zajmował mi głowę i czas, który obecnie wolę przeznaczać na
praktykę. Natomiast jedno co mogę powiedzieć na pewno to, że jest to
bardzo przyzwoity kurs i naprawdę dużo się dzięki niemu nauczyłem o
HTML, CSS, JS oraz o zasadach budowania responsywnych stron
internetowych. Jest to kurs prowadzony przez niejakiego Majka,
założyciela MMC School i z czystym sumieniem mogę go polecić każdemu,
kto chce się nauczyć tworzyć nowoczesne strony internetowe. Co prawda
cały kurs składa się jeszcze z kilku modułów poszerzających wiedzę o
budowaniu stron internetowych, ale ja nie planuję ich wykupować. Po
przepracowaniu trzech części tego kursu poznałem więcej niż podstawy z
Web Developmentu i wiem gdzie szukać dalszej wiedzy, a po drugie to
docelowo nie chcę być Web Developerem tylko Software Developerem więc
wolę bardziej rozwijać swoje umiejętności w programowaniu za pomocą JSa i
poznać Reacta. Natomiast wczoraj trafiłem na darmowy kurs z CSS od
Kevina Powella. Kurs jest fajny, bo trwa 21 dni (akurat tyle mi zostało w
tym 12-tygodniowym cyklu) i lekcje nie zajmują więcej niż pół godziny
dziennie. Jako że już wiele jego filmików na YouTube widziałem i bardzo
mi się podoba to, jak tłumaczy on różne zagadnienia i koncepty z CSS ,
postanowiłem przetestować ten kurs. Wczoraj przerobiłem drugą lekcję.
Spoko jest to, że po zakończeniu lekcji z danego dnia, ta na kolejny
dzień, odblokowuje się dopiero następnego dnia. Materiał był krótki, bo
trwał łącznie ok. 20 mi, ale Kevin doskonale wytłumaczył w nim zasady
działania jednostek REM i EM, o których istnieniu wiedziałem, ale o ile REMy stosowałem (bez większego zrozumienie po co) o tyle EMów w ogóle nie używałem bo w przypadku tych drugich nie widziałem żadnego sensownego zastosowania.
Jednostki
te odnoszą się do rozmiarów czcionek i tak jednostka EM użyta do
określenia rozmiaru czcionki jest to krotność rozmiaru czcionki
rodzica elementu, na którym jest użyta (2em -dwa razy rozmiar czcionki
rodzica, 0.5em połowa rozmiaru czcionki rodzica itd.). Natomiast
jednostka REM jest to krotność rozmiaru czcionki ::ROOT, a więc tak
naprawdę HTML. I to jest mega użyteczne, bo jak zamieniłem na swojej
stronie rozmiary wszystkich czcionek na REM-y, to żeby uzyskać efekt
responsywności, wystarczy, że w Media Querry ustalę inne rozmiary
czcionek ::ROOT, czyli HTML dla różnych rozdzielczości. Poza tym tych
jednostek można też używać do określenia rozmiaru innych elementów na
stronie, nie tylko czcionek. Jednostka REM wówczas nadal odnosi się do
rozmiaru czcionki HTML, natomiast EM odnosi się do rozmiaru czcionki
określonej dla elementu, w którym jest użyta (a nie wielkości czcionki
rodzica jak to miało miejsce w przypadku użycia jej do określenia
font-size). Zajebiście sprawdza się to w przypadku określania np.
paddingu wokół tekstu, do którego rozmiaru użyta jest jednostka REM,
ponieważ w takim wypadku zmiana rozmiaru czcionki spowoduje
proporcjonalną zmianę paddingu. Od razu znalazłem zastosowanie tej
wiedzy na mojej stronie, ale o szczegółach napiszę za chwilę.
W
zeszłym tygodniu zrobiłem 4 zadania na Codewars. Wczoraj też się za nie
zabrałem, ale mocno się zaciąłem na pierwszym, jakie mi wypadło.
Spędziłem nad zadaniem jakieś półtorej godziny, aż ostatecznie uznałem,
że wpadłem w efekt Einstellung i że mój umysł krąży wokół niewłaściwego
rozwiązania. Postanowiłem odejść od komputera i zacząłem odkurzać dom.
Po godzinie odkurzania usiadłem z powrotem do komputera i voila, w ciągu
kilku minut wpadłem na właściwe rozwiązanie. Poszedłem za ciosem i
machnąłem jeszcze 2 zadania, które już poszły mi jak po maśle. Dzisiaj
też rozwiązałem 2 i nie sprawiły mi one trudności. Chyba będę robił
więcej tych zadań, żeby jak najszybciej wskoczyć na wyższy poziom i
dostawać trudniejsze. Również z tutorialami na MDN spędziłem więcej czasu niż mam zaplanowane - w sumie ok 3h. Teraz jak mam już przerobiony kurs, tutoriale z MDN są świetnym uzupełnieniem i utrwaleniem wiedzy, którą już przerobiłem, a regularne stosowanie tej wiedzy w praktycznych zadaniach na Codewors zauważalnie podnosi mój skill JavaScript'owy. Już wkrótce zacznę go wdrażać na mojej stronie bloga i w Bajtmanie.
Sporo też popracowałem nad responsywnością
strony mojego bloga, a w zasadzie to nad jego sekcją nagłówkową.
Najwięcej namęczyłem się nad nawigacją, która, jak sobie wymyśliłem,
podczas przewijania strony ma stopniowo zakrywać zdjęcie z setupem i
zatrzymać się przed sekcją z logo i tytułem strony. Taki efekt otrzymuje
się przez zastosowanie właściwości position: sticky i określeniu
miejsca (za pomocą właściwości top, bottom, right czy left), w którym
dany element ma się zatrzymać. Problem polega na tym, że ta właściwość
działa tylko w obrębie swojego rodzica i po wielu próbach,
poszukiwaniach na MDN, StackOverflow i w innych zakamarkach internetu
postanowiłem wyjąć moją nawigację z sekcji <header> tak, że teraz
jej rodzicem jest <body>. Żeby uzyskać lepszy efekt, zrezygnowałem
też z grafiki w formie faktury na tle całej strony na rzecz jednolitego
koloru. Efekt mi się podoba, więc nie ma co kombinować.
Drugim
problemem było określenie pozycji top, w której nawigacja miała się
zatrzymać w zależności od rozmiaru nagłówka, który to rozmiar zmienia
się w zależności od rozdzielczości ekranu, na którym jest wyświetlany
(RWD — Responsive Web Design). Kombinowałem w Media Query ustawianie
różnych wartości top (w pikselach) dla różnych rozdzielczości ekranu.
Problem pojawiał się, kiedy postanawiałem zmienić rozmiary czcionek przy
jakichś rozdzielczościach.
Z pomocą przyszedł mi właśnie Kevin
Powell ze swoim kursem CSS i lekcją dotyczącą zastosowania jednostek REM
i EM, którą dzisiaj przerobiłem. Okazuje się, że wystarczyło zmienić
jednostki. Jak już pozamieniałem wszystkie rozmiary czcionek na REM-y,
to wystarczyło tę jednostkę wykorzystać do określenia pozycji top, na
której ma się zatrzymać nawigacja. Jako że nawigacja na mojej stronienie
nie jest dzieckiem nagłówka z logiem i tytułem strony, nie mogłem
zastosować EM-ów, bo jak już pisałem, te dziedziczą wartość po rodzicu,
ale skoro rozmiary w nagłówku określone są w REM-ach, a te odnoszą się
do rozmiaru czcionki określonej dla HTML, to wystarczyło ustalić pozycję
top na podstawie właśnie tej wielkości. Teraz już nie muszę się
martwić, że przy zmianie rozmiaru czcionki tytułu strony dla różnych
rozdzielczości moja nawigacja będzie zatrzymywać się za wysoko lub za
nisko. Obie wielkości zmieniają się proporcjonalnie razem ze zmianą
rozmiaru czcionki HTML.
Na koniec wklejam poziom realizacji zadań. Wygląda to naprawdę dobrze:
Jeszcze jedno, w zeszłym tygodniu 3 razy udało mi się wyjść biegać, pierwsze treningi były trudne, natomiast już za trzecim razem w miarę bez problemu przebiegłem 5km. Niestety ciągle nie udaje mi się wprowadzić nawyku wcześniejszego kładzenia się spać i wstawania rano, przed wszystkimi. Cały czas mam poczucie, że zrobiłem za mało i co wieczór za dużo czasu spędzam przed monitorami a przez to rano jestem niewyspany. Natomiast coraz trudniej się biega po odprowadzeniu dzieci do przedszkola, bo jak jest słońce to coraz bardziej grzeje, a więc jeśli chcę nadal rano biegać, to będę musiał zacząć to robić przed odprowadzeniem dzieci.
"Cierpliwość, wytrwałość i pot tworzą niepokonaną kombinację sukcesu." ~ Napoleon Bonaparte
"Nie trafiłem ponad 9000 rzutów w moim życiu. Przegrałem ponad 300 meczów. 26 razy zaufano mi, gdy miałem oddać rzut na miarę zwycięstwa i spudłowałem. Przegrywałem w moim życiu ciągle. Dlatego właśnie osiągnąłem sukces." ~ Michael Jordan
Komentarze
Prześlij komentarz