keemor.com

Galeria jQuery Picbox i JSON z Picasy

keemor — Tue, 31 Aug 2010 14:59:13 +0000

Prowadzę małą stronę mojemu przyjacielowi i co jakiś czas uaktualniam galerie zdjęć. Muszę wtedy wrzucić zdjęcia na serwer i poprawić JS. To strasznie nudne, niewygodne i nie mam na to czasu. Kolega używa Google Picasa Web Albums z którego pobierzemy źródło zdjęć w formacie JSON i wyświetlimy przy pomocy galerii jQuery Picbox. Zobacz DEMO »» Przykładowa galeria w [...]

Twitter API: Strumień wpisów po słowie kluczowym w PHP, JSON i Prototype

keemor — Tue, 01 Dec 2009 12:36:21 +0000

W serwisie Twitter.com pojawia się bardzo dużo wpisów na wiele różnych tematów. Pokażę dzisiaj jak przy pomocy API Twittera, PHP, JSON’a i PrototypeJS zrobić prosty gadżet, który będzie co jakiś czas odpytywać się o nowe wpisy na dany temat i automatycznie je wyświetlać. ZOBACZ DEMO » Na początek tworzymy plik search.php, w którym użyjemy biblioteki JSON-PHP. <?php header('Content-type: application/json'); require_once [...]

Grafika, obrazki i zdjęcia ujarzmione

keemor — Wed, 18 Nov 2009 15:41:18 +0000

Tag img jest jednym z najpotrzebniejszych znaczników na stronach. Jednak gdy przychodzi do dynamicznego ładowania czy zmiany atrybutów często pojawiają się niespodziewane problemy, które chciałbym przedstawić razem z rozwiązaniami. Przykładowy obrazek: <img id="pic" src="http://cdn.contails.websgo.net/imgs/logo_beta6_3_pl.png" /> var pic = document.getElementById('pic'); Pobranie wysokości i szerokości obrazka osadzonego w DOM. var w = pic.width; var h = pic.height; Ciekawsza rzecz zaczyna się wtedy, [...]

Konkurencja najnowszych przeglądarek: Firefox 3.5, IE 8, Chrome 3, Opera 10 i Safari 4

keemor — Tue, 07 Jul 2009 15:24:49 +0000

Pierwsza połowa tego roku przyniosła najnowsze wersje różnych przeglądarek. W końcu zaczyna być widać, że konkurencja między Firefox 3.5, IE8 i chociażby Chrome 3 przynosi efekty w postaci długo oczekiwanych zmian dla użytkowników i twórców stron. Poza tym, że wyniki testu Acid3 są coraz lepsze, to pojawiło się parę nowych funkcjonalności, które zostały zaimplementowane przynajmniej w [...]

Szybkie iteracje czyli przyspieszanie pętli

keemor — Wed, 24 Jun 2009 15:30:06 +0000

We wpisie Wydajne tworzenie elementów DOM C.D. pisałem o szybkim sposobie tworzenia elementów DOM w pętli. Zainspirowany częścią prezentacji Nicholasa Zakasa Speed Up Your JavaScript dotyczącą pętli przedstawie sposoby wydajnego iterowania po elementach. Specyfikacja ecma-262, 3. edycja z grudnia 1999 roku wprowadza cztery rodzaje pętli: for, do-while, while oraz for-in. Trzy pierwsze pętle służą do iteracji po [...]

Ładowanie na żądanie i Google Maps API

keemor — Wed, 10 Jun 2009 11:58:36 +0000

Zdarza się, że funkcjonalność, którą udostępniam na stronie jest rozbudowanym modułem JS, ale jednocześnie może nie być w ogóle użyta po załadowaniu strony. Wtedy warto się zastanowić czy ładować kod od razu z całą stroną (co oczywiście wpływa na prędkość ładowania) czy dociągać go dopiero po akcji użytkownika. Przykładem realizacji wzorca projektowego ładowanie na żądanie, [...]

Tu Haczyk IStnieje – this cz. II

keemor — Mon, 01 Jun 2009 09:40:56 +0000

W pierwszej części Tu Haczyk IStnieje omówiłem sposób wykorzystania metody bind, tak aby panować nad zawartością this bez względu na kontekst wywołania funkcji. W drugiej części przyjrzymy się wykorzystaniu this do obsługi zdarzeń oraz metodzie bindAsEventListener, która jest szczególnym przypadkiem bind. Rozpatrzymy następującą listę trzech elementów oraz kawałek CSSa: <style> li {padding: 1em; width: 5em; background-color: darkblue; } span {color: [...]

Tu Haczyk IStnieje – ‘this’ cz. I

keemor — Mon, 25 May 2009 12:22:24 +0000

W językach programowania słowo kluczowe this wskazuje przeważnie w metodzie na obiekt, w którym jest metoda. W związku z dynamicznym charakterem JS, fraza this przybiera wartości w zależności od kontekstu w jakim metoda jest wykonana i może być zarówno bardzo pomocne jak i przyprawić o nielichy ból głowy. W pierwszej części “Tu Haczyk IStnieje” omówie jak zapanować [...]

Wydajne tworzenie elementów DOM C.D.

keemor — Fri, 15 May 2009 16:00:59 +0000

W poprzednim wpisie przedstawiłem trzy sposoby dynamicznego tworzenia elementów DOM przy użyciu biblioteki Prototype. Przeczytaj także wpis Szybkie iteracje czyli przyspieszanie pętli. Po komentarzu Medikoo postanowiłem jeszcze sprawdzić jaki czas wykonania tego samego zadania można osiągnąć używając czystego Javascriptu. 4. Sposób Zamiast metody each użyłem funkcji for i czas zmalal z okolo 0.5 sekundy do 0.25 sekundy. W tym [...]

Wydajne tworzenie elementów Document Object Model

keemor — Wed, 13 May 2009 15:55:41 +0000

Dynamiczne elementy DOM, które tworzą stronę i zmieniają się przy zastosowaniu AJAX’a można tworzyć na wiele sposób. Poniżej przedstawie trzy najczęściej przeze mnie używane i porównam je ze względu na wydajność. Testy zostały przeprowadzone na Firefox 3.0.3 na Ubuntu przy użyciu opcji Czas wykonania (ang. Profiler) z pluginu Firebug. Przeczytaj także wpis Szybkie iteracje czyli przyspieszanie [...]