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!