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.