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.

Każda większa strona internetowa posiada duży (lub bardzo duży) zbiór reguł CSS, czasem umieszczonych w kilku plikach. Do tego nierzadko znaleźć można dodatkowe reguły wklejone w znaczniku <style />, a także wstrzyknięte inline definicje przez atrybut `style’ znaczników HTML (styl wewnętrzny).

Nie jest niczym dziwnym, że do jednego elementu w takich ogromie kodu zostanie przypasowana więcej niż jedna reguła. Może się zdarzyć, że reguły będą definiować te same właściwości wyglądu elementu w różny sposób. Jak w takiej sytuacji dojść do tego jak powinien wyglądać dany element? Odpowiedzią jest specyficzność (ang. specificity) każdego z selektorów. Można się także spotkać z określeniem “precyzja selektorów”. W przypadku kilku deklaracji będących ze sobą w konflikcie (np. 3-krotnej definicji koloru tekstu) wybrana zostaje ta definicja tego selektora, który ma najwyższą specyficzność.Continue reading

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.Continue reading

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 onlineContinue reading

Choć sama inicjatywa spotkań front-endowców w postaci meet.js nie jest w Polsce nowa, to w Trójmieście takie spotkanie odbyło się po raz pierwszy.

Powiedzieć, że zainteresowanie było duże, to skłamać. Początkowo planowane w pubie Polufka, kameralne spotkanie, przerodziło się w jeden z większych eventów około programistycznych, jakie w ostatnim czasie odbywały się w naszym grodzie. Ostatecznie zdecydowano o przeniesieniu prezentacji do Gdańskiego Inkubatora Przedsiębiorczości.

Miałem niekrytą przyjemność przedstawienia tematu “Modularny JavaScript”. Był to mój debiut na tego typu spotkaniach i bardzo dziękuję za responsywność publiczności. Mam nadzieję, że to nie ostatnie słowo meet.js w tej części naszego kraju.Continue reading

Już kilkukrotnie poruszałem temat tworzenia modułów (czasem nawet “klas”) w JavaScripcie. Tym razem coś nowego – asynchroniczne definiowanie modułów. W skrócie AMD (ang. asynchronous module definition). Coraz więcej znanych frameworków i bibliotek wykorzystuje właśnie to podejście (choćby Dojo i jQuery).

W tym wpisie spróbuję pokazać dlaczego powstało takie rozwiązanie oraz przedstawić kilka prostych zastosowań.

Na początek warto:

W Dojo Toolkit jest cały zestaw widgetów pozwalających budować bardzo nowoczesne aplikacje webowe. W ty wpisie zajmę się dwoma (spokrewnionymi) kontrolkami:

  • dijit.form.FilteringSelect
  • dijit.form.ComboBox

autouzupełnianie dijit.form.FilteringSelect

Co one robią?

Co z nimi nie tak, skoro mam zamiar im poświęcić cały wpis? Kolejno – są to komponenty zastępujące zwykły HTML-owy znacznik <select />. Są bardzo przyjazne dla oka, pozwalają nie tylko na wybór pozycji z listy dostępnych, ale także na wpisywanie własnych (mechanizm podpowiedzi), dodatkowo bardzo dobrze współdziałają z data store. Słowem – używać, nie umierać ;).

Jednak posiadają jedną dużą wadę funkcjonalną – aby rozwinąć listę trzeba kliknąć dokładnie,tylko i wyłącznie w strzałeczkę sugerującą rozwijanie.

demo online

Continue reading

REST (ang. Representational State Transfer) jest wzorcem narzucającym dobre praktyki tworzenia architektury aplikacji rozproszonych. RESTful Webservices (inaczej RESTful web API) jest usługą sieciową zaimplementowaną na bazie protokołu HTTP i głównych zasad wzorca REST. W tym wpisie postaram się pokazać (bardzo) podstawowe założenia.

Ważnym założeniem REST jest istnienie zasobów (ang. resources) jako źródeł danych a także żądana akcja. Ale może po kolei…

Zapomniane metody HTTP w Ajaksie

Komunikując się z serwerem najczęściej korzysta się z dwóch metod:

  • GET
  • POST

Co więcej, często wykorzystuje się je nieprzemyślany sposób (aby nie powiedzieć losowy). Nigdy nie wiadomo, czy żądanie doda, usunie, nadpisze czy tylko pobierze dane z serwera. A szkoda, bo przecież o ile ładniej jest patrzeć w konsole Firebuga i po samym rodzaju metody odczytywać jakiego rodzaju operacja została wywołana.

Tytułowe “zapomniane” metody to (jest ich więcej, ale nie są potrzebne dla tego wpisu):