19 czerwca 2014

Brackets - roszszerzenia

Korzystając z dzisiejszego dnia wolnego napiszę post o nowościach oraz rozszerzeniach do programu Brackets, edytora kodu, którego używam na co dzień. Wydaje mi się, że gdzieś widziałem informacje o zmianach, które pozwalają używać polskich znaków bez konieczności przestawiania skrótów klawiszowych ale sprawdziłem bloga Brackets jeszcze raz i nie mogę tego znaleźć. Tak więc polecam mój starszy post na temat ustawienia skrótów tak aby działały polskie znaki. Aktualna wersją programu ma numer 0.40, jeżeli nie otrzymaliście automatycznego powiadomienia o aktualizacji sprawdźcie ręcznie poprzez "Check for Updates" lub po prostu ściągnijcie najnowszą wersję z ich strony.
Największą nowością wprowadzoną do tego edytora od momentu kiedy go używam jest możliwość używania kilku kursorów (wersja 0.38). Funkcję tę posiadał już dawno Sublime Text i muszę przyznać, że czekałem aż w końcu pojawi się również w Brackets. Możliwość edytowania tego samego słowa w kilku miejscach znacznie przyspiesza i ułatwia pracę, kiedy chcemy zmienić nazwę zmiennej. Wiele kursorów daje dużo więcej możliwości niż ten jeden podany przeze mnie przykład, szybkie przedstawienie tej funkcji pokazuje ten filmik:


Jeżeli zaś chodzi o rozszerzenia, oto lista tych używanych przeze mnie:

  • Beautify - formatowanie tekstu HTML, CSS, i JS za pomocą jednego kliknięcia. Nie zawsze działa tak jakbym tego chciał ale bardzo pomaga i tworzy czytelniejszy kod jeżeli wrzucimy coś z innego źródła lub po prostu narobiliśmy trochę chaosu,
  • Bootstrap Skeleton - gotowy szablon pod najnowszą wersję Bootstrapa,
  • Brackets Icons - rozszerzenie dodaje ładne dla oka ikonki w naszym drzewku plików,
  • Brackets Key Remapper - rozszerzenie, które jest potrzebne aby zmieniać skróty klawiszowe, tak jak wspominałem wyżej, konieczne aby ustawić możliwość używania polskich znaków,
  • Code Outline - tworzy małe okienko ze skrótami do odpowiednich stylów css,
  • colorHints - tworzy podpowiedzi css w momencie wpisywania koloru, wystarczy wpisać znak # i pokażą się kolory, które używaliśmy w tym pliku css,
  • HTML templates - szablony HTML,
  • JSHint - podpowiedzi do JavaScript,
  • Live Reaload - podczas korzystania z Live Preview odświeża okno z podglądem z momencie zapisania pliku,
  • Lorem Ipsum Generator for Brackets - generator dummy text,
  • Paste and Indent - automatyczne formatowanie tekstu w momencie wklejania,
  • Themes for Brackets - chyba mówi samo za siebie, osobiście używam stylu MBO.
Na koniec zostawiłem jeszcze jedno rozszerzenie, najważniejsze z tych wszystkich -  Emmet. Piszemy w odpowiednich skrótach HTML i CSS, następnie naciskając Tab i otrzymujemy pełny kod. Koniec z nudnym i powolnym pisaniem kodu HTML. Narzędzie to znacznie przyspieszyło moją pracę, szczególnie polecam zapoznać się z dokumentacją.



27 maja 2014

Jak łatwo dzielić swoje projekty pomiędzy komputerami? Google Drive oraz Git.

Myślałem napisać posta na dany temat już od dłuższego czasu lecz wstrzymałem się do momentu aż nie ustawiłem odpowiednio wszystkiego na Windowsie i Ubuntu.

Kiedy zaczynałem swoją przygodę z programowaniem na swoich urządzeniach miałem tylko Windowsa. W domu korzystam z komputera stacjonarnego z dwoma monitorami, co ułatwia i przyspiesza naukę programowania, natomiast poza domem z laptopa.

Chęć zainstalowania Linuxa chodziła za mną od dawna i narastała z każdym kolejnym przeczytanym
tutorialem, gdzie autor korzystał z terminala i różnych narzędzi dostępnych tylko na ten system lub na Mac'a. Początkowo zainstalowałem Ubuntu na komputerze stacjonarnym lecz szybko się okazało, że dysk SSD, który mam tam zamontowany był zbyt mały na dwa systemy, miałem również problemy z zainstalowaniem odpowiednich sterowników do karty graficznej oraz inne pomniejsze niezgodności. Na laptopie nie chciałem instalować innego systemu ponieważ czytałem, że poprzez zmianę partycji można stracić możliwość korzystania z partycji służącej do odzyskiwania systemu. Całkiem niedawno znalazłem rozwiązanie w postaci kieszeni na drugi dysk do laptopa, którą montuje się w miejsce napędu optycznego, idealne rozwiązanie szczególnie, że drugi dysk wymontowałem z poprzedniego laptopa. Mam nadzieję, że dzięki temu poznam chociaż trochę Linuxa i jego możliwości.

Wracając do pytania w jaki sposób łatwo dzielić swoje projekty pomiędzy komputerami to w momencie kiedy na obydwóch urządzeniach miałem Windowsa dzielenie projektów pomiędzy nimi było bardzo proste. Wszystkie skrypty, które piszę w ramach nauki trzymam na swoim Google Drive, a jako folder domyślny ustawiłem folder 'www' apache. Czemu akurat tak? Jednym z pierwszych języków, po który sięgnąłem było PHP i dlatego zainstalowałem WAMP'a. Domyślny folder mojego edytora (Brackets) również ustawiłem na folder 'www' apache'a, co powodowało, że obojętnie, na który komputerze otworzyłem edytor miałem tam najnowsze pliki, których nie musiałem nigdzie kopiować oraz od razu pojawiały mi się w Live Preview edytora. Dzięki autosynchronizacji nie musiałem się o nic martwić, wszystko działo się w tle a ja zawsze miałem najbardziej aktualne pliki na obydwóch urządzeniach.

Trochę trudniej zaczęło wszystko wyglądać jeżeli chodzi o Ubuntu, ponieważ nie ma oficjalnej aplikacji Google Drive na Linuxy. No nic, trzeba sobie radzić inaczej, istnieje nieoficjalny klient zwany Grive. Niestety nie posiada wielu funkcji jak autosynchronizacja i trzeba to robić ręcznie, jednak nie było tak trudno wyrobić sobie dobry nawyk synchronizacji plików przed i po pracy. Wystarczy odpalić terminal (skrót Alt+Ctrl+T), wejść do folderu Google Drive i wpisać komendę 'grive'. No tak, jest jeszcze jeden minus, nie można zmienić domyślnego folderu więc nasze pliki będą trzymane w folderze /home/Google Drive tak więc zmiana ścieżki na ścieżkę do 'www' apache tym razem nie wchodzi w grę. Udało mi się to zrobić, oczywiście z przeszkodami ale wyszukiwarka google jak zwykle ma na wszystko rozwiązanie, np. ten post na stackoverflow. Mogą wystąpić również problemy z uprawnieniami apache do dostępu do tego folderu, o ile dobrze pamiętam najlepszym rozwiązaniem było dodanie siebie jako użytkownika do grupy www-data (czyli apache). Zanim zaczniecie grzebać w i przestawiać zezwolenia (permissions) różnych użytkowników zastanówcie się dwa razy ponieważ bardzo trudno jest cofnąć niektóre źle wpisane komendy.


Kolejnym świetnym sposobem na dzielenie projektów jest Git. Jeżeli nie jesteście przekonani po co wam Git i ogólnie kontrola wersji, skoro dopiero się uczycie to przyznaję, że kiedyś też tak sądziłem. Pomijając argumenty, że zakładając konto na GitHub warto budować swoje portfolio oraz próbować włożyć własny wkład w projekty open source powiem po prostu, że korzystanie z Git jest fajną zabawą. Aby opanować postawy wystarczy znać jakieś 5 - 8 komend, a samo korzystanie z terminala jest tym bardziej satysfakcjonujące im więcej go używam. Jeżeli nie chcecie korzystać z terminala to GitHub posiada graficzną aplikację na Windowsy, która jest bardzo intuicyjna i łatwa w użyciu. Do pobrania na stronie https://windows.github.com/.
Kilka użytecznych artykułów i instrukcji odnośnie Git, które pomogą wam zastartować:

Chciałbym jeszcze zaznaczyć, że darmowe konto na GitHub pozwala jedynie na tworzenie publicznych repozytoriów (projektów), jeżeli chcemy pracować nad prywatnymi projektami to w takim razie polecam Bitbucket, który zezwala pracować nad projektami do 5 osób. 

Niestety zawsze też jest jakieś ale... tak się składa, że Git kiepsko działa z Google Drive, ponieważ nie synchronizuje on ukrytego folderu .git gdzie zapisane są wszystkie wiadomości o repozytorium, pewnie to i dobrze ponieważ mogłoby to spowodować mały bałagan. Osobiście projekty prywatne trzymam na Google Drive, natomiast te, które robię czysto do nauki wrzucam na GitHub.

Na koniec chciałbym się jeszcze z wami podzielić jedną rzeczą. Po zainstalowaniu Ubuntu podczas uruchamiania systemu pokazywał się błąd, który bardzo niewiele mi mówił - "System Program Problem Detected". Rozwiązanie znajdziecie w tym artykule. Jeżeli chodzi o mnie to pomogła mi sama komenda sudo rm /var/crash/* , która jest wspomniana na końcu strony.

Moje konto na GitHub: https://github.com/Emnalyeriar


17 maja 2014

JavaScript - pierwsze kroki oraz pierwszy skrypt

Znając tylko w niewielkim zakresie podstawy PHP już na samym początku nauki JavaScript trafiłem na pewne różnice miedzy jednym a drugim językiem.
Pierwszą 'dziwną' praktyką stosowaną w JS jest immediately-invoked funcion expression (IIFE). W PHP, zmienne zadeklarowane poza funkcjami są globalne, natomiast w JS są one częścią obiektu window. Myślę, że sam nie wytłumaczyłbym tego lepiej niż ten artykuł. Główną zaletą IIFE jest brak możliwości nadpisania globalnych zmiennych tymi zadeklarowanymi wewnątrz IIFE. Niestety powoduje to również, że wewnątrz funkcji nie możemy się odnieść do zmiennej globalnej (należącej do window) ponieważ wszystkie zmienne zadeklarowane w IIFE są lokalne i dostępne tylko dla danego fragmentu kodu właśnie wewnątrz IIFE. Muszę przyznać, że przeczytałem różne artykuły, tutoriale i materiały na ten temat, a nie zdawałem sobie z tego sprawy dopóki nie próbowałem napisać własnego kodu. I tutaj moim zdaniem wychodzi jak ważne jest, aby po przeczytaniu tych wszystkich mądrych publikacji próbować napisać chociażby krótki ale własny kod, robiący cokolwiek, tak tylko dla sprawdzenia czy rozumiemy to co przeczytaliśmy. Kiedy przepisuje się kod z książki lub filmiku nie zauważa się tego typu rzeczy.
Zanim wspomnę jak poradziłem sobie z tym problemem chciałbym również napisać o sposobach deklarowania zmiennych w JS. Jeżeli przed nazwą zmiennej dopiszemy var wtedy ta zmienna jest dostępna dla danej funkcji, w której ją zadeklarowaliśmy oraz do pozostałych funkcji zagnieżdżonych w niej. Jeżeli pominiemy słowo var zmienna staje się globalna i dostępna poza funkcją. Może to wprowadzać mały zamęt i powodować, że nadpiszemy sobie niektóre zmienne więc należy zwracać na to szczególną uwagę. Bardzo pomocne przy śledzeniu zmiennych jest kolorowanie nazw zmiennych przez edytor, w którym piszemy kod.
W takim razie jak zadeklarować zmienną globalną wewnątrz funkcji? Albo poprzez pominięcie słowa var przed deklaracją funkcji lub poprzez zadeklarowanie jej do obiektu window poprzez var window.zmienna. 
Zasada ta również dotyczy deklarowania funkcji. Jeżeli zadeklarujemy funkcję poprzez function declaration czyli
 function doSomething() {}
to funkcja ładuje się przed rozpoczęciem wykonywania całego kodu co ogólnie nazywa się hoisting. Dzięki temu możemy w kodzie najpierw wywołać funkcję a dopiero później ją zadeklarować. Drugim sposobem deklaracji funkcji jest function expression:
var doSomething = function(){};
co powoduje, że funkcja staje się dostępna jedynie dla kodu napisanego poniżej jej zadeklarowania.
Należy pamiętać, że dobrą praktyką jest deklarowanie wszystkich zmiennych oraz funkcji na samym początku naszego skryptu poprzez użycie słowa var.
Więcej na temat variable scope oraz variable hoisting możecie poczytać tutaj.
Polecam również ten filmik. Przypominam również o stronie Eloquent JavaScript, z której to wiele się nauczyłem.

Na koniec chciałbym przedstawić po raz pierwszy na tym blogi (czas najwyższy) własny skrypt. Jest to prosty skrypt, który podświetla aktualnie naciskane klawisze podczas pisania oraz wypisuje średnią liczbę kliknięć na sekundę co 5 sekund.
Będzie mi niezmiernie miło jeżeli wypowiecie się na temat tego kodu, co powinienem poprawić, co zmienić, jak go udoskonalić, jakie błędy poprawić. Jeżeli również poplątałem się gdzieś w moich tłumaczeniach odnośnie zmiennych i funkcji w JS, chętnie się poprawię.
Link do skryptu.
Na koniec chciałbym wspomnieć o jeszcze jednym problemie, na który natrafiłem podczas pisania tego skryptu. Funkcja setTimeout w swoich argumentach przyjmuje funkcję, którą mam wywołać, lecz wywoływanej funkcji argumentów już przekazać niemożna. Trochę masło maślane ale mam nadzieję, że rozumiecie o co mi chodzi. Obszedłem to zastosowując kod:
var fadeOut = function(j) {
           setTimeout(function() { buttons[j].parentNode.className = "button";}, 500);
}
fadeOut(i);
Jeszcze raz zachęcam do komentowania!

29 kwietnia 2014

Który język programowania wybrać? Część 2.

Minęły ponad 4 miesiące od kiedy napisałem pierwszy post na temat wyboru języka programowania. Czy po takim czasie i zdobyciu troszkę wiedzy na temat programowania nadal brnę w tym samym kierunku? Mniej więcej tak. Po poznaniu podstaw PHP postanowiłem chwycić się za JavaScript. Przez pewien czas świtało mi w głowie opanować jakiś framework PHP jak np. codeigniter lub laravel lecz, przynajmniej na ten moment, zrezygnowałem. Na horyzoncie jest wiele nowych technologii, które zyskują coraz większą popularność i uznanie na rynku, natomiast nie ma co ukrywać, że PHP istnieje od dawna i specjalistów w tej dziedzinie jest wielu.
Post ten nie będzie obfitować w treść ponieważ prawdę mówiąc postanowiłem go napisać po obejrzeniu pewnego filmiku, który polecam wszystkim osobom decydującym się na web development. Obejrzyjcie go, SERIO. Dzięki niemu rozgraniczycie sobie pewne technologie oraz języki i jeżeli jeszcze nie dokonaliście wyboru języka lub nie jesteście swojego wyboru pewni, ten filmik wam sporo rozjaśni.



Pozwolę sobie wrzucić ponownie filmik, który znalazł się w poście o JavaScripcie lecz tutaj również pasuje idealnie. Facet odpowiada na pytanie: jakie umiejętności powinienem posiadać, jakie języki i technologie związane z HTML5 powinienem znać aby zacząć starać się o pracę? Posłuchajcie o czym wspomina aby wyznaczyć sobie własne cele.


Swoją drogą na jednym i drugim kanale znajduję się masa świetnych filmów!

Chętnie poznam również na jaki język sami się zdecydowaliście. Wolicie front-end czy back-end? Może sami znacie jakieś świetne materiały, które waszym zdaniem każdy powinien przeczytać? Albo technologie, którą każdy powinien znać? Świetnie byłoby przeczytać co na ten temat sądzicie w komentarzach!



22 kwietnia 2014

Polskie znaki w Brackets

Przeglądając statystyki bloga zauważyłem, że kilka osób trafiło na stronę w poszukiwaniu odpowiedzi jak włączyć polskie znaki w edytorze Adobe Brackets. Muszę przyznać, że kiedy rozpocząłem pracę z tym programem od razu przypadł mi do gustu i również poszukiwałem jak uporać się z tym problemem. Należy wejść w zakładkę File, następnie Extension Manager i zainstalować rozszerzenie Brackets Key Remapper. Po zainstalowaniu wchodzimy ponownie w File i potem Remap Keys. W polu Filer wpisujemy słowo Alt i wyskakują nam wszystkie skróty klawiszowe z użyciem przycisku Alt. Zmieniamy wszystkie skróty klawiszowe które pokrywają się z polskimi znakami, np. alt+a, alt+e oraz te zawierające ctrl+alt. Dla zobrazowania wrzucam zrzut ekranu ze swojego ustawienia.


W wolnej chwili przedstawię również rozszerzenia do Brackets, których sam używam.

21 kwietnia 2014

JavaScript - poradnik jak zacząć

Dwumiesięczna przerwa spowodowała, że zacząłem zastanawiać się czy nie spróbować czegoś świeżego i próbować chwycić podstawy jakiegoś nowego języka. Na ten czas znam podstawy HTML, CSS i PHP, poznałem podstawy modelu MVC i zatrzymałem się przed samym momentem próby zrozumienia OOP. Tak więc czas poświęcony na programowanie postanowiłem podzielić na dwie części, pierwsza to próba wykorzystania tego co już wiem przy pisaniu własnego projektu, druga to chęć nauki JavaScript, którego jak łatwo się domyślić w tym zestawieniu brakowało. Wybór dla jednych oczywistych dla drugich już niekoniecznie, zdecydowałem się akurat na ten język ponieważ:
  • odpowiada za dynamikę i zachowanie stron co pozwala na budowanie świetnych stron z pomocą np. biblioteki jQuery,
  • w porównaniu do PHP pozwala wysyłać lub pobierać dane bez konieczności odświeżania strony,
  • dodatki do Chrome są pisane w JavaScript,
  • kod jest wykonywany po stronie klienta (przeglądarki), a za pomocą node.js może być również po stronie serwera,
  • edytor Brackets, który opisywałem, szczególnie polecam i sam używam, jest napisany własnie w tym języku,
  • pozawala pisać browser-based gry z użyciem WebGL.
Obstawiam, że jest jeszcze bardzo sporo zastosowań, o których nawet nie mam pojęcia. 

Ok, tak więc od czego zacząć? Podczas przeszukiwania internetu trafiłem na ten artykuł: How to Learn JavaScript Properly i naprawdę, naprawdę mocno go polecam. 
Tak jak powyższy artykuł zaleca, zróbcie podstawowe kursy na Codecademy, jeśli macie już jakąś podstawową wiedzę możecie spróbować Programmr lub jeśli macie luźniejsze podejście i chcecie się trochę więcej pobawić to sprawdźcie grę, która uczy JavaScript - CodeCombat. A kiedy już zdobędziecie trochę wiedzy spróbujcie swoich sił na Codewars, strona wyświetla fragment kodu, który trzeba zmienić tak aby działał poprawnie. Naprawdę świetny sposób na przypomnienie i utrwalenie sobie języka!

Na koniec chciałbym jeszcze przedstawić kilka ciekawych materiałów, na które trafiłem przeszukując internet:

13 kwietnia 2014

Semantyczny HTML

Kiedy pierwszy raz zacząłem szukać w internecie informacji na temat programowania, a w pierwszych
krokach szczególnie chodziło o html to zawsze zastanawiałem się czy informacje, które znalazłem są aktualne. Bieżąca wersja HTML to 5.0 i jest dostępna od 2008 roku natomiast materiały znalezione w internecie mogą być nawet starsze. Drugą sprawą jest fakt, że nie wszystko co znajdziemy na temat programowania jest zgodne z aktualnymi standardami.
Idea semantycznego HTML polega na oddzieleniu warstwy znaczeniowej od warstwy prezentacji. Polega to na wyszczególnianiu czym Twój tekst jest, jakie ma znaczenie, natomiast nie jak ma wyglądać. Tym samym zamiast używać tag <b> używamy <strong>, zamiast <i> używamy <em> (emphasis), a następnie poprzez CSS nadajemy tym tagom odpowiedni charakter. Nasuwa się pytanie, po co zamieniać tagi, a następnie ustawiać ich wygląd w CSS skoro wynik jest dokładnie taki sam? Otóż dla nas strona pewnie i będzie wyglądać dokładnie tak samo, natomiast dla web crawler'ów, które będą parsować nasz kod robi to dużą różnice.
Przykład jak nie powinien wyglądać nasz kod:

<table>
   <tr>
      <td>
         <font size="10" color="red">Tutaj nasz tytuł</font>
         <p>Tutaj tekst naszego artykułu <b>jakieś wyszczególnione słowo</b></p>
      </td>
   <tr>
</table>

Aktualnie nie używa się już tabeli aby ustawić strukturę naszej strony. Nie używa się już również font i ustawiania jego atrybutów w tej samej linijce oraz odchodzi się od stosowania wyżej wspomnianych tagów <b> i <i>
W takim razie jak powinien wyglądać kod?
Zamiast tabelek często używamy tag <div>, któremu nadajemy odpowiednią klasę lub id lecz tak naprawdę powinno się stosować tagi takie jak <article>, <header> albo <footer>, a następnie poprzez CSS ustalamy jak przeglądarka ma wyświetlać dany element.
To tylko bardzo krótki i powierzchowny przykład ale mam nadzieje nakreślający te tematykę i dający do zrozumienia na czym semantyczny HTML polega. W celu zagłębienia tego tematu polecam szczególnie stronę HTML5doctor oraz The Syntax, Vocabulary and APIs of HTML5 W3C Editor’s Draft 9 August 2010. Na koniec jeszcze mały flowchart: