Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Archiwum: 'HTML5' Kategorie

MapChat

Autor: Piotr Karpiuk o 25. marca 2015

MapChat to pomysł na wspólny czat dla wszystkich ludzi na świecie. Wypowiedź każdego uczestnika jest pokazywana w dymku na mapie, co pozwala zorientować się o czym mówią ludzie w okolicy. Nie jest potrzebne zakładanie konta, a żeby napisać komunikat trzeba zgodzić się na udostępnienie przeglądarce swojej geolokalizacji.

Napisany w HTML5, WWW | Brak komentarzy »

Ext JS 4 Cheatsheet

Autor: Piotr Karpiuk o 4. lutego 2015

Ext JS is a pure JavaScript application framework for building interactive Rich Internet Applications (RIAs). And here is a short cheatsheet for fast learning, made up and used by me during daily work:

Cheatsheet for download (5 pages A4, 107 KB)

Tags: , , ,
Napisany w HTML5, WWW | Brak komentarzy »

Animowana wizualizacja prądów morskich i wiatrów

Autor: Piotr Karpiuk o 28. stycznia 2015

Bardzo sympatyczna, interaktywna demonstracja możliwości SVG: grafiki wektorowej w przeglądarkach. Kliknij w obrazki, aby obejrzeć animacje.

Źródło: windyty.com. Kliknij aby obejrzeć animację. Źródło: earth.nullschool.net. Kliknij aby obejrzeć animację.

 

Napisany w datavis, HTML5, WWW | Brak komentarzy »

The Truth About HTML5 – Recenzja

Autor: Piotr Karpiuk o 2. listopada 2014

Książka The Truth About HTML5 została napisana przez młodego gniewnego projektanta WWW z Australii. Większość książek o HTML5 stawia sobie za cel w sposób przystępny i w miarę szczegółowy opisać nowinki standardu i zachęcić do ich używania, a tutaj mamy dość rzetelne krytyczne spojrzenie na temat. Można autorowi miejscami zarzucić przesadę i złośliwość, ale z pewnością nie dyletanctwo. W tej książce dowiemy się wiele o tym co dzieje się za kulisami, jaki wpływ na HTML5 ma polityka patentowa, i jak poszczególne nowinki zostały przyjęte w świecie webmasterów (z co bardziej smakowitymi cytatami z blogów i grup dyskusyjnych).

Tak więc mamy tu ploteczki o tym, że na obecny kształt specyfikacji HTML5 podejrzanie duży wpływ ma jedna osoba: Ian Hickson, onegdaj pracownik Opery a obecnie Google. O tym, że Adobe wprawdzie już pogodziło się z nieuniknioną śmiercią Flasha, ale jednocześnie aktywnie propaguje SVG. O tym, że najbardziej pragmatyczne osiągnięcia w zakresie semantycznego Internetu oferuje w tej chwili inicjatywa Microsoftu, Google i Yahoo: Schema.org (jednakowoż stosowanie się do tych mikrodanych wpływa raczej na prezentację naszej witryny w wynikach wyszukiwania, a nie pozycję na liście wyników). O tym że wspomagana sprzętowo grafika 3D (WebGL) jest w grafice 2D szybsza niż canvas. O tym że obsługa dźwięku na użytek gier w przeglądarkach jest póki co beznadziejna. O tym że rekomendacja HTML 5.1 ma być gotowa w 2016. O tym że coraz modniejsze są preprocesory CSS takie jak SASS i LESS. No i o tym, że na dobrą sprawę sam HTML jest dziś „ogonem, którym macha JavaScriptowy pies”.

W kwestii najmniejszego wspólnego mianownika jeśli chodzi o przeglądarki do których musimy dziś równać IE6 na szczęście przestał być koszmarem, ale jego rolę przejął IE8 który będzie obecny tak długo, jak długo w Sieci widoczny będzie Windows XP.

Poszczególne nowości w świecie formularzy omówione są z punktu widzenia praktycznego: które warto używać (np. atrybuty autocomplete i autofocus), a których póki co warto unikać (atrybuty required, pattern, pola input typu number, range, date, color) i dlaczego.

Rzetelnie omówiony jest temat canvas i WebGL wraz z zastosowaniami (a może WebGL zostanie pokonany przez silnik 3D Unity?), a także znaczniki audio i video — gdzie sytuacja związana z kodekami i DRM jest wyjątkowo zagmatwana i potencjalnie niebezpieczna dla szeroko rozumianej wolności w Internecie. W praktyce ze względu na różnice między przeglądarkami i różny sposób wsparcia dla możliwości multimedialnych, zaleca się korzystanie z bibliotek JavaScriptu (np. MediaElement, VideoJS) zamiast „gołych” znaczników takich jak video.
Czytaj więcej »

Napisany w HTML5, WWW | 3 Komentarzy »

JavaScript: Obietnice (ang. Promises)

Autor: Piotr Karpiuk o 26. maja 2014

JavaScript jest zasadniczo jednowątkowy, a wszelkie operacje I/O są wykonywane asynchronicznie. W rezultacie nasz kod wymagający kontaktu ze światem zewnętrznym staje się skomplikowany, zwłaszcza gdy uwzględnimy jeszcze obsługę błędów. Zawarty w specyfikacji EcmaScript 6 mechanizm obietnic (zaimplementowany w najnowszej wersji wiodących przeglądarek) pozwala pisać kod asynchroniczny w stylu bardziej synchronicznym.

Obietnica (ang. promise) w postaci obiektu klasy Promise reprezentuje wynik operacji asynchronicznej (wartość zwracaną w przypadku sukcesu lub błąd w razie porażki), który może nie być osiągalny na razie, ale z czasem będzie.

Obietnice możemy składać (ang. chain) ze sobą wykonując zestaw operacji asynchronicznych jedna za drugą (szeregowo) lub równolegle — w tym drugim przypadku będziemy mogli podjąć jakąś aktywność po zakończeniu wszystkich zleconych operacji. W takich łańcuchach obietnic błędy są propagowane, więc możemy na samym końcu łańcucha zdefiniować funkcję przechwytującą wszystkie możliwe błędy.

Wyobraźmy sobie kod wyświetlający powieść, przy czym poszczególne rozdziały ładowane są osobno po kolei, a najpierw pobieramy plik z URLami rozdziałów:

try {
  var story = getJSONSync('story.json');
  addHtmlToPage(story.heading);

  story.chapterUrls.forEach(function(chapterUrl) {
    var chapter = getJSONSync(chapterUrl);
    addHtmlToPage(chapter.html);
  });

  addTextToPage("All done");
}
catch (err) {
  addTextToPage("Argh, broken: " + err.message);
}

document.querySelector('.spinner').style.display = 'none';

Wszystko wygląda tu pięknie z dokładnością do tego, że synchroniczne operacje I/O blokują całą przeglądarkę. Implementacja tego z wykorzystaniem asynchronicznego I/O bardzo by nam ten kod zagmatwała.

Dzięki użyciu obietnic asynchroniczny kod może wyglądać następująco:

getJSON('story.json').then(function(story) {
  addHtmlToPage(story.heading);
  return Promise.all(
    story.chapterUrls.map(getJSON)
  );
}).then(function(chapters) {
  chapters.forEach(function(chapter) {
    addHtmlToPage(chapter.html);
  });
  addTextToPage("All done");
}).catch(function(err) {
  addTextToPage("Argh, broken: " + err.message);
}).then(function() {
  document.querySelector('.spinner').style.display = 'none';
});

Dodatkowym zyskiem widocznym na powyższym listingu (Promise.all()) jest równoczesne wykonywanie się asynchronicznych operacji wejścia/wyjścia pobierania rozdziałów. Gdy wszystkie zostaną załadowane (funkcja then()), możemy je wyświetlić. Błędy są wychwytywane za pomocą funkcji catch().

Przydatne artykuły:

Napisany w HTML5, JavaScript | Brak komentarzy »