an ordinary blog — andr3.net

rss feed

my lifestream rss feed

pages

Speaking about HTML5 at ISEL

It's no secret I'm keeping an eye out for all developments on the HTML5 front, for a good while now. Thus, it was with humility and appreciation that I accepted the invitation to talk at ISEL Tech '10 on that very same topic, HTML5.

The session—entitled HTML5 so far—will cover why we need a new language in the first place, what the spec entails and when can we start using parts of the spec. It's scheduled for next tuesday, May 25th at 5pm. It's going to be in Portuguese, which makes me feel odd writing this in English! note to self: you need a new blog in Portuguese!.

So, if you have any doubts, questions or simply pure skepticism about HTML5... drop by! We'll have a nice chat and feel free to put me on the spot with tough questions. ;)

Download to your Calendar, visit the Facebook page of the event or check the schedule.

Now I think I should get back to Keynote.app! ;)

See you there!

Sideproject: iGIVE

And here we are.

2009 is slowly crawling to its ultimate demise.

SAPO Codebits has, once again, rocked the geek calendar.

Christmas and the new year are just around the corner...

So what better time than now to launch a new project? ;)

Yes, that's right. During 2009, I was invited to join susy to help her with the challenge of making the dream of iGIVE come to life.

She presented her idea back in SAPO Codebits 2008 even though an idea was all she had at the time. Billy jumped aboard initially but then had a child, so priorities changed a bit for him. She asked me if I was available and the idea quickly won me over.

Thus, over the course of 2009 iGIVE become more than just an idea. With the support of SAPO, it became a tangible project!

So, what is iGIVE?

Well, if you have something cluttering your home, it's probably because you don't need it. But someone might.

That's the goal of iGIVE. It enables people to say what they have to give and what they are looking for. This way, you can find someone who will find a better use for your ___________ (fill in blank) other than collecting dust!

The website is entirely in Portuguese and geographically focused in Portugal. Here, have a looksie!


my profile at iGIVE
check out my profile or see a bigger screenshot


We have great plans for the website and the community. We really want to make a difference and help people help other people. :)

If you have any feedback, do send it our way. You can use the GetSatisfaction page we setup or e-mail me directly.

The boring technical bits

On the backend, it uses the typical Linux, Apache, PHP, MySQL combination. Memcached for cache and a homegrown CMS.

On the frontend, the HTML5 doctype (nothing fancy though), CSS (including CSS3 smartass-eries) and not an ounce of javascript. For now. ;)

The design was entirely Susana's work. Kudos to her! I merely helped with the rest.
Am particularly proud of the progressively-enhanced <button>s.

A lot more to come

Even though we're not completely dedicated to the website (we still have day jobs), we are wholeheartedly committed to the project and will are already enhancing the website and contacting people that can help us prove that the web and computers can actually bring us closer to each other.

Hope to have your help along the way.

Clever lists with CSS3 selectors

Last week, a guy from work who can afford to only support webkit browsers—hey Luis, I'm looking at you!—, had hit kind of a brick wall and was asking for help on the company design mailing list... my spidey sense kicked in. I hope this doesn't sound too cocky, but I love the smell of a challenge in the morning.

The problem

He wanted to have the <li>s from an <ul> to occupy the entire width regardless of how many they were. If there was only one list item, it would have a width of 100%. Two would have 50% each and three of them, 33.33%.

Also, he wanted to accomplish this using CSS only, without having to figure out the number either using javascript or a server-side language and apply a class accordingly (a natural and understandable cop-out if you have to support all browsers). But this is 2009 and he was looking at webkit. There has to be a way, I thought.

So after scratching my head for a bit, I put together a test page and started throwing selectors together and attempting to figure it out.

The Solution

With the pseudo-class :nth-child you can easily select elements based on their position in the list of children. This allows you to select one element at a time.

But you need an extra something to take into account how many siblings it has. That was the whole point.

In comes :nth-last-child. The difference between the two is that nth-child applies to the nth child counting from the top (ie, the child that has n-1 elements before it) while the nth-last-child applies to the nth child counting from the bottom (ie, the child that has n-1 elements after it!).

That said, we could use both of this pseudo-classes together to create sets of rules that would only apply when there are one, two or three items in the list!


A screenshot of the solution


Code

Here's the code.

/* one item */
li:nth-child(1):nth-last-child(1) {
width: 100%;
}

/* two items */
li:nth-child(1):nth-last-child(2),
li:nth-child(2):nth-last-child(1) {
width: 50%;
}

/* three items */
li:nth-child(1):nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):nth-last-child(1) {
width: 33.3333%;
}


I wish I could find one rule that would automatically figure out the width regardless of the number, instead of enumerating them all. Or even find an expression of the type an+b that would collapse all those selectors into one... But for now, this'll do.

You can test it if you have either Safari or Firefox 3.5 (beta) on this demo page.

Why am I telling you this?

What made CSS2 so successful or powerful wasn't just what was written in the spec. It was also the myriad of articles that popped up all over the web that showed how to combine little aspects of the spec to amount to pretty amazing things.

In conclusion, the sliding doors, the faux columns or the running with sprites articles of CSS3 are still waiting to be written.

So, what are you waiting for? Push the envelope and try to discover new ways of using the properties, selectors and media queries to achieve something otherwise impossible.

Just let us know when you do.

SAPO Sessions #2: Javascript Done Right (video)

As some of you might have heard already, SAPO is doing a series of talks on interesting subjects and have dubbed such events as SAPO Sessions. As part of my newly acquired job functions, I gave a talk a few weeks ago entitled Javascript Done Right. Although the title is a bit cocky, I did try to share a few concepts that, if taken seriously, can make the web a little better for all of us, the users.

I talked about progressive enhancement [alistapart.com] and how writing unobtrusive javascript can help you enhance your websites without creating barriers for your users, in terms of both usability and acessibility.

If the previous paragraph spiked your interest, then go ahead and watch the video. I do apologize for sounding so arrogant at times, but I hope you bear with me 'til the end.

I know I should have written this post in Portuguese, but I'm not mixing up languages until I have setup a proper language filter on the blog. Either that or a separate blog written in Portuguese... Anyway, moving on.


Video

Slides


If you have any questions, suggestions or criticism, don't hesitate to send them my way either on the comments, via email or twitter.

It's back on!!

After a year and a half in the making, Streeter made his move!!

The great part of this is that the Prank War is back on!


Watch Prank War 7: The Half Million Dollar Shot on CollegeHumor


BTW, if you haven't seen these guys' original videos, you're so missing out. Best comedy show I've seen online. I recommend the Hardly Working series. ;)

81st Academy Awards

The Oscars posterIt's that time of the year again. The Oscars are here.

For the past few weeks, I've been making my usual effort to watch the most of the movies that have been nominated this year. Yeah, I know, I'm a sheep. But gladly so.

For reference, I've watched the following movies (in no particular order): Doubt, The Dark Knight, Changeling, The Reader, Revolutionary Road, The Wrestler, Milk, Benjamin Button, Slumdog Millionaire, Tropic Thunder, WALL-E, Kung-Fu Panda, Happy-Go-Lucky and, of course, a few others non-nominated movies.

So, without further ado, here are my predictions:

  • Actor in a Leading Role

    My hunch: Mickey Rourke FAIL

    Winner: Sean Penn

  • Actor in a Supporting Role

    My hunch: Heath Ledger EPIC WIN!! (see my review of the Black Knight)

    Winner: Heath Ledger

  • Actress in a Leading Role

    My hunch: Kate Winslet FTW! (best acceptance speech of the evening)

    Winner: Kate Winslet

  • Actress in a Supporting Role

    My hunch: Viola Davis FAIL

    Winner: Penélope Cruz

  • Animated Feature Filme

    My hunch: WALL-E FTW!

    Winner: WALL-E

  • Art Direction

    My hunch: Changeling FAIL

    Winner: Donald Graham Burt, Victor J. Zolfo (Benjamin Button)

  • Cinematography

    My hunch: The Curious Case of Benjamin Button FAIL

    Winner: Slumdog Millionaire

  • Directing

    My hunch: The Curious Case of Benjamin Button FAIL

    Winner: Danny Boyle (Slumdog Millionaire)

  • Writing (adapted)

    My hunch: Slumdog Millionaire FTW!

    Winner: Simon Beaufoy (Slumdog Millionaire)

  • Writing (original)

    My hunch: WALL-E FAIL

    Winner: Dustin Lance Black (Milk)

  • Best Picture

    My hunch: Slumdog Millionaire FTW!

    Winner: Slumdog Millionaire

MY WINNER

I couldn't leave out the best movie I've watched in recent years, which, IMHO, deserved the Best Picture award this year: SEVEN POUNDS!!!



What do you think? Any comments? :)

Happy Geek Festivities!!

It's right around the corner! A once in a lifetime event! Actually, it won't happen again!!! The UNIX timestamp is approaching yet another landmark. It will be 1234567890 seconds counting from midnight 1st January 1970 aka UNIX Epoch!!

And check this out... our good friend Gamboa threw us a webparty! Let's all open our browsers during this historical event and party on!

He has built a countdown timer that will throw a bunch of fireworks when the time comes... and it will log everyone who's viewing any page that includes his tiny javascript counter! He'll publish the list of websites who hosted this timer & respective count of atendees! :)

So here's mine. But there are plenty other websites joining the party!
(if you're reading this in an rss reader, jump on over to the website!)



To participate, just add this tiny script to your page:
<script type="text/javascript" src="http://pdvel.com/happy1234567890/happy1234567890.js"></script>

May this turn-of-page event bring you good fortune on your geeky endeavours!

Cheers!

Ma.gnolia's downfall (updated)

I write this post with a very heavy heart.

ma.gnolia's logo, fadingIn case you missed this, the fantastic bookmarking service Ma.gnolia has put up a scary warning on their homepage announcing that their platform was brought down due to data corruption and loss.

Hopefuly when you click that link, you'll see the usual Ma.gnolia beautiful homepage... but most likely, you won't.

The fact that the wording on that open letter is so careful not to commit to any date or feed any hope of total recovery, outright scares me. It's like they're preparing us for the worst...

The problem is... I've grown to love ma.gnolia. That's right, love. I've never liked del.icio.us. It demo-ed the social power of the web, but it was fugly and messy from the start! When I started using a website to store my bookmarks, I fell for Ma.gnolia. Few other websites made me feel as warm inside, just by using them. Not only they had a better experience, but they've always been more than open to new trends and technologies (openid, eaut, microformats, etc.) but they also treated the users very warmly. Something I never saw from del.icio.us/Yahoo!.

So it's not surprising that I feel something very close to what you feel when you lose a harddrive with very important data, because in the end, the result is pretty much the same. Loss of data.

I'm refraining from hoping there will be a full recovery just so I won't be disappointed. I actually have a theory that involves sql injections and a loose policy on backups, but... we'll leave that for some other time.

The good news is that since I setup my lifestream to republish my ma.gnolia bookmarks, I managed to salvage 263 bookmarks. The oldest of them is from August 2007. Not that bad.

Whatever comes out of this fiasco, it has certainly taught me a valuable lesson. Treat the data you put up in the cloud as you would treat an external drive. Back up ma.gnolia (*insert new bookmarking website*) to del.icio.us and SAPO Links. Keep a local copy of all the Flickr photos and upload a copy to Photobucket and smugmug.

Of course I'm not gonna do this overnight, that's why services like tarpipe are very well positioned to bring this to the average user with the least amount of effort. All I have to do is create workflows that put my content on more than one place. If Amazon, Yahoo! and SAPO all fail at the exact same time... we're probably being invaded by Aliens or something, so losing your online content might be the smallest of your problems.

Update

Alcides reminded me to include a few examples of workflows that could achieve this. Here they are.

  1. Workflow to submit photos to Flickr, Photobucket and 23hq. (possible now)

  2. Workflow to submit links to del.icio.us, ma.gnolia and SAPO links. (fictional workflow)

Happy 0b11111011001

Just want to send wishes of happy entrance in 2009 to anyone who might read this.

This year, 2008, was easily my best year so far, in various aspects, so I hope I'm not pushing my luck by hoping that 2009 be even better.

As far as resolutions go, I'll:

  • try to blog more
  • tweet less
  • and hope to advance a few projects I have brewing.


In review, 2008 was a great year, filled with great music. Kings of Leon and Get Cape. Wear Cape. Fly. (best name for a band, ever) take the top spots on my shortlist.

As for movies, I'm going to have to agree with pecus, Into the Wild was the best movie I watched all year (it premiered in 2008 in Portugal, so it counts). Followed by TDK and Before the Devil Knows You're Dead.

And that's a wrap! :-)

Codebits 2008 - We'd like to thank the academy...

Codebits projected on a wall
Photo by Pedro Cavaco

SAPO Codebits 2008 has come and gone... and let me tell you, what a 3 day experience it was.

Let's start from the beginning.

My talk

I was up very early in the schedule, so I gave the talk, Microformats - putting together the pieces of the puzzle (roughly translated title) on the second slot of the first day. It was nice being able to stop worrying about it very early in the event.

From all the feedback I've gathered, right then and there and also later on the web, I think it went very well. It's nice seeing people saying:

The truth is that I’ve already heard a lot about microformats, but I’ve never had the chance to search and read something more detailed about it. (...) So, now that I caught some interest in Microformats, I’ll soon be applying them on my web projects.
Rogério Vicente

If you want, take a peek at the slides at my last post or view them on slideshare (they're in Portuguese, though).

I handed out a few stickers, but if you want some for you, either ask me or create your own at Moo
(created by Brian Suda).

Other Presentations

The fact that some talks I was interested in were at the same time, presented the usual difficulties.

Which talk should I go to?

The ones I liked best were:

There were a few others I missed but I'll try to watch them as SAPO start releasing the videos (yes, there will be videos).

Coding competition

Right. Since this was heavily inspired in Yahoo! Hackday, the highlight is the coding competition.

This year I teamed up again with my pal Pedro Eugénio and we implemented a basic prototype of an idea we had during the event. Little did we know what was in store for us!

Here's the pitch.

Who's In?

We thought that one feature that was lacking on all major analytics packages was being able to see what your users were actually doing on your websites. So we wrote a little demo that captured the mouse movements and mouse clicks of each user and played it in the admin area (using comet, which was our first attempt at using it), all merged into one replica of the website.

This would allow site owners to perform usability tests on users without affecting their behaviour by telling them they're being tested. Also, client support can use this to provide some remote assistance on-the-fly with no setup required. There's a whole bunch of use-cases for this, really. And some of them might actually pull some money behind it.

If you're interested, watch the screencast we used during the 90 seconds and see the picture of a visual enhancement we did after recording the video below.

a screenshot of our project


We thought the idea was great and as we shared it with everyone who was kind enough to hear us, we started getting very positive feedback... namely from Bruno Pedro, Pedro Melo, Nuno Mariz, etc. That's always a great motivator. Also, Bernardo Mota helped us a lot with his experience with client support. Thank you all for the help.

Well... The best was yet to come, as this little demo granted us the ___th prize! (we were so taken by surprise that we didn't actually remembered to ask which prize we got! It was either 6th or 5th, I think.) 4th place I couldn't believe it! We won a prize!! And what a prize it was! We each got a brand new Macbook, a motorola Q 9h and 2x books. I grabbed one that I've been wanting ever since I saw Ann McMeekin presenting at <HEAD>: Design Accessible Web Sites. Pedro got a huge bible on Ajax. Awesome (the Eddie Izzard kind of awesome) prizes, I tell you. Great partners Codebits has. ;)

So thank you all who helped us, the jury for supporting us and now, we're off to find out the best way to get this online ASAP. I'll keep you posted.

One wish for 2009, though... I hope to see a lot less (or... none?) projects presented that were not developed within the 24 hours. There were still a good deal of projects that were clearly developed outside codebits and just used them at the competition... I know it's not that polite to critique if you're one of the winners, but the whole spirit of the event is to see what you can come up with in 24 hours...

So kudos to everyone who did their stuff at the event and as far as my favourite projects go, well, here's a list.

  • Crowdbeats
  • CloudStream
  • Myusic
  • Blog game

Organizers and participants

A last word to the organizers, who happen to be the company where I work at. Well done boys. It makes us proud to be part of the family with such a stunning event.

Also, I met a good deal of people throughout the 3 days and let me tell you, it feels good to see so many people getting together around the common interest, technology, and still be able to have a good time, laugh, sing, play, etc.

It's a proof that when it comes to geeks, there's more than meets the eye. ;)

↑ top