Firebug, opisywany już na naszym serwisie choćby w artykułach Firebug podstawy i Debugowanie aplikacji AJAX za pomocą FirePHP, jest bardzo dobrym narzędziem dla programisty aplikacji webowych. Sam w sobie posiada bardzo przydatne opcje, jednak rozszerzenie go za pomocą wtyczek daje jeszcze lepsze rezultaty. Poniżej opiszę krótko, moim zdaniem, najciekawsze z nich.

W kwestii technicznej dla mniej wtajemniczonych - wtyczki do Firebuga są tak naprawdę wtyczkami do Firefoxa, jednak nie zadziałają, jeśli Firebuga zabraknie.

• FirePHP

Dzięki temu dodatkowi debugowanie aplikacji PHP staje się znacznie prostsze. Zwykle trudno uchwytne problemy z AJAXem stają się widoczne jak na dłoni. Sam Firebug potrafi je przybliżyć od strony przeglądarki, dzięki FirePHP możemy prześledzić np. etapy formułowania odpowiedzi jeszcze po stronie serwera.
Na FirePHP składają się dwie części - jedną jest dodatek do przeglądarki, drugą biblioteka do zainstalowania na serwerze. W wielu popularnych frameworkach można łatwo włączyć obsługę FirePHP bez konieczności doinstalowywania części serwerowej - mają ją już w swojej bibliotece.

• Firecookie

Ciasteczka potrafią przysporzć problemów. I nie chodzi tylko o dietę, ale również o aplikacje webowe. Ich tworzenie i testowanie często wymaga szybkiego dostępu i możliwości manipulowania plikami cookie. Firecooki to właśnie umożliwia. Dostarcza dodatkową zakładkę do Firebuga, w której możemy podejrzeć listę ciasteczek, szczegóły na ich temat, a także usunąć wybrane ciasteczka znacznie łatwiej niż przkopując się przez ustawienia Firefoxa. Możemy też utworzyć ciasteczko dla danej sesji nieco łatwiej, niż wpisując odpowiedni kod w konsoli JavaScript.

• Firebug Autocompleter

Konsola Firebuga dostarcza od razu prosty autocompleter podpowiadający obiekty i metody dostępne w danym oknie. Dodatek Firebug Autocompleter przenosi to na nowy poziom pokazując listę obiektów, metod a także słów kluczowych i zasobów w miarę jak piszemy kod w konsoli.
Co prawda konsola nie służy bezpośrednio do programownia, ale taki gadżet jest naprawdę fajny.

• Firepath

Standardowo Firebug posiada okna inspekcji HTML i DOM. Jednak w programowaniu aplikacji nie przyda nam się ręczne wskazanie obiektów - musimy je wybrać za pomocą selektorów. Są różne metody - selektory CSS, XPath lub wyrażenia silnika Sizzle obecnego np. w jQuery. Dodatek FirePath pozwala na sformułowanie, przetestowanie lub podejrzenie wyników działania takich właśnie selektorów. Przydatne zwłaszcza na początku zabawy z selektorami, ale i później całkiem pomocne.

• Inline Code Ffinder

Jak nakazują Wojownicy Czytelności i Czystości Całkowitej, czyli W3C HTML nie powinien zawierać wpisanych kodów JavaScript i CSS (inline'ów mówiąc skrótowo). Ten dodatek pozwoli wyśledzić wszystkie takie przypadki na stronie. Każdy znacznik, który zawiera wpisany styl jest otoczony na zielono, elementy z wpisanym JavaScriptem są obramowane na czerwono. To, co jest w nich "nie tak" można sprawdzić najeżdżając na element. Dziwną rzeczą w tym dodatku jest interfejs zajmujący cały panel - ja nie znalazłem dla niego zastosowania.

• FireQuery

Ta wtyczka, jak można wnioskować już z nazwy, przydaje się przy pracy z jQuery. Elementy, którym przypięte są funkcje obsługi zdarzeń są specjalnie oznaczone, choć mnie ta funkcja rozczarowuje w porównaniu z, niestety już niedostępnym dla najnowszego Firefoxa, FireEvents. Ciekawostką jest natomiast łatwość wstrzyknięcia do strony jQuery (oczywiście na czas bieżącego żądania - np. po to, aby sprawdzić jakieś polecenia w konsoli). Ale chyba najlepszą rzeczą jest tu - to jedno z moich nowszych odkryć - jQuery Lint, czyli linter wykorzystania jQuery. Bardzo fajne narzędzie, a dzięki tej wtyczce dostępne na wyciągnięcie ręki.

• Firerainbow

Zakładka Skrypt w Firebugu jest szara i smutna. Do czasu, aż pobierzemy wtyczkę Firerainbow. Wtedy pojawia się tam kolorowanie składni i od razu znacznie wygodniej możemy korzystać z tego świetnego debuggera.
 

Osobną kategorią są jak dla mnie wtyczki biorące na celownik problemy ze stylami. Osobiście rzadko zajmuję się kompleksowo CSSem. Ale widzę w tych wtyczkach potencjał, który kiedyś uratuje mi może nie życie, ale na pewno sporo czasu i nerwów.

• Firepicker

W Firebugu możemy podmieniać na żywo kolory elementów, choćby po to, aby poeksperymentować z wyglądem. Z tym dodatkiem to o tyle łatwiejsze, że zamiast wpisywać kolor ręcznie, możemy wybrać go z palety podobnej jak w prostych programach graficznych.

• CSS Usage

Fajne narzędzie, dzięki któremu możemy sprawdzić, w jakim stopniu wykorzystujemy nasz arkusz stylu, a co jest w nim nadmiarowe. Dodajmy do tego możliwość wyeksportowania oczyszczonej wersji - i już widać, do czego może nam się ta wtyczka naprawdę przydać.

• Pixel Perfect

Gdy mamy już zapierający dech w piersiach projekt graficzny, to dobrze byłoby go wiernie przenieść na naszą stronę. Jeśli jednak nie ma się do tego pewnej ręki - warto skorzystać z tej wtyczki. Pozwoli nam nałożyć obrazek z layoutem na naszą stroną z odpowiednią przezroczystością - teraz możemy dopasować wszystko PERFECTyjnie co do PIXELa.

• FireFile

To jest materiał na osobny artykuł - i swój artykuł dostanie. Póki co krótko - mieszamy w CSSie za pomocą Firebuga i co dalej? Przenosimy zmiany do arkusza, po drodze gubiąc lub myląc połowę. Ta wtyczka pozwoli zapisywać zmiany w CSSie z poziomu Firebuga (oczywiście nie na każdej stronie).

Mam nadzieję, że znaleźliście na tej liście jakieś ciekawe narzędzia dla siebie. Powodzenia i niech ułatwiają Wam programistyczne i webmasterskie życie ;)

Żeby trzymać porządek we wtyczkach i np. nie uruchamiać ich przy zwykłym przeglądaniu internetu można stworzyć osobny profil Firefoxa z zainstalowanymi tymi wszystkimi (lub niektórymi) wtyczkami.

AJAX - czyli Asynchroniczny Javascript i Xml jest nowoczesną [? ma już ponad 5 lat, a pewne techniki były możliwe od kilkunastu lat] popularną technologią [przecież Javascript to Javascript, a Xml to Xml. Gdzie tu nowa technologia?] popularnym rozwiązaniem wykorzystującym potencjał drzemiący w Javascript.

Zbiór technologii, czy osobna technologia?

Będę się jednak upierał, że zbiór technologii, które już istniały. Po prostu odpowiednie wykorzystanie tego, co już wcześniej było dostępne, ładnie nazwane. O ile łatwiej jest sprzedać "Ajax Chat" niż "Chat wykorzystujący asynchroniczne żądania wysyłany przy pomocy obiektu XMLHttpRequest/pływającej ramki". Często Ajax jest dużo szerszym pojęciem, zahaczającym wręcz o DHTML. Ostatnia litera skrótu - X, oznacza XML, który wcale nie musi być wykorzystywany. Równie dobrze [a może nawet lepiej] operować na JSON, a z pewnością prościej [bardziej prostacko?] na czystym tekście.

Spis treści

W najbliższym czasie mam zamiar opisać takie zagadnienia związane z Ajaksem:

• Czym jest, a czym nie jest? Jak działa? Po co?
• Ajax oparty o XMLHttpRequest
• Ajax dla IE6 (ActiveXObject)
• Ajax zbudowany w oparciu o pływającą ramkę (iframe)
• Ajax oparty na ciasteczkach (cookies)
• wykorzystanie frameworków:
  • jQuery
  • Dojo
• wygodny obiekt dla Ajax
• zdalne źródła danych
• kodowanie znaków
• formaty:
  • JSON (AJAJ)
  • XML
  • HTML / plain-text (AJAH/AHAH)

Warto przeczytać

• www.adaptivepath.com/ideas/essays/archives/000385.php - pierwszy artykuł, w którym użyto "AJAX"
• www.w3.org/TR/XMLHttpRequest/ - specyfikacja W3C

Artykuł pochodzi z bloga autora: http://www.yarpo.pl/2011/03/06/ajax-kompedium-wiedzy/

Do systemu CMS Joomla można zainstalować  wybrane przez siebie dostępne edytory HTML. Najcześciej bazują one na edytorach stworzonych za pomocą JS i wtórnie dostosowanych jako rozszerzenie dla CMS Joomla.

Niektóre z nich - jesli sie je pozostawi w domyślnej konfiguracji instalacyjnej nastawiają na użytkownika pułapkę. Na pasku narzędzi dostępne są ikonu funkcji ZAPISZ oraz NOWY DOKUMENT. (sztrałki czerwone) Uruchamiają one  funkcje JS nie mające nic wspólnego z integracją odpowiadających im funkcji systemu Joomla. Z tymi zintegrowane są inne przyciski (strzałki zielone). Poniżej jak to wyglada na przykładzie edytora JCE   od zaplecza administracyjnego (ilustracja 1) oraz od frontonu serwisu (ilustracja 2).

Jeśli tych mylnych ikonek się nie usunie z edytora lub nie przeprogramuje w kodzie edytora to jest to niezła pułapka na którą często ,,wpadają'' użytkownicy przyzwyczajeni do intuicyjnosci obsługi. Użycie tych fałszywych przycisków (buttonów) powoduje przeładowanie edytora i bezpowrotną utratę tekstu wpisanego wcześniej.

Sam wpadłem kilka razy w tą pułapkę. 

Niedawno Marcin Sowa przysłał do nas pierwszy artykuł na konkurs Wolny Wybór.

Przypominany, że prace do konkursu można zgłaszać do 31 grudnia 2011 r.

Na zwycięzców czekają ciekawe nagrody ufundowane przez wydawnictwo Helion. Co więcej - sam możesz sobie wybrać taką nagrodę (zobacz, co wybrali laureaci poprzedniej edycji).

Zapraszamy do wzięcia udziału :)

Powodzenia!

Dojo. The Definitive Guide

Jeśli właśnie zadajesz sobie pytanie: "Czym u licha jest Dojo?" to wiedz, że sporo nie wiesz o nowoczesnych, bardzo przyjaznych użytkownikowi i programiście frameworkach (toolkitach) JavaScript.

Dojo Toolkit jest jednym z najlepszych frameworków Javascript dostarczanym razem z zestawem narzędzi, np. Shrinksafe (zmniejszanie rozmiaru kodu plików JS), buildscript (budowanie jednego pliku z kodem wielu modułów), checkstyle, itp.

Dojo Toolkit jest w pełni darmowy.

Dojo Toolkit wspiera wszystkie najpopularniejsze przeglądarki.

Dojo Toolkit jest nadal rozwijany i posiada dobre zaplecze społecznościowe.

Dojo Toolkit jest tematem książki, którą warto przeczytać.

Myślisz, że jQuery jest wystarczające? Też tak myślałem, póki nie zacząłem używać Dojo. Owszem - proste animacje, czy pojedyncze efekty są łatwo osiągalne w jQuery. Jednak zbudowanie całej aplikacji opartej na JavaScript jest dużo prostsze w Dojo.

Co opisuje książka?

Ta książka ma prawie 500 stron. Pozawoliło to rozwinąć skrzydła autorowi i opisać toolkit dość obszernie. W pozycji tej znajdziesz opis m. in. tego:

• jak stworzyć własną klasę
• jak zbudowane jest Dojo
• czym są widgety i jak twrozyć własne
• jak tworzyć wersję produkcyjną własnego kodu
• jakie są zasady pisania w Dojo
• jak testować stworzony kod wykorzystując framework DOH

A to tylko początek.

Oceniam tę książkę niezwykle wysoko. Przed sięgnięciam po nią nie znałem praktycznie wcale Dojo Toolkit. Po lekturze potrafię już całkiem sporo.

Minusy?

Książka nie jest po polsku (co nie musi być znowu takim minusem) ani nie jest dostępna w Polsce... Ja swoją ściągnąłem z Anglii. Cena z tego powodu też trochę odstrasza.

Kolejną wadą jest wiek książki. jets ona z 2008 r. i pisuje Dojo 1.1. ktualna wersja to 1.7 (na 4 grudnia 2011), a jeszcze w marcu 2011 r. oficjalnym releasem była wersja 1.5. Zatem książka jest już torchę wiekowa. Na szczęście API Dojo nie powinno się zmienić do wersji 2.0, stąd jeszcze nie jest przestarzała. To co opisuje nadal jest aktualne. Po prostu mogło pojawić się coś jeszcze nowszego.

Jeśli potrzebujesz szybko sporej wiedzy o naprawdę dobrym rozwiązaniu do tworzenia aplikacji webowych - Dojo. The definitive guide jest pozycją dla Ciebie. Polecam z czystym sumieniem.

Dojo. The Definitive Guide

Wydawnictwo O'Reily - 06/2008

HTML5 i CSS3. Standardy przyszłości

Nadchodzi (kolejna!?) rewolucja w tworzeniu stron internetowych. A może już aplikacji webowych? Tym razem u jej podstaw stać będzie HTML5.

Czym jest HTML5?

To już nie tylko określenie nowej wersji starego, dobrze znanego HTML. To już jest słowo klucz jak Ajax, czy Web 2.0. Wszystko, co nowoczesne powoli zaczyna być po prostu określane mianem HTML5 - w tym nowe rozwiązania JavaScript (jak choćby Canvas, geolokalizacja, localstorage itp.) czy CSS3.

Książka autorstwa Briana  Hogana jest najciekawszą z tych, które dotąd czytałem nt. HTML5, ponieważ pisuje tę technologie dogłębnie. Nie pisząc jedynie o kilku nowych znacznikach (kwestia najbanalniejsza) przez ciekawe zastosowania nowych opcji CSS3 (choćby tworzenie kolumn z poziomu określania stylów CSS) po zastosowania JavaScript do tworzenia jeszcze lepszych stron www.

Bardzo podoba mi się kwestia poruszana przez autora przy okazji każdego tematu: co jeśli nie działa. Przeciez wiele z funkcjonalności opisywanych przez Hogana, jeszcze nie jest w pełni zaimplementowana (lub w niektórych przypadkach wcale). I co wtedy? Czytelnik może liczyć, albo na opis odpowiedniej bibliteki odpowiednio łatającej dziury, albo na garść podpowiedzi. To olbrzymi plus książki.

Ogólnie oceniam książkę na bardzo dobrą. Co prawda nie opisuje niczego, czego nie można znaleźć w internecie. Jednak znalezienie tego tak szybko (i to po polsku) byłoby raczej niewykonalne. Z tego powodu polecam książkę jako bardzo przydatne źródło wiedzy do startu w nową erę.

HTML5 i CSS3. Standardy przyszłości

Wydawnictwo helion - 07/2011

Jest to artykuł zgłoszony przez Marcina Sowę na Konkurs Wolny Wybór.

{edocs}/uploaded/konkurs2/m.sowa-dlaczego-warto-uzywac-linuksa-zamiast-windowsa.pdf,720,900,link{/edocs}

POd adresem: http://cocoate.com/pl/j17pl dostępna jest darmowa wersja podręcznka: Joomla 1.7 - Podręcznik dla początkujących.

Autorem podręcznika jest Hagen Graf (Francja). Dzięki zespołeowej pracy wielu ludzi książka została przetłumaczona na wiele języków. Polską wersję przygotowali: Agnieszka Huczala, Barbara Szlachta, Ewa Święcka, Krzysztof Hanzel. 

Gorąco polecam.

Powyższa ilustracja jest zrzutem ekranu z prezentacji wygłoszonej pzrez autora na meetingu w Sydney, która do obejszenia i odsłuchania jest udostepniona na jego blogu: http://brian.teeman.net/joomla-1.7/hidden-joomla-1.7-secrets-live-in-your-living-room.html (narracja w języku angielskim)

Począwszy od wersji 2007 firma Microsoft wrowadziła format swoich doikumentów w całkiem nowej formie opratej na języku XML. Starsze wersji dokumentów MS OFFICE nie rozpoznają tego formatu (starszy format był formatem binarnym). Microsoft opublikował odpowiedni SERWIS PAK dla starszych porgramów, które umożliwiają odczytanie w nich wersji nowych do=kumentów MS Office. Zobacz: http://www.dobreprogramy.pl/Microsoft-Office-Compatibility-Pack,Program,Windows,12202.html

W sieci dostępny jest również usługa ON LINE świadcząca usługi konwersji formatu DOCX na format DOC: http://www.doc.investintech.com/

Usłaga jest bardzo poręczna do awaryjnych, szybkich zastosowań. Nie tzreba zakładać konta. Nie używa również e-maila do pzresłania wyniku konwersji. Pzrekonwewrtowany plik pobiera się prosto ze strony.

.