Blog webdeveloperski Patryk yarpo Jar

Tech 3 Camp: Kompresja stron internetowych

Autor wiadomości Czerwiec 19, 2013

Wczoraj miałem okazję przedstawiać temat kompresji stron internetowych na branżowym spotkaniu Tech 3 Camp.

Cieszę się z dobrego odbioru publiczności oraz z kilku bardzo ciekawych rozmów po prezentacji. Tak jak obiecałem zamieszczam swoją prezentację.

Drugi meet.js w Gdańsku

Autor wiadomości Maj 28, 2013

Kolejne spotkanie z cyklu meet.js miało wczoraj miejsce "tradycyjnie" w Inkubatorze Starter w Gdańsku. Po raz kolejny trójmiejscy front-endowcy pokazali, że są chętni dzielenia sie wiedzą dotyczącą JavaScript. Na widowni zasiadło znowu ponad 100 osób (dokładnych statystyk nie znam, ale chyba było odrobinę mniej osób niż zeszłym razem).

Jeśli chodzi o prezentacje to myślę, że także można być usatysfakcjonowanym - Node.js, MongoDB, łańcuchy prototypów oraz asm.js. Z pewnością dało to niezły obraz aktualnych trendów w JS i technologiach pobocznych.

Moim zdaniem najciekawsze było wystąpienie Błażeja Krysiaka - "MongoDB - NoSQL'owa baza danych w JS". Prezentacja niezwykle przejrzysta, techniczna, ale z doskonale zachowaną proporcją między kodem, a poziomem abstracji pozwalającym wynieść wiele osobom, które pierwszy raz słyszały o nierelacyjnych bazach danych. Brawo!

Ponoć przez wakacje czeka nas przerwa w spotkaniach meet.js. Mam nadzieję, że po letniej przerwie wracamy z nowymi, ciekawymi prelekcjami.

Książka: “HTML5. Zaawansowane programowanie”

Autor wiadomości Maj 26, 2013

HTML5. Zaawansowane programowanieHTML5. Zaawansowane programowanie

HTML5 zawitał na dobre pod strzechy wraz z najnowszymi wersjami popularnych przeglądarek. Oczywiście, nie wszystko jest już wspierane (na to WHATWG daje światu czas do 2022 r.), jednak nawet tylko część aktualnie zaimplementowana w najważniejszych przeglądarkach na rynku daje niesamowite możliwości.

Chciałbyś rysować na stronie (wektorowo czy też bitmapy?), chciałbyś mieć lepszą komunikację między zakładkami? Między stronami? Między sesjami (bez użycia ciasteczek)? Chcesz używać WebSocketów? A może policzyć coś w osobnym wątku bez blokowania interfejsu?

Tak, nadal mówię o programowaniu za pomocą natywnego JavaScript. Bez wtyczek. Bez kompilatorów. Bez problemów. Z użyciem nowych API dostarczanych przez specyfikacje HTML5.

Starczy reklamy technologii. O tym, że HTML5 będzie przyszłością sieci już chyba nie trzeba nikogo przekonywać. Natomiast na pewno warto zareklamować książkę "HTML5. Zaawansowane programowanie" autorstwa Petera Lubbersa, Briana Albersa i Franka Salima. Nie jest to książka, z której początkujący nie-programista nauczy się programować. Nie ta pozycja, nie taki cel postawili sobie autorzy. Natomiast każdy webdeveloper dobrze radzący sobie z programowaniem dostanie bardzo czytelny i przyjemny w lekturze przegląd nowych możliwości JavaScriptu. Każdy rozdział dotyczy innego API (m. in. canvas, websocket, web workers itp.). Nie jest to jedynie lista dostępnych pól nowych obiektów, ale konkretne "żywe" przykłady. Bardzo podobały mi się także ramki z dodatkowymi uwagami autorów - przestrogi przed możliwymi pułapkami, rady i pomocne uwagi.

Zrzuty ekranu za pomocą JavaScript (HTML5 – canvas)

Autor wiadomości Maj 14, 2013

Wraz z nadejściem HTML5 i jego wielu rewolucyjnych API nastała era rzeczy, które dawniej wydawały się trudne / bardzo trudne / niewykonalne (niepotrzebne skreślić).

Jedną z takich funkcji jest możliwość rysowania za pomocą JavaScriptu na płótnie (ang canvas). Służy do tego znacznik <canvas /> oraz odpowiednie API przypominające podobne rozwiązania z innych języków programowania.

Rysowanie ekranu na płótnie

Nie, nie miałem aż tak wiele czasu, aby napisać to samemu. Miałem jednak trochę, aby wygoogle'ować ciekawą bibliotekę. Padło na bardzo przyjemną w użyciu html2canvas. Kod tej biblioteki przed spakowaniem ma prawie 3k linii, co trochę zniechęca do pisania tego własnoręcznie.

Do zastosowania biblioteki zachęca także przyjazna licencja (MIT) oraz kilka bardzo przydatnych funkcji. Zobaczmy jednak prosty przykład zastosowania:

html2canvas(document.body, {
    onrendered: function(canvas) {
        document.body.appendChild(canvas);
    }
});

demo online