rolisz's site

Searching for something?

This post is "cu dedicatie pentru Ciprian de la Bistrita", who has asked for a search feature for some time now

I didn't have a search on my blog for quite some time, because it's a static website, without any dynamic backend (except for comments, but those are well isolated, on a subdomain). But Javascript and the browsers are getting more and more features every day, so it's now possible to do all of this clientside. You just have to go to the search page (also linked in the menu).

I had three options:

  • Acrylamid has a builtin feature that builds up at com­pi­la­tion some continue.

Line charts in Javascript

Recently I wanted to take a look at some personal data that I had been collecting for several years (Quantified Self and Lifel­og­ging ftw :D). Until now it was sitting there write-only, with me oc­ca­sion­al­ly peeking at it manually, but because it was in a pretty much raw format (actually, multiple formats, from different sources), I didn't interact with it too much. However, recently I was a bit bored, I wanted to code something just for fun (as much as parsing XML files can be called fun), so I cleaned up the data and now I wanted to get some "useful" in­for­ma­tion out of it.

The data consists continue.

Statistici la jumătatea facultății

Am ajuns la punctul culminant după cele două tutoriale de d3.js și vom vedea rezultatul final: grafice frumoase :D

Am testat în Chrome, Firefox și IE, ultimele versiuni.

Grafice

Grafice cu d3.js - part 2

Data trecută am făcut un barchart simplu, care să poată fi sortat. Acum, să îl complicăm un pic: vrem să prezentăm un set de date, care este împărțit pe mai multe grupe, datele având mai multe dimensiuni. Vrem să vedem cum se compară grupele diferite la diferite dimensiuni. Vom reprezenta datele din fiecare dimensiune în câte un barchart, separat pentru fiecare grupă sau mai multe împreună, schimbarea făcându-se alegând grupele care să apară. Când schimbăm în cadrul aceleiași grupe, indivizii vor avea per­sis­tență, adică car­ac­ter­is­ti­ca din a doua dimensiune va fi reprezen­tată în locul unde a fost reprezen­tată car­ac­ter­is­ti­ca core­spun­ză­toare primei dimensiuni.

În HTML vom pune butoanele pentru sortare și continue.

Grafice cu d3.js - part 1

Anul trecut am făcut graficele cu notele din sesiune în R. Au fost super simplu de făcut, mai am scrip­turile de generare, și probabil aș putea să le refolosesc și să termin cu toată treaba în 5 minute. Dar... arată un pic cam nașpa. Liniile nu au an­tialias­ing, culorile sunt cam stridente și, cel mai important, sunt statice, nu se poate in­ter­acționa cu ele.

Așa că am decis ca anul acesta să le refac în d3.js, care îi la modă acuma pentru vizual­izări de date. După cum sugerează și numele, acesta este o librărie Javascript care se folosește la ma­nip­u­larea doc­u­mentelor în funcția de datele pe care le avem. Se bazează pe HTML5, continue.

HTML5 Workshop

Joi a fost un Workshop HTML5 organizat de Microsoft, la Hotel Pami. S-au prezentat multe chestii, printre care și câteva lucruri noi pentru mine, și câteva insider stuff de Microsoft.

Cel care a început workshopul a fost Petru Jucovschi, Developer Evangelist la Microsoft. A început cu un scurt istoric al WWW, de la Tim-Berners Lee, la WHATWG și W3C. Ne-a zis de două proiecte realizate de Microsoft cu scopul de  a promova HTML5, care vor fi lansate doar în ianuarie din păcate:  Robot și Presiune. Demourile prezentate păreau destul de in­tere­sante. Robot e un video de muzică similar cu ce au mai făcut cei de la Google, iar Presiune e continue.

Chat cu Node.js

V-ați distrat cu ce am învățat în postul anterior despre web-dev cu  Node.js? Lux, hai să continuăm.

Să începem cu primirea de date de la browser. Vom face asta cu un simplu XML­HttpRe­quest. Să modificăm pagina SSE.html să conțină ur­mă­toarele elemente:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body><input type='text' id='message'/>
<button value='Send' id='send'>Send</button>
<script>
document.getElementById('send').addEventListener('click', sendmessage);
document.getElementById('message').addEventListener('keydown', function(event) {
    if (event.keyCode == 13) {
        sendmessage();
    }
});
function sendmessage() {
    var req = new XMLHttpRequest();
    req.open('POST', '/xhr');
    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    req.send(document.getElementById('message').value);
    req.onreadystatechange = function (e) {
 
continue.

Introducere în Node.js

The logo of the Node.js Project from the
offic... Image via Wikipedia

Vineri a apărut, în sfârșit, varianta oficială pentru Windows la node.js (până acuma era doar variantă neoficială, care avea or­ga­ni­zarea pe foldere genială din Unix, aka „fiecare program să facă un lucru, dar acela bine”, aka o infinitate de fișiere și ex­e­cutabile, pe când acum e doar un simplu exe), așa că am zis să văd și eu care îi acest „big deal” despre node.js.

Pentru început, pro­gra­marea web cu aceasta e complet diferită față de cum merg lucrurile în combinația Apache (sau nginx, etc) + PHP (și bănuiesc că și de Python, Ruby, etc), și am descoperit asta chinuindu-mă câteva ore bune până să îmi dau seamă continue.

Furnica lui Langton, turmite și automate celulare

Furnica după 2000 de pași

Furnica lui Langton e o mașină Turing bidi­men­sion­ală, care funcționează după niște reguli foarte simple, dar duce la rezultate complexe, inventată de Chris Langton în 1986. Se ia o rețea bidi­men­sion­ală „infinită”, ale cărei celule pot fi albe sau negre. Pe această rețea se plimbă o furnică care se mișcă după ur­mă­toarele reguli:

  • Pe un pătrățel negru, se întoarce spre stânga, schimbă culoarea pătratului și merge cu un pătrățel mai în față.
  • Pe un pătrățel alb, se întoarce spre dreapta, schimbă culoarea pătratului și merge cu un pătrățel mai în față.

Apariția au­tostrăzii

Din aceste reguli banale, rezultă ceva continue.

Afisarea treptata a unei figuri

M-am apucat sa imi fac un site propriu, ca sa nu am doar blog propriu. Deocamdata nu stiu exact ce voi face pe site, cum va arata si inca explorez diferite idei. Ideea de care m-am apucat acuma este una minimala. Sau asa a pornit. Intre timp a evoluat si a devenit destul de complexa :)).

Siteul ar fi impartit pe trei coloane. Coloana stanga ar contine navigarea, coloana din mijloc continutul principal, iar coloana din dreapta ar contine streamul meu Twitter (ca al­ter­na­ti­va la Noutatile saptamanii). Fundalul ar fi alb, eventual o textura foarte slaba, textul ar avea un typography foarte bine ales, singura chestie vizuala in plus ar continue.