poniedziałek, 6 października 2014

Start WebStorm 8 in 64-bit mode


WebStorm 8 jest świetnym środowiskiem programistycznym, jednak po miesiącu użytkowania moje zadowolenie spadło ponieważ pracując na średniej wielkości projekcie bardzo często WebStorm mi się zawieszał, podobny problem mieli moi koledzy z zespołu. Zacząłem szukać w jaki sposób można przyśpieszyć działanie tego IDE i jedną z propozycji było odpalenie IDE w trybie 64-bitowym ponieważ jak się okazało WebStorm 8 instaluje się w trybie 32-bitowym z własnym środowiskiem Java w wersji 1.7.0_51.



Jeżeli jednak mamy maszynę 64-bitową i chcemy skorzystać z tej mocy, to możemy uruchomić środowisko WebStorm-a w wersji 64-bit. Aby to zrobić należy przejść do katalogu instalacji naszego IDE domyślenie jest to C:\Program Files (x86)\JetBrains\WebStorm 8.0.4, przechodzimy do podfolderu bin i odszukujemy plik WebStorm.bat który to odpali nasze IDE w trybie 64-bitowym. Zanim jednak odpalimy nasz edytor należy utworzyć w folderze bin plik WebStorm64.exe.vmoptions. Plik vmoptions określa parametry startowe dla JVM.

Poniżej znajduje się plik WebStorm64.exe.vmoptions, którego aktualnie używam.

Po przygotowaniu pliku vmoptions, można odpalić środowisko po przez plik WebStorm.bat. Powinniśmy teraz widzieć, że WebStorm odpalił się używając Javy w wersji 1.8 w trybie 64-bit..



środa, 24 września 2014

Simple Git Cheat Sheat

Dzisiaj w ramach utrwalenia pracy z gitem, postanowiłem spisać krótką ściągawkę, komend których używam najczęściej.

Ustawienia globalne:

git config --global user.name "Łukasz Szewczak"
git config --global user.email "lukaszewczak@gmail.com"

Tworzenie klucza ssh:

ssh-keygen -t rsa -C "lukaszewczak@gmail.com"
Następnie kopiujemy klucz publiczny z folderu ~/.ssh/id_rsa.pub do kluczy SSH na swoim profilu na serwerze GitLab lub GitHub

Tworzenie repozytorium

mkdir angularjs-styleguide
cd angularjs-styleguide
git init
touch README
git add README
git commit -m 'first commit'
git remote add origin git@192.168.1.100:nazwa-projektu.git
git push -u origin master

Dodanie zdalnego repozytorium do istniejącego lokalnego repozytorium

cd existing_git_repo
git remote add origin git@192.168.1.100:nazwa-projektu.git
git push -u origin master

Klonowanie repozytorium



git clone git@191.168.1.179:nazwa-projektu.git
Powyższa komenda pobierze kod ze zdalnego repozytorium i utworzy lokalne repozytorium w folderze nazwa-projektu
cd nazwa-projektu

Sprawdzenie statusu repozytorium


git status

Dodanie pliku/plików do cmmita


git add . - Dodaje wszystkie pliku
git add nazwa-pliku - Dodaje konkretny plik

Usunięcie pliku/plików z commita


git checkout . - Usuwa wszystkie pliki
git checkout nazwa-pliku - Usuwa konkretny plik

Commit zmian


git commit -m "komentarz opisujący wprowadzane zmiany"

Praca ze zdalnym repozytorium

git remote -v - Wyświetlanie zdalnych repozytoriów
git push - Wypychamy zmiany do zdalnego repozytorium

Pobranie info ze zdalnego repo

git pull - pobiera automatycznie dane ze zdalnego repo (fetch) dla bieżącej gałęzi i scala je (merge) z lokalnymi plikami
git fetch - Polecenie to sięga do zdalnego projektu i pobiera z niego wszystkie dane, których jeszcze nie masz. Po tej operacji, powinieneś mieć już odnośniki do wszystkich zdalnych gałęzi, które możesz teraz scalić z własnymi plikami lub sprawdzić ich zwartość. Fetch nie robi merga.

Sprawdzenie ostatnich zmian


git show

Prace z branchem


Tworzenie brancha



git checkout -b test - Tworzy nowego brancha o nazwie test i przełącza się na tego brancha

Przełączenie się na brancha


git checkout branch-name
Jeżeli chcesz mieć dostęp do brancha stworzonego przez kogoś z zespołu należy wykonać poniższe kroki

git fetch origin
remote: Counting objects: 20, done.
remote: Compressing objects: 100% (14/14), done.
remote: Total 15 (delta 5), reused 0 (delta 0)
Unpacking objects: 100% (15/15), done.
From git@github.com:schacon/simplegit
 * [new branch]      serverfix    -> origin/serverfix

Podczas pobierania ściągasz nową, zdalną gałąź, nie uzyskujesz automatycznie lokalnej, edytowalnej jej wersji. Inaczej mówiąc, w tym przypadku, nie masz nowej gałęzi serverfix na której możesz do razu pracować - masz jedynie wskaźnik origin/serverfix którego nie można modyfikować.
Aby scalić pobraną pracę z bieżącą gałęzią roboczą uruchom polecenie git merge origin/serverfix.

Jeśli potrzebujesz własnej gałęzi serverfix na której będziesz mógł pracować dalej, możesz ją stworzyć bazując na zdalnej gałęzi w następujący sposób:
$ git checkout -b serverfix origin/serverfix
Branch serverfix set up to track remote branch refs/remotes/origin/serverfix.
Switched to a new branch "serverfix"

Otrzymasz lokalną gałąź, w której będziesz mógł rozpocząć pracę od momentu, w którym znajduje się ona w zdalnej gałązi origin/serverfix.

Wylistowanie zdalnych gałęzi


git branch - Pokazuje tylko lokalne gałęzie
git branch -a - Pokazuje lokalne i zdalne gałęzie
git branch -r - Pokazuje tylko zdalne gałęzie
$ git branch
* master

$ git branch -a
* master
  origin/1-2-stable
  origin/2-0-stable
  origin/master

$ git branch -r
  origin/1-2-stable
  origin/2-0-stable
  origin/HEAD
  origin/master


Odtwarzanie repozytorium



Git jest fajny :-) naprawdę :-), ale jeżeli ulegnie uszkodzeniu Twoje lokalne repozytorium to szanse na jego pełne przywrócenie są marne, w takiej sytuacji trzeba się liczyć ze stratami i utratą ostatnich lokalnych commitów, dlatego warto często wysyłać zmiany na serwer. Poniżej opisana jest procedurą która pomaga odzyskać działające repozytorium (przynajmniej mi kilka razy pomogła :-) ):
Poniższa procedura zakłada, że folder zawierający popsute repozytorium nazywa się foo oraz że poniższe komendy wywołujemy z katalogu zawierającego folder foo, a zatem do dzieła:
1. Tworzymy backup uszkodzonego repozytorium: cp -R foo foo-backup
2. Klonujemy zdalne repozytorium do nowego katalogu git clone@riscoserver05:foo foo-newclone
3. Usunąć uszkodzony podfolder .git: rm -rf foo/.git
4. Przenieść nowy sklonowany folder .git do fodleru foo: mv foo-newclone/.git foo
5. Usunąć folder zawierający sklonowany projekt: rm -rf foo-newclone
Po powyższych operacjach w folderze foo mamy z powrotem działające repozytorium oraz wszystkie lokalne zmiany które teraz można będzie zakomitować i wysłać na serwer. Powodzenia !! :-)

piątek, 19 września 2014

Remote debugging web pages with weinre

Ostatnio pisałem aplikację mobilną używając frameworka Sencha Touch. Aplikacja miała ładne niebieskie tło dzięki użytemu zdjęciu :-). Testowałem aplikacje lokalnie na laptopie używając przeglądarki chrome oraz emulatora Ripple i wszystko wyglądało super. Zainstalowałem aplikację na tablecie z androidem i po uruchomieniu aplikacji ku mojemu zdziwieniu, aplikacja miała białe tło i ani śladu po moim ładnym niebieskim obrazku w tle :-(.... I co teraz?? Jak sprawdzić w czym leży problem. Na laptopie w przeglądarce włączę sobie narzędzie do debugowania np.: firebuga na friefoxie lub developer tools na chromie, ale na tablecie nie ma takiej możliwości..... Na szczęście nie wszystko stracone i nie trzeba kombinować metodą prób i błędów a wszystko dzięki narzędziu weinre przeznaczonemu do zdalnego debugowania aplikacji webowych czyli pracując na laptopie możesz debugować aplikację webową odpaloną na twoim tablecie lub telefonie.

Weinre jest aplikacją napisaną w node.js, dlatego do jej instalacji potrzebujemy zainstalowanego środowiska node. Samą aplikację weinre instaluje sie używając poniższej komendy


Sprawdźmy czy aplikacja zainstalowała się poprawnie wpisując komendę weinre ?

Wszystko wygląda dobrze. Podczas użytkowania aplikacji weinre w interakcje wchodzą trzy programy:

  • debug server - serwer http odpalany przez komendę weinre 
  • debug client - interfejs www do debugowania zdalnej aplikacji 
  • debug target - jest to aplikacja webowa którą chcesz debugować, przeważnie będzie to aplikacja uruchomiona na urządzeniu mobilnym.  

Zatem odpalmy nasz debug serwer po przez poniższą komendę.

Aplikację uruchomiłem z dwiema opcjami
  • pierwsza opcja --httpPort ustawia port na którym będzie działać debug serwer
  • kolejna opcja to --boundHost którą należy ustawić na wartość -all-, aby weinre nasłuchiwał na wszystkich adresach sieciowych. Dzięki temu nasza aplikacja uruchomiona na urządzeniu mobilnym będzie się mogła połączyć z naszym desktopem/laptopem.
Po wykonaniu powyższej komendy otwieramy przeglądarkę i wpisujemy adres http://localhost:8081 i jeżeli nie było żadnych problemów powinniśmy zobaczyć zgłoszenie się serwera weinre




  • W sekcji Access Points widać adres url do aplikacji webowej służącej do debugowania naszej aplikacji
  • Natomiast w sekcji Target Script znajduje się skrypt który należy osadzić na stronie którą chce się debugować. Oczywiście należy zamienić nazwę localhost na adres ip maszyny na której uruchomiliśmy serwer do debugowania.
Po wejściu na adres http://localhost:8081/client/#anonymous dostajemy interfejs zbliżony do narzędzi debugowania znanych z chroma lub z safarii.

Ponieważ na tą chwilę nie uruchomiłem żadnej aplikacji do debugowania sekcja Targets jest pusta.

Natomiast po odpaleniu aplikacji na tablecie, na laptopie widzę informację o podłączanym urządzeniu.



W tym momencie możemy przystąpić do debugowania aplikacji, możemy wejść w zakładkę Elements, aby podejrzeć strukturę strony oraz użyte style. Możemy wyświetlić konsolę, aby zobaczyć jakieś zgłoszenia z naszej aplikacji lub wykonać jakiś prosty kod js.


Narzędzie weinre nie rozwiąże wszystkich naszych bolączek ale jest zdecydowania narzędziem bardzo pomocnym zwłaszcza jeżeli piszemy mobilne aplikacje webowe. Po więcej szczegółów odnośnie samego weinre odsyłam do strony projektu http://people.apache.org/~pmuellr/weinre-docs/latest/Home.html

piątek, 29 sierpnia 2014

AngularJs - module.service w poszukiwaniu znaczenia i ... operatora new

Witam,

Trochę czasu minęło od ostatniego postu, ale tak się złożyło, że ostatnio miałem naprawdę sporo pracy... Ale dobra, ostatnio poznaję angulara i dzisiaj zastanawiałem się po raz kolejny jaka jest różnica pomiędzy usługą (module.service) a fabryką (module.factory), owszem czytałem na ten temat i najczęściej spotykałem się z wyjaśnieniem, że w przypadku usługi
przekazana funkcja jest konstruktorem z którego przy pomocy operatora new zwrócona zostanie instancja nowego obiektu.

Dla potwierdzenia poniżej przytaczam opis ze styleguida autorstwa Todd Motto( https://github.com/toddmotto/angularjs-styleguide ), który to swoja drogą jest wdrażany w naszej firmie.

All Angular Services are singletons, using .service() or .factory() differs the way Objects are created.

Services: act as a constructor function and are instantiated with the new keyword. Use this for public methods and variables

Factory: Business logic or provider modules, return an Object or closure

Always return a host Object instead of the revealing Module pattern due to the way Object references are bound and updated

Ale dzisiaj przeglądałem kod napisany przez kolegę i tam jego funkcja przekazana do module.service nie wyglądała jak konstruktor, tylko raczej jak funkcja którą można zobaczyć w fabryce.


Oczywiście powyższy kod działa, aczkolwiek funkcja przekazana jako argument do funckji module.service nie jest konstruktorem tylko sama zwraca obiekt jak w fabryce.

Zajrzałem zatem do kodu angulara w poszukiwaniu tego operatora `new`, którego to przytaczają wszędzie. Poniżej widać deklarację funkcji service.


Widać, że usługa jest fabryką zwracającą instancję obiektu utworzoną przez $injectora.istantiate przy użyciu funkcji przekazanej w parametrze constructor. Póki co nie widać operatora new.

Zaglądam zatem do funkcji instantiate obiektu $injector.


Faktycznie jest operator new (w linii 8), tylko zaraz... jest on wykorzystany do utworzenia pustego obiektu i przypisania go do zmiennej instance, a dalej nie widać innego operatora new zatem jak ten obiekt powstał...? A jest jeszcze funkcja invoke, ok sprawdźmy ją (pominąłem w niej fragment operujący na przekazanych argumentach)
Do funkcji invoke przekazywane są trzy parametry: pierwszy w naszym przypadku to funkcja przekazana do metody service, druga natomiast to utworzony pusty obiekt w metodzie instatiate   


Nie ma tu również operatora new, ale jest fajny kawałek kodu  fn.apply(self, args), który powoduje zwrócenie naszego obiektu jeżeli funkcja fn nie jest konstruktorem, natomiast jeżeli funkcja fn jest konstruktorem to z meotdy invoke zostanie zwrócony undefined ?! i nowy obiekt dostępny w zmiennej instance w funkcji instantiate.

Dzisiejsze spostrzeżenia utrwaliły mnie w poczuciu braku zrozumienia różnicy miedzy service a factory oraz jakie jest ich przeznaczenie, dlatego, żeby uniknąć nieporozumień zostaję przy stylu który opisał Todd Motto.
Poznałem również - przynajmniej dla mnie nowy - sposób  na  utworzenie nowego obiektu  przy użyciu dowolnego konstruktora z wykorzystaniem metody .apply(),
dzięki czemu można stworzyć sobie proxy do tworzenia obiektu (to zachowanie fajnie opisuje Ben Nadel w swoim blogu http://www.bennadel.com/blog/2291-invoking-a-native-javascript-constructor-using-call-or-apply.htm).

Warto zajrzeć do kodu źródłowego bo można się zawsze trochę nauczyć :-).
  
  

niedziela, 15 czerwca 2014

Tworzymy prezentacje używając frameworka HTML5&Javascript

Do pewnego momentu gdy ktoś chciał abym przygotował prezentacje, automatycznie myślałem o power poincie, bo w końcu co może być lepszego ;-)

A jednak przejrzałem na oczy dzięki ostatnim szkoleniom i konferencjom w których miałem okazje uczestniczyć. Okazało się, że w większości przypadków prezentowane slajdy to po prostu nic innego jak strony HTML prezentowane w ciekawy sposób z fajną nawigacją. Sprawdziłem co za tym stoi i okazało się, że w większości przypadków do tworzenia prezentacji używany jest framework reveal.js który chciałem dzisiaj przybliżyć.

Reveal.js (http://lab.hakim.se/reveal-js) pozwala tworzyć świetne, interaktywne prezentacje za pomocą HTML i co chyba najważniejsze jest darmowy. Biblioteka reveal.js została bogato wyposażona w funkcje, poniżej wymienię kilka z nich :
  • używanie spacji lub klawiszy strzałek do poruszania się po prezentacji,
  • tworzone prezentacje są responsywne bez żadnego dodatkowego kodu,
  • slajdy mogą być osadzane w innych slajdach,
  • dostępny jest edytor do tworzenie prezentacji jeżeli nie chcemy dotykać kodu html - dostępny na stronie http://slid.es,
  • klawisz ESC umożliwia przejrzenie slajdów w formie miniaturek,
  • każdy slajd może zawierać dowolny kod html, listy, tabele, paragrafy, cytaty itp.,
  • mamy możliwość zmieniania sposobu przełączania pomiędzy slajdami,
  • możemy zmieniać skórkę prezentacji, biblioteka dostarcza nam kilka wbudowanych skórek ,
  • biblioteka ma wbudowany plugin do ładnego formatowania kodu, jeżeli potrzebujesz zaprezentować fragmenty kodu,
  • możemy tworzyć linki do slajdów w prezentacji,
  • biblioteka umożliwia tworzenie własnych notatek do każdego slajdu, które mogą być widoczne w odrębnym oknie
  • i wiele, wiele innych :-).

Zatem jak stworzyć sobie prezentacje samemu, od podstaw?

  1. ściągamy paczkę z ostatnia wersję biblioteki ze strony https://github.com/hakimel/reveal.js/releases
  2. rozpakowujemy ściągnięte archiwum i otwieramy plik index.html w ulubionym edytorze Ściągnięta paczka zawiera gotową prezentację dostępną na stronie http://lab.hakim.se/reveal-js. Każdy slajd to tak na prawdę kod html otoczony elementem section, jak na poniższym przykładzie
  3. <section>
         <h1>Books to read</h1> 
         <small>Created by  
             <a href="http://www.lukaszewczak.pl/">Łukasz Szewczak </a> 
         </small>
     </section> 
    
  4. wprowadzamy własne zmiany i oglądamy w przeglądarce ;-)

Oczywiście biblioteka reveal.js nie jest jedyna do tworzenia prezentacji używając html5, poniżej przedstawiam listę dostępnych alternatyw dla reaveal.js:
  1. Deck.js
  2. Tacion.js
  3. Fathom.js
  4. Impress.js
  5. Presenteer.js
  6. Jmpress.js
  7. DZ Slides
  8. slides
  9. Slides Google Code
  10. Perkele.js
  11. HTML Slidy

Zachęcam wszystkich do bliższego zapoznania się z tego typu prezentacjami i pożegnać starego poczciwego power pointa :-).

wtorek, 20 maja 2014

Nowy sposób nauki ionic framework


W ubiegłym tygodniu zespól Ionic Framework uruchomił platformę ułatwiająca naukę ich frameworka: Learn Ionic. Platforma będzie zawiera wszelkie niezbędne materiały potrzebne do nauki (tutoriale, prezentacje, artykuły).

"full stack web framework" based on Node.js


Dzisiaj wpadłem na trochę już stare pytanie What is the best "full stack web framework" (with scaffolding, MVC, ORM, etc.) based on Node.js / server-side JavaScript? na quora.com odnoście jakie są najlepsze framweroki zapewniające tworzenie kompletnych aplikacji opartych na node.js wspierających mvc, scaffolding, orm, testy, itp. Powstała tam lista rozwiązań która sądżę, że jest bardzo akutalna, nie sądziłem nawet, że jest tyle rozwiązań tego typu:


Front-Trends 2014 - Dzień III

Ostatni dzień konferencji przyniósł kolejne bardzo ciekawe wystąpienia.

Dzień rozpoczął Horia Dragomir ( @hdragomir ) prezentacją The Mobile Development We Leave Behind, pod czas której z uśmiechem na twarzy opowiedział nam o ewolucji mobilnych aplikacji webowych. Horia polecił do przeczytania artykuł A dao of web design napisany przez Johna Allsopp, określany jako "manifest dla wszystkich tworzących w webie".

Następnie na scenie pojawiła piękna Anna Tudor (@thebabydino) ze swoją prezentacją Pure CSS 3D Solids, opowiadała nam o matematyce ;-) i jak przy pomocy matematyki i CSS uzyskać efekty 3D. Poniżęj jeden z efektów pracy Anny.




Zaraz po prezentacji Anny na scenę weszła drobna Mary Rose Cook (@maryrosecook), która na żywo w 30 min napisała prostą grę Space Invaders co było po prostu zajebiste, niesamowite, ekstra !!! :-). Poniżej wrzuciłem widok stworzonej gry.

Kolejna prezentacja to Full Stack JavaScript Applications, Reactive Way Mariusza Nowaka (@medikoo), w której przybliżył nam architekturę projektu nad którym aktualnie pracuje.


Następnie świetną prezentację pt.: Modern Image Compressors poprowadził Kornel Lesiński (pornel.net ), na której opowiedział nam o kompresji zdjęć i przedstawił kilka ciekawych narzędzi wspomagających ten proces:

Po Kornelu pojawił się wesoły Max Ogden który zaprezentował nam swoją prezentację Browserify - Using Node In Browsers. na której opowiedział nam o stosie technologi pod nazwą Lebron czyli LevelDB, Browserify  i npm. Max opisał technologię Lebron tak "the best set of technologies for combining modules into applications with javascript, supports mvc, mvm, mvvm, cmv, mccmvm, cvvmqp, csv, html, html5, enterpise, 0mq, b2b" :-) a jeżeli ktoś woli obrazki to wyjaśnił nam na czym polega przewaga technologi Lebron nad innymi w poniższy sposób :-)


Max przybliżył nam co te jest Browserify, oraz jak pisać kod node.js po stronie klienta przy użyciu narzędzia które  stworzył czyli RequireBin ( Max przygotował kilka przykładów do użycia ). Max opowiedział nam również o tym jak się zabrać za tworzenie modułu dla noda, co to jest dobry moduł i czym się charakteryzuje.

Następnie swoją prezentację Progressive Enhancement for JS Apps miała Gerann Means ( @garannm ). Gerann opowiedziała nam jak użyć techniki stopniowego ulepszania (ang. progressive enhancemen) dla całej aplikacji i dlaczego jest to potencjalnie ważniejsze niż kiedykolwiek.

Ostatnia prezentacja Patterns & math with Sass prowadzona przez Gunnar Bittersmann (@g16n), była wyjątkowo dziwna ale i wesoła jednocześnie, niestety nie zawsze kodowanie na żywo idzie gładko, ale z pomocą słuchaczy udało się rozwiąż powstałe problemy:-)

I tak zakończyła się konferencja, było super, mam nadzieję, że w przyszłym roku również będę miał możliwość uczestniczyć w niej.

wtorek, 13 maja 2014

Front-Trends 2014 - Dzień II


8 maja 2014, czwartek jest po godz 8 w Fabryce Trzciny przybywa coraz więcej osób aby rozpocząć drugi dzień konferencji Front-Trends 2014 :)

Drugi dzień zaczyna się od prezentacji Lea Verou (@LeaVerou) pt.: 'The Chroma Zone: Engineering Color on the Web'. Była to preznetacja poświęcona CSS i użyciu koloru na stronach internetowych i pomimo, że nie interesuje się bezpośredno samym  CSS to jej prezentacja bardzo mi się podobała.

Kolejna prezentacja była mocno wyczekiwana przez wszystkich a prowadził ją Brian Ford (@briantford) z Google który pracuje w zespole angulara a obecnie gównie pracuje przy angularze 2.0. Brian prowadził prezentacje nt. Zone.js ku zdziwieniu wszystkich którzy myśleli, że będzie mówił o angularze, ale jak szybko na wstępie wytłumaczył jego prezentacja dotyczy angulara 2.0 a dokładnie jego jednego elementu, czyli właśnie zone.js. Wszystko stało się jasne kiedy przedstawił nam logo angulara 2.0 :)




Na temat kolejnych składowych angulara 2.0 możemy znaleźć informacje tutaj:
Natomiast co to jest Zone.js? Jest to kontekst wykonania, który utrzymuje się w całej realizacji zadań asynchronicznych. Posiadanie kontekstu, który obejmuje operacje asynchroniczne pozwala zrobić wiele
ciekawych rzeczy. W szczególności zapewnia długi dokładny stack trace w przypadku wystąpienia błędu w trakcie wykonania asynchronicznego zadania.

Następnie na scenie pojawił się Kyle Simpson (@getify) z prezentacją pt.: CSS: Yawn to Yay. Pomimo słowa CSS w tytule prezentacji nie było to wystąpienie nt. CSS a tylko o narzędziach napisanych w JS wspomagających tworzenie tematu tej prezentacji czyli szablonów CSS. Kyle opowiadał nam o szablonach CSS używając do tego swojej biblioteki grips.


Kolejna prezentacja pt.: CSS as a programming language była ponownie o CSS, prowadziła ją Sara Vieira (@NikkitaFTW). Sara pokazała nam, że używając samego czystego CSS można traktować CSS jak język programowania i nie potrzeba koniecznie do tego preprocesora.

Następnie pojawił się Martin Ringlein i opowiedział nam o tym jak założył swoją firmę nclud i z jakimi ludźmi przyszło mu tam pracować. Jego prezentacja była świetna i bardzo inspirującą.

Kolejnie Alicia Liu (@aliciatweet) opowiedziała nam jak się zabrać za refaktoryzację CSS, świetna prezentacja.

I na koniec dnia Patrick Hamann (@patrickhamann) z Guardiana przedstawił jedną z lepszych prezentacji Breaking news at 1000ms, jak wycisnąć świetną wydajność naszej aplikacji w 1000 ms.W swojej prezentacji Patrick prezentuje dlaczego istotne są kwestie wydajności naszej aplikacji webowej, jakie są najczęstsze wąskie gardła wydajności i jak sobie z tym radzić.

Już niedługo skrót z trzeciego dnia :)

piątek, 9 maja 2014

Front-Trends 2014 - Dzień I

7 maja 2014 odbył się pierwszy dzień konferencji Front-Trends 2014 (@fronttrends) w Warszawie poświęconej HTML, JS, CSS, UX i krótko podsumowując pierwszy dzień muszę powiedzieć wow było ekstra :). Pierwszy raz byłem na tej konferencji i jestem nią zachwycony, prezenterzy, organizatorzy wszystko na wysokim poziomie. A co się działo pierwszego dnia?



Dzień rozpoczął się od prezentacji pt: Dancing with Robots prowadzonej przez Julian Cheal (@juliancheal, http://juliancheal.co.uk/). Julian przedstawił nam latającego drona (wyposażonego m.in. w wifi, kamerę hd, system stabilizacji) kontrolowanego przez nodejs, było bardzo fajnie, zwłaszcza kiedy Julia sterował robotem przy użyciu maty tanecznej do muzyki Gangam style :), prezentacja świetna pomimo drobnych problemów technicznych z demo.



Kolejną prezentację pt: Build Your Own AngularJS prowadził Tero Parviainen (@teropa). Tero zaprezentował nam swoje podejście do nauczenia się bibliotek/frameworków po poprzez poznanie ich działania od środka, efektem tego podejścia nauczania jest jego książka pt: Build your own AngularJS, w której w celu dogłębnego poznania angulara implementuje kluczowe aspekty tego frameworka używając czystego JavaScriptu. Na prezentacji stworzył na żywo implementację Dependency Injection, to było świetne.



Następnie Jed Schmidt (@jedschmidt) pokazał, że prezentacja może być nie tylko inspirująca ale również zabawna. Była to kolejna świetna prezentacja. Jed opowiadał o tym jak ewolują bilioteki i frameworki a na koniec przedstawił nam koncepcję Virtual DOM.



Kolejny prezenter to Tim Messerschmidt (@SeraAndroid) z PayPal w swojej prezentacji przedstawił nam jak jego firma przeszła na nodejs wraz z krakenjs i jakie korzyści przyniosła im ta zmiana. PayPal używał wcześniej Javy a przejście na nodejs pozwoliło im:
  • zmniejszyć rozmiar zespołu tworzoącego projekty,
  • zdublować liczę żądań na sekundę
  • zmniejszyć szybkość uzyskiwanych odpowiedzi z serwera
  • uzyskać mniejszą liczba kodu
  • używać tej samej technologii po stronie klienta i serwera czyli JavaSscript.
A czym jest wspomniany kraken?
  • to pakiet JS na szczycie node.js i expressj 
  • wstępnie skonfigurowany z różnymi najlepszymi praktykami i narzędziami
    • Dust dla szablonów 
    • Less jako preprocesor css 
    • RequireJs do ładowania modułów i plików js 
    • Grunt dla uruchamiania zadań

Przygodę z krakenem można zacząć bardzo szybko dzięki generatorowi stworzonemu dla yeomana wystarczy wpisać yo generator-kraken i i możemy zacząć przygodę z krakenem.



Kolejnie Rachel Andrew (@rachelandrew) w swojej prezentacji We're Not "Doing a Startup" opowiedziała jak podejść do tematu stworzenia swojego startupu/produktu. Wystąpienie było świetne i nie będę tutaj przywoływał całej prezentacji ale chciałem w skrócie przedstawić czym powinien się charakteryzować projekt, który zamierzamy stworzyć:

  • Zacznijmy od czegoś małego
  • Twórzmy dla odbiorców których znamy, społeczności której jesteśmy częścią
  • Produkt dla którego możemy dostarczyć szybko pierwszą wersję
  • Ludzie będą skłoni zapłacić za produkt który rozwiązuje ich problem
  • Produkt który nie potrzebuje dużej uwagi aby być użytecznym, stworzyć rozwiązanie typu "social" jest ciężko ponieważ potrzeba pozyskać sporą liczbę użytkowników aby odnieść sukces
  • Produkt powinien mieć konkurentów na runku,
  • Tworzony przez Ciebie projekt musi być dla ciebie ważny nawet jeżeli poświecisz na jego tworzenie tylko kilka godzin w tygodniu.



Następnie na scenie pojawił się Zeno Rocha (bardzo młody i zdolny człowiek.. co trochę mnie przybiło, bo patrząc na takie osoby uświadamiasz sobie jaki stary jesteś) w swojej prezentacji pt.: "A future called Web Components" opowiedział nam o web components. Nigdy nie słyszałem o web components, ale kiedy opowiedział o tym Zeno bardzo polubiłem tą koncepcję. Co to są web componenta? Web components to zbiór standardów opracowywanych przez W3C (Shadow DOM, Templates, Import, Custom Elements) które wprowadzają nasz w przyszłość tworzenia stron. Na temat samych komponentów nie jestem w stanie się jeszcze wypowiadać ale warto zdecydowanie zacząć się ich uczyć i mam nadzieję, że za jakiś czas będę mógł coś na ten temat napisać, a skąd się uczyć na ich temat, o to lista materiałów które mogą posłużyć do nauki:


To była zdecydowanie najlepsza prezentacja dnia. Przesłanie tej prezentacji jest krótkie ale dosadne

 "The best way to predict the future is to create it"

Okazuje się, że web components jest drogę którą warto iść ponieważ właśnie W3C wygrało w konkursie realizowanym przez magazyn +net w kategorii najlepsza nowa technologia web! [link]






Postaram się jak najszybciej przybliżyć co się działo w kolejnych dniach...


niedziela, 4 maja 2014

Javascript - Falsy values

Ostatnio oglądałem szkolenie z JS w którym pojawiło się przypomnienie o 'falsy values' w JS. Postanowiłem zatem w ramach utrwalenia wiedzy napisać o tych specyficznych wartościach, których obecności w JS należy być świadomym. 'Falsy values' to zbiór wartości które dają fałsz. Do tego zbioru należą poniższe wartości:
  • false
  • null
  • undefined
  • "" (pusty ciąg znaków)
  • 0
  • NaN
Wszystkie inne wartości ( włącznie z obiektami) zwracają prawdę, czyli poniższe przykłady również:
  • "0"
  • "false"

'Falsy values' ujawianiają swoją dziwną naturę głównie przy porównaniach wartości. Nieświadome korzystanie z 'falsy values' może prowadzić, do błędów w logice programu.Poniżej umieściłem kilka reguł których przestrzegają 'falsy values' w sytuacji porównania wartości

Wartości false, 0 (zero) oraz "" (pusty ciąg znaków) wszystkie są równoważne i mogą byc porównywane każdy z każdym.

console.log( false == 0 ); //true
console.log( false == "" ); // true
console.log( 0 == "" ); //true

Wartości null oraz undefined są równe tylko sobie samym.

console.log(null == false); // false
console.log(null == null); //true
console.log(undefined == ""); // false
console.log(undefined == undefined) // true
console.log(undefined == null); // true 

Wartość NaN nie równa się niczemu włącznie z NaN.

console.log( NaN == NaN) // false
console.log( NaN == "") // false

'Falsy values' powodują, że logika programu staje się nieprzewidywalna, a podążając ze Douglesem Crockfordem, mylyący kod jest czymś czego należy unikać, dlatego, żeby nie mieć wątpliwości podczas porównywania wartości należy zawsze używać potrójnego operatora równści === lub nierówności !== aby tworzony przez nas kod był niezawodny i przewidywalny w działaniu.

środa, 23 kwietnia 2014

Jak zacząć pracę z ES6



ES6 to szósta wersja standardu ECMAScript na której oparty jest JavaScript. ES6 jest następną generacją JavaScript.  

ES6 nie jest jeszcze standardem i dopiero trwają pracę aby przeglądarki wspierały wszystkie jego funkcje. ES6 to przyszłość (chociaż nie aż tak daleka), ale już dzisiaj możemy poznawać nowe funkcjonalności określane w wersji roboczej specyfikacji ES6.

Warto wspomnieć, że AngularJS 2.0 jest  właśnie oparty na ECMAScript 6.

ES6 możesz zacząć używać już dzisiaj z pomocą biblioteki Google Traceur lub bezpośrednio w przeglądarce używając es6fiddle, który poza możliwością pisania kodu w ES6 zawiera przykłady napisane w ES6.

Biblioteka Traceur kompiluje nam kod napisany w ES6 na standard ES5, wspierany przez większość dzisiejszych przeglądarek, dzięki czemu, możemy zacząć używać funkcji z przyszłości dzisiaj.

Aby zacząć zabawę z biblioteką Traceur należy ją zainstalować, używając poniższej komendy (musimy mieć zainstalowanego node.js).

npm install -g traceur

następnie tworzymy plik javascriptowy appEs6.js  zawierający kod napisany w ES6 np.

let square = x => x * x;
let add = (a, b) => a + b;
let pi = () => 3.1415;

console.log(square(5));
console.log(add(3, 4));
console.log(pi());

Po napisaniu kodu wykonujemy poniższe polecenie

traceur --sourcemap --out out/appToday.js appES6.js --experimental

Powyższa komenda utworzy nam w podfolderze out plik appToday.js z kodem js który możemy uruchomić w przeglądarce. Dla dociekliwych, wynikowy kod wygląda tak
System.register("../appES6", [], function() {
  "use strict";
  var __moduleName = "../appES6";
  var square = (function(x) {
    return x * x;
  });
  var add = (function(a, b) {
    return a + b;
  });
  var pi = (function() {
    return 3.1415;
  });
  console.log(square(5));
  console.log(add(3, 4));
  console.log(pi());
  return {};
});
System.get("../appES6" + '');

//# sourceMappingURL=appES6.map

Teraz możemy stworzyć plik index.html który użyje wygenerowany plik js.
<!DOCTYPE html>
<html>
<head lang="en">
    <script src="node_modules/traceur/bin/traceur-runtime.js"></script>
    <script src="out/appToday.js"></script>
</head>
<body>

</body>
</html>

Żeby przeglądarka mogła poprawnie użyć wygenerowany plik appToday.js należy wcześniej dodać skrypt tracer-runtime.js. Po tych operacjach odpalamy nasz plik  index.html w przeglądarce i oglądamy wyniki w konsoli . Od tej pory możemy się bawić z ES6.

Do stworzenia wersji ES5 możemy  również użyć narzędzia  WebStorm  (ja akurat używam  wersji 8.0.1) które wspiera ES6 i może nam kompilować pliki ES6 do ES5 w locie, aby to zrobić należy utworzyć sobie pusty projekt następnie wybieramy File -> Settings -> Javascript i ustawiamy JavaScript language version na ECMAScript 6.



 Następnie tworzymy plik appES6.js. Po otworzeniu zakładki z nowo utworzonym plikiem dostajemy informację o możliwości dodania mechanizmu śledzenia (file watcher) dla naszego pliku który będzie kompilował kod ES6 do ES5, aby to zrobić wybieramy opcję Add watcher dostępną z prawej strony.


Zanim przystąpimy do pisania kodu musimy dodać mała modyfikację w konfiguracji mechanizmu śledzenia. Wybieramy File -> Settings -> File Watchers -> Traceour compiler i wybieramy edit. W sekcji Arguments dodajemy na końcu argument --experimental, dzięki czemu większość funkcji ES6 zostanie obsłużona.


Teraz można już pisać kod ES6 i po zapisaniu zmian, w naszym projekcie zostanie stworzony podkatalog out oraz plik javascriptowy w wersji ES5.



ES6 wniesie sporo nowych i fajnych funkcjonalności do języka JavaScript, trochę czasu jednak minie zanim wszystkie przeglądarki będą korzystały w pełni z możliwości jakie oferuje. Juriy Zaytsev  wykonał użyteczną tabelę kompatybilności dla głównych przeglądarek http://kangax.github.io/es5-compat-table/es6/(póki co FireFox ma zaimplementowanych najwięcej funkcjonalności).

Uważam, że warto już teraz zacząć się interesować ES6, żeby później kiedy stanie się standardem być w stanie w pełni skorzystać z możliwości jakie oferuje.

wtorek, 22 kwietnia 2014

Ach ten Javascript



Być może rzadko widać w ofertach pracy aby wymagano bezpośrednio znajomości  języka Javascript, tylko zamiast tego wypisane są oczekiwania odnośnie znajomości framework-ów Javascript  typu Angularjs,  Backbone, Ember.js, ale czy to oznacza, że nie należy się go uczyć?  

Posługując się grafem ze strony indeed.com, widać jak zmieniają się tendencje w ofertach pracy dla języka Javascript oraz opartych na nim rozwiązaniach.



Można zauważyć, że sam Javascript jest prawie niewidoczny na tym grafie,  króluje AnugularJs i Node.Js mimo to nie wyobrażam sobie, żeby pisać w jakiejkolwiek z tych bibliotek/framework-ów dobry kod bez porządnej znajomości języka Javascript. Owszem język Javascript ma to do siebie, ze można w nim zacząć pisać bez wnikania w mechanizmy działania samego języka, napisany kod może działać, nie mówię nie, ale kiedy tego kodu przybędzie, i zaczną pojawiać się błędy i zaczniemy debugować, może się okazać, że nie mamy pojęcia dlaczego coś nie działa i najczęściej obwiniamy za ten stan sam język a nie brak własnej wiedzy.

Nie ukrywam były lata kiedy nie lubiłem pisać w javascriptcie, na studiach traktowałem to jako zło konieczne, bo ciągle się frustrowałem że coś nie działa. Później pojawiło się jQuery i bam .. no teraz to ja umiem pisać w javascriptcie sobie myślałem.... (co oczywiście było moim pochlebnym marzeniem), owszem umiałem pisać  ale w jQuery a o javascriptcie ciągle wiedziałem nie wiele i wychodziło to przy prawie każdym błędzie który musiałem poprawiać...

Poniżej podaje dwa proste przykłady które pokazują, że bez znajomości javascriptu można spędzić bardzo dużo czasu analizując dlaczego nasz kod nie działa.

 
1. przykład
for (var i = 0; i < 5; i++)
{
    setTimeout( function(){ console.log(i)},0); 
}; 

2. przykład
var obj = ( function(){ 

    return 
    { 
        name:'Łukasz' 
    }; 

}()); 

console.log(obj.name);

Jak widać kod jest bardzo prosty. 

W pierwszym przypadku można by oczekiwać, że napisany kod zwróci nam na konsoli cyfry 0, 1, 2, 3, 4, zatem wprowadźmy ten kod np. do konsoli w Chromie i sprawdźmy wynik....


Wynik pokazuje zupełnie coś innego, nie tego się spodziewaliśmy (w prezentowanym wyniku ignorujemy liczbę 87, która jest identyfikatorem timera zwróconym przez funkcję setTimeOut, fakt wyświetlenie tej wartości wynika ze sposobu obsługi konsoli w przeglądarce Chrome). W wyniku otrzymaliśmy cyfrę 5 powtórzoną 5 razy o czym świadczy cyfra pięć w kółeczku z lewej strony. Aby zrozumieć dlaczego otrzymaliśmy taki wynik, należy zrozumieć następujące fakty:
  • Dysponujemy tylko jedną zmienną i zadeklarowaną w globalnym zakresie (ang. scope) widoczności zmiennych w języku JavaScript (lub w zakresie najbliższej funkcji, jeżeli ten kod umieścilibyśmy w funkcji), każda iteracja pętli nie tworzy nam nowej kopii zmiennej i zamkniętej w zakresie pętli (co sugeruje użyty kod), ponieważ nie tak działa zakres w Javascript (ale o tym przy innej okazji..)
  • Po zakończeniu pętli zmienna i === 5, ponieważ jest to warunek przerywający pętle i < 5
  • Każda z pięciu stworzonych funkcji obsługujących timer zostanie wywołana po zakończeniu pętli for, ponieważ funkcje obsługujące zdarzenia (ang. event handlers) są kolejkowane i zostaną obsłużone  kiedy aktualnie wykonywany kod Javascript zostanie zakończony
Mam nadzieję, że udało mi się to wyjaśnić ;), zatem jak możemy poprawić ten kod aby używając timera wypisać cyfry 0, 1, 2, 3, 4? Musimy w każdej iteracji pętli stworzyć nowy zakres z kopią wartości zmiennej i, jak to osiągnąć? Używając bardzo popularnej konstrukcji w javascriptcie o ładnym skrócie IIFE (Immediately-Invoked Function Expression), czyli funkcja która jest natychmiast wywoływana.

Tak prezentuje się poprawiony kod ..
  

for (var i = 0; i < 5; i++){ 

  (function( j ) {

    setTimeout( function(){ console.log(j)}, 0); 

   }(i));

};

a tak prezentuje się wynik działania poprawionego kodu


A teraz wracam do drugiego przykładu, który jest naprawdę prosty, tworzę sobie obiekt, który ma właściwość name z przypisaną do niej wartością. Następnie na konsoli chcę wypisać właściwość name dla nowo utworzonego obiektu, zobaczmy to w konsoli....


A co to?

Co się stało? Jak to zwykle bywa diabeł tkwi w szczegółach. Jedną z wbudowanych w język Javascript funkcjonalności jest automatyczne wstawianie średnika na końcu linii. Silnik Javascript chce być bardzo pomocny dla programisty. Jeżeli w kodzie występuje linia kodu bez średnika na końcu, to silnik Javascript analizuje czy wstawienie średnika nie spowoduje błędu składniowego analizując kolejną linię kodu, jeżeli stwierdzi, że błąd nie występuje, to śpieszy z pomocą i sam wstawia za programistę średnik na końcu linii. Czyli patrząc okiem silnika Javascript nasz kod wygląda tak.

var obj = ( function(){ 

    return; 
    { 
        name:'Łukasz' 
    }; 

}()); 


Fragment { name: 'Łukasz' }; nigdy nie zostanie wywołany. Szukanie tego typu błędów może być koszmarem. Rozwiązanie jest bardzo proste wystarczy otwierający nawias klamrowy pisać z prawej strony. Poniżej umieściłem wynik poprawionego kodu.



Javascript jest potężnym językiem, ale bez jego znajomości analiza pojawiających się błędów może być koszmarem, dlatego uważam, że warto poświęcić czas aby poznać ten język i jego mechanizmy, tym bardziej, jeżeli chcemy używać rozwiazań na nim opartych, typu AngularJs, Backobone.js, Sencha Touch i innych.

No moim blogu, w ramach własnego poznawania języka Javascript będę się starał umieszczać posty przybliżające innym ten język programowania.