Miesięczne archiwum: Wrzesień 2012

symfony_black_02

[Ubuntu] Instalacja LESS oraz Integracja z Symfony2 Assetic

Ostatnio staje siÄ? bardziej popularny LESS. By go zintegrowaÄ? z Symfony2 za pomocÄ? Assetic’a i zachowaÄ? prÄ?dko??Ä? ??adowania strony bez przeskoku spowodowanego kompilacjÄ? LESS’a przez JavaScript less.js.

DziÄ?ki temu pliki less bÄ?dÄ? skompilowane do normalnego css. Dodatkowo mo??na je wrzuciÄ? bezpo??rednio na serwer do static contentu np. Amazon S3.

Schemat dzia??ania Less Node.js i Assetica

Schemat dzia??ania Less Node.js i Assetica

  1. Instalacja Less

    1. Instalacja Node.js
       sudo apt-get update
       sudo apt-get install git-core curl build-essential openssl libssl-dev
       git clone https://github.com/joyent/node.git
       cd node
       chmod +x ./configure
       ./configure
       make
       sudo make install
       node -v
      
    2. Instalacja NPM
      wget http://npmjs.org/install.sh --no-check-certificate
      sudo ./install.sh
    3. Instalacja Less
      sudo npm install less  --global

      Parametr global jest niezwykle istotny, gdy?? nie bÄ?dziesz m??g?? potem uzyskaÄ? dostÄ?pu do lessa

    4. Dodanie PATH Less’a do ~/.bashrc
      Edytuj plik: ~/.bashrc

      gedit ~/.bashrc
      

      Dodaj nowÄ? liniÄ? na ko??cu pliku:

       PATH=$PATH:$HOME/node_modules/less/bin
      
    5. Teraz trzeba prze??adowaÄ? profil Basha
       source ~/.bashrc
      
    6. Testujemy Less!
       lessc wejscie_less.less > wyjscie_css.css
  2. Integracja z Symfony2 i Assetic
    1. Konfiguracja Assetic
      Edytujemy config.yml i dodajemy 3 liniÄ? zwiÄ?zane z lessem tak jak to widaÄ? na przyk??adzie poni??ej:

      # app/config/config.yml
      assetic:
          debug:          %kernel.debug%
          use_controller: false
          filters:
              cssrewrite: ~
              less:
                  node: /usr/local/bin/node
                  node_paths: [/usr/local/lib/node]
              yui_css:
                  jar: %kernel.root_dir%/../java/yuicompressor-2.4.6.jar
              yui_js:
                  jar: %kernel.root_dir%/../java/yuicompressor-2.4.6.jar
      
    2. Edytujemy nasz g????wny plik layoutu(base.html.twig)
      DodajÄ?c warto??Ä? less, do argumentu filter:

      #base.html.twig
      ...
      <head>
      {% stylesheets filter='less,?yui_css' '@AcmeBundle/Resources/less/main.less' %}
          <link href="{{ asset_url }}" rel="stylesheet" media="screen" />
      {% endstylesheets %}
      </head>
      ...
      
    3. Budujemy assety za pomocÄ? Assetic’a
      php app/console assetic:dump --env=prod
      
    4. Cieszymy siÄ? ??migajÄ?cym arkuszem styli kompilowanym z less’a!
symfony_black_02

Symfony2 – Dodawanie Klasy CSS do pola formularza zawierajÄ?cego b??Ä?d

Case

Webdeveloper przygotowa?? nam HTML do strony zawierajÄ?cej formularz.Przy b??Ä?dzie walidacji pola formularza. Pole to ma otrzymaÄ? dodatkowo klasÄ? CSS error. Je??eli to nie zostanie zaimplementowane, to kleint bÄ?dzie w??ciek??y, szef da po premii. A webdeveloper co ciÄ??? psd2html bÄ?dzie mieÄ? ciÄ? za Lamera!

#RozwiÄ?zanie: 1 (Ugly)

Jest to proste, jednak wrzuca nam logikÄ? do template??w TWIG’a. Przez co tracimy na czytelno??ci plik??w TWIG. Templaty „tyjÄ?” przez ciÄ?g??e wklejanie tego samego kodu.
Czytaj dalej

Silex – Class ‚Twig_Environment’ not found

BudujÄ?c nowy projekt w mikro frameworku Silex(w wersji fat). Mo??emy napotkaÄ? nastÄ?pujÄ?cy b??Ä?d:

Class ‚Twig_Environment‚ not found

Zaraz przejdziemy po przeczytaniu dokumentacji gdy przejdziemy do pr??b stworzenia czego?? nowego i dodamy obs??ugÄ? Twig’a. Google w tym przypadku nam nie wiele powie, gdy?? wÄ?tek na GitHubie dotyczy zupe??nie innego problemu. A jak siÄ? okazuje rozwiÄ?zanie jest trywialnie proste.
Czytaj dalej