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 »

(więcej…)

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, gdy chcemy załadować zdjęcie dynamicznie i pobrać jego rozmiar.

(więcej…)

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 kilku z nich. Omówię funkcjonalności, które wpływają na prędkość ładowania stron oraz pozwalają na lepsze wykorzystanie JavaScriptu.

Proces w zakładce

Przeglądarki zaczęły rozdzielać poszczególne zakładki na osobne procesy. Skutkuje to szybszym przeglądaniem, ponieważ strony są przetwarzane równolegle w tym samym czasie. Dodatkowo, błąd na jednej zakładce nie powoduje zamknięcia całej przeglądarki, ale tylko jednego procesu.
Programiści IE 8 też dali radę to osiągnąć i tworzą dobrze widoczny proces iexplorer.exe dla każdej zakładki.

(więcej…)

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 listach, których klucze są kolejnymi liczbami całkowitymi zaczynając od 0.
For-in natomiast jest stworzony do przebiegania po tablicach asocjacyjnych, których klucze są łańcuchami znakowymi. Konstrukcja:

for (var key in arr) {
    arr[key];
}

w zmiennej key zwraca klucz i nie będę jej omawiać ze względu na niską wydajność.

Co jest ważne?

Dwa najważniejsze czynniki wpływające na prędkość pętli do ilość operacji w każdym przebiegu oraz liczba iteracji.
(więcej…)