Pracując przy projekcie w którym kod javascriptowy jest docelowo pisany pod platformy mobilne lub np. ma być wykorzystany w QML-u, nie przejmuję sie restrykcjami np. przy tworzeniu komunikacji ajaxowej ze względu na to że aplikacje uruchamiane są na urządzeniach jako ‘natywne’ i nie zakłócają ‘same origin policy’. Przy takim dewelopmencie komunikacje czy nawet aplikacje najszybciej można przetestować było korzystając z Firefoxa włączając do kodu prosty skrypcik

var xmlHttp = new XMLHttpRequest();
/*
 * ustawiamy uprawnienia zeby mozna bylo odwolywac sie do innej domeny,
 * lub odpalajac komunikacje z lokalnego pliku
 */
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
//wazne zeby open byl zaraz po ustawieniu uprawnien
xmlHttp.open('get,'http://dowolnadomena.com');

Firefox pyta wtedy urzytkownika o zgodę na połączenie do domeny i można było spokojnie testować aplikacje dopóki… nie pojawił się Firefox 5 .
Mozilla począwszy od Firefox-a 5 w górę wyłączyła funkcjonalność ‘enablePrivilege’. W tym momencie jedyną opcją żeby dewelopować czy testować taki scenariusz korzystając z Firefoxa 5+ mozna:
stworzyć własny plugin który dostarcza taką możliwość lub przewertować MDN i bugzille mozilli i dotrzeć do tego linku https://bugzilla.mozilla.org/attachment.cgi?id=545203
(z wątku bug-a zgłoszonego w powyższej sprawie), gdzie znajduje się Special Powers w formie pluginu dla Firefoxa.

Special Powers jest to zestaw API który normalnie jest częscią Mochitest – frameworka do testów automatycznych używanych do testowania build-ów firefox-a oraz potencjalnych zagrożeń związanych z wykorzystaniem javascriptu czyli wszędzie tam gdzie chcemy żeby nasz skrypt mógł robić to czego nie pownien . Po zainstalowaniu plugina zobaczymy że pojawi się globalny obiekt SpecialPowers. Teraz możemy zmodyfikować powyższy przykład:

//korzystamy z super mocy ^^
var xmlHttp = SpecialPowers.createSystemXHR();
xmlHttp.open('get,'http://dowolnadomena.com');

i stworzyć obiek xmlHttpRequest który posiada uprawnienia łączenia się z innymi domenami.

Warto wiedzieć że Special Powers to nie tylko komunikacja ajax kompletną liste ‘super mocy’ znajdziecie tutaj.

Javascript jest językiem w pełni obiektowym, lecz pomimo tego nie wspiera natywnie mechanizmów dziedziczenia podczas deklaracji klas i obiektów jak robią to pozostałe języki programowania jak np. Java czy C#. Dlatego też w javascripcie mechanizm dziedziczenia trzeba zaimplementować samemu, żeby to zrobić warto znać podstawy tworzenia obiektów.

Do tworzenia obiektów/klas w javascripcie wykorzystujemy funkcje:

//deklarujemy funkcje jako konstruktor obiektu
function Parent (value) {
    this.value = value;
}
//tworzymy instancje obiektu
var parentInstance = new Parent();

W javascripcie każdy obiekt posiada swój prototyp oznaczony w języku jako prototype.
Prototyp definiuje zestaw metod, pól które sa tworzone podczas każdej inicjalizacji obiektu przy pomocy słowa kluczowego new tak jak w przykładzie powyżej. Rozwijając powyższy przykład dodamy funkcje getName i getGroup do naszej klasy:

//deklarujemy funkcje jako konstruktor obiektu
function Parent (value) {
    this.value = value;
}
/*
 * dodajemy do prototypu funkcje getName i getGroup,
 * bedą one dostępne w każdym zainicjalizowanym obiekcie
 */
Parent.prototype.getName = function(){
    return 'I am parent';
};
Parent.prototype.getGroup = function(){
    return 'Parent Group';
};
//tworzymy instancje obiektu
var parentInstance = new Parent();
//wywołujemy funkcje utworzonego obiektu
alert(parentInstance.getName());
alert(parentInstance.getGroup());

czytaj całość »

Zespół Devmeetings.pl przygotował po raz kolejny ciekawy cykl szkoleń.  W Poznaniu, Wrocławiu, Gliwicach i Warszawie zainteresowani będą mogli poznać szczegóły detekcji kolizji. Dla wszystkich którzy chcą się zajmować tworzeniem gier (niekoniecznie w naszym ulubionym języku) jest to zagadnienie pierwszorzędne.

Czego między innymi można się spodziewać?

• Krótkiego i treściwego repetytorium z fizyki
• Szczegółowego przedstawienia sposobów wykrywania kolizji
• Matematyki wektorów
• Omówienia algorytmów optymalizacji wydajności
• Obsługi reakcji na kolizje

Terminy:

• Poznań, 9 lipca
• Gliwice, 16 lipca
• Warszawa, 23 lipca
• Wrocław, 30 lipca

Szkolenie prowadzi Marek Pawłowski.  Miałem przyjemność być, na prowadzonym przez niego,  szkoleniu z tworzenia gier w Javascripcie (wtedy pisaliśmy multiplayerowy Mortal Kombat).

Oczywiście bym zapomniał, szkolenie jest całkowicie za darmo.  Polecam!

Szczegóły i rejestracja na stronie devmeetings.pl

Optymalizacja serwisów i aplikacji webowych jest bardzo szerokim tematem,
na wiele artykułów, w przyszlości postaram się dogłębniej opisać poszczególne
czynniki i metody optymalizacyjne ale póki co chciałbym zamiescić najważniejsze
punkty dotyczące optymalizacji frontendowej na sasadzie ‘cheat sheet’-a
lub ‘check list’-y którą można stosować przy budowie aplikacji webowych:

1) Minifikacja Javascriptu i Css-a

Minifikujemy pliki javascriptu i css-a, po usunięciu białych znaków,
oraz optymalizacji zmiennych, usunięciu komentarzy
w javascripcie możemy zyskać nawet 25% wielkości podstawego pliku.
najpopularniejsze narzędzia to:

YUICompressor
Google Closure Compiler

2) Kompresja Gzip

Warto włączyć kompresje Gzip po stronie serwera można zyskać nawet 30%
podstawowej wielkości plików. Warto ją włączyc dla każdego statycznego contentu,
plike HTML (lub wygenerowany HTML przez skrypty na serwerze), CSS i oczywiście
Javascript.

3) Zmniejszenie liczby requestów do serwera

Każdy request do serwera przez przeglądarke kosztuje czas oraz alokacje pamięci i resourców,
warto sprawić aby w naszej aplikacji było jak najmniej requestów po dane do serwera.
Ponieważ jeden request po większą ilość danych zadziała szybciej niż
5 czy 10 requestów po mniejszą ilość danych.

3a) Łączenie plików Javascript i Css

Podczas procesu budowy czy releasowania projektu warto łączyć wszystkie pliki
projektowe javascriptu w jeden to również dotyczy plików css. Zmniejsza to liczbę
requestów do serwera. Nawet jeśli korzystamy z bilbiotek zewnętrznych takij jak
Jquery czy Mootools to również warto przemyślec czy nie umieścić jej ‘zbundlowanej’
w naszym pliku wynikowym. W idealnym świecie dla naszej aplikacji istnieje 1 plik JS i 1 plik css.

3b) Obrazki jako Sprite-y

Zamiast ładować 10 ikon jako osobne pliki, lepiej jest stworzyć jeden plik
graficzny który zawiera wszystkie ikonki i obrazki tła które wykorzystujemy,
i po załadowaniu odpowiednio ustawiając pozycje tła w CSS-sie na danym elemencie
pokazyjemy odpowiednią ikonkę. Dzieki temu np. zamiast 10-ciu requestów po
dane mamy 1. Warto zajrzeć http://css-tricks.com/css-sprites/.

3c) Cache Forever

Warto ustawiać nagłówki ‘Expires’ np na rok albo więcej dla statycznego
contentu. Dzięki temu client przeglądarka bedzie korzystać z lokalnie
zapisanego pliku zamiast wysyłać za każdym razem request po content.
Trzeba wtedy tylko pamiętać żeby przy releasowaniu nowej wersji aplikacji
zmieniać url do pliku, można np. wykorzystać numer aktualnej rewizji w tym celu.

4) Optymalizacja grafiki

Warto korzystać z formatu PNG-8 zamiast PNG-24 możemy zyskać do 50% wielkości
podstawowego pliku. PNG-8 dla IE6 zachowują sie jak pliki GIF (tylko że
nie wspierają animacji) łącznie z przeźzroczystością (zwykłą nie alpha).
Warto zkorzystać z narzędzi takich jak np. http://psydk.org/PngOptimizer.php
do optymalizacji plików png usuwają one z pliku niepotrzebne informacje.

Pliki JPG można zapisać w formacie ‘baseline’ lub ‘progressive’ w praktyce
dla plików większych (niż 10kb) warto stosować ‘progressive’, dla miniatur
‘baseline’ można zyskać do 10% bez utraty jakośći.
warto zajrzec: http://www.smushit.com/ysmush.it/

5) Serwery Plików statycznych oraz Content Delivery Network

Przy większych projektach warto korzystać z sewerów pliów statycznych
dla statycznego contentu oraz z tzw. CDN-ów, np Akamai,
czy Amazon CloudFront można uzuskać dużo szybsze ładowanie content-u
w szczególności dla użytkowników którzy są ‘fizycznie’ oddaleni od naszego
serwera (np. za oceanem). Niestety dobre serwisy CDN są płatne.

Nie poruszałem dodatkowych kwesti dotyczących backendu ale jesłi uważacie że czegoś brakuje na liście lub o czymś zapomniałem zapraszam do dyskusji z chęcia zrobie update.

żródło: microjs.com

Podczas tworzenia aplikacji staram się być minimalistą. Tylko funkcjonalności, które są mi teraz potrzebne. Jak najmniej na przyszłość – wszystko ma działać od zaraz i najważniejsze z jak najmniejszą ilością (czytelnego) kodu. Dlatego zgadzam się z tym z tym co napisał Thomas Fuchs na swoim blogu o bibliotekach takich jak JQuery, Prototype, YUI , MooTools itp.

• takie biblioteki starają się rozwiązać wszystkie problemy i przy takiej skali trudno osiągnąć w każdym aspekcie perfekcję
• takie biblioteki są duże. Być może nie przesadnie wielkie jeżeli mówimy o klasycznych komputerach ale już przy urządzeniach mobilnych ich rozmiar ma znaczenie.
• tworząc strony nie potrzebujemy wszystkich z udostępnionych funkcjonalności

We wspomnianym wpisie Thomas Fuchs zaprezentował parę specjalistycznych frameworków, które realizowały bardzo konkretne zadania a całkiem niedawno stworzył stronę microjs.com gdzie możemy sobie wybrać z kilkudziesięciu bibiotek(a liczba ich prawdopodobnie będzie rosnąć). Wszystkie poniżej 5kb i koncetrują się na jednej funckjonalności.

• wykryciu dostępnych elementów HTML5 i CSS3 (Modernizer)
• obsługi rożnego rodzaju zapisu danych po stronie przeglądarki (Lawnchair)
• animacji (Emile)
• systemie szablonów (Mustache)
• obsługę zdarzeń, elemetów DOM, elementu Canvas, Ajaxa i wielu innych

Dzięki małemu rozmiarowi biblioteki te można łatwiej debugować a dzięki niezależności “w kodzie” łatwo wymienić na inną. Jako plus dodam, że można nauczyć się kilku fajnych rozwiązań analizując ich kod. Brakuje tylko rankingu albo kogoś kto będzie recenzował te biblioteki bo przy dużym wyborze ciężko stwierdzić która jest najlepsza.

Źródła:
Strona z listą micro bibliotek : micro.js
Strona Thomasa Fuchsa: mir.aculo.us

Kiedy dawno temu zaczynałem swoją przygodę frontendową i wychodziłem ze świadka javowego Aptana (pokłosie Eclipsa) była dla mnie naturalnym wyborem. Wiem, wiem pracując na Macu powinienem skorzystać z czegoś co jest bardziej “sexy”, ale szczerze powiedziawszy nie miałem ochoty na przestawianie się i poszukiwania. Dodatkowym plusem było to, że Aptana jest za darmo. Co najbardziej mi doskwierało? Przede wszystkim szybkość działania samego IDE jak i przeszukiwania projektów, słabe podpowiadanie składni (w porównaniu do Javy z Eclipsem) i brak dobrze przemyślanego UX-a.

W poprzednim tygodniu wyszła wersja 3 wspomnianego IDE i nie omieszkałem jej przetestować.

Co mi się podoba:

• nowa kolorystyka tła i składni. Jest to oczywiście kwestia gustu ale mi bardzo przypadło do gustu. Jeżeli komuś się nie spodoba może zaimportować sobie wybrany wygląd z TextMate.
• “App Explorer”. Panel z plikami dla tylko jednego projektu. Umożliwia szybkie wyszukanie i zmniejsza bałagan.
• prędkość wyszukiwania! To działa i działa naprawdę szybko! Jestem pod wrażeniem jakbym przesiadł się z malucha do, no powiedzmy, nowego forda
• dużo lepszy UX aplikacji. Bezboleśnie znalazłem nowe funkcjonalności i wykorzystałem je podczas pracy. Cały interfejs jest mniej zaśmiecony i przyjazny. Nie jest oczywiście idealny i nie ma co się ścigać z najlepszymi aplikacjami na MAC-a ale jest dużo, dużo lepiej.
• zintegrowany Terminal. Czasami mi się przydawał (często musiałem odpalać buildy antowe). Nie konieczny ale przyjemny dodatek.
• Aptana 3 jako osobna aplikacja. Wersja 2 i wersja 3 działają zupełnie osobno. Mogłem dzięki temu zainstalować nowy program bez strachu, że w połowie pracy będę musiał walczyć z przywróceniem bardziej stabilnej wersji.
• prędkość działania. Bardzo poprawiona. Aplikacja działała bez problemowo i nie zawiesiła się ani na chwile.
• podpowiadanie składni w CSS-ach (razem z wyszukiwaniem odpowiednich klas z pliku HTML)

Co mi się nie podoba

• UX dalej jest daleko od bycia idealnym. Za dużo opcji, lekko brzydkawy wygląd.
• podpowiadanie JS-a. Niby jest i coś podpowiada ale żeby bardzo pomagał to nie powiem. Dodatkowo czasem w ogóle się nie odpalał.
• czasami źle były wskazywane miejsca błędów. Raz pokazywał je w miejscach które zostały już poprawione a czasami wychodziły dopiero po odpaleniu programu w przeglądarce.

Co jeszcze obiecują(a czego nie przetestowałem)

• możliwość importowania motywów z TextMate
• integrację GitHubem
• Deployment Wizard. Automatyzacja wystawiania projektów Rail-owych(wbudowane wsparcie dla Heroku i Engine yard)

Podsumowanie

Ogólnie jestem bardzo zadowolony i polecam. Aptana 3 sprawiała mi się szybko i była stabilna. Moim zdaniem jest to dużo lepszy edytor od Aptany 2 i warto go sprawdzić w boju.

Strona Aptany