Jest niedziela, 20 października 2013, godzina 22:18. Kilkanaście godzin temu wróciłem z Gdańska, gdzie odbyła się druga edycja meet.js summit. Trochę się bałem pisać o tej konferencji, ponieważ i tak mam już opinię hejtera wszystkich możliwych konferencji. A w tym wypadku na minus jedna sprawa. Tylko albo aż. Jaka? Zapraszam do krótkiego spojrzenia na summit.js#2.0.0 moimi oczami.

Miejsce i organizacja

Gdańsk, centrum Amber Expo. Dotarcie z Dworca Głównego w 15 minut – kilka przystanków tramwajem i krótki spacer (bardzo blisko nowego stadionu). Miejsce bardzo nowoczesne – polecam zapoznać się z galerią. Duża sala, dwa ekrany, brak problemów technicznych, bezproblemowo działające WiFi, naprawdę bardzo pozytywnie – zastanawiam się, czy to nie była najlepsza miejscówka na konferencję, w jakiej miałem okazję być – jeśli nie jest najlepsza, to na pewno w pierwszej trójce.

After party

Kilkanaście minut pieszo od Głównego, Red Light Pub. Miejsce fajne, gdzie podawali specjalne okazjonalne drinki – takie jak HTML5 (5 shotów), CSS3 (3 shoty) czy też beer.js. Ale znaleźć to miejsce! Google podaje inny adres, mordoksiążka inny. Logiczne byłoby szukanie pubu o czerwonej kolorystyce/oświetleniu. Słuszny strzał. Problem w tym, że w okolicy było kilka pubów o takim oświetleniu, a ten konkretny nie posiadał żadnego szyldu (albo po prostu nie zauważyliśmy). I patrząc na liczbę grup poruszających się grup zapatrzonych w swoje mapy na smartphonach, nie byliśmy raczej jedyni. Do organizatorów – plakat meet.js na drzwiach bardzo by pomógł :)

Nie wiem czy w Waszych miastach też tak jest, ale od jakiegoś roku zauważam coraz większy wysyp burgerowni w Poznaniu. Tak więc jak wyglądała niespodzianka na afterze? Na ogródku stanął mobilny bar z miejscowymi burgerami. Niestety, z racji czasu oczekiwania (50 minut – rzuciły się ino programisty) i godziny odjazdu pociągu niedane nam było spróbować, ale na oko wyglądały naprawdę dobrze.

Catering

Standard – była kawa, herbata, woda, ciastka, ciasta, owoce. Co było niestandardowe, to fakt, że obiad odbywał się „na stadionie” :) Tzn. musieliśmy zrobić mały spacer na pobliski stadion do znajdującego się tam dużego pubu, gdzie to podano obiad. Wybór dość skromny (mimo wszystko, konferencja była darmowa, i tak fajnie że było cokolwiek:), ale smacznie. A spacer? Hmm, trochę pobudził.

„Pobudził?!” rzekniecie. Tak, pobudził. Dochodzimy do sedna..

Prezentacje

Należę do tej grupy osób, które od prezentacji oczekują dobrze przyprawionego „mięsa” zakończonego deserem. A w tym przypadku, kontynuując analogię, dostaliśmy niedoprawione wegetariańskie danie, z małymi kawałkami mięsa (pewnie się kucharzowi zagubiły) i niezłym deserem na końcu. I nie jest to tylko moje zdanie, ale także kilku osób z którymi dyskutowałem.

Za dużo ogółu, za mało konkretów. Może 30% prezentacji przypadło . Niektórzy mogą stwierdzić, że skoro poświęca się kilka godzin w tygodniu na czytanie RSSów i tego co się dzieje w branży, to ciężko zostać zaskoczonym. Jest w tym trochę racji, ale od ręki mogę podać kilka prezentacji z LXJS czy JSConf z których oglądałem video i były naprawdę dobre.

Prezentacje w dużym skrócie – oceniam tylko merytorykę (a trudno mi, bo większość prelegentów znam i lubię):

• Create your perfect architecture with modular JavaScript patterns – pub/sub lekarstwem na wszystko. Moim zdaniem daleko temu do „perfect” – a jeśli już, to w konkretnych zastosowaniach.
• Abusing Firefox OS and HTML5 games for fun and profit – w sumie pogubiłem się o czym to było – o Firefox OS? O pisaniu gier pod fOS? Nie wiem. Aczkolwiek kwestia moz-opaque ciekawa.
• Pushing the web to the limits – pierwsze danie „mięsne”. Z tym, sporo ludzi zna już jego smak. Tłumacząc tytuł na nasze – o nowych API. O WebCL nie wiedziałem, tak więc dzięki Dariusz – nutka nieznanych smaków się pojawiła :)
• Interactive web with Fabric.js – byliście na Falsy Values? Pamiętacie prezentację na temat Fabric.js? No to tutaj mieliśmy forka z małymi zmianami. Dokładnie tego spodziewałem się po tytule i niestety nie pomyliłem się. A szkoda, bo oczekiwałem sporo więcej. Autoreklama nr 1.
• Serious JavaScript – how to use techniques known from large Java and .NET projects in JS world – używajcie build toola, statycznej analizy kodu, serwerów CI etc. i będziecie fajni.
• Native performance in interactive JS applications using CSS3 hardware acceleration – jak dla mnie autoreklama tworzonego produktu ukryta pod warstwą kilku (w większości dość dobrze znanych) technik.
• Survival Guide – Web applications for mobile safari and iOS’s webUIView – konkrety, konkrety i jeszcze raz konkrety. Trochę rozszerzona wersja prezentacji z regularnego spotkania meet.js w Poznaniu, ale nadal konkretna. Pod względem merytorycznym najlepsza prezentacja całej konferencji.
• Going real-time under 20 minutes – forma? Fajnie, śmiesznie, nawet rosyjska administracja rządowa się pojawiła:) Ale poza tym? Dowiedzeliśmy się, że jest coś takiego jak websockety i że GTA5 to jest fajna gra.
• Future of JavaScript: ECMAScript Harmony – druga konkretna prezentacja z całego dnia. Nie pokrywa wszystkiego, ale nadal spójna i z tego co pamiętam, płynnie poprowadzona.
• The Angular Way – jeśli celem prezentacji było pokazanie, że Angular lubi TDD (a raczej odwrotnie), i że nie nadaje się do stron skupionych na treści (jak praktycznie każdy client side framework) to się udało. Nie było to nawet „Getting Started with Angular”, ale mocno pobieżne wprowadzenie i częściowa powtórka z Serious Javascript (Karma, Jasmine, Yeoman, Grunt etc.)
• ** One day in the life of a front-end programmer ** – to się uśmialiśmy. Zaczęło się śmiesznie, ale potem Damian zmienił ton na troszkę poważniejszy, gdzie przesłaniem prezentacji było praktycznie „wcale nie jesteś taki awsum jak Ci się wydaje” (co pokrywa się z moim często powtarzanym „zawsze jest coś nowego do nauki”). Fajna prezentacja, idealna na rozluźnienie i zakończenie.

Ogólnie, jestem mocno zawiedziony poziomem prezentacji, a raczej ilością wyniesionej z nich wiedzy czy inspiracji. Jest to praktycznie jedyny duży minus konferencji, ale niestety, minus w najważniejszej kategorii.

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...

Kolejna prezentacja stworzona przez Piotrka Repetowskiego i Mirka Filipa. Tym razem na temat działania prototype i this w JavaScripcie. Obejrzyjcie, bo warto:) Człowiek nie zdaje sobie sprawy o ilu rzeczach nie wie i ile kryje się "pod maską" dopóki ktoś mu tego w jasny i klarowny sposób nie przedstawi:) Nie mam wątpliwości, że dzięki tej prezentacji dowiecie się "kilku" interesujących (i możliwe, że przydatnych) rzeczy:) Prezentacja do obejrzenia tutaj.

Ciekawa prezentacja zrobiona przez moich kolegów z zespołu (Piotrka Repetowskiego i Mirka Filipa) dotycząca tworzenia obiektów w JavaScripcie i problemów, które można po drodze napotkać. Cóż mogę napisać? Polecam i czekam na więcej (a wiem z dobrych źródeł, że owo "więcej" jest jedynie kwestią czasu:).Co prawda jest ona w języku angielskim, ale z dużą ilością kodu, więc każdy, kto zna JS'a powinien wszystko bez większych problemów zrozumieć:) Prezentacje znajdziecie pod tym linkiem. Jeżeli coś jest niejasne to piszcie w komentarzach, a ja postaram się ich namówić na udzielenie odpowiedzi :)

NetBeans jest moim ulubionym IDE, jeżeli chodzi o język PHP i od kilku dni przyglądam się wersji beta kolejnego wydania – 7.4. Jak zwykle jest po kilka nowości dla różnych kierunków zastosowań IDE – HTML5, PHP, JavaScript, Java, Java EE i innych.

Nowości istotne dla programisty aplikacji internetowych (PHP/JavaScript/HTML5) to między innymi:

• wsparcie dla Zend Framework 2 i Nette Framework 2 z szablonami Latte
• wsparcie dla testów jednostkowych w Atoum
• usprawnienia w refaktoryzacji PHP
• wsparcie dla AngularJS, Knockout i ExtJS
• wsparcie dla PhongeGap
• zapisywanie zmian z Chrome Developer Tools

Z nowości, z których w tym czasie korzystałem, najbardziej przypadł mi do gustu rozwój pluginu obsługi Gita. Pojawiła się na przykład obsługa rebase czy amend i całe menu Git zostało zorganizowane na nowo – bardziej użytecznie. Na uwagę zasługuje również zmiana nazewnictwa opcji na bardziej analogiczne do poleceń „rdzennego”, konsolowego Gita. Teraz obsługa jest bardziej intuicyjna przy przesiadce z konsoli na plugin Git w IDE.

Polecane linki:

• informacje o wydaniu
• NetBeans for PHP blog

Twitter Bootstrap z gałęzi 2.3.x oferuje proste boksy, tzw. popovers (http://getbootstrap.com/2.3.2/javascript.html#popovers), których możemy używać do wyświetlania w całkiem ładny sposób różnych informacji.  Podstawowa funkcjonalność tych elementów jednak nie była dla mnie wystarczająca.

Co chciałem uzyskać:

• tylko jeden aktywny boks na stronie,
• otwierany po kliknięciu,
• zamykany po ponownym kliknięciu gdziekolwiek poza aktywnym boksem (tak żeby można było skopiować zawartą w nim informację)

Poniżej kod, który dostosowuje popovers zgodnie z powyższymi założeniami:

// zniszcz otwarte boksy
function destroyOpenedPopovers() {
    //jeśli obiekt, z którego wywołaliśmy boks, posiada id, niszczymy jego boks
    if ($('#closingDiv').length && $('#closingDiv').attr('data-popover-id') !== 'undefined') {
        var popoverLinkId = $('#closingDiv').attr('data-popover-id');
        $('#' + popoverLinkId).popover('destroy');
        $('#' + popoverLinkId).removeClass('popover-active');
    } else {
        // w przeciwnym razie niszczymy wszystkie możliwie otwarte boksy
        $('.popover-area').each(function () {
            $(this).popover('destroy');
            $(this).removeClass('popover-active');
        });
    }
}
//uruchamiamy popover
function triggerPopover(obj) {
    // klasa popover-active nadawana jest obiektowi, na którym otwieramy boks
    $(obj).toggleClass('popover-active');

    // jeśli boks powinien zostać otwarty
    if ($(obj).hasClass('popover-active')) {
        $(obj).popover({
            html: true,
            trigger: 'manual'
        });
        $(obj).popover('show');
// obszar zamykający otwarty boks
    var closingDiv = '<div id="closingDiv" style="z-index: 1008; background-color: rgba(0, 0, 0, 0.1); width:' + $(document).width() + 'px; height: ' + $(document).height() + 'px; position: absolute; top: 0; left: 0;" data-popover-id="' + $(obj).attr('id') + '"></div>';
    $('body').append(closingDiv);
    $('#closingDiv').click(function () {
        destroyOpenedPopovers();
        $(this).remove()
    });
  }
}

$(document).ready(function () {
    $('.popover-area').click(function () {
        triggerPopover(this);
    });
});

Kilka słów komentarza:

• w powyższym przykładzie do każdego elementu drzewa DOM, który posiada klasę „popover-area” podpinam funkcję, która utworzy boks
• w momencie wywołania popover, nadaję elementowi wywołującemu boks klasę popover-active oraz tworzę zamykający obszar, który rozciągam na cały ekran
• zamykający obszar posiada atrybut data-popover-id, którego wartość to id elementu, którego kliknięcie wywołało utworzenie boksa – dzięki temu wiemy co trzeba zamknąć

Przykład użycia: http://jsfiddle.net/mheki/Dg8Z8/

Na stronie jQuery Rain pojawiło się ciekawe zestawienie różnych ciekawych bibliotek stworzonych przy użyciu Bootstrap i jQuery. Pełna lista jest dostępna pod adresem http://www.jqueryrain.com/category/jquery-bootstrap-tutorial/ i z pewnością będzie niejednokrotnie przydatna przy tworzeniu ciekawych stron www.

Ponad dwa lata temu opisywałem sposoby wczytywania plików JavaScript, gdzie wymieniłem kilka fajnych bibliotek do asynchronicznego doczytywania kodu. Jakiś czas później trafiłem także na RequireJS, który ma podobną funkcjonalność i całkowicie zmienił moje podejście do pisanego kodu JavaScript… Modularne tworzenie kodu Wspomniany RequireJS to biblioteka, która implementuje interfejs AMD (Asynchronous module definition). Podejście to propaguje [...]