12-tygodniowy plan II - tydzień dziewiąty (36)

 Obraz Pexels z Pixabay

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. 

Don_Kiki_McArron

 

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

Popularne posty z tego bloga

Pracuje się, oj pracuje... (44)

No to do dzieła (21)

Kryzys wieku średniego (1)