phpied.com

jk

jsdrama.com is live though. Enjoy and feel free to add more next time.

(image from wikipedia)

Challenged by Marcel and inspired by another idea by Nicholas (upcoming, stay tuned!) here's the beginning.

Imagine there's no quirksmode
It's easy if IE6 dies
No Trident below us
And all the data URIs

Imagine all the web devs coding for today

You may say I'm a dreamer
But I'm not the only one
I hope some day you will upgrade
And the world will browse as one

There was a dude who liked to write code
I dunno why he liked to write code
The code was Node(.js) code

There was a dude who wrote a lint tool
To check the code that he wrote - cool!
But I dunno why he liked to write code
The code was Node

There was a dude who wrote a unit test lib
So he can run tests (while chewing on a rib)
To catch any problems in his own lint tool
That checked the code that he wrote - cool!
But I dunno why he liked to write code
The code was Node

There was a dude who then wrote some tests
To catch bugs (and all sorts of pests)
In the code of the tool
that checked his code - cool.
Using ,oh sweet!,
His unit test suite.
But I dunno why he liked to write code
The code was Node
(And he never slowed.)

There was a dude who wrote code coverage tool
To test the tests that ran on the unit test mule
that tested the lint
that linted the code
I still dunno why he liked to write code
(yep, it was Node)

There was a dude who then wrote a verse
(It was pretty bad but could've been worse)
about the code coverage tool
that tested the tests
and the unit test thing
that tested the tool 
that lint'd the code
that he wrote in Node

There was dude who published a blog -
oh my, ain't that a bog.


    [--- code coverage tool ---]
       [-- unit test frwk ---]  
          [---  tests  ---]  
            [-- lint --]
              [ code ]  
            [----------]
          [---------------]  
       [---------------------]  
    [--------------------------]

For simplicity, skipped API @docs and their generation

The ... hm, source

Excuse me, my dearest reader for subjecting you to this (*cough vogon poetry*). My only excuse is it's Friday.

So here comes another one of those. This time a coverlet (a whatlet?) of Stevie Ray Vaughan's Tin Pan Alley (The Roughest Place in Town). Tin Pan Alley sounds almost like Silicon (Silly Con?) Valley

Went down to Silicon Valley
To see what was goin' on
Things was too weird down there
Couldn't stay very long
  Hey hey hey hey,
  Valley's the roughest place I've ever been
  All the people down there
  Livin' for their stock options, perks and dental care

I heard a woman scream
When she saw her team
"It's just a bunch of nerds out there
and no one cares to wash their hair"
  Hey hey hey hey,
  Valley's the roughest place I've ever been
  All the people down there
  Call them CEOs and next dotcom millionaire

I heard a pistol shoot
Yeah and it was a .44
Oh wait - just some engineers killing time
on their PlayStation 4
  Hey hey hey hey,
  Valley's the roughest place I've ever been
  All the people down there
  Killin' for their options, perks and dental care

We don't need no docum'ntation
We don't need no source control
No dark sarcasm on the mail(ing) list
Ninjas leave them kids alone

No comments - code should speak alone!
All in all it's just another LOC

We don't need no code conventions
We don't need no (js)lint control
No YSlow rules, no validation
And who needs stinking unit tests?

Hey, guru, leave them kids alone!
All in all it's just another kick in balls

Alternatives:

Hey Crockford, leave them kids alone!

No dark sarcasm in the board room

Many thanks to contributions from @ltackmann, @lucidlifedream, @jalbertbowdenii, @jasonfry, @getify, @skilldrick, @marceloOrigoni, @jdbartlett, @pixsym, @jLix, @joedevon, @leopyc, @cramforce, Carlos!

Disregarding my dear wife's opinion that the best present to my blog readers would be to *not* publish my new recording.... I'll just go ahead and do it:

Feliz Navidad

'tis a heavy metal sort of cover of Jose Feliciano's Feliz Navidad. I hope you like Iron Maiden and Helloween (there's a special treat between 02:44 to 03:05) and I hope you would be kind enough to tolerate this show-off type of guitar heroism Another thing you may notice is at 03:54 - I played a part (a mashup if you will) of Slash's Sweet Child o' Mine solo (splic'd).

psst, here's my last year's Christmas cover - Jingle Bells. You can clearly see where I'm going with this - an album of Christmas songs within the next 10 years. Watch out Mariah Carey

Randomly browsing something on the iPhone it occurred to me that people could prefix their mobile sites with "mmm" instead of "m" or "i", as in mmm.mysite.tld. It's longer, true, but I don't think it will take longer to type three m's instead of one. And it's funny - mmm, it's like www. Only... flipped.

So I tweeted about it, got some good reasons why not to use something like this and Lucas Smith (of YUI fame) joked that I could setup mmm to deliver the same as www, only flipped.

Now, English is not my first language, so I miss out on many expressions, nuances, humor and so on. And there, I took it verbatim.

mmm.phpied.com

Ladies, and gentlemen, announcing the flipped version of this blog - http://mmm.phpied.com

You should be able to browse the whole site on its head, maybe with the exception of "popular posts" and other places, where I've hardcoded www.

how-to

All the changes had to be in my wordpress template, of course.

CSS first. Developer extraordinaire Ryan Grove have already solved the problem of x-browser flipping, so that was easy. At the bottom of the stylesheet, I added a new declaration block:

.flip {
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

Now the only thing was to add the class name to the body whenever the domain is mmm. That took some digging around WordPress, but eventually I decided to short-circuit the function call that takes the home URL option. WordPress provides a hook for that. So I added this to the beginning of functions.php in my template.

function mmm() {
  if (substr($_SERVER['HTTP_HOST'], 0, 4) === 'mmm.') {
    return 'http://mmm.phpied.com';
  } else {
    return 'http://www.phpied.com';
  }
}
add_filter('pre_option_home', 'mmm');

Finally, the change to header.php - replacing the body tag with:

<?php
  if (substr($_SERVER['HTTP_HOST'], 0, 4) === 'mmm.') {
    echo '<body class="flip">';
  } else {
    echo '<body>';
  }
?>

And voila - mmm.phpied.com

As you know yours truly is a guitar hero wannabe. So I'm playing with the idea of recording a song/video called "Give PiNG a Chance", cover of "Give peace a chance". Hopefully whoever hears it will then think twice before saving a GIF instead of PNG. Imagine. And the web will be as one...

Here's the lyrics so far, it's a work-in-progress. If anyone can think of rhyming Web 2.0 buzzwords, please comment.

Give PNG a Chance

#1
Everybody's talking about

Web 2
YouTube
WordPress
CMS
    Highrise
    Enterprise
    Crowd sourcing
    Open sourcing
Phone texting
Unit testing 
Foo bars
Avatars

All we are saying is: give PNG a chance

#2
Everybody's talking 'bout

Long Tail
Junk Mail
Fail Whale
Ruby Rail
    Webcasting
    Screencasting
    Podcasting
    Vodcasting
Cloud computing
Tele commuting
Trackbacks
Pingbacks
    Less is More
    Apple store
    Link whore
    Browser war

All we are saying is: give PNG a chance


#3
Everybody's talking about
RSS, CSS
HTML, XML
    SOA, RIA
    API, CGI
REST-POST, GET-HEAD
SOAP? Nope!
    SEO, SMO
    CPM, CRM
SQL, YQL
SMS, MMS

All we are saying is: give PNG a chance
All we are saying is: give PNG a chance
All we are saying is: give PNG a chance
All we are saying is: give PNG a chance
Yup, no more GIFs
All we are saying is: give PNG a chance
All we are saying is: give PNG a chance...

Unused buzzwords

Here's my laundry list of buzzwords I thought of but didn't use so far in the lyrics. If you think of good rhymes as you look through the list, please comment.

Sort the list

• flickr
• blog
• blogging
• wiki
• twitter
• facebook
• outlook
• ajax
• comet
• firefox
• chrome
• ie6.. ie8
• explorer
• navigator
• digg
• blogger
• safari
• opera
• RoR
• PHP
• CDN
• SMS, MMS
• WTF
• FTW
• web service
• Perl, cURL
• Ruby
• Python
• social
• social media
• social tagging
• click-through
• agile
• photoshop
• rounded corners
• fluid layout
• iPhone
• Air, PEAR
• Sliverlight,
• mobile
• JavaScript
• flash
• buzzwords
• keywords
• microblogging
• microformats
• micropayment
• semantic web
• validators
• web standards
• folksonomy
• taxonomy
• tagging
• phishing scam
• spam
• widget
• gadget
• geotagging
• linkbait
• bookmarking
• viral
• tag clouds
• view source
• torrents
• bit torrent
• github
• blog
• mashup
• pagerank
• social network

Oh Almighty All-One (01),

Grant me the courage
  to embrace and early adopt new cool technologies,
the serenity
  to ignore distractions from new technology fads
and the wisdom
  to tell the difference.

Muahaha I believe the original is often attributed to Vonnegut, but I'm not sure he came up with it. I'm sure he quoted it in at least one book though.

It's been interesting few days lately for me, celebrity-wise.

Agassi/Graff

First, last Thursday, Andre Agassi and his wife Steffi Graff came to the Yahoo! center in Santa Monica (my workplace) and played with our kids and signed tennis balls. This was fun, check out: vid, vid, vid, pics.

Here's my daughter almost hitting the ball:

Craig Ferguson

Then I became part of the audience at a taping of Craig Ferguson's late night talk show. I find him funny and he was even funnier live. The audience environment is nice and small - 113 people. A nice surprise was that when there are supposed to be commercial breaks in the TV, Craig kept making fun and be there although there was no camera rolling. I always though that during those breaks, the host hides in a dressing room or something.

This was all good.

But the warm up guy and the whole warm up procedure was just awful. There's this guy telling stupid and mostly nasty adult jokes, who's not even remotely funny compared to Craig and he's supposed to warm up the audience so we can be prepared when the main dude arrives. He kept repeating how we should laugh, LOL, etc, even when we don't find something funny (who are we to judge ), it made me feel uncomfortable as if I was on an exam or something. A friend told me he used to be a big Letterman fan, until he went to a show tapping in NY. Well, didn't happen to me, I still like Craig, but the whole event felt a little weird.

Buddy Guy

The last "seeing stars" experience was the best - this Tuesday I went to see Buddy Guy, the blues legend, live. The show was another taping but much more fun and natural then the Ferguson one. The show was part of the "live sets" by Nissan and Yahoo! Music which means a very intimate show, maybe about 200 people, mostly fan club members and "VIP". I was part of the VIP, which meant feeling uncomfortable bypassing a line of people and also not being able to be right in front of the stage. Whatever. The show was great, Buddy Guy is 70+ years old but you can never tell. At some point he was all around the audience and playing a meter or so from me, to the guy next to me. He mostly played songs from his latest "Skin deep" album, but he also did what is probably his usual routine playing Strange Brew like Eric Clapton and Voodoo Child like Hendrix. Can't wait to see the recording on Yahoo music, they said it should be ready somewhere in October. There was also a Q&A session with him, the whole event was so natural, human and anti-celebrity.

You can see how much fun is going on on these shows if you see how Weezer play Radiohead's Creep together with the fans.

location = location
... and 534 other ways to reload the page with JavaScript

How many ways you can think of when you want to reload the current page with JavaScript? I counted 535 before I got bored, maybe someone can pick up from there? The cases are so much that I had to write a script to generate them

» have fun, see for yourself

Just occurred to me that I didn't even include the frames property in those 535 ways. Consider the limitless possibilities having in mind for example that:

>>> window.frames === window
true
>>> frames === window.self
true

Could you come up with 500 more ways? A 1000? One condition: no recursion, for example window.self.window is not allowed.

I'm explaining to .. let's call him "This guy" what I work at Yahoo!:

[2:10:32 AM] stoyanstefanov says: research, experiments, building tools
[2:10:38 AM] stoyanstefanov says: all around performance
[2:10:45 AM] stoyanstefanov says: and focused on the front-end
[2:11:33 AM] This guy says: front-end performance sounds so rude
[2:11:58 AM] stoyanstefanov says: haha
[2:12:10 AM] This guy says: but back-end performance sounds even worse

... even as a joke consider putting your domain name on your license "vanity plate"

I know my fellow Québécois are going to smile on this one: Faith Tabernacle - Assembly of God

Great name for a band playing for example covers of Faith No More

Life is what happens to you while you're busy making other plans.

- John Lennon

Project is what happens while you're busy with strategy, planning or priotitizing.

- Stoyan Stefanov

And I'm not even talking about other equally amusing activities such as updating your Gantt charts, percent task completion and WBS

Go ahead, do a Yahoo search for "best programmer ever". Not surprisingly #1 result is the blog of yours truly

For some inexplicable reason, I'm not #1 in Google search results for the same query. Bizarre, isn't it? Not even on the first page. But hey, there a difference between being yet another piece of software that mines an insane amount of pages, giving matches to a query and being a smart piece of software that mines insane amounts of pages.

So, yeah, sweet stuff, and let me return the compliment with some link love back - thank you, best search engine ever.

Just published my previous posting and saw that apart from putting it in the JSON and JS categories, I've forgotten to take out the WordPress' default "Uncategorized" category. For a moment I wondered how many other people are making the same mistake, so I did a tag search in Technorati for Uncategorized.

7,102,321 posts! Compared to 33,637 posts with the tag "Comedy" which had the biggest font size in the homepage tagcloud. Man, as much as I like WordPress, I would blame the usability of the software in this case. 7 million incorrectly tagged posts cannot be wrong.

The other funny thing about the technorati page is the sponsored link, did you notice: "Find Uncategorized here, thousands of products..."

BTW, just checked again and the posts are now 7,103,019. So it's like 1000 new uncategorized posts every 10-15 minutes.

Yeah, and I'm totally tagging this post Uncategorized!

Kitsch

So what's "kitsch"? Well, something that may look like an art, but is usually a thing of a bad taste, over-ornamented, glittering, too colorful, well, something a bit ugly, but liked by a lot of people. It's sometimes questionable what is kitsch and what is a really valuable piece of art, but anything arty is always a bit questionable, isn't it? More about kitsch on Wikipedia.

Web 1.0 kitsch

Here I don't mean to say that anything that is not web 2.0 is ugly, in fact I cannot say that everything that is not web 2.0 is (bad) web 1.0, because there's never a clear difference. Only because you don't have a tag cloud on your site, that doesn't mean your site is old and second best. There are kitschy web2.0 sites, of course, but here I'm thinking about those Web1.0 "effects", things that are hopefully in the past, we've all seen it, it's the rotating 3D @-signs, the animated gifs, the status bar animations, the things that follow your cursor and, of course, the ever so cool, snowflakes flying around the page.

Motivation

My 3-year-old daughter loves to browse with me, asking me to bring up images of Cinderella, Snow White and other favorites. Having no idea where to find them, I do an image search and then visit the sites that come up, hoping for the best. (BTW, that's not always safe, try "barbie") Most of the sites I get are kind of old, web 1.0. style, and one of them had these hearts flying around the screen. My daughter loved them. So I questioned myself how hard it would be to do something similar with all those new cool JS libraries we have today. I tried the YUI and it turned out it is easy, I believe I was able to do the snowflakes within an hour, most of that time spent on figuring out the "mathematical model" of what I was trying to do.

Not ideal

I'm the first to admit the solution is not ideal, for example my flakes are not of random size in IE (my fault) and the whole animation has little breaks every second or so in Firefox. I guess for the seconds bug it's either that YUI is not the best tool for the job or I'm using it the wrong way. But hey, this is a one-hour project. So let me tell you what I did.

The math

What I decided to do is have my snowflakes appearing on random place from top, left or right, and then disappearing at a random place on the left, right or bottom. Also to have a max of 20 flakes at any time, it's bad enough to have 20 to load you processor, more is just crazy. Then I have 4 random points on the screen for each flake that serve as control points when the flake is doing its curve.

Implementation

Using DOM I create a div that contains an asterisk, this is my snowflake. Then I'm using the Motion along the curve available from YUI in order to animate this div. This motion takes a start point, an end point and some control points, in my case 4. First thing to figure out is how much space we have on the screen. YUI helps with this:

max_x: YAHOO.util.Dom.getViewportWidth() - 20,
max_y: YAHOO.util.Dom.getViewportHeight() - 20,

Then the 4 control points are easy, just 4 random points:

var control = [];
for (i = 0; i < 4; i++) {
    control[i] = [
    Math.floor(Math.random() * this.max_x),
    Math.floor(Math.random() * this.max_y)
    ];
}

The hardest part was the start and end points. As I said, I decided to have start points from either top, left or right, so that gives me an array of three random points:

var start_points = [
    [Math.floor(Math.random() * this.max_x), 0],
    [0, Math.floor(Math.random() * this.max_y)],
    [this.max_x, Math.floor(Math.random() * this.max_y)]
];

First is the top where on the Y-axis I have always 0 and a random value for X, from 0 to max_x. The left is defined as X = 0 and Y is random from 0 to max_y, the right is X = max_x and Y is again random from 0 to max_y.

For the end points it's similar, only there instead of top of the screen I have the bottom. For the bottom Y is max_y and X is random.

var end_points = [
    [0, Math.floor(Math.random() * this.max_y)],
    [this.max_x, Math.floor(Math.random() * this.max_y)],
    [Math.floor(Math.random() * this.max_x), this.max_y]
];

Then I pick a random value from each of the two arrays

var this_start_index = Math.floor(Math.random() * 3);
var this_end_index   = Math.floor(Math.random() * 3);
var this_start = start_points[this_start_index];
var this_end   = end_points[this_end_index];

Once I have start/end and control points, I'm ready to create the new flake div, where the size of the flake and the DIV id are random:

// size of the flake
var flake_size = 10 + Math.floor(Math.random() * 20);
 
// random ID of the flake
var flake_id = "flake" + 99 + Math.floor(Math.random() * 99999)
 
// create the markup for the flake (using html2dom.com)
var html2dom_root = document.body;
html2dom_root_1_div = document.createElement("div");
html2dom_root_1_div.setAttribute("id", flake_id);
html2dom_root_1_div.setAttribute("style", "width: 5px; font-size: " + flake_size + "px");
html2dom_root_1_div_1_text = document.createTextNode("*");
html2dom_root_1_div.appendChild(html2dom_root_1_div_1_text);
html2dom_root.appendChild(html2dom_root_1_div);

Now I'm ready to create and setup the YUI animation (motion) instance:

// animation attributes
var attributes = {
   points: {
      to: this_end,
      from: this_start,
      by: [10, 10],
      control: control
   }
};
 
// setup animation/motion object
var myAnim = new YAHOO.util.Motion(flake_id, attributes);
// no easing
myAnim.method = YAHOO.util.Easing.easeNone;
// random duration
myAnim.duration = 20 + Math.floor(Math.random() * 20);
// on completion remove the flake and make more
myAnim.onComplete.subscribe(this.removeElement);
myAnim.onComplete.subscribe(this.make_flakes);
// go!
myAnim.animate();

The two functions that are "subscribed" on animation completion are responsible for removing the current flake div and for creating another set of flakes. The set of flakes generated is using the logic - generate a random number of new flakes (min 1, max 5) unless you've hit the upper limit of 20.

Demo

Here's the demo where you can see the whole script, I kept it in the HEAD part of the demo page.

I remember reading a discussion over at Sitepoint - has the fun gone out of PHP? No it isn't! No way, the fun is here... or should I say PHun

Check this out - videos from a beer drinking contest at a PHP conference. I love how serious the gyus are, I mean, at the end, a contest is a contest, you're serious or you're out, it is a serious matter and should be taken with the necessary amount of responsibility

And how about this T-shirt on sale at php|arch?

While it may be amusing in a sorta geeky kinda way to wear your programming inclinations (or any other inclinations, for that matter) on a t-shirt, I believe I stopped doing it long time ago, my last fan t-shirt was probably the one displaying a nasty scene from a Canibal Corpse's album cover (man, am I that old!)

The nice thing about the shopping experience at php|arch, usability-wise, is that they really make sure you're aware of the shipping details. Did you see, they ship only to North America and the Rest of the World. No way you can get that t-shirt delivered on Mars or Venus, sorry, not at this time, working on it...

A funny thing - today I found out that there is the Town of Ajax, a city near Toronto, in my neighbouring Canadian province, Ontario (I'm in Quebec). It would take me about 6 hours 49 mins to get there. Anywone else want to move and join me in creating the newset coolest Web 2.0. company, based in Ajax, ON

AJAX - Asynchronous JavaScript And XML (W) - is the cool kid on the block for us, webdevs, I believe since April 1st, 2004 (when Gmail was launched, although we didn't call it AJAX back then). But what else does "ajax" mean?

• My first association when I read about it was with Ajax, one of the heroes in Homer's Iliad (W)
• Not doing too much cleaning around the house, or maybe a fan of Mr.Clean (known as Mr.Proper back in my home Bulgaria, in Europe), I didn't know that there is Ajax, the cleaning thing.
• I swear I knew, but have forgotten, about Ajax, the football team, since I was ball-kicking, goal-keeping kid at one point.

It turns out there's more to AJAX than this, for more, there's always the Wikipedia.

But now, 'scuse me while I pack my things and move to Ajax, ON.

Check this out: Love what you do.

As I have already posted, a few months ago I discovered Paul Graham's site and I must admit, I love his articles. If someday they put up a book from the Chicken Soup series (you know, "stories that touch the heart and rekindle the spirit"...), entitled "Chicken Soup for the Programmer's Soul", they have the material right there, on his site, the articles are really inspiring.

Chicken soup? Why not, I mean there's already "Chicken Soup for the Horse Lover's Soul", for the Ocean lover's soul, for the sports fan's soul and other rather curious titles. OK, OK, I admit, the programmers probably don't fall into the group that will read such inspirational literature, but hey, nevertheless, I would argue that the programmers are not less important than the horse lovers, are they?

I recently stumbled upon the site of Paul Graham, who is one of the three guys that created maybe the first online store, now sold to Y!. I like his essays very much and highly recommend them to everybody who has something to do with the web or programming. Part of his essays are listed on his site and part are in his book, "Hackers and Painters"

I wanted to print some of the essays to read on my train ride, but I saw that the text on the pages is in a narrow fixed width table column, which is a waste of paper when you print (and also thicker and heavier to carry ) Let me show you how I used a bookmarklet available from the squarefree.com collection to fix this problem.

1) The page in question, viewed 800x600 pixels (these are all clickable thumbnails, btw)

2) Print preview shows 25 pages and a lot of blank space on the right

3) Enters Edit Page bookmarklet

4) See these squares, they mark the edges of the content table. The orange dot is for removing a column. We remove the nav menu, we don't need it.

5) The menu's gone, we've played around with the date and the title of the article, just because we can Now we'll be dragging that black square.

6) Dragging... until we think fits.

7) The result.

This is 16 pages, where the last one is just a footer, so it's 15. 15 pages vs. 25, not bad for a few clicks! Long live the bookmarklets!

A clever spammer posted a joke on a forum of mine a few days ago. He had the joke and then 4 links to his websites in his post, I guess the idea being that the joke will buy the moderators' sympathy when they follow their first instinct in deleting the post.

Anyway, it's just a semi-abandoned phpBB install I put up quickly some time ago, so there are no real members, nor moderators. I just opted for keeping the joke and removing the links.

Spammers, spammers, spammers... Email spam, comment spam, referrer spam... joke spam... what next!?

Oh, the joke:

EVERYBODY IS GAY

A guy came into a bar one day and said to the bartender, "Give me six double vodkas."

The bartender says, "Wow! you must have had one hell of a day." "Yes, I''ve just found out my older brother is gay."

The next day the same guy came into the bar and asked for the same drinks. When the bartender asked what the problem was today the answer came back, "I''ve just found out that my younger brother is gay too!"

On the third day the guy came into the bar and ordered another six double vodkas. The bartender said, "Jesus! Doesn''t anybody in your family like women?"

"Yeah, my wife..."