Narzędzia dla programistów JavaScript (i HTML5)

tools_1

Poziom średnio-zaawansowany

Witam w kolejnym artykule omawiającym przydatne narzędzia dla programistów JavaScript i HTML5.

Narzędzia dla programistów JavaScript

Zaczniemy od jednej z moich ulubionych funkcji – własny dump zmiennej.

1. Funkcja showDump

Czasami przychodzi nam pracować z „czymś”, co do czego nie jesteśmy pewni, nie znamy typu, albo struktury. Możemy wiedzieć że jest to obiekt lub konkretnie tablica, ale nie znamy struktury tego tworu. W takich sytuacjach używam funkcji „zrzucającej” te podstawowe informacje.

Kto programuje w PHP zapewne doceni takie funkcje jak var_dump() czy print_r(). Doceni także podobne rozwiązania w JavaScript.

Implementacja funkcji jest następująca:

function showDump(inputObj, depth) {
    var dump_output = "";
    var depth_padding = "";
    
    if (!depth) depth = 0;
    
    for (var k = 0; k < depth + 1; k++) depth_padding += "    ";
    
    dump_output += "Details: \n";
    
    // consider Objects (also Arrays / Hashes)
    if (typeof(inputObj) == 'object') {
        for (var item in inputObj) {
            var value = inputObj[item];
            
            // Array
            if (typeof(value) == 'object') {
                dump_output += depth_padding + "'" + item 
                + "' - \n";

                dump_output += showDump(value, depth + 1);
            } else {
                dump_output += depth_padding + "'" + item 
                + "' => \"" + value + "\"\n";
            }
        }
    } else {
        // consider others, like Strings, Numbers, ...
        dump_output = "Type of '" + inputObj + "' is: " 
        + typeof(inputObj);
    }
    
    return dump_output;
}

// test
alert(showDump('abc'));

// test 2
var xa = [1, 2, 3];
alert(showDump(xa));

Osobiście preferuję to rozwiązanie, aczkolwiek możemy znaleźć inne, takie jak te dostępne w bibliotece php.js:

var_dump w JavaScript:

http://phpjs.org/functions/var_dump/

print_r:

http://phpjs.org/functions/print_r/

Funkcje te są nie tylko przydatne i rozbudowane, ale także same ich implementacje mogą być interesujące z punktu widzenia programisty.

2. Makiety (Wireframes / Mockups)

Takie narzędzie może być przydatne nie tylko typowym projektantom, ale również programistom. Moqups to aplikacja w HTML5 i JavaScript do tworzenia makiet, czyli przedstawiania ogólnych konceptów naszych projektów, w tym szkieletów interfejsów użytkownika.

moqups

Twórcy podjęli próbę stworzenia narzędzia możliwie prostego i intuicyjnego.

Aplikacja dostępna online pod adresem: https://moqups.com/

3. VideoJS

To odtwarzacz video w HTML5, kompatybilny z bardzo wieloma urządzeniami. Wygląd definiowany jako skórka (skin) w HTML/CSS.

VideoJS

VideoJS

Jest promowany jako player dla każdego (For Designers, For Developers, For Everyone).

Strona projektu: http://www.videojs.com/

4. Wstępne wczytanie (pre-load) obrazków

Następny w kolejce jest trick, pozwalający wykonać pre-load, czyli wstępne wczytanie obrazków, co może okazać się ważne dla grafik o większych rozmiarach. W realnej aplikacji trick był użyty do wstępnego wczytania obrazków dla efektu hover – pokazujących się po najechaniu myszką na pozycję siatki.


Obrazki były wysokiej jakości, stąd też ich spora waga. Aby efekt hover był w pełni dynamiczny i użytkownik nie musiał czekać na wczytanie obrazka po najechaniu, został wykonany pre-load.

Oto przykład takiego kodu:


<!-- image preloading -->
<script type="text/javascript">
var images = [
  'img/game-screens/joker-game-hover.jpg',
  'img/game-screens/the-bricks-hover.jpg',
  'img/game-screens/copter-game-hover.jpg',
  'img/game-screens/poolparty-hover.jpg',
  'img/game-screens/towers-hover.jpg',
  'img/game-screens/taxi-driver-hover.jpg'
  // ...
];

$(images).each(function() {
  var image = $('<img />').attr('src', this);
});
</script>

Operacja jest właściwie trywialna, ale potrafi pomóc wyeliminować brzydki efekt braku obrazka przez (czasami dłuższą) chwilę. Najpierw definiujemy tablicę ze ścieżkami do obrazków. Następnie używając jQuery tworzymy elementy img, gdzie ścieżki do obrazków zostają podstawione do atrybutów src.

Obrazki nie zostają w tym momencie wyświetlone, ale operacja pozwala przeglądarce już je wczytać, więc będą od razu gotowe do użycia i pokazania gdy zajdzie potrzeba.

Podsumowanie

I to wszystko na dziś. Można powiedzieć że mamy tutaj cześć 2. artykułu, który opublikowaliśmy poprzednio, przedstawiając cześć naszych ulubionych narzędzi.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook0Tweet about this on TwitterShare on Google+1Share on LinkedIn0Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.