on the verge of extinction... again

postari recente

"I thought you might, so I did..."

A fost prima piesa Def Leppard ascultata de mine stiind cine dracu' o canta. Exact versiunea asta de pe CD-ul bonus care venea cu Vault: Def Leppard Greatest Hits. Nu cred ca o sa uit vreodata ca asa incepea - "I thought you might, so I did...". Si cand am ascultat-o atunci... mi-a picat fisa. Ca eu mai auzisem piesa asta. Si, putin mai tarziu, dupa ce am ascultat si restul compilatiei, mi-a picat fisa ca mai auzisem si alte trei piese: When Love and Hate Collide (groaznic videoclip, ce dracu' poarta - in afara de Vivian, parca sunt toti in... pijamale?), Rock of Ages si Foolin'. Si ca... prinsesera, chiar fara sa am habar ce-i cu ele si ale cui sunt.

In cazul meu, e ceva mai mult de "I thought you might" - chiar a existat si cererea asta intr-un comentariu, asa ca noua tema va include si widgeturile de postari si comentarii recente. Versiunile mele. Adica facute de mine de la zero, adica nu exista nici o linie de cod acolo care sa nu fie a mea (si nici macar o bucata de linie).

Poate ca voi avea din nou parte de critici ca pun chestiile astea la vedere, invitand pe oricine sa se serveasca, daaar... cineva care nu prea are idee ce-i cu chestiile astea oricum n-o sa stie cum sa se foloseasca de ele. Iar restul... oricum pot sa se uite in codul paginii dupa ce includ widgetul in tema.

Pornesc de la ceva de genul asta:

<ul id='rcp-container'>
<li class='loading'>se incarca...</li>
<li class='alt-action'><a href='/p/arhive.html'>vezi arhive ➚</a></li>
</ul>
<script src="/feeds/posts/default?alt=json-in-script&max-results=10&callback=recentPosts"></script>

Evident, textul "se incarca..." si link-ul catre pagina de arhive vor fi vizibile pana cand se incarca lista de postari. In mod normal, asta ar trebui sa fie un interval de timp mult prea scurt pentru ochiul uman, dar sa zicem ca se intampla ceva si lista cu postari recente nu se incarca.

Chestia de mai sus ar arata cam asa:

  • se incarca...
  • vezi arhive ➚

Iar scriptuletu' care face sa se incarce lista de postari este ceva de genu' asta:

var recentPosts = function (feed_json_post){
var rc_post_list = "", 
entries = feed_json_post.feed.entry, 
entries_no = entries.length;    
for(var i = 0; i < entries_no; i++){
var curr_post = entries[i],
curr_post_lnks = curr_post.link, 
counter = curr_post_lnks.length, 
curr_post_alt_lnk = "#";
while(counter !== 0){
if(curr_post_lnks[--counter].rel == "alternate") {
curr_post_alt_lnk = curr_post_lnks[counter].href;
break;
}
}
rc_post_list += "<li><a href='" + curr_post_alt_lnk + "'>" + curr_post.title.$t + "</a></li>";
}
document.getElementById("rcp-container").innerHTML = rc_post_list;
}

Stiu ca pare o tona de cod, stiu ca putea fi scris mai compactat, fara majoritatea variabilelor si ca as fi putut sa-mi aleg nume mai scurte pentru ele si sa am ceva de genul:

var recentPosts = function (fjp){
var rcpl = "";    
for(var i = 0; i < fjp.feed.entry.length; i++){
var counter = fjp.feed.entry[i].link.length;
while(counter !== 0){
if(fjp.feed.entry[i].link[--counter].rel == "alternate") {
rcpl += "<li><a href='" + fjp.feed.entry[i].link[counter].href + "'>" + fjp.feed.entry[i].title.$t + "</a></li>";
break;
}
}
}
document.getElementById("rcp-container").innerHTML = rcpl;
}

Daaar... variabilele alea au si ele rolul lor. In momentul in care nu am nevoie de intregul obiect, de ce sa nu-l sparg in bucati si sa stochez doar bucata de care am nevoie intr-o variabila? Stiu ca asta e mai mult o micro-optimizare in momentul in care eu oricum am doar zece intrari si foarte probabil diferenta e insesizabila, dar totusi... in general, e o idee buna sa procedez asa. Cat despre numele variabilelor... e ceva mai clar ce-i cu feed_json_post decat ce-i cu fjp.

Dupa ce isi face scriptul treaba... ar trebui sa arate cam asa:

  • se incarca...
  • vezi arhive ➚

Bineinteles, nu o sa las lista asa urata, o sa ii mai aranjez aspectul din CSS.

Ah, da, piesa despre care ziceam la inceput:

Da-ti si tu cu parerea!

Mai jos se pot scrie tampenii. Nu mai mari ca alea de mai sus...
Insa inainte de orice altceva, vezi cum se comenteaza: indrumar tehnic si reguli!
HTML acceptat: <b>, <i>, <a href=""> (fara alte atribute)