Posty z kategorii: Bez kategorii

Operacja Frontend + CMS cz. 1

Cześć!

Zgodnie z wcześniejszą zapowiedzią, bierzemy się za tzw. mięso. Czas się wziąć za przygotowanie nowego szablonu strony. Może wydawać się to troszkę śmieszne, ale jakoś dawno nie miałem okazji pogrzebać nic więcej w szeroko rozumianym froncie, więc drobna okazja właśnie się do tego nadarzyła. Jakie to ma plusy?

Nie ma co zwlekać, czas się wziąć za robotę!

Stos technologiczny

Od najniższego poziomu abstrakcji do najwyższego.

  1. Treść – oczywiście sama zawartość  zostanie opisana przy pomocy języka znaczników HTML5. Jest to standard w dzisiejszym Internecie i choćby dlatego warto to znać. Szczególną uwagę przyłożę do stosowania znaczników semantycznych. Pozwalają one na wyszczególnienie konkretnych fragmentów strony, co niesie ze sobą wiele korzyści. Przede wszystkim pozwala na usystematyzowanie zawartości strony, po drugie optymalizuje stronę pod względem wyszukiwarek. Ponadto sam format jest czytelniejszy dla tworzącego dokument. Należy zwrócić uwagę, aby oddzielić poszczególne warstwy od siebie. W dokumencie HTML nie możne znaleźć się osadzony styl CSS lub kod JS (przynajmniej nie powinien, jest to nieeleganckie, a my jesteśmy dżentelmenami :)). Dokument HTML z definicji ma za zadanie tylko i wyłącznie opisywać strukturę dokumentu, a nie jego wygląd. Do opisu wyglądu służą arkusze, które muszą znaleźć się w osobnych plikach.
  2. Wygląd – oczywiście będzie królował CSS3 i co do tego nie ma żadnych wątpliwości. CSS w wersji 3. daje bardzo dużą pulę narzędzi, które umożliwiają dynamiczne generowanie wyglądu strony. Dawniej wszystko się rysowało i wstawiało jako zdjęcia – cienie, ramki itd. Pamiętam nawet korzystałem z programu, który generował „fajne” przyciski… Dzisiaj patrzę na to z pożałowaniem… Na szczęście cały czas się rozwijamy! Wcześniej wspomniałem też o odizolowaniu warstwy dokumentu i wyglądu. Dzięki strona będzie złożona z łatwo wymienialnych modułów. Bardzo fajną analogią jest gniazdko zasilające w ścianie i urządzenia elektryczne. Łączą się ze sobą ściśle ustalonym interfejsem a jednocześnie są od siebie niezależne. Drugą bardzo ważną rzeczą dostarczoną przez CSS3 są tak zwane siatki (grid). Przyda się to przy implementacji responsywności strony, ale o tym niżej. Przy okazji nie będę korzystał z żadnych preprocesorów – mam założenie zagłębienia się w podstawy.
  3. Interakcja – JavaScript. Język, w którym budowane są dzisiaj całe serwisy, ale ja postaram się, aby po wyłączeniu obsługi JavaScript strona dalej zachowywała swoje funkcjonalności. Podziękujcie za to Krzaqowi – rozmawiał o tym z Maciejem Aniserowiczem w DevTalku z laureatami DSP. A postaram się to przetestować m. in. w takiej przeglądarce, którą zwą Elinks. Poniżej próbeczka:
  4. Obsługa treści – stary dobry WordPress (chociaż co do tego, czy dobry to zdania są podzielone). Ja używam i nie narzekam. Wychodzę z założenia, że trzeba sobie życie ułatwiać, a nie utrudniać. Dla mnie ten CMS jest wystarczający i bardzo ułatwia codzienną pracę z blogiem. Nie mam jakiś specyficznych wymagań co do funkcjonalności. Poza tym nawet jeżeli będę kiedyś potrzebował coś szczególnego, to sobie dopiszę wtyczkę 🙂 No właśnie, przy okazji WordPressa trzeba wspomnieć o PHP. Został on w nim stworzony, więc nie uniknę styczności z tym językiem. Podobno w wersji 7.x jest całkiem fajny 🙂 A no i najważniejsze – szablon musi być zbudowany zgodnie z API WordPressa.
  5. Reszta świata – postaram się nie korzystać z żadnych frameworków czy bibliotek. Chodzi o to, żeby poznać się z podstawami technologii. Czysty JS i PHP, czysty CSS bez stosowania preprocesorów (LESS, SASS, SCSS). Po prostu nie. Co najwyżej skorzystam z Grunta albo Gulpa do minifikacji plików. No i najważniejsze – Git. Kod będzie dostępny u mnie w repozytorium. Przy okazji potrenujemy sobie zabawy z tym systemem kontroli wersji. Nad projektem graficznym będą czuwały zasady Material Design.

Podsumowanie

O tak, zaczynamy powoli bawić się w tak zwane mięsko. Wypisałem podstawowy stos technologiczny, który swoją drogą nie jest zbyt wyszukany, ale taki ma być. Myślałem, że więcej  uda mi się opisać w tym wpisie, jednak jak sobie podsumowałem wszystko, to wyszło bardzo dużo zagadnień. Dlatego podzielę ten wstęp na kilka części. W następnej odsłonie, która być może ukaże się szybciej niż za tydzień, opowiem o smaczkach, które chciałbym zaimplementować w swoim szablonie, podam parę ciekawych źródeł oraz bardziej zagłębię się w poszczególne elementy stosu. Oprócz tego zaprezentuję Ci grafiki ilustrujące szablon strony na urządzenia mobilne oraz tablety i desktopy. Zapraszam do śledzenia! Czołem! 🙂

Czym udekoruję swoje mieszkanie?

Cześć!

Mega mi się spodobało porównanie z mieszkaniem #TakiJestemSkromny 😀 Niektórzy może pomyślą, że to blok o wystroju wnętrz czy coś… Jednak w dzisiejszym wpisie w kilku słowach opowiem Ci o planowanych przeze mnie dodatkowych sekcjach na blogu, które niebawem myślę ruszą. Żeby nie przeciągać, zaczynamy!

My home library

Sekcja, która dość często pojawia się na różnych blogach, dlatego też i u mnie się pojawi z dwóch powodów:

I tutaj też trzy poziomy…? Proszę Pani, on ściąga od kolegów!

Może i tak. Ale czemu nie stosować czegoś, co sprawdza się u innych? Grzechem byłoby nie spróbować, więc i u mnie taka sekcja powstanie. Znów kilka powodów:

Ten wpis pojawi się 11.09. Powyższe dwie rzeczy w swoich pierwszych wersjach pojawią się dokładnie tydzień później, tj. 18.09.

Kursy/tutoriale

Miałem przyjemność w drugiej połowie 2015 roku i okazjonalnie w 2016 roku prowadzić zajęcia, gdzie wspólnie z moimi młodszymi kolegami ze studiów razem uczyliśmy się podstaw programowania w C++. W tym roku na 90% również poprowadzę takie zajęcia, jednak tym razem będę starał się opisywać je na blogu to, co na nich robimy, a przy okazji dodatkowo komentować treści, które są w ramach tych zajęć poruszane, czy rozszerzać je o najnowsze standardy. Kto wie, może moi koledzy przyszli automatycy lub mechatronicy poczują pasję do programowania? Oby! Co ważne wbrew pozorom w dzisiejszej automatyce czy mechatronice nie da się obejść bez choćby kawałka kodu, o czym już trochę pisałem.

Ponadto u mnie się najlepiej także sprawdza zasada nauki poprzez uczenie kogoś. W przyszłości zatem pojawią się kursy czy tutoriale na temat tego, czego aktualnie się uczę.

My swetty new view

Już o tym wspomniałem w poprzednim poście, ale będziemy mam nadzieję razem tworzyć wygląd tego miejsca. Ten aktualny jest bardzo suchy, zimny, nieprzyjazny dla użytkowników. Dlatego też w ramach własnego rozwoju w technologiach frontendowych wdrożę nowy szablon dla bloga. Może z tego powstanie cała identyfikacja, kto wie 🙂 Ponadto dzięki nowemu widokowi wyeksponuję media społecznościowe, na których możecie mnie znaleźć i inne fajne rzeczy, które będą hulały w ramach tego miejsca 🙂

Teraz może ciut kontrowersyjna wersja, którą chciałbym zasygnalizować. Przeleciał mi w miejscu między uszami (hmm… chyba mózg???) taki pomysł, że kiedy to miejsce będzie ciut częściej przez Was odwiedzane, to może się stać, że włączę delikatne, nikomu nie przeszkadzające reklamy. W najbliższej i chyba jakiejkolwiek przyszłości nie zamierzam się utrzymywać z bloga, a nie chciałbym też wkładać w niego pieniążków. A to może by mi pozwoliło na opłacenie serwera i domen, więc moja pasja stałaby się całkowicie bezkosztowa. Nie wiem, zobaczymy w praniu. Jednak chciałem od razu o tym powiedzieć, żeby ktoś nie miał kiedyś jakiś uwag 🙂

Co przy okazji tego wpisu?

Cały czas się uczę produktywności. Ostatnio wpadłem na wpis Jakuba Gutkowskiego, którego blog też od czasu do czasu czytam (gdybym chciał wszystko słuchać, czytać i oglądać w Internecie, co mnie interesuje, to by życia brakło, więc niestety jakoś muszę tym żonglować). Opisał między innymi w nim swoje krótkie, ale codzienne blogowanie. Testuję to teraz u siebie. Codzienne, ale krótkie. Ale codzienne. I jestem bardzo zaskoczony. Łatwiej mi się zabrać do przygotowania wpisu, piszę go prawie dwa razy szybciej i dużo, dużo więcej.

Podsumowanie

To wszystko pojawi się na pewno. A co więcej? Zobaczymy 🙂 Lubię rozwijać to miejsce i w końcu będzie więcej się tu działo. Już teraz zapraszam Cię do obserwowania i udostępniania dalej mojej strony 🙂 Im więcej nas tym weselej! Dzisiaj wpadły pomysły na kolejne wpisy, więc będzie się działo, oj będzie się działo! Tymczasem bywaj!