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 [...]

Programując w Javascript czasem zachodzi potrzeba sprawdzenia, czy zmienna na której operujemy jest stricte tablicą (a nie „po prostu” obiektem). Pierwszy na myśl nasuwa się oczywiście operator typeof, jednak na niewiele on się nam zda w tej sytuacji. Popatrz na poniższy przykład:

var a = [];
var b = {};

console.log( typeof a ); // object
console.log( typeof b ); // object

Są jednak dwa wyjścia z tej sytuacji. ECMAScript 5 wprowadza nową metodę Array.isArray. Dlatego test możesz przeprowadzić np. w ten sposób:

var a = [];
var b = {};

console.log( Array.isArray(a) ); // true
console.log( Array.isArray(b) ); // false

Minusem tego rozwiązania jest fakt, że nie zadziała ono w starszych, aczkolwiek nadal używanych przeglądarkach (np. IE8). Jest jednak drugie rozwiązanie, mianowicie metoda… toString():

var a = [];
var b = {};

console.log( Object.prototype.toString.call(a) ); // [object Array]
console.log( Object.prototype.toString.call(b) ); // [object Object]

Drugiego sposobu możesz już bez obaw używać w starszych wersjach IE.