Responsive web design w Chrome
12 kwi 2012
Chrome Canary zostało zaopatrzone w dwa nowe narzędzia:
- możliwość zdefiniowania rozmiaru ekranu i skalowania czcionek – umożliwia symulowanie małych ekranów
- emulowanie touch events przy użyciu myszki
Opcje te są dostępne w ustawieniach konsoli (konsole otwieramy Ctrl+I, następnie na dole w prawym rogu mamy dostęp do opcji).
Przydatną opcją w takim wypadku jest dokowanie konsoli po prawej stronie.
I jeszcze jedna uwaga: Chrome Canary instaluje się w systemie niezależnie od Chrome, dzięki czemu nie musimy rezygnować z wersji stabilnej.
Jak zablokować Pinterest na naszej stronie
11 kwi 2012
Pinterest to serwis na który przypinamy piny z ciekawymi zdjęciami z sieci.
Dzięki „skryptozakładce” możemy dodawać piny (zdjęcia) z aktualnie oglądanej strony.
Co jeśli jesteśmy autorem strony i nie życzymy sobie udostępniania zdjęć na Pinterest?
Wystarczy w sekcji
<meta name="pinterest" content="nopin">
jQuery – sprawdzamy czy plugin jest dostępny
10 mar 2012
Kiedyś pisałem jak sprawdzić wersję jQuery.
Dziś podobne zagadnienie, ale tym razem sprawdzamy czy plugin X jest dostępny (załadowany). Ma ono na celu uchronienie nas przed wywołaniem kodu na niezdefiniowanym rozszerzeniu, co skutkuje błędem JavaScript.
Aby sprawdzić czy załadowano np. Tipsy należy wywołać:
if (jQuery().tipsy) {
// nasz kod
}
Lub w wersji skróconej:
if ($().tipsy) {
// nasz kod
}
Dzieje się tak dlatego, że pluginy są ładowane jako namespace w obrębie jQuery.
Adobe Shadow
08 mar 2012
W Adobe labs znalazł się nowy, bardzo ciekawy, projekt – Adobe Shadow.
Co to właściwie jest?
Adobe Shadow to narzędzie do podglądu i inspekcji, które umożliwia front-end developerom pracować szybciej i efektywniej przez usprawnienie procesu podglądu zmian na stronie www na wielu urządzeniach jednocześnie. Ułatwia dostosowanie stron internetowych do urządzeń mobilnych.
Shadow działa zarówno w sieci lokalnej (ethernet), Internecie, jak i z lokalnymi plikami. Umożliwia podgląd aktualnie otwartej zakładki w Chrome na urządzaniach mobilnych, a także zdalnego debugowania kodu strony. Z poziomu systemu operacyjnego mamy dostęp do konsoli, podobnej do tej w Chrome, ale działającej na urządzeniu mobilnym.
Niesamowicie przydatne!
Więcej dowiecie się z materiału wideo.
PhoneGap (Android) sprawdzamy połączenie
07 mar 2012
PhoneGap w swoim API zawiera komponent Connection. Jak piszą w dokumentacji:
The connection object gives access to the device’s cellular and wifi connection information.
Czyli powinniśmy dzięki niemu wiedzieć jaki typ połączenia online jest aktualnie dostępny w urządzeniu. Do dyspozycji jest kilka predefiniowanych stałych:
- Connection.UNKNOWN
- Connection.ETHERNET
- Connection.WIFI
- Connection.CELL_2G
- Connection.CELL_3G
- Connection.CELL_4G
- Connection.NONE
Wartość stałej jest przypisana do navigator.network.connection.type.
Nie wiem czy to błąd w samym API czy w telefonie HTC, ale czasami navigator.network.connection.type zwraca null.
Zatem, aby sprawdzić czy użytkownik jest online warto wykonać dodatkowe sprawdzenie na obecność null:
function checkConnection() {
var networkState = navigator.network.connection.type;
if (networkState == Connection.UNKNOWN || networkState == Connection.NONE || networkState == null) {
return false;
}
return true;
}
PHP 5.4 – co nowego?
06 mar 2012
Kilka dni temu miała premierę nowa wersja PHP – 5.4.
Doszło kilka ciekawych rozwiązań (traits zwane cechami, skrócony zapis tablic czy wbudowany webserwer developerski).
Najważniejsze jednak, że PHP 5.4 mocno zoptymalizowano pod kątem użycia pamięci i czasu wykonywania skryptów. W różnych benchmarkach różne rezultaty osiągano – w śród nich przyśpieszenie działania skryptu o 50-60%!
Poniżej link do prezentacji autorstwa paulgao, która podsumowuje zmiany.
Jak zaznaczono migracja z PHP 5.3 jest (powinna być) bezbolesna – nie wprowadzono krytycznych zmian do języka, jak było przy przejściu z 5.x na 5.3
Z ciekawostek:
- php.ini domyślnie ustawia kodowanie na UTF-8 (wcześniej ISO-8859-1)
- debug_backtrace() i debug_print_backtrace() umożliwiają limitowanie informacjo (zagłębień)
- wprowadzono przydatną funkcję http_response_code() ułatwiającą pracę z nagłówkami odpowiedzi
- dodano Array dereferencing
Jakiś czas temu pisałem o wyłączeniu ograniczenia „same-origin policy” w Chrome.
Okazuje się, że zdjęcie ograniczenia blokuje przydatne rozszerzenie dla użytkowników Google Talk – Chat for Google.
Rozszerzenie działa bardzo elegancko. Dostęp do kontaktów mamy pod przyciskiem na pasku rozszerzeń a sam chat jest podobny to tego w oknie GMail.
Teraz będę mógł pożegnać się z Psi, najlepszym klientem XMPP jaki używałem. Niestety od kilku lat nie rozwijanym 
LESS: odświeżanie plików styli
15 lut 2012
LESS to dynamiczne arkusze styli css. LESS rozszerza możliwości CSS o zmienne, operacje i funkcje. Może działać po stronie klienta lub serwera. My zajmiemy się stroną klienta.
Aby użyć LESS po stronie klienta musimy:
- podlinkować arkusz styli:
<link rel="stylesheet/less" type="text/css" href="styles.less">
- dodać plik less.js do naszego dokumentu:
<script src="less.js" type="text/javascript"></script>
UWAGA: ważna jest kolejność – najpierw style, później JavaScript.
Może się zdarzyć, jeśli mamy na przykład porządek w kodzie, że nasz plik styli będzie bootstrapem. Czyli de facto będzie ładował kolejne pliki odpowiedzialne np. za wygląd tabel, przyciski, formularze, itd.
Jego kod może mieć postać:
@import "table.lsss"; @import "buttons.lsss"; @import "forms.lsss";
I tu pojawia się mały problem w momencie, gdy zmienimy kod jednego z ładowanych arkuszy styli. Biblioteka less.js może mieć problem z odświeżeniem kodu (ponownym załadowaniem pliku).
W takim wypadku możemy dodać do URL #!watch i odświeżyć stronę lub w konsoli przeglądarki wywołać komendę less.watch()
I na koniec kilka ciekawych linków związanych z LESS:
- Preboot.less – gotowy zestaw zmiennych i mixins, który przyspiesza prace developerskie
- SimpLESS – multi-platformowy kompilator styli (.less => .css)
PhoneGap dla Android i udostępnianie treści
10 lut 2012
Większość aplikacji na systemy Android, oczywiście jeśli to możliwe, daje możliwość dzielenia się treściami:
Jak zatem z poziomu aplikacji PhoneGap, bądź co bądź specjalnej wersji strony www wykorzystać tą funkcjonalność?
Istnieje plugin do tego – Share. Niestety podany przykład użycia nie działa. Z pomocą przychodzi StackOverlow, gdzie znajdujemy rozwiązanie w następującej postaci:
var share = new Share();
share.show({
subject: 'I like turtles',
text: 'http://www.mndaily.com'},
function() {}, // Success function
function() {alert('Share failed')} // Failure function
);
Outline, czyli obwódka wokół linka, nie wygląda najlepiej w aplikacji pisanej z użyciem PhoneGap.
Jak temu zaradzić?
Najprościej dodać odpowiedni wpis do CSS, np. dla znacznika body (wtedy każdy link będzie pozbawiony outline):
-webkit-tap-highlight-color: <color>;
Co czyni owy wpis?
Jak podaje http://css-infos.net (powołując się na Safari dla iPhone, ale działa to doskonale w Androidzie):
Nadpisuje kolor wyróżnienia elementu w momencie, gdy użytkownik „tapnie” link lub element obsługujący JavaScript’owe zdarzenie click. Ta właściwość przyjmuje oprócz koloru także informację o przeźroczystości (alpha). Aby pozbyć się tego podświetlenia należy ustawić alpha na 0 (niewidoczny).
PHP, Gearman i MySQL…
25 sty 2012
W projekcie, w którym aktualnie biorę udział, mamy miejsca gdzie są wykonywane skomplikowane i czasochłonne operacje. Żeby nie blokować UI użytkownikowi, część z prac można odpalić w tle, w tym właśnie celu korzystamy (od niedawna) z Gearmana (do którego jest dostępne rozszerzenie PHP PECL).
Problem pojawił się z połączeniem do MySQL. Skrypt pracownika (worker) działający w tle rozłączał się z bazą. Co ciekawe – wymuszenie ponownego połączenia działało bez zarzutów. Problem za to był z wyborem bazy danych (mysql_select_db).
Po dwóch i pół dnia, walki i kombinowania „co by tu jeszcze dałoby się zrobić”, podrzucono mi (project manager) pomysł na wypróbowania GearmanManagera.
Okazało się to strzałem w dziesiątkę, gdyż narzędzie autorstwa Briana Moona, ma jedną rewelacyjną możliwość – ustawienie czasu życia skryptu pracownika (workera) – max_worker_lifetime. Po przekroczeniu czasu, skrypt jest ubijany, a w jego miejsce tworzona jest nowa instancja pracownika.
Do innych ciekawych opcji GearmanManagera można zaliczyć m.in. auto_update (skrypt pracownika po zmianie kodu będzie automatycznie ubity i na nowo odpalony) – bardzo wygodne rozwiązanie w czasie developingu.
Dodatkowo odpalając demona możemy ustawić dowolny tryb logowania zdarzeń – od informacji tylko o starcie i końcu pracy, po pełny tryb logowania, gdzie wszystkie zdarzenia zachodzące w klasach pracowników są wyświetlane.
Jeśli ktoś pracuje z PHP i Gearmanem – polecam sprawdzić GearmanManagera.
Można wspierać tylko Chrome i Safari? Można!
24 sty 2012
Taka oto informacja wita nas, gdy chcemy użyć TweetDecka w Firefox.
Osobiście używam rozszerzenia do Chrome, chciałem sprawdzić jedynie wersję webową tej usługi…
Zamykają Picnik!
21 sty 2012
Picnic, edytor zdjęć który opisałem kilka lat temu, zostanie zamknięty z dniem 19 kwietnia 2012. Tak głosi oficjalny komunikat. Przypomnę tylko, że Picnik został kupiony przez Google 1. marca 2010.
Aktualnie aplikacja do edycji zdjęć, która jest minimalnie zmodyfikowaną wersją Picnika, wykorzystywana jest między innymi w Picassie i Google+.
Najważniejsze informacje dotyczące zamknięcia serwisu:
- jeśli miałeś płatne konto (24.95 USD/rok) – zostanie ci zwrócona cała(!) roczna opłata w ciągu tygodnia od dziś (ogłoszenia zamknięcia serwisu)
- do końca swoich dni, Picnik, będzie całkowicie darmowy – wszystkie premium features do 19 kwietnia są dostępne za darmo!
- została uruchomiona usługa/aplikacja Picnik Takeout, dzięki której możemy zgrać swoje zdjęcia na dysk (w formacie zip), możemy także wyeksportować zdjęcia do Google+
Łamanie tekstu w atrybutach title i alt
20 sty 2012
Jak złamać tekst w atrybutach title="..." i alt="..."? Nie działa <br> ani znak nowej linii: \n …
Extensible Markup Language (XML) 1.1 w pierwszym punkcie podaje:
All line breaks must have been normalized on input to #xA as described in 2.11 End-of-Line Handling, so the rest of this algorithm operates on text normalized in this way.
Zatem rozwiązaniem zagadki (i zwycięzcą dzisiejszego plebiscytu 
jest 

Działa poprawnie z: Chrome, Safari, Opera i IE. Co zaskakujące, Firefox nic sobie nie robi z 
!
I na koniec przykład działania – najedź myszką na logo bloga
Kolejne małe odświeżenie na blogu…
15 sty 2012
Nowy rok zaczynam w stylu minimalistycznym. Najpierw portfolio dostało zaślepkę (nowa wersja w przygotowaniu).
W międzyczasie blog zyskał bardziej czytelny motyw autorstwa Rodrigo Galindez‘a.
Planuję też bardziej regularne postowanie – ot jako freelancer mam styczność z wieloma nowymi-ciekawymi tematami
Enjoy!
(zdjęcie autorstwa ChicagoSage)
