mGz developer blog » JavaScript

Optymalizowanie ilości Http requestów

Max Małecki — Wed, 23 Feb 2011 22:18:25 +0000

Jednym ze sposobów na optymalizacje ilości requestów do strony, oraz zmniejszenie ilości przesyłanych danych z serwera jest łączenie i kompresowanie plików ze skryptami java script. Jest to możliwe gdy przeglądarka obsługuje taki format skompresowanych plików js.

Musimy postępować w trzech krokach. Pierwszy z nich polega na utworzeniu reguł w pliku .htaccess by przekierowywać js na pliki js.gz, gdy przeglądarka obsługuje kompresje gzip. Natomiast kolejny krok polega na utworzeniu zbioru archiwów naszych skryptów by obniżyć wielkość transferu. Na dokładkę możemy połączyć wszystkie główne skrypty, które ładują się na każdej stronie w jedno duże archiwum.

By wyszukać wszystkie pliki js i skompresować je wystarczy że użyjemy prostej pętli for

for file in `find js -type f \( -name \*.js \)`;
  do
  echo -ne "Generating $file.gz\n\r"
  gzip -c -f $file &gt; $file.gz
done

W zbiorze na którym działa pętla wywołujemy polecenie find i wyszukujemy wszystki plików katalogu zdefiniowanym na sztywno ( w naszym przypadku js/ )

By połączyć główne skrypty w jedno duże archiwum posłużymy się listą plików zapisaną w pliku tekstowym, z której będziemy odczytywać linia po linii kolejne pliki do połączenia.

#!/bin/bash
if [ "$1" = "--help" ]; then
  echo -ne " "
else
  if [ -n "$2" ]; then
    outputfile="js/merged/$2"
    echo -ne  "--merging files -- \n\r"
    jslist="$1.txt"
    if [ -f "$jslist" ]; then
      index=0
      if [ -f "$outputfile" ]; then
        echo -ne "Deleting existing merged file\n\r"
        unlink $outputfile
      else
        touch $outputfile
      fi
 
      while read line ; do
        #MYARRAY[$index]="$line"
        echo -ne "Merging: $line \n\r"
        if [ -f "$line" ]; then
          cat $line &gt;&gt; $outputfile
        else
          echo -ne "ERROR: File $line does not exists\n\r"
        fi
        index=$(($index+1))
      done &lt; $jslist       gzip -fc $outputfile &gt; $outputfile.gz
      echo -ne "SUCCESS: Generated: $outputfile.gz \n\r"
    else
      echo  -ne "ERROR"
      exit
    fi
  else
    echo -ne "ERROR: Parameter expected  try --help to get help"
  fi
fi

Kroki algorytmu:

Sprawdzamy czy user wpisał –help. Jeżeli tak to wyświetlamy pomoc. W przeciwnym wypadku idź do kroku 2.
Definiujemy plik wyjściowy oraz listę plików do połączenia
Jeżeli istnieje plik z listą przejdź do kroku 4. W przeciwnym wypadku wyświetl błąd.
Jeżeli istnieje plik wyjściowy to usuń plik w przeciwnym wypadku utwórz pusty plik wyjściowy.
Dopóki read line z pliku $jslist, to jeżeli plik źródłowy istnieje, to jego zawartość przekaż do pliku wyjściowego. W przeciwnym wypadku wyświetl błąd
Spakuj plik wyjściowy

Konfiguracja .htaccess
By zmniejszyć transfer możemy wymusić na apache’u aby wysyłał pliki js skompresowane, jeżeli przeglądarka akceptuje skompresowane javascripty.



ForceType text/javascript
Header set Content-Encoding: gzip



  RewriteCond %{HTTP:Accept-Encoding} gzip
  RewriteCond %{REQUEST_URI} \.js$
  RewriteCond %{REQUEST_FILENAME}.gz -f
  RewriteRule (.*)$ $1\.gz [L,QSA]

Javascript: Walidator Numeru Rachunku Bankowego (NRB)

Max Małecki — Tue, 16 Nov 2010 10:18:37 +0000

Opis Formatu NRB

Format NRB jest to 26 cyfr zapisanych w formacie:

CC AAAA AAAA BBBB BBBB BBBB BBBB

Gdzie:

CC to suma kontrolna (2 cyfry),
AAAAAAAA to numer rozliczeniowy jednostki organizacyjnej banku (8 cyfr),
BBBBBBBBBBBBBBBB to numer rachunku klienta w banku (16 cyfr).

Więcej na ten temat powie nam wikipedia.

Algorytm Walidacji:

Wytnij znaki nie numeryczne z ciągu wejściowego i przejdź do kroku 2.
Jeżeli długość ciągu znaków wynosi 26 to przejdź do kroku 3 w przeciwnym wypadku zwróć false.
Do ciągu znaków dopisz kod kraju 2521, który odpowiada kodowi literowemu PL (P - 25, L - 21).
Dwa pierwsze elementy ciągu zawierającego numeru konta przenieś na koniec tego ciągu(które zawierają sumę kontrolną).
Przeglądaj numer konta od końca mnożąc kolejno: ostanią cyfrę numeru konta z pierwszą wagą zawartą w tablicy wag. Sumując wynik powyższego mnożenia.
Jeżeli wynik reszty z dzielenia przez 97 jest równy jeden to zwróć true w przeciwnym wypadku zwróć false

Implementacja funkcji sprawdzającej poprawność NRB

function NRBvalidatior(nrb)
  {
    nrb = nrb.replace(/[^0-9]+/g,'');
    var Wagi = new Array(1,10,3,30,9,90,27,76,81,34,49,5,50,15,53,45,62,38,89,17,
            73,51,25,56,75,71,31,19,93,57);
 
    if(nrb.length == 26) {
      nrb = nrb + "2521";
      nrb = nrb.substr(2) + nrb.substr(0,2);
      var Z =0;
      for (var i=0;i&lt;30;i++) {
        Z += nrb[29-i] * Wagi[i];
      }
      if (Z % 97 == 1) {
        return true;
      }else{
        return false;
      }
 
    }else{
      return false;
    }
  }

Wywoływanie sprawdzania przy edycji pola lub wysłaniu formularza

$('form').submit(function(){
  if(NRBvalidatior($('input#nrb').val()))
  {
    return true;
  }
  else
  {
    return false;
  }
});

GoogleMaps + WordPress Szybki Kurs

Max Małecki — Fri, 11 Jul 2008 19:51:56 +0000

Wstęp

Dawno nic o google maps nie pisałem zatem przedstawie wam kurs jak do statycznej strony np z kontaktem dodać mapę googla z kilkoma efektami. Ktoś pewnie zapyta: „po co? Przecież jest dokumentacja na googlemaps.com” Ja pokażę krok po kroku co i jak. Nie obraźcie się jeśli ten tutorial będzie wyglądał jak artykuł z „Komputer świata”.
Pobieramy GoogleMaps API key
1. Rozpoczynamy pracę od wejścia na stronę: http://code.google.com/apis/maps/
2. Zgadzamy się z warunkami umowy licencyjnej i podajemy adres naszej strony:
3. Gdy strona jest już zarejestrowana mamy dostęp do API key’a oraz do przykładowego skryptu.
Piszemy Skrypt
1. Tworzymy dwie rzeczy najpierw katalog js/ w katalogu wp-content/themes/nasztheme/ plik gmaps.js
2. Kodujemy zdarzenie document.ready by załadować mapę.
  window.onload = function() { if (GBrowserIsCompatible()) { //Inicjalizacja mapy poprzez tworzenie obiektu var map = new GMap2(document.getElementById("map")); }else{ alert("sorry but your browser sux hard. update it and come again!"); } });
3. Ustawiamy środek mapy i zoom
  map.setCenter(new GLatLng(35.083956, 103.710938), 4);
4. Dodajemy kontrolki do mapy:
  map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl());
5. Dodajemy punkt na mapie
  var lat = 0; var lng = 0; var point = new GLatLng(lat, lng); var marker = new GMarker(point); map.addOverlay(marker);
6. Możemy jeszcze dodać dymek z opisem punktu lub adresem
  map.openInfoWindow(point, 'To jest nasz punkt!');
7. Czyszczenie mapy z wszystkich markerów i InfoWindow odbywa się za pomocą polecenia:
  map.clearOverlays();
Modyfikujemy Template

Modyfikacja template polega na edycji pliku header.php plus ewentualnie można dodać kilka linii css w style.css
Najpierw zostawmy wszystkie style i temu podobne
Musimy w sekcji head dwie linie:
```
 
```
Umieszczamy Mapkę w kontakcie

Sprawa prosta. Publikujemy nową stronę. Nazywamy ją kontakt.

I dodajemy do niej naszą mapkę:

Można przy okazji ją również ostylować.
First Run

Nim odpalimy po raz pierwszy naszą mapkę. To najpierw pamiętajmy o wrzuceniu na serwer wszystkich plików. Nie wiem czy zbyt wiele wymagam ale biorę za pewnik to że potraficie obsługiwać jakiegokolwiek klienta FTP.
Zatem wrzucamy pliki:
wp-content/themes/nasztheme/js/gmaps.js wp-content/themes/nasztheme/header.php
Efekty

Wszyscy doskonale zdają sobie z tego sprawę że strona musi być efektowna. Można też użyć cytatu:

- Aplikacja?
- Ma być droga i robić biiip

No to sprawa prosta żeby zadbać o tzw. „Wow Effect” (nie mylić z Word Of Warcraft) możemy zastosować małą animację. Dla dużego odsetka klientów ten cytat jest

Np. Jeżeli Firma ma trzy oddziały w mieście to możemy zrobić takie coś:
1. Na starcie ładujemy logo firmy
2. Pokazujemy siedzibę główną, wyświetlamy dymek
3. Pokazujemy pozostałe siedziby w odstępach czasowych i wyświetlamy dymek z adresem i telefonem
By zaimplementować taki skrypt nie potrzebujemy dużo dodatkowej wiedzy z dziedziny javascript’u. Po pierwsze musimy wiedzieć jak używać funkcji:

window.setInterval(function() { //tutaj implementujemy swoją funkcje bądź wywołujemy już wcześniej zaimplementowaną }, 4000); //4000 to czas w milisekundach czyli w tym wypadku 4 sekundy.

Za animację naszej mapy będzie odpowiadać:

//dodajemy marker var marker = new GMarker(point); map.addOverlay(marker); //wyświetlamy dymek map.openInfoWindow(point, 'tekst o odzdziale'); //przesuwamy mapę map.panTo(point);

Gdzie point to element z tablicy gdzie zdefiniowaliśmy oddziały firmy.

Po wyświetleniu trzeba wyczyścić mapę za pomocą:

map.clearOverlays();
Podsumowanie

W sumie zastanawiam się czemu piszę taki tutorial, ponieważ jest gotowy plugin do wordpress’a który rozwiązuje problemy z googlemaps. Konfigurowalny z wp-admin z ładnego formularza.

Może tylko po to by nauczyć się korzystać z narzędzi, które ułatwią nam pracę i nauczą pisać dobre javascripty. Zachęcam do prób z kodowaniem map by Googlemaps. I zapewniam że GoogleMaps API nie gryzie

mGz developer blog » JavaScript

Optymalizowanie ilości Http requestów

Javascript: Walidator Numeru Rachunku Bankowego (NRB)

GoogleMaps + WordPress Szybki Kurs

Wstęp

Pobieramy GoogleMaps API key

Piszemy Skrypt

Modyfikujemy Template

Umieszczamy Mapkę w kontakcie

First Run

Efekty

Podsumowanie