Am vorbit cu mai mulți programatori care nu au făcut niciodată UT iar majoritatea nu au făcut pentru că au auzit ei (sau au dedus) că UT presupune a scrie și mai mult cod. Unul mi-a zis că nu face UT pentru că a auzit că se face doar la proiectele mari și că oricum nu știe nici un alt programator care face. Yup, motive bune

La întrebarea „Faci unit testing la cod? Dacă da, de ce? Dacă nu, de ce?” pusă pe twitter am primit un singur răspuns:

da, bullet proof, write once and forget about headaches.

Așadar, sunt foarte curios: faci UT? De ce da, de ce nu? În ce limbaj programezi?

Multora nu le-a ieșit nimic în prima zi. Sau în a doua. Sau în a treia. Și au renunțat.

Înveți așa:

Just because I can’t do it today, doesn’t mean i’m not gonna be able to do it someday.

Te perfecționezi așa:

If you keep on doing what you’ve always done, you’ll keep on being what you’ve always been.

Primul citat este de aici:

Al doilea citat este din The Samaritan.

(function($, window, document){
  function createEvent( element, animationKey ) {
    var event           = document.createEvent("Event");
    event.initEvent("keyframe", true, true);
    event.animationName = 'keyframe';
    event.keyText       = 'keyframe';
    event.percent       = animationKey;
    element.dispatchEvent(event);
  };

  $.fn.keyframe = function() {
    return this.each(function(index, elem){
      var reqAniFrame, startTime, endTime, duration, 
          keyframesHistory = {}, // some kind of buffer
          cycle            = 1;

      function keyframes ( timestamp ) {
        var key = Math.floor( ( timestamp - startTime ) / duration * 100 );

        if( !keyframesHistory[key] && ( ( ( key % 5 ) +5 ) % 5 ) == 0 ){
          keyframesHistory[key] = true;
          createEvent( elem, key )
        }

        cycle = cycle+1;
        reqAniFrame = window.requestAnimationFrame( keyframes );
      };//keyframes

      $(elem)
        .unbind( 'webkitAnimationEnd.ntz webkitAnimationStart.ntz' )
        .bind( 'webkitAnimationEnd.ntz webkitAnimationStart.ntz', function(e){
        var t = $(this);
        if( e.type == 'webkitAnimationStart' ){
          var allStyles = document.defaultView.getComputedStyle( t[0], null ),
              found = false;

          for( var i = 0, len = allStyles.length; i < len; i++ ){
            if( found ) { continue; }
            if( allStyles[i].search("-animation-duration") >= 0 ){
              duration = 1000 * parseFloat( allStyles.getPropertyValue( allStyles[i] ) );
              found    = true;
            }
          }

          startTime   = new Date().getTime();
          endTime     = startTime+duration;
          reqAniFrame = window.requestAnimationFrame( keyframes );

        }else{
          window.cancelAnimationFrame( reqAniFrame );
        }
      });

    });
  };
})(jQuery, window, document);

Of course, you need a requestAnimationFrame shim. Good, how to use?

CSS keyframes

CSS3 added some kind of custom animation. Instead of having linear animation, you can control various behavior based on animation progress:

.ani {
    -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

@-webkit-keyframes foo {
  0% { left:0; }
  25% { left: 150px; }
  100% { left:500px; }
}

.foo {
  -webkit-animation-name: foo;
  animation-name: foo;
}

To animate an element, you just need to add both .ani and .foo. Nothing big, right? The script I did detects current keyframe and trigger an event.

JavaScript Events

As I said, JS provides only three events: animationEnd, animationStart and animationIteration (you can read more about this here). you can add an extra keyframe event, just like so:

$('#myElement').live('webkitAnimationEnd webkitAnimationStart keyframe', function(e){
  switch( e.type ){
    case 'webkitAnimationEnd':
      // end event
    break;
    case 'webkitAnimationStart':
      // start event
    break;
    case 'keyframe':
      // trigger event
      console.log(e.originalEvent.percent);
    break;
  }
});
$('#myElement').keyframe(); // plugin init

$('#myElement').addClass('ani foo'); // css animation

That’s it!

Issues?

Currently, the script is only detects 5% intervals. So if you need a keyframe at 82%… Good luck!
Also, the script doesn’t always trigger 100% keyframe. But since we already have animationEnd event, this is not a big problem, no?

Github repo.

Demo

I was lucky enough to need this to work only on chrome. Therefore the demo will only work on chrome. Feel free to fork my gist and improve

Evident, FLASH! Flash pentru a afișa două imagini. Isteț, nu?

Nu știu eu foarte multe despre marketing, tehnologie sau web (în general). Dar mă gândesc că nu sunt foarte mulți care vor scana un cod QR cu ajutorul PC-ului. Ce rost are să faci redirect spre un site semifuncțional?

Bonus, site-ul este defect inclusiv pe PC:

Acum ce să zic? Eu susțin cât pot folosirea tehnologiilor noi, a rezoluțiilor mai mari și a evoluției tehnologice în general. Dar să faci un site care se vede bine la minim 1600px lățime este un pic prea mult, chiar și pentru mine.

Noi muncim, nu gândim!

În fine, începând cu 1 mai voi încerca o nouă șmecherie: link-urile săptămânii vor exista în continuare doar că vor fi mai puține. Și ceva mai… comentate

Acestea fiind spuse, acest post e ultimul din categoria „grămada de link-uri” cu care ești obișnuit.

1. Fully customise WordPress edit screens with powerful fields
2. Writing Unit Tests For WordPress Plugins
3. Extending JavaScript – The Right Way
4. Object-orientation and inheritance in JavaScript: a comprehensive explanation
5. JavaScript design patterns – Part 1: Singleton, composite, and façade
6. An Ajax-Include Pattern for Modular Content
7. requestAnimationFrame – The secret to silky smooth JavaScript animation!
8. Better JavaScript animations with requestAnimationFrame
9. Closures: Front to Back
10. JavaScript debugging for beginners
11. Chrome Developer Tools: Breakpoints
12. Using event capturing to improve Basecamp page load times
13. pep.jquery.js
14. Hammer.js – A javascript library for multi-touch gestures
15. Simple html placeholder functionality with javascript and prototype
16. jQuery MiniColors (a color selector for input controls)
17. CSS3D Clouds – Cel mai bine merge în Chrome
18. About HTML semantics and front-end architecture
19. Linear Gradient Keywords
20. Performance Profiler for Node.js
21. Writing a Node Module
22. OSX For Hackers
23. Vagrant Virtualised Dev Environments

Să-ți povestesc o întâmplare

Zilele trecute asistam un amic prin teamviewer să facă o chestie iar imediat după ce a adăugat fișierele în git (git a) și a scris mesajul de commit (git ci -m "mesaj"¹), înainte să apese enter și-a dat seama că a făcut mici greșeli. Typos. Să fi văzut atunci acrobații cu copy/paste la mesaj, pentru a putea da iar comanda git a fără a rescrie mesajul și toate cele!

Sigur, norocul lui este că stă la dracu’n praznic, că altfel mă duceam și îi dădeam cu tastatura în cap!

Greșeala

Dacă faci parte din cei care se întreabă „ok, dar unde a greșit?” înseamnă că nu folosești git. Sau dacă îl folosești, îl folosești mecanic.

1. git ci nu are nevoie și de git a decât în situația în care adaugi fișiere noi în repository;
2. Dacă adaugi un fișier nou imediat după un commit, probabil vor fi modificări suplimentare și în cod. Caz în care îți recomand un commit nou. Dacă te încăpățânezi să pui totul în același commit, poți folosi cu încredere amend pentru a modifica un mesaj de commit (și, evident, fișierele pentru acel commit)

Concluzia

Ăsta a fost un exemplu. Cred că oricare dintre noi a trecut de nenumărate ori prin situații de genul. La câteva proiecte am folosit query-uri sql scrise de mână (cu mysql_connect & all!) într-o temă de WordPress, fără să știu că WP oferă o soluție mult mai bună pentru așa ceva.

Oricât de stupid ar părea, concluzia este la începutul articolului: folosește cele mai bune unelte (pentru tine) dar înțelege-le. Citește cât de puțin din documentație, vezi de ce se întâmplă ce se întâmplă când se întâmplă. Stăpânește-ți uneltele!

¹ Poți avea astfel de scurtături dacă folosești .gitconfig-ul meu.

Așadar, să zicem că avem un string, să-i zicem $hello="World!"; și vrem să afișăm Hello World folosind acest string. O soluție ar fi:

echo 'Hello ' . $world;

Este ok? Este. E ceva greșit? Nu este. Păi și atunci, unde e problema? Eh, problema apare atunci când vrei să adaugi… de exmplu niște atribute unui tag HTML. Să zicem:

echo '<input type="' . $input_type . '" class="' . $input_class . "
  id='" . $input_id . "' . $disabled . $readonly . '/>';

Acum, nu știu cum sunteți voi, dar eu deja am amețit de la atâtea ghilimele! Gândește-te doar ce se întâmplă într-un query SQL ceva mai complex!

Sunt două chestii trecute cu vederea de foarte mulți:

1. Dacă ai un string între ghilimele duble poți introduce o variabilă, iar aceasta va fi parsată;
2. Atributele tag-urilor HTML pot fi puse și în ghilimele simple (de fapt, majoritatea atributelor – cele care nu conțin spații: class, placeholder etc – pot fi adăugate fără nici un fel de ghilimele!)

Acestea fiind spuse, povestea de mai sus se poate rescrie în felul următor:

echo "<input type='$input_type' class='$input_class' id='$input_id' $disabled $readonly/>";

Deja totul este mult mai ușor de urmărit iar șansele să te pierzi în ghilimele au scăzut dramatic!

Ce fac dacă am atributele într-un array?

Sunt situații în care vrei să afișezi elementul unui array:

$input_attr = array(
  "type"     => "text",
  "class"    => "foo bar",
  "id"       => "input_id",
  "disabled" => "disabled",
  "readonly" => "readonly"
);

(Desigur, array-ul ar putea fi la fel de bine un stdObject, că nu s-ar supăra nimeni)

Soluția? Acolade!

echo "<input type='{input_attr['type']}' class='{input_attr['class']}'
  id='{input_attr['id']}' {input_attr['disabled']} {input_attr['readonly']}/>";

Toată povestea asta merge nu doar în cazul în care vrei să afișezi ceva ci și în cazul în care definești o variabilă, de exemplu (să revenim la exemplul inițial):

$hello = "Hello {$world}";
echo $hello;

Mai multe detalii poți găsi fix la sursă.

Evident, l-am luat pentru un proiect (la fel cum s-a întâmplat cu iPhone sau cu Nexus). Am avut surpriza să văd că Chrome nu detectează event-urile ca touch* (touchstart, touchend, touchmove etc) și că nu pot dezactiva pinch to zoom (ceea ce face treaba mai complicată decât ar trebui).

Overall, imaginea este bună, nu are probleme vizibile de culoare sau alte bucurii d’astea. Cea mai mare problemă – și zău că nu înțeleg de ce se încăpățânează producătorii! – este că atât ecranul cât și rama acestuia sunt.. glossy! Oameni buni, nu faceți glossy chestiile pe care dai cu degetul în continuu!

Windows 8

Dacă în urmă cu câteva luni, atunci când a apărut dev preview, am zis că Win8 este o porcărie din punct de vedere al usability, acum nu pot să zic decât că impresia a rămas aceeași. Voi reveni cu amănunte cu altă ocazie.

Dacă suma celor trei culori este sub 382 (teoretic; în practică am observat că e mai bine să se crească până pe la 400-450), culoarea este una întunecată. Dacă suma este peste 382, evident, este o culoare deschisă.

În PHP, de exemplu, poți extrage un array al celor trei culori de bază folosind funcția următoare:

<?php 
function get_rgb( $color = '000000' ){
  $rgb = array();

  for ( $x = 0; $x < 3; $x++ ){
    $rgb[$x] = hexdec( substr( $color, ( 2*$x ), 2 ) );
  }

  return $rgb;
}

Cum le aduni? Foarte simplu! array_sum( get_rgb( $color ) ).

Așa cum am zis, funcția e atât de simplă încât poate fi extinsă cu ușurință în orice limbaj.

Așadar, sunt curios ce workflow folosești când lucrezi la un site online. Ai un mediu de test? Lucrezi direct „pe ftp”? Folosești controlul versiunilor? Etc etc.

De exemplu, pentru site-urile la care lucrez constant am xammp configurat destul de aproape de serverele pe care dau cu sapa, țin fișierele sub Git și folosesc Sublime Text împreună cu Sublime SFTP pentru a edita, respectiv pentru a sincroniza diverse foldere (în principiu wp-content/themes/tema și, dacă e nevoie, wp-content/plugins.

Pentru modificări super rapide, la site-urile la care nu lucrez decât ocazional, folosesc Flash FXP.

Întreb asta pentru că am o vagă bănuială că este nevoie de un ghid pentru astfel de treburi…

Deci?