Co jakiś czas zachodzi potrzeba wyszarzenia strony w związku z żałobą. Zazwyczaj podmienia się w tym celu grafikę na czarnobiałą lub w przypadku przeglądarki Internet Explorer stosuje się odpowiedni filtr. Niestety nie ma jednej prostej metody, która zadziałałaby od razu bez konieczności wykonywania dodatkowych czynności. A raczej nie było. W bezkresie Internetu znalazłem ciekawą bibliotekę Javascript, która za jednym zamachem załatwia problem wyszarzenia strony we wszystkich popularnych przeglądarkach.

Biblioteką tą jest grayscale. Zasada działania jest prosta. W przypadku IE stosowany jest filtr, dla wszystkich pozostałych przeglądarek canvas. Użycie grayscale jest banalnie proste i sprowadza się do wywołania jednej funkcji na elemencie, który chcemy wyszarzyć (przykład ze strony autora).

var el = document.getElementById( 'myEl' );
grayscale( el );
 
// Alternatively, pass a DOM collection
// (all elements will get "grayscaled")
grayscale( document.getElementsByTagName('div') );
 
// Even works with jQuery collections:
grayscale( $('div') );

Przykład działania znajdziecie w demo przygotowanym przez autora biblioteki.

Na koniec drobna uwaga. Grayscale mieli obrazki piksel po pikselu, a co za tym idzie będzie działał bardzo wolno w przypadku stron przeładowanych grafiką. Korzystajcie z tego rozwiązania z rozwagą.

Pluginów jQuery, których zadaniem jest wyświetlanie kolejnych zdjęć w postaci karuzeli (slidera) jest mnóstwo. Sam nawet popełniłem jedną karuzelę na własne potrzeby. Ostatnio wpadł mi w ręce kolejny plugin oferujący wspomnianą funkcjonalność i po pierwszych testach muszę przyznać, iż spełnia wszystkie moje potrzeby. Wprawdzie nie miałem jeszcze okazji skorzystać z niego w środowisku produkcyjnym, jednak nieśmiało można założyć, iż nie powinno być z nim większych problemów.

Slides, bo o nim mowa, został dokładnie przemyślany i oferuje szereg niezbędnych funkcjonalności. Do najpotrzebniejszych/najciekawszych można zaliczyć:

• możliwość ustawienia loadera dla elementów w karuzeli
• możliwość określania elementu, od którego rozpoczynać się będzie karuzela
• możliwość określenia efektu przejścia (na razie jest to tylko slide lub fade)
• możliwość losowego wyświetlania elementów

Nie są to jedyne możliwości oferowane przez Slides. Pełną ich listę, jak również przykłady i pliki do pobrania znajdziecie na stronie projektu - http://slidesjs.com/.

źródło: http://getfirebug.com/wiki/index.php/File:Flaming-firebug-logo-with-text.png przez Johnjbarton

Główne zmiany

• Konsola i linia poleceń
• HTML
• CSS
• JavaScript

źródło: http://www.softwareishard.com/blog/firebug/firebug-16-command-line-available-on-all-panels/

Konsola i linia poleceń

Przycisk aktywujący linię komend został wyciągnięty przed panele, dzięki czemu jest teraz dostępna z każdego panelu. Ułatwi to znacznie pracę podczas debugowania kodu JavaScript, gdy wykonywanie kodu zostanie zatrzymane przez błąd. Możliwe wtedy stanie się sprawdzenie wartości zmiennej, czy szybkie wykonanie jakiegoś kodu js bez przełączania się do innego panelu.

Dodano filtrowanie wiadomości pojawiających się w konsoli według ich rodzaju (błędy, ostrzeżenia, informacyjne)

źródło: http://www.softwareishard.com/blog/firebug/tabular-logs-in-firebug/

Nowa komenda console.table(), która powoduje wyświetlenie w konsoli zmiennej tablicowej jako zwykłej tablicy – z kolumnami i wierszami. Definicja metody jest następująca: console.table(object[, columns]);. Kod powodujący wyświetlenie tabelki ze zrzutu ekranu:

1
2
3
4
5

var table1 = new Array(5);
for (var i=0; i<table1.length; i++){
    table1[i] = [i+1, i+2, i+3, i+4, i+5, i+6, i+7];
}
console.table(table1);

Zmian wprowadzonych do konsoli jest dużo więcej , są to m.in.:

• Grupowanie wyników konsoli w rozwijalne bloki przy użyciu

  console.groupCollapsed("This is my table");
  console.table(table1);
  console.groupEnd();

• Sortowanie wyników tabeli wyświetlonej w konsoli
• Wyświetlanie zmiennych złożonych typów. Teraz Firebug lepiej radzi sobie z wyświetlaniem obiektów, elementów DOM itd
• Wyświetlanie danych tabelo-podobnych. Firebug radzi sobie nie tylko z tablicami, ale także z listą obiektów, które reprezentują tą samą strukturę:

  function Person(firstName, lastName, age) {
      this.firstName = firstName;
      this.lastName = lastName;
      this.age = age;
  }
   
  var family = {};
  family.mother = new Person("Susan", "Doyle", 32);
  family.father = new Person("John", "Doyle", 33);
  family.daughter = new Person("Lily", "Doyle", 5);
  family.son = new Person("Mike", "Doyle", 8);
   
  console.table(family);

  W wyniku otrzymujemy:

  źródło: http://www.softwareishard.com/blog/firebug/tabular-logs-in-firebug/

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

  

  Zwiń
  Czytaj na blogu autora...

Nie lada gratka dla wszystkich zainteresowanych jQuery pojawiła się ostatnio w Internecie. Mowa o jQuery 1.4.3 Offline Learning Kit, czyli pakiecie do nauki jQuery offline. Pakiet ten jest całkiem spory i swoim zakresem obejmuje:

• spis selektorów wraz z ich dokładnym opisem
• cheet sheet zawierający listę wszystkich dostępnych funkcji
• jQAPI pozwalające na przeglądanie dokumentacji offline
• demonstracyjną aplikacją korzystającą z jQuery Mobile
• książkę jQuery Fundamentals book wraz z przykładami
• pliki źródłowe z jQuery 1.4.3 oraz 1.4.4 RC

Wszystkie materiały dostępne są w języku angielskim.

jQuery 1.4.3 Offline Learning Kit można pobrać pod adresem http://addyosmani.com/blog/jq143offlinelearningkit/

Wpadł mi właśnie w ręce bardzo ciekawy skrypt – Snippet. Jest to plugin do jQuery, oferujący możliwość kolorowania składni. W przeciwieństwie do większości dostępnych na rynku skryptów, ten ma możliwość bardzo prostej zmiany stylu kolorowania składni, dzięki czemu można dopasować jego wygląd do wyglądu strony.

Użycie plugina jest banalnie proste i sprowadza się do dołączenia do kody strony pugina oraz pliku css ze stylami oraz wywołania na znaczniku pre funkcji snippet.

$("pre.koloruj-kod").snippet("html");

Wymaganym parametrem funkcji snippet jest rodzaj kodu do kolorowania. Do wyboru mamy 15 języków, miedzy innymi, PHP, C#, Javę, HTML, Javascript, czy CSS. Ilość gotowych stylów do zastosowania wynosi 40, więc każdy znajdzie coś dla siebie.

Jedyną wadą tego plugina jest bardzo skromna lista dodatkowych funkcjonalności. Jedyne co można dodatkowo zdefiniować, to pokazanie/ukrycie numeracji oraz określenie, czy tło ma być przeźroczyste. Niemniej plugin zapowiada się ciekawie i warto śledzić jego rozwój.

Dokładne informacje na temat snippet (wspierane języki, więcej przykładów oraz style) znajdziecie na stronie projektu - http://www.steamdev.com/snippet/

Test-Driven JavaScript Development Okładka

Ten wpis jest moją pierwszą próbą napisania recenzji książki. Zacznijmy więc od mojej najnowszej pozycji: Test-Driven JavaScript Development napisanej przez Christiana Johansena. Jak napisano na tylnej okładce, Test-Driven JavaScript Development jest kompletnym zbiorem najlepszych praktyk, poradnikiem dla testów JavaScript w metodyce agile oraz zapewniania jakości z użyciem metodologii programowania sterowanego testami (TDD).

Na początku pragnę podziękować autorowi – Christianowi, który dał mi tę książkę na konferencji Front-Trends 2010. Książka jest bardzo świeża (pierwszy druk, wrzesień 2010), tym bardziej jestem podekscytowany jej posiadaniem. Dzięki Christian

Kim jest autor?

W swojej karierze zawodowej Christian Johansen specjalizował się na internecie oraz programowaniu front-end’u przy użyciu technologii takich jak JavaScript, CSS i HTML przy użyciu rozwiązań agile. Często wnosi wkład w open source, bloguje o JavaScript, Ruby, i tworzeniu stron internetowych na cjohansen.no. Christian pracuje w Shortcut, norweskiej firmie programistycznej, koncentrującej się na otwartych technologiach, aplikacjach internetowych i aplikacjach mobilnych.

Pozostawiając kodowanie w „stylu kowbojskim” starał się poprawiać jakość i zaufanie do kodu. Spędził wiele czasu badając testy jednostkowe i TDD w JavaScript.

Mieszka w Oslo, w Norwegii.

O czym jest ta książka?

Automatyczne testowanie dostarcza rozwiązania do manualnego procesu testowania. Łatwiej, szybciej jest zrobić test automatycznie niż ręcznie. Programowanie sterowane testami idzie o krok dalej. Przesuwa testy jednostkowych do pierwszego wiersza, czyniąc je głównym punktem. W TDD testy są pisane przed pisaniem produkcyjnego kodu.

Książka zorganizowana jest w 4 częściach. Każda część może być czytana w innym niż sugerowanym porządku. Generalnie książka jest o programowaniu w języku JavaScript dla prawdziwego świata za pomocą podejścia wykorzystującego programowanie sterowane testami. To nie jest tylko styl programowanie, to jest to zaufanie do kodu z powodu pokrycia testami, możliwość refaktoringu kodu bez lęku. Chodzi o pisanie modułowego kodu, który może być łatwo przetestowany.

1. Programowanie sterowane testami
2. JavaScript dla programistów
3. Prawdziwy świat programowania sterowanego testami w JavaScript
4. Wzorce testów

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

Zwiń
Czytaj na blogu autora...