Posted by Tpk on

Pierwsze starcie z JS – początki bywają trudne…

Cześć! W tym wpisie chciałbym podzielić się z wami skrawkiem tego co w ostatnim czasie pochłania cały mój wolny czas a więc opowiem wam trochę o JavaScript a właściwie o tym jak to u mnie wyglądało z jego nauką – lub lepiej z próbą jego nauki.

Swoją przygodę z tym językiem zacząłem od razu po opanowaniu podstaw html oraz css, czyli było to w podstawówce / gimnazjum – był to i do dziś jest jeden z najbardziej denerwujących mnie języków. Wprawdzie na dzień dzisiejszy wiem o nim zdecydowanie więcej jednak do teraz bardzo często zdarza mi się popełniać w nim błędy składniowe a gdy tylko mam w nim pisać dostaje czegoś pokroju nerwicy długotrwałej lub zespołu niespokojnego umysłu. Nawet trzy linijki to zabójcze przeglądnie i skanowanie tysięcy stron na których pseudo-specjaliści opisują lepsze i jeszcze lepsze metody poradzenia sobie z tym językiem. Pamiętam do teraz – każdy nawet najkrótszy kod który napisałem w tym właśnie języku wywalił błąd. Albo brak średnika albo brakujący nawias, wszystko dosłownie wszystko.

Wtedy było to coś na zasadzie rozszerzenia zwykłych sztampowych oklepanych już stron www o tzw. fajerwerki czyli jakieś płynne animacje, efekty pozwalające na wejście ze stroną w swego rodzaju interakcje. Na dzień dzisiejszy JS rozrósł się do takich rozmiarów, że ciężko już mówić tutaj tylko o fajerwerkach – od prostych bajerów na stronach jak dodatki, widget’y, zegarki i inne przez całe strony bardziej zaawansowane z wykorzystaniem AJAX’a potrafiące na bieżące pobierać oraz wyświetlać informacje aż po całe aplikacje side-serwerowe (Node.js). Duża w tym oczywiście zasługa biblioteki jQuery która początkującym pozwoliła w łatwy i prosty sposób ominąć długie godziny spędzone przed konsolą developerską nad szukaniem błędów w czystym języku JavaScipt a tym bardziej zaawansowanym ułatwiła budowanie pełnoprawnych serwisów, stron czy też forów. Szczerze zaczynając swoją przygodę długo nie mogłem i do teraz mam niemały problem ze zrozumieniem w pełni JS’a.

Jednak była to najłatwiejsza i najbardziej polecana droga wspięcia się po szczeblach drabiny programowania webowego. HTML > CSS > JS > PHP > MYSQL itd. Zakładam, że wielu z was również próbowało tą ścieżką dotrzeć do upragnionego celu a więc zostania programistą czy też webdeveloper’em (bo tak się powinno w sumie nazywać osobę zajmującą się technologiami webowymi). Ja bardzo szybko odpadłem gdy tylko dowiedziałem się o ile czasu potrzeba aby opanować chociaż jeden z tych języków, na dodatek wszystko (każda dokumentacja / bardziej specjalistyczny poradnik) były w języku ang – co po prostu mnie od środka rozwalało. Nie chodziło tutaj o to, że nie znałem angielskiego (choć były to czasy około 11-12 letniego młodego nastolatka więc mogło być i tak) ale o fakt, że dużo ciężej czytało mi się coś takiego, a zrozumieć tego to już naprawdę był lvl up. Pomogły mi w tym nieco polskie poradniki – dużo oglądałem na YouTube filmów stricte związanych z kodzeniem w wybranych językach co pozwoliło mi nieco podchwycić oraz zrozumieć terminologię którą stosuje się się tam stosuje, frazy takie jak instancja, obiekt, klasa czy nawet prostsze jak zmienna, stała, instrukcja warunkowa itp. wreszcie stały się jasne. Z racji tego, że słowa te pochodziły, były bardzo podobne lub wręcz 1:1 zostały skopiowane z języka ang nie miałem problemu aby domyślić się / dowiedzieć co oznaczają (było po prostu łatwiej).

Druga faza to próba pisania czegoś własnego – zazwyczaj kończyła się na chęciach i odpaleniu Notepad’a po czym zapisaniu podstawowej struktury html’a i tagu JS’owego. Tak jak już wcześniej wspominałem robiłem mnóstwo błędów dlatego szybko się zniechęcałem do dalszego pisania czegokolwiek i przeważnie na tym projekt się kończył. Podczas jednego z episod’ów uczenia się z poradników na yt zacząłem zwracać niebagatelną uwagę na nawiasy, nawet nie średniki a nawiasy (to one najczęściej sypały błędem). Dokładnie w jaki sposób są otwierane oraz zamykane (przypominało mi to trochę otwieranie i zamykanie tagów html’owych) – dzięki temu mogłem dalej przeć w najlepsze, niczym dziecko poznając oraz zgłębiając kolejne tajniki oraz dalej poszerzać swoją wiedzę. Oczywiście taki episodów z których coś się nauczyłem było o wiele więcej ale ten z nawiasami szczególnie utkwił mi w głowie, dlatego postanowiłem, że to właśnie go opisze.

Kolejny krok a więc przejście z wideo tutoriali, na literature pisaną. Dość szybko dostrzegłem, że poradniki trwają strasznie długo (a w tamtym okresie zależało mi głównie na szybkim poznawaniu kolejnych możliwości jakie daje nam JS) – w zależności od prowadzącego mogły być interesujące, ciekawe, nudne albo usypiające – stosunkowo często trafiałem na te ostatnie dlatego zacząłem szukać wiedzy w nieco inny sposób.  Przesiadłem się na dostępne powszechnie teksty internetowe (dzięki wcześniejszemu zaznajomieniu z terminologią występującą w tym środowisku mogłem dużo bardziej trafnie szukać tego co mnie aktualnie interesowało). Ponownie czytanie wszystkiego od deski do deski było dla mnie zbyt trywialne a przy tym nudne i zabierające mnóstwo czasu. Nie chciało mi się czytać dokumentacji dlatego główną sferą były dalej poradniki, tutoriale osób którym chciało się to robić. Zacząłem szukać informacji o szybkim czytaniu jednak szybko odpuściłem – ta opcja nie przetrwała próby czasu dlatego powróciłem do słowa mówionego, jednak poczyniłem pewien postęp bo zacząłem wreszcie nieco chętniej przeglądać oficjalne dokumentacje oraz przede wszystkim je czytać. A co za tym idzie ponownie rozszerzyłem nieco swój słownik dzięki czemu dużo szybciej znalazłem osoby z branży które w pełni profesjonalnie (z pasją) przekazują swoją wiedzę w świat i do dziś są one moimi autorytetami. Kilka z nich śledzę nawet dalej w kanałach społecznościowych i na yt po dziś dzień.

Pierwszą i ostatnią rzeczą którą żałuje od początku do teraz to fakt, że nauka zarówno JS jak i innych języków które próbowałem „ogarnąć” nigdy nie była harmonijna – zawsze szedłem na ilość a niekoniecznie na jakość. Przez co mimo, że poznałem wiele podejść (języków) oraz pomysłów na rozwiązanie wybranych problemów to miałem i do teraz mam ogromne problemy z ich zastosowaniem w praktyce. Za część tych problemów winie kursy internetowe z których się uczyłem a za resztę siebie i zbyt słabą siłę woli aby poświęcić tą godzinę, dwie dziennie i nauczyć się czegoś nowego – jednak jest to temat na zupełni inny wpis, o którym też kiedyś napisze – o ile znajdę ducha walki aby jeszcze raz tak jak dzisiaj przysiąść sam na sam z klawiaturą i wszystko to dokładnie opisać.

Posted by Tpk on

Szybkie kodowanie, przegląd dostępnych edytorów i instalacja Emmet!

Cześć! W dzisiejszym wpisie poruszę temat szybkiego kodowania – co zrobić aby szybciej i wydajniej pisać strony internetowe oraz skrypty www? Podstawowym i niezmiernie ważnym elementem webmaster’a lub front-end developer’a jest dobry edytor. Nie mam tu oczywiście na myśli notatnika – o nie! Wiele osób zaczynających swoją przygodę z kodowaniem stawia na początku na domyślny windows’owy notatnik i choć w przypadku tak prostych technologi jak HTML/CSS/JS nie ma to zbyt dużego znaczenia to jest to moim zdaniem duży błąd.  Dlatego pierwsze co powinniśmy zrobić to zadbać o komfort pracy – gdyż ta będzie wymagała od nas kilkugodzinnego siedzenie za biurkiem. Obecnie najlepszymi edytorami z jakimi miałem do czynienia są:

NotePad++ – Prosty i bardzo rozbudowany notatnik który oferuje podkreślanie składni, podpowiedzi, motywy czy dodatkowe pluginy dzięki którym staje się bardziej funkcjonalny. Sama aplikacja pisana jest w C++ dlatego uruchamia się w mgnieniu oka i równie szybko jest gotowa do działania a przy tym zajmuje mało miejsca. Dodatkowo NotePad++ jest dostępny w wersji portable a więc w wersji nie potrzebującej instalacji. Jego jedyną wadą jest brak możliwości pisania wieloliniowego co nie raz przydaje.

Brackets – Genialne narzędzie od firmy Adobe udostępnione na licencji open source. Zaawansowany program oferujący podgląd rzeczywisty, kolorowanie tekstu, pisanie wieloliniowe i wiele wiele więcej. Również jak w przypadku notepada’a możemy skorzystać z dodatkowych motywów oraz pluginów. Minusem oprogramowania jak dla mnie jest czas uruchamiania (musimy poczekać kilka cennych sekund zanim wszystko będzie gotowe do działania). Stąd oprogramowanie daje wrażenie ociężałego.

Sublime Text 2 – Kolejny ciekawy i naprawdę bogaty w funkcje program, niestety płatny. Oczywiście można korzystać z wiecznej wersji testowej która co jakiś czas atakuje nas komunikatem o możliwości zakupu programu. Jedno co naprawdę spodobało mi się w tej aplikacji to nawigacja. Po prawej stronie ekranu pokazuje nam się dodatkowy pasek dzięki któremu możemy szybko przemieszczać w tekście. Mimo modowania pozostałych edytorów żadna zmiana nie pozwoliła na dodanie równie funkcjonalnej i wygodnej w użytkowaniu linijki. Koniec końców posiada to samo co powyższe edytory.

Atom – Kultowy program do edycji tekstu ()

Wybór pozostawiam wam – osobiście nie mam ulubieńca ale najczęściej używam Notepad’a / Atom’a.
Kontynuując chciałbym wam jeszcze opowiedzieć trochę o wspomnianym wyżej dodatku Emmet gdyż to on w dużej mierze ułatwia nam koderom (front’endowcom) prace.
Tak więc ów plugin dodaje do naszego edytora (i jest on dostępny dla każdego z wyżej wymienionych) dodatkowe skróty myślowe.
Aby wam to lepiej wytłumaczyć zainstalujcie sobie go a następnie wpiszcie w edytor:

html:5

Koniecznie pamiętając aby ustawić kursor na końcu. Teraz naciśnijcie TAB (w przypadku problemów należy zmienić makra w ustawieniach edytora).
Emmet automatycznie zamieni ten urywek kodu w gotowy szkielet nowego dokumentu HTML 5:

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
</head>
<body>

</body>
</html>

Np. zapisując:

div#container>p*6>a[href=”#”]

Wynikowo, otrzymamy całkiem pokaźnych rozmiarów kod:

<div id=”container”>
<p><a href=”#”></a></p>
<p><a href=”#”></a></p>
<p><a href=”#”></a></p>
<p><a href=”#”></a></p>
<p><a href=”#”></a></p>
<p><a href=”#”></a></p>
</div>

Nieprawdaż, że to świetne? Ten mod przyśpieszy nieco twój współczynnik generowania kodu o jakieś 25% jak nie więcej.
Ponadto dostępne jest o wiele więcej skrótów dzięki którym możemy skrócić czas jaki potrzebujemy na napisanie naszej strony.
Oprócz HTML’a znajdziemy również skróty języka CSS czy XSL.
Całą ich listę znajdziecie w dokumentacji tutaj.
Co do instalacji samego pluginu – w zależności od programu, może się ona nieco różnić choć zasada jest podobna:

Notepad++ -> Pluginy -> PluginManager -> Show PluginManager -> Z listy dostępnych wtyczek wyszukujemy Emmet i zaznaczamy -> Install.

Brackets -> Menadżer rozszerzeń () -> W prawym górnym rogu wyszukujemy Emmet i wybieramy Zainstaluj.

Sublime Text 2 -> wchodzicie na  stronę -> kopiujecie kod -> uruchamiacie program -> z menu View wybieracie Show Console i wklejacie kod -> restartujemy aplikacje -> naciskacie kombinacje klawiszy Ctrl + Shift + P i wpisujecie Package Control: Install Package -> gdy wszystko się wykona wpisujecie Emmet i zatwierdzacie enterem.

Atom -> File > Settings > + Install, wpisz „emmet”, znajdź i zainstaluj dodatek – gotowe 😉

Dzięki takim działaniom przyśpieszycie sobie znacząco prace i będziecie zadowoleni zarówno wy jak i wasi przyszli klienci.
Jeżeli jesteście raczkujący to warto zainteresować się również szybkim pisaniem na klawiaturze bo to również przyniesie w późniejszym czasie wymierne korzyści.
Na koniec chciałbym jeszcze wspomnieć, że warto uczyć się skrótów klawiszowych – np. Ctrl + S (zapisz), Ctrl + N (nowy dokument) to nic nie kosztuje a takie działania przerodzą się w dobre nawyki które niejeden początkujący wam zazdrości.
Jeżeli znacie jeszcze lepsze tipsy na ułatwienie sobie życia piszcie śmiało w komentarzach!

Posted by Tpk on

Witaj, świecie – start blog’a o programowaniu i komputerach!

Witajcie!

Oto pierwszy startowy wpis blog’a o programowaniu, komputerach, pasjach i informatyce czyli życiu technika informatyka 😉 Jeżeli jesteście twórcami witryn, webmasterami, początkującymi programistami lub komputerowymi świrami czy kimkolwiek z poza tej grupy zapraszam Was do śledzenia na bieżąco nowych wpisów. Chciałbym wam przedstawić tutaj również swoje przemyślenia i uwagi odnośnie projektowania stron, utartych standardów, skrótów, trików i tipsów które niewątpliwie ułatwią wam prace z komputerem i nie tylko. Ten blog ma być pewnego rodzaju eksperymentem w którym podzielę się z wami moim doświadczeniem oraz wiedzą z zakresu programowania które zdobyłem dotychczas i które ciągle rozwijam. Czasami mogą się pojawić ciekawostki nie powiązane tematycznie ze stroną które mam nadzieje przypadną Wam do gustu. Tym krótkim wstępem oficjalnie otwieram mój skromny blog.