I had a great time and I hope everyone else did too!

Her new portfolio is now online, and in IMO, is as bland as the oatmeal that I eat every morning. Doesn’t come even close to the standards that I hold her up to.

I just stumbled upon this totally radical CV created by designer Greig Anderson – check it here.

It immediately made me think of my friend.

That being said, I am a big fan of the mail client built into the Opera browser. It’s fast, and I love the way it automatically sorts my mails according to mailing lists, flagged threads, contacts etc etc. One other feature that I love is the default “Unread” message view. It allows me to check my “New, unread messages until marked as read.”. You can even set it to display unread messages from the last week, month and so on. I wanted to replicate this in Gmail, and after some tinkering I think I managed to do it. Here’s how (all the following steps are referring to the Gmail web interface):

1. Go to Settings
2. Click on the Labs tab, look for “Multiple Inboxes”, enable it and click “Save Changes”
3. Now you should see a “Multiple Inboxes” tab. Click on it.
4. Under “Search query” fill out “label:unread”. (Under “Panel title” I filled “Unread” and in  ”Maximum page size:” I filled out 9).

   

5. I also chose to “Above the inbox” for “Extra panels positioning:”
6. Click “Save Changes” and go back to your inbox.

You should now see something like the picture below:

I’m really happy with this setting. Hope you are too (I’m not apologizing otherwise anyway)

The most impressive part to me is the way they rotated the machine 90º to enhance privacy:

Keeping the line of waiting people in the corner of your eye, instead of behind your back, let’s people feel safe on a rational and subconscious level.

Takes me back to a quote I once read somewhere:

Creativity is the defeat of habit by originality
- Arthur Koestler

Came up with the idea while sketching earlier today. Might make a series of these. (available in 1440×900 only for now)

“In another ruling, the Copyright Office approved the circumvention of copy-control technology on DVDs, but only in such limited circumstances as educational use, documentary filmmaking and making other types of noncommercial videos.”

- via Twice

Yes, jailbreaking phones is now legal. But the above ruling is much more interesting to me. However, I am not able to figure out if this applies to the music/audio content on the DVD’s as well? It will be interesting to see how this effects Youtube/Facebook service.

So, it does sound that the “The Grey Video” is good to go, but what about the “The Grey Album“?

(Thanks @stephanfeb for pointer to the awesome album!)

Now, the search for jobs started online and the first thing on my to-do list was to update my resume. One thing I had noticed while checking other resumes on the web was that although, containing more or less the same type of information, they are almost always structured in a different way,. Most resumes look pretty much alike, but they aren’t necessarily structured alike.

Honestly, most resumes I have seen don’t pay any attention to the structure of the markup at all. Mind you, I have still seen some resume coded in tables.

Structuring the content

One aspect of authoring web pages which I enjoy a lot is putting semantic meaning into the content. It is very interesting, can be very useful and gets developers confused quite often.

A quick look at at how Wikipedia defines semantic HTML gives you the basics:

Semantic HTML is a way of writing HTML that emphasizes the meaning of the encoded information over its presentation (look).

The easiest way to start with semantic markup is to start with simple, unstyled HTML. That makes it easy to to structure your content without being distracted by the layout. While writing my resume, I broke down the markup into the following sections:

1. Name and other personal information
2. Profile summary or objective
3. Skills
4. Experience
5. Education

What these sections consist of:

Name and other personal information

List of attributes about you

Profile summary or objective

One or two lines of summary

Skills

List of skills

Experience

List of places you have worked at, ordered chronologically

Education

List of places you have studied at, ordered chronologically

The code

To begin the markup, I started with my headings:

<h1>Navjot Pawera</h1>
<h2>Profile Summary</h2>
<h2>Skills</h2>
<h2>Experience</h2>
<h3>Education</h3>

For the title of the page, I used <h1> and then <h2>‘s for the headings of different sections.

Next, I wanted to write my personal details in an explanatory manner; instead of just saying +65 96246234, I wanted to explicitly say it is my phone number, as in: Phone: +65 96246234

Based on this, I used a Definition List to write down my personal details:

<h1>Navjot Pawera</h1>
<dl>
	<dt>Website</dt>
	<dd><a href="http://www.navjotpawera.com" title="Personal website">http://www.navjotpawera.com</a></dd>
	<dt>Email</dt>
	<dd><a href="mailto:navjotpawera@gmail.com" title="Email">navjotpawera@gmail.com</a></dd>
	<dt>Phone</dt>
	<dd>+65 96246234</dd>
</dl>

Followed by, the profile summary, which was suitably defined as a paragraph.

<h2>Profile Summary</h2>
<p>A enthusiastic web technologist with a passion for creating efficient and innovative ways of using the internet. An evangelist of web standards, usability, accessibility and user interface design best practices.</p>

Next came the skills section. In this case, I was going for a short summary of my main skill sets, and hence I used a Definition List again:

<h2>Skills</h2>
<dl>
	<dt>Product Management</dt>
	<dd>Adept at managing product roadmaps, market research, product testing and public launches</dd>
	<dt>Evangelism</dt>
	<dd>Internationally experienced public speaker with extensive developer community outreach</dd>
	<dt>Web Technologies</dt>
	<dd>Exhaustive knowledge of web technologies and development methodologies</dd>
</dl>

Alternatively, if I wanted to go for a longer version, I could have put them down as a list (of my qualities) grouped under different headings to denote different skill sets. For example:

<h2>Skills</h2>
	<h3>Product Management</h3>
	<ul>
		<li>Adept in defining requirements, managing product roadmaps and specifications, researching, prototyping and usability testing</li>
		<li>Extensive knowledge of best practices in internet/mobile-internet technologies and cross-browser compatibility issues</li>
	.....
	</ul>
	<h3>Evangelism</h3>
	<ul>
		<li>Confident and internationally experienced public speaker ( see: <a href="http://www.navjotpawera.com/events.html" title="Events Navjot Pawera has spoken at">http://www.navjotpawera.com/events.html</a> )</li>
		<li>Led and participated in several consumer forums and developer communities via public conferences and developer meet-ups</li>
	.....
	</ul>

The experience section is where things get a wee bit messy, so bear with me. This section contains a few different related pieces of information:

• Time period
• Job title
• Company information
• Short summary
• List of tangible achievements (this one is, of course, a personal choice)

As the list is organised in a chronological manner, I put different time periods and decided to define what I did during that time. So, started with the list and the time in the <dt> tag (definition term):

<h2>Experience</h2>
	<dl>
		<dt>Sep, 2007 - Apr, 2010</dt>
		<dd>
		</dd>
	</dl>

Now, all the rest of the details go into the <dd> tag (definition description). But these details can do with a bit of organisation themselves. The job title is an important piece of information. It also holds the content below it together, as a title. So, I got confused as to whether it should go within an <em> tag, or be actually put as a sub heading in an <h4> tag. Checking with the W3C revealed the following:

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

It seemed about right and to me it seemed to fit in well. I decided to use the <h4> tag. The rest was fairly straightforward: a paragraph for the short summary and an unordered list for the list of achievements:

<h2>Experience</h2>
	<dl>
		<dt>Sep, 2007 - Apr, 2010</dt>
		<dd>
		<h4>Product Manager, Opera Software - Oslo, Norway (<a href="http://www.opera.com/" title="Opera Software">http://www.opera.com/</a>)</h4>
		<p>Took charge of the new products and contributed to the biggest innovations by the company in the past 4 years, including:</p>
		<ul>
			<li><strong><a href="http://unite.opera.com" title="Opera Unite">Opera Unite</a>:</strong> Led three successful internal releases, co-ordinated the final public launches and managed the Product Marketing team; clocking way more downloads than anticipated (numbers internal).</li>
			<li><strong><a href="http://widgets.opera.com" title="Opera Widgets">Opera Widgets</a>:</strong> Delivered mobile widgets specifications used for the final product.</li>
			<li><strong><a href="http://www.operamail.com" title="Opera Mail">Opera Mail</a>:</strong> Negotiated deals with partners and delivered guidelines for product redesign.</li>
		</ul>
		</dd>
		.....
	</dl>

The Education section was almost exactly the same as the Experience section. I filled up all the content and put my markup in an HTML5 document and I was good to go. Take a look at this unstyled HTML5 resume.

Also, with a bit of CSS I turned this into something a bit more visually appealing. Check it here.

Wrap up

To me, figuring out the correct semantics is usually just a matter of pausing and thinking of what the element actually consists of and does it fit – into the structure of the page – rather than into the visual layout of the page. Honestly, as soon as you become aware of it and try setting up things in the proper structure, it comes fairly easily and subconsciously. As an added bonus, to geeks like me, it’s quite a bit of fun as well.

Jitouch, gives you the completely control over your multi-touch-trackpad-gestures. It lets you customize and add a lot more new gestures, and in decently innovative ways as well.

A few of the gestures just sold this app to me so well, that I am willing to ignore the mess the creators have created by going overboard with the crazy amount of default gestures this app switches on! I have disabled ALL OF THEM, apart from:

• Next / Previous tab
• Open Link in a New Tab
• Refresh
• Open recently closed tab
• Scroll to Top
• Scroll to Bottom

I would also use the “Character gestures” if I could only get them to work! All in all, for $5.99 .. actually I haven’t decided if I would pay for this yet.

In other news, the rumors of the Magic Trackpad sound interesting. It would work perfectly with my desk-laptop combination!

Helvetireader² – A minimal, anti-social theme for Google Reader

Although it won’t change my main use of Google Reader (as a backend to one of my favourite apps – Reeder), Helvetireader sure does look fantas-slick-tastic.

I have to say that I don’t get the rationale behind the assumption that the only people using Google Reader would be Chrome users – Helvetireader turns ugly in Opera. Bah Humbug!

ps – In other news, a caveat, setting up Mac Journal is a tedious recursive post-check-fix process.

First impressions:

• Love the way it looks and feels
• Keyboard is marvelous. Soft and yet gives really good feedback. The backlight works great as well
• After initial reservation, I love the new trackpad. The smooth iphone like scrolling is just fantastic!
• Not sure about the glossy screen. I end up turning up the brightness in order to see past the reflections
• Battery life hasn’t been that impressive. Gives me about 4-5hrs I think. It hasn’t given me the “ph, wow! you still have some juice left” moment, yet.
• Performance has been fine, again, don’t feel like there’s a big jump from the old Macbook Pro I was using. Don’t feel any difference in the app launch times, or data transfer. I haven’t run any CPU intensive apps yet though.
• The base gets really heated sometimes. Way more than the older Macbook Pro. Especially on the left side. I hate this about laptops.

When I say, I don’t feel a big difference what I mean is that although it might be a faster when you measure using a stop watch, but it doesn’t make me feel so. It’s too early to complain about it though. I should say, it hasn’t given me any kind of problems whatsoever. But, it definitely hasn’t made me feel like, lets say, how I felt when I first installed 2GB of memory after using 512MB, back in 2004.

Happy with it. Hope it can work as a desktop machine for my photo-editing needs when I need it to. Looking at my current plans and some new developments, that won’t happen anytime soon. I might be city hopping for a fair bit of this year – hence the decision to buy a laptop, instead of the iMac.

So, in reply to mi amigo, Roberto Mateu, this won’t change the initial plan to use specialized tools for specific tasks. The Macbook Pro is solving my new-big problem (a portable workstation), which is what a laptop is supposed to do. As for the iPad, lets see how this changes things and we’ll get back to that in a bit.