Od czasu do czasu trafiam na taką bibliotekę, która nierozłącznie towarzyszy przy 80% wykonywanych przeze mnie projektów. Tak było z jQuery, 960 Grid System, PHP Mailer czy HTML Purifier.
Jakiś czas temu zostało wydane Boilerplate 2.0, biblioteka mająca usprawnić życie web developera pracującego z HTML5 & CSS3. Boilerplate 2.0 jest jedną z takich bibliotek.
Czym jest Boilerplate?
Jak już wstępnie napisałem, biblioteka ta pomaga przy rozwoju nowoczesnych aplikacji opierających się na HTML5 oraz CSS3. Pomoc ta opiera się na dostarczeniu „fundamentów” aplikacji (build system), dzięki któremu nie musimy powielać monotonnej pracy przy stawaniu nowych serwisów.
Oczywiście to tylko początek, bowiem Boilerplate pomaga w tworzeniu aplikacji zarówno po stronie serwera, jak i klienta. Ponadto twórcy nie zapomnieli pomóc przy odpowiedniej konfiguracji serwera, wsparciu dla urządzeń mobilnych czy nawet IE6.
Co robi Boilerplate?
Lista funkcjonalności jest naprawdę imponująca i nie sposób wszystkich tutaj opisać. Niemniej jednak dla zachęty opiszę kilka wybranych opcji, ciekawskich natomiast odsyłam do dokumentacji lub analizy kodu źródłowego. Zapewne każdy znajdzie rzeczy, o których wcześniej nie wiedział, a które warto znać :-)
- normalize.css
Styl resetujący ustawienia wszystkich popularnych przeglądarek (Chrome, Firefox 3+, Safari 4+, Opera 10+, IE 6+), tak by strona wyglądała wszędzie tak samo. Dodana jest także obsługa najnowszych elementów HTML5 oraz CSS3. Zobacz przykład. - Google Chrome Frame
Dla użytkowników IE6, IE7 oraz IE8 umożliwiono korzystanie z wynalazku od Google – Chrome Frame. Tym samym nie musimy martwić się mądrymi użytkownikami starszych wersji Internet Explorera (nie trzeba mieć praw administratora by zainstalować ten dodatek). - Respond
Biblioteka ta zapewnia wsparcie dla Media Queries w starszych przeglądarkach (w tym także Internet Explorer). - HTML5 Offline
Build script biblioteki umożliwia automatyczne tworzenie pliku cache manifest. Więcej o HTML5 Offline pisałem całkiem niedawno na blogu, do czego odsyłam. - Cross-domain AJAX requests
Dodano możliwość wykonywania requestów (XMLHttpRequest) poza naszą domenę. Więcej o HTML5’s Cross Origin Requests i niebezpieczeństwach z nich wynikających. - Webfont access
Załatano problem z pobieraniem fontów z zewnętrznych domen, za który odpowiada specjalny nagłówek HTTP: Access-Control-Allow-Origin. - Ustawienia serwera Apache, IIS, ngnix oraz lighttpd
Dodano zestaw usprawnień w konfiguracji powyższych serwerów, m.in. dodano typy MIME dla zasobów wykorzystywanych w sieci, włączono kompresję gzip, ustawiono nagłówek HTTP Expires, wywalono nagłówek HTTP ETag i wiele więcej. - Bezpieczeństwo PHP
Zwiększono bezpieczeństwo skryptów PHP przez odpowiednią konfigurację serwera: wyłączono register_globals, usunięto nagłówek HTTP X-Powered-By informujący o wersji PHP, ukryto wyświetlanie błędów PHP (zamiast tego błędy są zapisywane w logach serwera) i inne. - Ciasteczka z httpOnly
W konfiguracji serwera wymuszono stosowanie flagi httpOnly dla wszystkich cookies w PHP. Flaga httpOnly zwiększa bezpieczeństwo naszej aplikacji, o czym już pisałem.
Lista ta jest zdecydowanie dłuższa, lecz wszystko to jest opisane w dokumentacji, do której odsyłam :-)
Na koniec
Podsumowując, biblioteka ta sprawi, iż niewielkim nakładem pracy możemy budować uniwersalne, wydajne, skalowalne i dostępne na wszystkich przeglądarkach i urządzeniach aplikacje.
Naprawdę warto zainteresować się tym projektem :-)
Wylgąda na bardzo przydatne. Dzięki!
Szkoda, że nie ma wersji dla Pythona (Django) ;-)
@MStaniszczak: dzięki za komentarz! Co do Boilerplate – skupiono się tutaj głównie na front-endzie, więc i tak niewiele tam z konfiguracji PHP, trochę więcej z konfiguracji serwera :) poza tym widzę, że są też modyfikacje biblioteki pod inne technologie, np. Django: https://github.com/mike360/django-html5-boilerplate
Look:
http://html5boilerplate.com/docs/#integration-with-other-frameworks
Tak na prawdę, to niewiele w tym ciekawych rzeczy.
Czytając choćby tego bloga i komentarze można dowiedzieć się:
– o nagłówkach dla fontów,
– httpOnly w ciasteczkach,
Resztę z jednym czy dwoma wyjątkami można o kant pupy rozbić:
– konfiguracja serwera i nagłówki przez niego zwracane – rzadko kiedy mamy możliwość samodzielnego zarządzania, a nawet gdyby – niech tym zajmują się specjaliści od serwerów, po co brać sobie dodatkową odpowiedzialność na łeb,
– cross domain request w XHR łatwo obejść, ale czy warto?
– kompresja, etagi, expires … od kilku lat mam gotowe pliki z takimi definicjami,
Pozostaje:
– chrome frame – support nowości dla zabytków – jestem przeciwko,
– respond – kolejny emulator dla zabytków,
– normalize.css – gdyby nie definicje z HTML5 był by całkowicie zbędny,
– html5 offline – to może być przydatne, ale tylko na początku
Hmmm… z całego boilerplate skorzystam z normalize.css (którego i tak przerobić muszę) … i to chyba tyle.
Ależ sobie ponarzekałem :D
– Google Chrome Frame – genialna rzecz, której nawet chciałem poświęcić szybki post na blogu z prostego powodu – możemy ze starego badziewnego IE zrobić świetny Chrome; takie narzędzie ma zastosowanie w szkole, pracy czy innym miejscu z IE (w dodatku do instalacji wcale nie potrzeba praw administratora),
– nagłówki zwracane przez serwer to po części także nasz obowiązek – w końcu zarządzamy tam Expires, ETag, gzipem i kilkoma innymi, które jeśli nie po stronie serwera to po stronie PHP musimy załatwić,
– respond.js – zdecydowanie warto polecić, gdyż pozwala budować strony w popularnym obecnie stylu – Responsive Web Design, zaczynając od wersji na mobile, kończąc na deskoptach,
– dużo drobnych pierdół o których czasem można zapomnieć: robots.txt, humans.txt, favicons, apple-touch-icons, crossdomain.xml
Generalnie sporo z tych rzeczy mamy już w swoich projektach i zaczynając nowy, kopiuje się bazową wersję CMSa/fw, gdzie to wszystko już jest zaaplikowane (przynajmniej tak to wygląda u mnie). Mimo to w bibliotece Boilerplate jest sporo drobnych rzeczy, o których wcześniej nie wiedziałem.
Widzisz, dla mnie potrzeba instalowania czegokolwiek dodatkowego na urządzeniu klienta jest nie do przyjęcia. Więc GCF nie jest rozwiązaniem… równie dobrze, klient mógłby zainstalować sobie inną przeglądarkę.
Nagłówki odpowiedzi – tak. Nagłówki serwera – nie. Trzeba rozróżnić za co odpowiada autor a za co administrator.
Sprawdziłem sobie i jestem zaskoczony, że to wygląda aż tak żałośnie.
Udział urządzeń mobilnych w przeglądaniu internetu w naszym kraju to około 3% – 4% (wg geminus i komputer świat). Warto się silić na wersję mobilną?
Media queries są fajne raduje mnie fakt rozbudowania składni, ale na obecną chwilę nie widzę sensu ich stosowania (przynajmniej w produktach na rynek krajowy). Za rok, półtora – może będzie warto.
Jednakże – dużo zależy od klienta/specyfiki produktu.
RWD to nie tylko media queries…
Google Chrome Frame instalujesz na komputerze dla siebie, tam gdzie nie ma normalnej przeglądarki. Ale żeby móc przeglądać stronę z wykorzystaniem Chrome Frame musimy do kodu dodać odpowiedni nagłówek:
Bez tego mając nawet zainstalowany GCF dla IE nasza strona wciąż będzie korzystała z silnika IE, bo nie daliśmy odpowiedniego nagłówka.
Jeśli chodzi o internet mobilny to faktycznie, dość kiepsko jeszcze stoimy w Polsce, niemniej ta statystyka będzie powoli rosła :-) A więc na pewno już warto uczyć się o mobile development, ale żeby wspierać każdy projekt to trochę za wcześnie.
Ps. obecnie mam zlecenie na aplikację mobilną z wykorzystaniem jQuery Mobile, więc jak widać jest już pewne zainteresowanie telefonami/pda/smartfonami ;)
Tak jak piszesz – będzie powoli rosła.
Zanim zdobędzie liczącą się część rynku, respond.js może być zbędny.
Też miałem i też z jQuery mobile – miałem to poprawić i uratować sytuację. Pierwsze co zrobiłem to wywaliłem jQ. Od razu pomogło :)
Zależy o jakich projektach mówimy – jeśli web developer tworzy swoje portfolio to może dodać wsparcie dla mobili. To samo gdy wypuszczamy projekt w kilku językach, w tym angielski i przewidujemy sporą odwiedzalność (zwłaszcza, gdy budowana aplikacja będzie dla nas lub klient oferuje dodatkową kasę). Na pewno lepiej wspierać urządzenia mobilne niż IE6-8 ;)
Mi z jQuery mobile fajnie się pracuje, dużo rzeczy zrobiono za programistę i to lubię :D