marcoos.techblog

Słowo kluczowe	Odpowiednik cubic-bezier
ease	cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear	cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in	cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out	cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out	cubic-bezier(0.42, 0, 0.58, 1.0)

W ramach serii tłumaczeń artykułów z bloga Mozilla Hacks, przedstawiam dzisiaj tłumaczenie artykułu Geolocation in Firefox 3.5, którego autorem jest Doug Turner, jeden z twórców obsługi geolokalizacji w Firefoksie 3.5. Oryginalny artykuł i jego tłumaczenie dostępne są na warunkach licencji Creative Commons Attribution 3.0 USA.

Geolokalizacja w Firefoksie 3.5

Zawsze jesteśmy w jakimś miejscu. Piszę te słowa w kawiarni w Toronto w Kanadzie. Kiedy wpiszę „google” w pasku adresu, przechodzę na stronę www.google.ca, kanadyjską wersję Google’a,, wykrywanie to działa w oparciu o mój adres IP. Zwykle kiedy chcę znaleźć najbliższe kino, po prostu wpisuję tam mój kod pocztowy. Ta informacja jest często przechowywana w witrynie, dlatego łatwiej znaleźć kino następnym razem. W takich sytuacjach jednak wygodniej jest, kiedy aplikacja webowa może automatycznie określić moje położenie. Tak naprawdę nie mam pojęcia, jaki jest kod pocztowy dla Toronto. Potrafię go znaleźć, ale to za dużo zachodu.

Firefox 3.5 zawiera proste API javascriptowe pozwalające na dodanie obsługi geolokalizacji do aplikacji webowej. Pozwala to użytkownikom – opcjonalnie – udostępnić witrynom dane o położeniu bez wprowadzania kodu pocztowego. Poniżej pokrótce przedstawiam, jak wykorzystać geolokalizację w Firefoksie, jak ona działa i jakie środki ostrożności należy mieć na uwadze podczas korzystania z geolokalizacji.

Podstawy

Pobranie danych o położeniu użytkownika jest bardzo proste:

function showPosition(position) {
    alert(position.coords.latitude + “ “ +
    position.coords.longitude);
}
 
navigator.geolocation.getCurrentPosition(showPosition);

Wywołanie metody getCurrentPosition zwraca aktualne położenie geograficzne użytkownika, które potem wyświetlamy w oknie powiadomienia. Położenie jest udostępniane w postaci współrzędnych geograficznych – długości i szerokości geograficznej (pola coords.latitude i coords.longitude – przyp. tłum.). To właśnie takie proste.

Kiedy witryna prosi o udostępnienie informacji o położeniu, użytkownikowi wyświetli się następujący pasek powiadomienia:

Dostępne opcje pozwalają udostępnić położenie lub nie i zapamiętać tę decyzję.

Obsługa błędów

Istotne jest obsłużenie w kodzie dwóch przypadków błędów:

Po pierwsze, użytkownik może odmówić udostępniania położenia lub zignorować tę prośbę. API pozwala na określenie opcjonalnej procedury obsługi błędu (errorCallback w przykładzie poniżej – przyp. tłum.). Jeśli użytkownik odmówi udzielenia zgody, procedura to zostanie wywołana z odpowiednim kodem błędu. Jeśli użytkownik nie odpowie, procedura nie zostanie wywołana. Aby obsłużyć i ten przypadek, należy dodać parametr timeout do wywołania metody getCurrentPosition, określający czas, po jakim upłynie czas oczekiwania na odpowiedź użytkownika.

navigator.geolocation.getCurrentPosition(successCallback,
                                         errorCallback,
                                         {timeout:30000});

Ten kod sprawi, że funkcja errorCallback zostanie wywołana zarówno, jeśli użytkownik odmówi zgody, jak też po 30 sekundach od wyświetlenia monitu w przypadku, gdy użytkownik na niego nie odpowie.

Po drugie, dokładność określenia położenia użytkownika może być różna. Przyczyn tego jest kilka:

Różne metody określenia położenia mają różne stopnie dokładności
Użytkownik może nie zechcieć udostępnić witrynie dokładnego położenia.
Wiele urządzeń GPS ma ograniczoną dokładność w zależności od widoczności nieba. Jeśli widoczność się pogarsza, pogarsza się dokładność.
Wielu urządzeniom GPS zajmuje kilka minut przejście od zgrubnie określonego położenia do dokładnego, nawet przy dobrej widoczności nieba.

(Informacje o dokładności – w metrach – wyznaczonego położenia zawiera pole accuracy obiektu coords – przyp. tłum.)

Przypadki takie będą się zdarzać, dlatego ważne jest wsparcie dla zmian w dokładności.

Aby monitorować zmieniające się położenie, należy zarejestrować procedurę przy użyciu metody watchPosition:

navigator.geolocation.watchPosition(showPosition);

Funkcja showPosition zostanie wywołana przy każdej zmianie położenia.

Można także obserwować zmiany położenia odpytując getCurrentPosition co jakiś czas. Jednakże dla zaoszczędzenia energii i lepszej wydajności zaleca się korzystanie z watchPosition. API typu callback zwykle oszczędzają energię i wywoływane są tylko wtedy, gdy są potrzebne. Dzięki temu przeglądarka jest bardziej responsywna, co jest szczególnie istotne na urządzeniach przenośnych.

Więcej informacji znaleźć można w roboczej specyfikacji API, zawierającej inne przydatne przykłady.

Od kuchni

Istnieje kilka sposobów na określenie położenia. Najpopularniejsze opierają się na informacjach o sieciach WiFi w okolicy, o adresie IP i urządzeniach GPS podłączonych do komputera. W Firefoksie 3.5 do wyznaczenia położenia wykorzystujemy dane o lokalnych sieciach WiFi i adres IP.

Kilka firm objeżdża miasta samochodami z zamontowanymi antenami WiFi, zapisując adresy punktów dostępowych i ich siłę sygnału w danym miejscu. Dane te umieszczane są w wielkiej bazie danych. Następnie, przy pomocy odpowiednich algorytmów można znaleźć odpowiedź na pytanie: „Jeśli widzę takie i takie punkty dostępowe WiFi, to gdzie jestem?”. To jest główny sposób odnajdywania położenia wykorzystywany przez Firefoksa 3.5.

Nie wszyscy jednakże mają karty WiFi, a ponadto nie każde miejsce na świecie zostało przeskanowane pod kątem punktów dostępowych WiFi. W takiej sytuacji Firefox spróbuje użyć adresu IP, korzystając z bazy danych, która mapuje adresy IP do przybliżonego położenia geograficznego. Tak określone położenie jest niestety znacznie mniej dokładne niż to określone przy użyciu WiFi. Na przykład, tutaj w Toronto położenie określone na bazie WiFi ma dokładność ok. 150 metrów. To samo miejsce wyznaczone na podstawie adresu IP ma dokładność około 25 km.

Prywatność

Ochrona prywatności użytkownika jest bardzo ważna dla Mozilli – to część naszej misji. W zakresie danych zbieranych online, informacja o położeniu jest szczególnie delikatna. Unia Europejska uznaje dane o położeniu za dane osobowe (PII, personally identifiable information), które muszą być odpowiednio traktowane (zgodnie z dyrektywą 95/46/EC). Wierzymy, że użytkownicy powinni mieć ścisłą kontrolę nad danymi udostępnianymi witrynom. Dlatego też Firefox pyta przed udostępnieniem witrynie informacji o położeniu, pozwala też użytkownikowi na usunięcie witryn z listy tych, którym udostępniane jest położenie, i udostępnia ustawienia udostępniania w oknie informacji o stronie

Firefox robi, co tylko może, dla ochrony prywatności. Ponadto, grupa robocza geolokalizacji W3C proponuje następujące zasady ochrony prywatności użytkownika dla twórców i operatorów witryn:

Odbiorcy danych o położeniu muszą żądać danych o położeniu tylko wtedy, gdy jest to niezbędne.
Odbiorcy muszą używać danych o położeniu tylko do celu, dla którego zostały one im przekazane.
Odbiorcy muszą pozbyć się informacji o położeniu natychmiast po ukończeniu tego zadania, chyba że użytkownik wprost wyraził zgodę na ich przechowywanie.
Odbiorcy muszą również podjąć odpowiednie środki ochrony tych informacji przed niepowołanym dostępem.
Jeśli informacje o położeniu są przechowywane, użytkownicy powinni mieć możliwość ich aktualizacji i usunięcia.
Odbiorca informacji o położeniu nie może retransmitować tych danych bez zgody użytkownika. Należy zachować ostrożność podczas retransmisji, zaleca się też korzystanie z protokołu HTTPS.
Odbiorcy muszą też otwarcie i wyraźnie ujawnić fakt gromadzenia danych o położeniu, przyczynę ich gromadzenia i okres czasu, w jakim są przechowywane, sposób, w jaki są zabezpieczane, sposób, w jaki są współdzielone (jeśli są), jak wielu użytkowników może korzystać, aktualizować i usuwać te dane, jak również wszelkie inne decyzje, jakie są podejmowane w związku z tymi danymi. Ujawnienie to musi zawierać wyjaśnienie wszelkich odstępstw od powyższych wytycznych.

Rzecz jasna, są to dobrowolne sugestie, ale mamy nadzieję, że tworzą one podstawę do dobrego zachowania operatorów witryn, którą użytkownicy pomogą na nich wymusić.

Zastrzeżenia

Zaimplementowaliśmy pierwszą publiczną wersję roboczą specyfikacji geolokalizacji W3C. Mogą w niej zajść drobne zmiany, ale będziemy zachęcali grupę roboczą do zachowania wstecznej kompatybilności.

Jedyny znany nam problem, który może dotyczyć użytkowników tego API, to możliwa zmiana nazwy metody enableHighAccuracy na inną, np. useLowPower. Firefox 3.5 zawiera metodę enableHighAccuracy z przyczyn zgodności, jednakże obecnie nic ona nie robi. Jeśli nazwa zostanie zmieniona, dla zgodności zachowamy obie wersje.

Podsumowanie

Firefox 3.5 to pierwszy krok na drodze do szerszej obsługi geolokalizacji i wielu innych standardów obecnie rozwijanych w różnych grupach roboczych. Spodziewamy się, że ludzie polubią tę funkcjonalność w aplikacjach mapowych, witrynach ze zdjęciami oraz w serwisach takich jak Twitter i Facebook. Najbardziej interesująca dla nas jest jednak wiedza, że ludzie znajdą nowe sposoby wykorzystania tego API, o których my nawet nie pomyśleliśmy. Sieć WWW się zmienia, a informacje o położeniu zaczynają odgrywać w niej istotną rolę. Cieszymy się, że możemy tu pomóc.

Cel	Wszystkie węzły DOM	Tylko elementy DOM
Pierwszy	.firstChild	.firstElementChild
Ostatni	.lastChild	.lastElementChild
Poprzedni	.previousSibling	.previousElementSibling
Następny	.nextSibling	.nextElementSibling
Długość	.childNodes.length	.childElementCount

Mozilla Hacks: Korzystanie z Web Workers

Posted by: marcoos on: 19.07.2009

In: dev| firefox| google| javascript| mozilla| mozilla-hacks| webkit
5 komentarzy

W ramach serii tłumaczeń artykułów z bloga Mozilla Hacks, przedstawiam dzisiaj tłumaczenie artykułu Using Web Workers – Working Smarter, Not Harder. Oryginalny artykuł i jego tłumaczenie dostępne są na warunkach licencji Creative Commons Attribution 3.0 USA.

Korzystanie z Web Workers – jak pracować mądrze, a nie ciężko

Autorem tego artykułu jest Malte Ubl, który wykonał sporo dobrej roboty przy użyciu technologii Web Workers w ramach projektu bespin.

W ostatnim czasie aplikacje webowe stały się znacznie bogatsze. Programy działające w przeglądarce, takie jak GMail, Meebo i Bespin pokazują nam, jak WWW będzie wyglądać i zachowywać się w przyszłości. Kluczowym aspektem tworzenia przyjaznej dla użytkownika aplikacji jest wysoka responsywność. Użytkownicy nie lubią czekać, a szczególnie nie lubią sytuacji, w których wydaje się, że program działa, po czym przestaje reagować.

W sercu współczesnych aplikacji WWW po stronie klienta leży język programowania JavaScript. JavaScript wraz z obiektowym modelem dokumentu DOM jest całkowicie jednowątkowy. Oznacza to, że w JavaScripcie tylko jedna rzecz może się zdarzyć w danej chwili. Nawet jeśli komputer ma 32-rdzeniowy procesor, tylko jeden rdzeń będzie zajęty podczas długich obliczeń. Na przykład, obliczając idealną trajektorię lotu na Księżyc nie można jednocześnie renderować animacji, która pokazuje trajektorię w tym samym czasie i nie ma możliwości reagowania na zdarzenia użytkownika, takie jak kliknięcia myszą czy pisanie na klawiaturze podczas obliczeń.

Współbieżność

Dla zachowania responsywności podczas intensywnych obliczeń większość współczesnych języków programowania wykorzystuje współbieżność. W przeszłości do uzyskania współbieżności często wykorzystywano wątki. Klasyczne wątki utrudniają jednakże programiście zrozumienie przebiegu programu, co często prowadzi do trudnych do zrozumienia błędów i chaotycznego zachowania w chwili, gdy różne wątki próbują równocześnie operować na tych samych danych.

Technologia wątków roboczych – Web Workers – zalecana przez WHATWG, pojawiła się w Firefoksie 3.5, pozwalając na wzbogacenie programów w JavaScripcie o współbieżność, unikając problemów związanych z typowymi programami wielowątkowymi. Rozpoczęcie wątku roboczego jest bardzo proste – wystarczy użyć konstruktora new Worker.

W tym przykładzie plik worker.js zostanie wczytany i uruchomiony w nowym wątku, dla niego utworzonym.

// Utwórz wątek roboczy na bazie pliku "worker.js"
var worker = new Worker("worker.js");

Komunikacja między głównym wątkiem interfejsu użytkownika a wątkami roboczymi opiera się na przesyłaniu komunikatów przy użyciu metody postMessage. Metoda ta została dodana do Firefoksa 3 by zapewnić komunikację między oknami. Aby przesłać komunikat z wątku roboczego do strony, wystarczy użyć tej metody:

// Wyślij komunikat do głównego wątku UI
postMessage("Witaj, strono!");

Aby odebrać wiadomość od wątku roboczego, na obiekcie typu Worker należy określić procedurę obsługi zdarzenia “onmessage”. Tutaj po prostu wyświetlimy dane zdarzenia, przekazane do tej procedury. W naszym przypadku własność “event.data” zawiera tekst “Witaj, strono!”, przesłany powyżej.

worker.onmessage = function (event) {

  alert(event.data);
  // Wyślij wiadomość do wątku roboczego
  worker.postMessage("Witaj, wątku!");

}

Do wysłania komunikatów do wątku roboczego wywołujemy metodę postMessage na obiekcie wątku. Aby odebrać te komunikaty w wątku, należy zdefiniować funkcję onmessage, która będzie wywoływana po każdym przesłaniu do niego komunikatu.

Obsługa błędów

Istnieją dwa sposoby obsługi błędów czasu wykonania w wątku. Po pierwsze, wewnątrz wątku można zdefiniować funkcję onerror. Po drugie, można obsłużyć błędy z zewnątrz wątku, przypisując procedurę onerror obiektowi typu Worker:

worker.onerror = function (event) {

  alert(event.message);
  event.preventDefault();
}

Metoda event.preventDefault() zapobiega wykonaniu domyślnej operacji, którą byłoby tutaj wyświetlenie błędu użytkownikowi lub wypisanie jej w konsoli błędów. Zamiast tego, w tym miejscu wyświetlmy treść błędu w oknie powiadomienia.

Brak współdzielenia

Wątki robocze nie dzielą żadnych stanów ze stroną, z którą są powiązane, ani z żadnymi innymi wątkami roboczymi; jedyną możliwą interakcją jest przesyłanie komunikatów przy użyciu metody postMessage. Wątki robocze nie mają dostępu do DOM, nie mogą więc manipulować stroną WWW. W ten sposób nie ma żadnego ryzyka dla integralności danych w sytuacji, gdy wiele wątków chce równocześnie operować na tych samych danych.

Typowe wykorzystanie wątków roboczych składa się ze strony-komponentu JavaScript, oczekującej na zdarzenia użytkownika. Kiedy nastąpi zdarzenie wywołujące intensywne obliczenia, do wątku roboczego przesyłany jest komunikat, który powoduje rozpoczęcie obliczeń. Skrypt na stronie może jednak natychmiast powrócić do oczekiwania na dalsze zdarzenia. W momencie, gdy wątek roboczy skończy pracę, przesyła wiadomość do strony, która może wówczas np. wyświetlić wyniki.

Ostrzeżenie przed nieresponsywnym skryptem, wyświetlane przez przeglądarki, gdy skrypt wykonuje się zbyt długo, odchodzi w przeszłość dzięki wątkom roboczym.

Przykład – ciąg Fibonacciego

W kolejnym przykładzie wątek roboczy oblicza w tle liczby Fibonacciego od 0 do 99. W rzeczywistości, ponieważ obliczanie liczb Fibonacciego tą nieefektywną
metodą może trwać długo przy większych liczbach (np. większych niż 30), skrypt może nawet nigdy nie zakończyć się na komputerze (albo „wyłożyć sie” z powodu przepełnienia stosu), ale ponieważ dzieje się to w wątku roboczym, nie ma to żadnego skutku co do responsywności strony. Można więc nadal wyświetlać skomplikowaną animację, by uprzyjemnić oczekiwanie na kolejną liczbę.

Poniższa strona HTML zawiera skrypt uruchamiający wątek roboczy z pliku „fib-worker.js”. Komunikaty z wątku roboczego wyświetlane są w konsoli przeglądarki (czy raczej Firebuga – przyp. tłum.) przy użyciu console.log.

<!DOCTYPE html>
<html>
    <head>
      <title>Web Worker API Demo</title>
      <script type="text/javascript">

        var worker = new Worker("fib-worker.js");
        worker.onmessage = function (event) {
          console.log(event.data.index +" -> " + event.data.value)
        }
      </script>
    </head>
    <body>
    </body>

</html>

Plik JavaScript z implementacją wątku roboczego zawiera pętlę, która wylicza liczby Fibonacciego i przesyła wyniki do strony.

// Plik fib-worker.js
function fib(n) {

   return n < 2 ? n : fib(n-1) + fib(n-2);

}
 
for(var i = 0; i < 100; ++i) {

   postMessage({
      index: i,
      value: fib(i)

   })
}

W powyższym przykładzie widać też, że przy użyciu postMessage można przesyłać złożone obiekty. Obiekty takie mogą zawierać wszystko to, co można przesłać w formacie JSON. Oznacza to, że nie można przesłać funkcji, a obiekty przekazywane są przez wartość, a nie przez referencję.

API wątków roboczych

Wątki robocze obsługują funkcję o nazwie importScripts. Dzięki niej można wczytać do wątku roboczego więcej plików źródłowych.

importScripts("file.js");

importScripts("foo.js", "bar.js");

Jeśli funkcja zostanie wywołana z wieloma argumentami, skrypty zostaną pobrane równolegle, ale wykonane w kolejności zdefiniowania. Funkcja ta jest blokująca – bieg wątku zostanie wstrzymany do momentu pobrania i wykonania wszystkich skryptów.

W kolejnym przykładzie wczytujemy zewnętrzny plik JavaScript, który oblicza wartość funkcji SHA-1 z ciągów znaków, a następnie wykorzystujemy go do wyliczania wartości SHA-1 dla zawartości odczytanej poprzez żądanie AJAX. Używamy tu standardowego obiektu XMLHttpRequest do pobrania zawartości z adresu URL przekazanego do zdarzenia onmessage. Co ciekawe, nie musimy budować tutaj asynchronicznego żądania AJAX, jako że wątek sam w sobie jest asynchroniczny względem strony, tak więc oczekiwanie na żądanie HTTP nie jest tu żadnym problemem.

importScripts("sha1.js")
 
function onmessage(event) {
    var xhr = new XMLHttpRequest();

    xhr.open('GET', event.data, false);
    xhr.send();

    postMessage(sha1(xhr.responseText));
}

Inne API dostępne dla wątków roboczych

Wątki mogą używać XMLHttpRequest do żądań AJAX, jak w powyższym przykładzie, jak również mają dostęp do bazy danych po stronie klienta dzięki API Web Storage. API te w wątkach roboczych są takie same jak w „zwykłym” JavaScripcie.

Funkcje setTimeout i setInterval (oraz clearTimeout i clearInterval) są dostępne, co pozwala na wykonywanie kodu po upływie danego czasu lub co pewien interwał. Dostępny jest też obiekt navigator object, udostępniający informacje o przeglądarce.

Dodatkowe API mogą zostać dodane w przyszłości.

Zgodność z przeglądarkami

W momencie pisania tego artykułu, o ile wiadomo jego autorowi, tylko Firefox 3.5 obsługuje możliwość przesyłania złożonych obiektów poprzez postMessage i implementuje rozszerzone API opisane powyżej. Safari 4 zawiera prostą implementację API Worker. W innych przeglądarkach można korzystać z Workers poprzez wtyczkę Google Gears, w której technologia ta pojawiła się na początku.

Przykład wykorzystania na prawdziwej stronie

W ramach projektu Bespin, opartego na przeglądarce edytora kodu źródłowego, z powodzeniem wykorzystujemy wątki robocze do implementacji intensywnych dla procesora funkcji, takich jak sprawdzanie poprawności kodu na bieżąco czy podpowiadanie kodu. Stworzyliśmy także nakładkę, implementującą API Worker w ramach Google Gears, która także dodaje brakującą funkcjonalność w Safari 4, a także umożliwiliśmy korzystanie ze transparentnych zdarzeń własnych, na bazie interfejsu postMessage. Komponenty te zostaną upublicznione jako odrębna biblioteka, do wykorzystania przez inne projekty.

Technologia Web Workers odgrywa istotną rolę w próbie uczynienia z Otwartej Sieci WWW jeszcze potężniejszej platformy dla złożonych programów. Jako że wszystko, co robią wątki robocze, to wykonywanie JavaScriptu, łatwo jest napisać skrypty, które działają także w przeglądarkach nie zapewniających luksusu wątków roboczych. Polecamy dodanie Web Workers do Twoich programów, aby stały się bardziej responsywne i przyjemniejsze w użyciu.

Tagi: mozilla-hacks

marcoos.techblog

HTML 5: przesyłanie wielu plików jednocześnie

CSS Transitions, czyli efekty przejścia w CSS

Jak to wygląda?

Jak tego używać?

transition-property

transition-duration

transition-timing-function

transition-delay

transition

Jak zrobić div, który rozwinie się po najechaniu kursorem?

Ograniczenia obecnych implementacji

Poprawna degradacja

Czy już to stosować?

Linki

Mozilla Hacks: Geolokalizacja w Firefoksie 3.5

Geolokalizacja w Firefoksie 3.5

Mozilla Hacks: Eliptyczne obramowania w Firefoksie 3.5

Mozilla Hacks: Przechodzenie po drzewie DOM w Firefoksie 3.5

Przechodzenie po drzewie DOM w Firefoksie 3.5

Mozilla Hacks: Synchroniczne żądania XHR w Firefoksie 3.5

Synchroniczne żądania XHR w Firefoksie 3.5

Mozilla Hacks: API selektorów w DOM w Firefoksie 3.5

API selektorów w DOM w Firefoksie 3.5

Mozilla Hacks: Nieprzezroczystość w Firefoksie 3.5

Nieprzezroczystość w Firefoksie 3.5

Mozilla Hacks: Korzystanie z Web Workers

Korzystanie z Web Workers – jak pracować mądrze, a nie ciężko

Mozilla Firefox 3.5 już jest!

Ważne akcje

Szukaj

twitter

Kategorie

Archiwa

aviary.pl

mozilla.org

Statystyka

Najpopularniejsze wpisy

Jak to wygląda?

Jak tego używać?

transition-property

transition-duration

transition-timing-function

transition-delay

transition

Jak zrobić div, który rozwinie się po najechaniu kursorem?

Ograniczenia obecnych implementacji

Poprawna degradacja

Czy już to stosować?

Linki

Geolokalizacja w Firefoksie 3.5

Przechodzenie po drzewie DOM w Firefoksie 3.5

Synchroniczne żądania XHR w Firefoksie 3.5

API selektorów w DOM w Firefoksie 3.5

Nieprzezroczystość w Firefoksie 3.5

Korzystanie z Web Workers – jak pracować mądrze, a nie ciężko

Ważne akcje

Szukaj

Kategorie

Chmura kategorii

Archiwa

aviary.pl

mozilla.org

Statystyka

Najpopularniejsze wpisy