It’s been a long time since I’ve written my last english-spoken text. It was about Webworkers API. The visitors number has been achieved, so it’s time for the next topic. Now I’m going to talk about Canvas and some CoffeeScript tricks. Again I’m asking You to forgive me my „language glitches”.

Since I don’t like to get to know about something new in an abstract way, we’ll going to write a simple EAN-13 barcode generator. You meet it at every store, it saves time and money for merchants. Price can be attached to barcode instead of price tags. Imagine changing a price in the same 100 products. But how to generate one? Wikipedia has a nice description. EAN-13 is composed of GS1 organization numbers, company numbers, item reference and check digit.

This time I’m going to cover some CoffeScript features I didn’t talk about 2 posts earlier: extending classes and static properties. I’ll write one class computing „0101…” EAN-13 code and another one capable of drawing the code on HTML canvas element. I even created a public GitHub repository, so feel free to steal some code. Working example can be found here.

I won’t explain You all code here, only the most important parts. For example how to compute control digit?

computeControlSum: ->
  sum = 0
 
  # this one line of array comprehension substitutes four lines in pure JS
  sum += (if key % 2 then 3 else 1) * value for value, key in @eanArray
  controlSum = 10 - sum % 10
  if controlSum == 10 then controlSum = 0
  return controlSum

Piece of code above is translated into:

EAN13Generator.prototype.computeControlSum = function() {
  var controlSum, key, sum, value, _i, _len, _ref;
  sum = 0;
  _ref = this.eanArray;
  for (key = _i = 0, _len = _ref.length; _i < _len; key = ++_i) {
    value = _ref[key];
    sum += (key % 2 ? 3 : 1) * value;
  }
  controlSum = 10 - sum % 10;
  if (controlSum === 10) {
    controlSum = 0;
  }
  return controlSum;
};

As we can see we don’t need to worry about some temporary variables in CoffeScript.

Digits 2–7 in barcode (before the central „whiskers”) can be written as odd or even. Pattern depends on first barcode digit. It has been written as object literal:

class EAN13Generator
 
# some code here
 
  # this is how we create class properties
  # we can call to such property like EAN13Generator.LEFT_SIDE_CODING
  @LEFT_SIDE_CODING:
    0: ['odd', 'odd',  'odd',  'odd',  'odd',  'odd' ]
    1: ['odd', 'odd',  'even', 'odd',  'even', 'even']
    2: ['odd', 'odd',  'even', 'even', 'odd',  'even']
    3: ['odd', 'odd',  'even', 'even', 'even', 'odd' ]
    4: ['odd', 'even', 'odd',  'odd',  'even', 'even']
    5: ['odd', 'even', 'even', 'odd',  'odd',  'even']
    6: ['odd', 'even', 'even', 'even', 'odd',  'odd' ]
    7: ['odd', 'even', 'odd',  'even', 'odd',  'even']
    8: ['odd', 'even', 'odd',  'even', 'even', 'odd' ]
    9: ['odd', 'even', 'even', 'odd',  'even', 'odd' ]

The next interesing part is how to concatenate barcode string. Here’s how:

generateEANcode: ->
 
  # we're using class property to find out first 6 digits coding
  codingStyle = EAN13Generator.LEFT_SIDE_CODING[@eanArray[0]]
  eanCode = EAN13Generator.START_SENTINEL
  for i in [1..6]
    if codingStyle[i-1] == 'odd'
      eanCode += EAN13Generator.EAN_13_CODE_TABLE[@eanArray[i]].left.odd
    else
      eanCode += EAN13Generator.EAN_13_CODE_TABLE[@eanArray[i]].left.even
  eanCode += EAN13Generator.CENTRAL_SENTINEL       
  eanCode += (EAN13Generator.EAN_13_CODE_TABLE[@eanArray[i]].right) for i in [7..12]
  eanCode += EAN13Generator.END_SENTINEL

Class extension is realized through extends keyword.

class EAN13CanvasDrawer extends EAN13Generator
 
  # @canvasId is shorthand for @canvasId = canvasId
  constructor: (eanString, @canvasId) ->
 
    # we're launching EAN13Generator constructor
    super(eanString)

I’m using jCanvaScript JS library to draw on canvas. Below is the whole drawBarcode() method:

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...

W dniu dzisiejszym została opublikowana finalna wersja PhpStorm 4.0. Nowa wersja niesie ze sobą szereg usprawnień i nowości, a wśród nich między innymi: wsparcie dla PHP w wersji 5.4 informacje o pokrycie kodu testami PhpUnit integracja z Php CodeSniffer wsparcie dla kodowania Drupal nowy mechanizm inspekcji kodu php poprawiony mechanizm autouzupełniania kodu dla JavaScritp wsparcie [...]

Knockout.js jest biblioteką JavaScript z powodzeniem implementującą wzorzec MVVM (Model – View – View Model), znany chociażby z Silverlighta. Wykorzystanie tego wzorca w przypadku standardowego tandemu HTML + JavaScript daje ogromne możliwości w postaci automatycznie aktualizującego się widoku, bez konieczności ręcznego wprowadzania zmian do kodu HTML. Nas jako programistów interesuje tylko jedno – view model, czyli obiektowa reprezentacja danych, która znajduje odzwierciedlenie w warstwie prezentacji. W skrócie, wystarczy zaktualizować obiekt JavaScript, a zmiany zostaną wprowadzone bez naszej ingerencji w widok.

Zacznijmy od prostego przykładu.

<p>jakasZmienna: <span data-bind="text: jakasZmienna"></span></p>

function ViewModel() {
    this.jakasZmienna = "warosc zmiennej";
}

ko.applyBindings(new ViewModel());

Powyższy kod, mimo iż niezbyt skomplikowany, pokazuje siłę Knockout.js. Nasz view model definiuje zmienną o nazwie jakasZmienna. Jak się łatwo domyślić wartość tej zmiennej zostanie wyświetlona wewnątrz znacznika span. Co jednak chcielibyśmy zmodyfikować zawartość tej zmiennej? Sprawdźmy.

Dodajmy do kodu HTML pole tekstowe.

<input type="text" data-bind="value: jakasZmienna" />

I zmodyfikujmy nieco view model.

function ViewModel() {
    this.jakasZmienna = ko.observable("warosc zmiennej");
}

Teraz zmieniając zawartość pola tekstowego, zaobserwujemy, że wprowadzony tekst pojawia się w akapicie (nie zapomnijcie, że zdarzenie zostanie wywołane w momencie, gdy pole tekstowe przestanie być aktywne).

Oczywiście poza pojedynczymi wartościami, możemy przekazywać całe tablice, dzięki czemu dane przesłane z serwera możemy prezentować w postaci tabel i/lub list. Oto prosty przykład.

Zacznijmy od kodu HTML.

    <ul data-bind="foreach: items">
        <li data-bind="text: name"></li>
    </ul>

Jak się zapewne domyślacie, lista zostanie wypełniona danymi z view model.

function ViewModel()
{
    this.items = ko.observableArray(
        [
            { name: "Jan Kowalski" },
            { name: "Ewa Wisniewska" },
            { name: "Piotr Nowak" }
        ]
    );
}

ko.applyBindings(new ViewModel());

A co jeśli chcielibyśmy ograniczyć listę elementów i zastosować filtrowanie wyników? Nic prostszego. Wystarczy zastosować instrukcję warunkową if. Możemy użyć jej tak samo jak w przypadku foreach lub zastosować specjalny komentarz.

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...

When you have plenty of Symfony2 applications and you need to deploy them from time to time, you are probably sick of thinking about every activity you need to do for every deploy. Often people use some build scripts, which are hard to maintain and tends to be unreadable. I wanted to automate it as [...]

Ten post jest implikacją rozmowy jaką przeprowadziłem na piwku po konferencji #4developers. Rozmowa dotyczyła problemu anemicznego modelu w aplikacjach Symfony. Problem był mi znany wcześniej jednak zainspirowany rozmową postanowiłem przyjrzeć się tematowi bliżej.

W ostatnim projecie musiałem stworzyć dwa pola typu select, gdzie wartości dostępne w drugim polu były zależne od wybranej opcji w pierwszego pola select. Sztandarowym przykładem może tutaj być lista województw + lista miejscowości w ramach wybranego województwa. Sytuacja wygląda tak, że mamy pierwsze pole typu select: Jak więc widać w polu tym umieszczony jest [...]

Mamy niedzielę, więc warto trochę poprogramować dla sportu (oczywiście zamiast uprawiania „normalnego” sportu ). Z głupoty chciałem rozpracować kilka rzeczy. Przede wszystkim wprawić się trochę w CoffeeScript, a przy okazji sprawdzić w działaniu zapisywanie danych po stronie przeglądarki przy użyciu localStorage.

Moim dzisiejszym zamiarem było stworzenie strony z formularzem, w którym wpisywane wartości zapisywałyby się na bieżąco po stronie przeglądarki wpisującego. Powiedzmy, że jakaś sierotka podczas wypełniania formularza zamknie kartę/przeglądarkę i całe mozolne wpisywanie poszło w las. Dzięki localStorage wpisane dane nie zostaną skasowane, a formularz wypełni się automatycznie. Oczywiście niesie to za sobą szereg niebezpieczeństw, jak np. co w przypadku kogoś korzystającego z publicznego komputera, chcącego zamówić coś w sklepie internetowym i mu się nagle „odwidzi”? Następna osoba dostanie dane osobowe poprzednika na tacy. Minimalnym zabezpieczeniem byłby mechanizm kasujący dane jeśli są sprzed dłużej niż np. 2 minut.

Dodatkowo chciałem zrobić przycisk, który daje jakąś kontrolę nad przechowywanymi danymi. Efekt można sobie oglądać tutaj.

Używana przeze mnie wtyczka do kolorowania składni (WP-Syntax) nie obsługuje CS. Zamiast tego kod umieszczę za pomocą embedded gist z GitHub. Efekt jest bardzo ładny. Poniżej „mózg” formularza: Efektu kompilacji nie pokazuję. Jeśli ktoś bardzo chce to może sobie podejrzeć plik storager.js.

Jeśli szukasz biblioteki backupu danych formularza w czasie rzeczywistym opartego o localStorage to polecam wtyczkę jQuery: Sisyphus.