I’ll try to keep this as non-technical as possible.

You may have noticed some pretty cool tricks we do in different parts of the application.  If you haven’t, check out this video:

One of the things that kept bugging me was our animations in Firefox and Safari were lagging behind  Internet Explorer.  They were just plain choppy.  Some time ago I found that the problem was related to the shadows we added to each section on the page.  The effect was stunning and we could do it without the traditional HTML gook it required to pull off.  The drawback?  It wasn’t supported by Internet Explorer.  (No surprise there, Internet Explorer… well, never mind that.)  Initially, the problem was really bad.  So bad, you noticed scrolling choppiness.  But with Firefox 3.5 and Safari 4, the problem virtually disappeared.

Unfortunately, it was still too laggy. So we dropped the shadows completely. Does it look as nice as before? No. But it is a much better experience in the end.

The new iPhone 4 is certainly a marvel of technology.  One of the surprising side effects it has is how bad it makes things look that weren’t designed for high-DPI displays.  For the most part, text is automatically beautiful on the iPhone 4 ¹.  However, images are a different story. What follows is my research and then the technique I used to update images on flowz.com. We use wordpress here and with this technique, image replacement is automatic. All you have to do different is upload the second, high-res file at the same time you insert the normal file in your post or page. The first thing we need to do is pull in CSS specific to high-DPI device(s) in a standards compliant way. Here is how you can do that: http://thomasmaier.me/2010/06/css-for-iphone-4-retina-display/ The trick being to use a CSS3 media query to target high DPI devices (*not* just the iPhone 4!):

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)"
	type="text/css" href="css/highdpi.css" />

But that is only 1/3rd the story.  How do you make sure high resolution images are used when viewing with a High-DPI display?  Aral Balkan has the answer: http://aralbalkan.com/3331 But what he illustrates only works for “sprites.”  That is, divs and other elements that use background-images where the src is specified in CSS. In that special CSS file, we specify the size of the background and include high-res background images that override the normal CSS. However, there is the problem of elements that specify their src in the HTML. I.e., img, video, etc. Aral, touches on what is required but leaves the implementation as an exercise.  I’ll dive into the details:

1. Create double resolution copies of all your images. Name these with a suffix of “@2x”. So for logo.png, the double res would be logo@2x.png. Make sure that all of your image tags have at least a width attribute specified. (But, you are already doing that aren’t you?) If you don’t, your image dimensions will be increased to the new high-DPI source by the browser.
2. Create a highdpi.css file.  Contents:

   .replace-2x {
   	font-size: 1px;
   }

   The sole class, .replace-2x contains an attribute that has no effect on img tags. This is the flag that will tell our javascript it is okay to do image replacement.

3. In your source HTML, add the replace-2x class to all of your images that have a double resolution counterpart.
4. In your HTML head, add the link for your high-dpi stylesheet:

   <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)"
   	href="/css/highdpi.css"/>

5. Create and include in your source, a highdpi.js file.  We are going to assume you are using jQuery for your site.  Contents:

   function highdpi_init() {
   	if(jQuery('.replace-2x').css('font-size') == "1px") {
   		var els = jQuery(".replace-2x").get();
   		for(var i in els) {
   			var src = els[i].src
   			src = src.replace(".png", "@2x.png");
   			els[i].src = src;
   		}
   	}
   }
   jQuery(document).ready(function() {
   	highdpi_init();
   });

The trick here is that we check to see if the font size for our special class is set to value declared in our high-DPI CSS file. (Our flag) It will only be set if the browser passed the media query. If the flag is set, grab every element in the DOM with the replace-2x class and change the src attribute to point to our high-res counterparts. If you have access to one, pull up http://flowz.com on an iPhone 4 and take a look at our logos here (zoom in if it isn’t immediately apparent to you):

Image without ".replace-2x"

Image with ".replace-2x"

(Under normal DPI monitors, the images will look identical.)

1. Note: all text looks good, except text rendered using Cufón and sIFR. We hit that problem. A blog post will follow on that. ↩

Sidebar

I really, really wanted to be able to do something different then what I described above. I wanted to define a class: .highdpi-supported on the body tag of all the pages that support high-dpi. I then wanted to add an uncommon attribute on that class to act as the flag to tell javascript to go ahead with image replacement. Unfortunately, I could not find any such attribute that was relatively safe *and* didn’t affect page layout. So in the end, I’m stuck with adjusting the font-size attribute on the .replace-2x class.  Maybe someone else can come up with a better flag.

For the longest time, flowz.com (and the blog, over.flowz.com) was a dark plain website.  This was intentional.  When we started out, we weren’t quite sure who we were just yet.  Flowz itself was dark and mysterious.  Why bother trying to answer that question when we could be working on new apps?

Just about every second of our first two years was spent working on products.  This past month, we decided to take a breather and work on our own website.  With this launch, you’ll find more about who we are as a company.  Not just our products, but our services and even our open source contributions.

We are putting more focus on development.  You’ll see new blog posts about development tips and tricks.  (We have quite a few up our sleeve.)  I’m very happy about this.  Until now, all of my technical content was shoved out to a personal website.

Also, you might notice a new product being flashed on the home page.  That’s BounceOff.  We are quite proud of it but not yet ready to talk in depth about it.  However, if diving into new products and blazing the beta trail is your thing, go request an invite to join in at http://bounceoff.com.

Now, back to the coal mines…

I love applications.  I love to try out new ones.

One of the biggest barriers many applications have is the sign-up process.  You have to balance the information needed to create an account, with the effort a user goes through to enter that information.  Many times the user looses in that tradeoff.  I wanted to make the sign-up process as easy as possible for our apps.  In fact, we need only 4 items from a user: first and last name, email, and a password.  (And, by golly, we will soon combine first and last name into one field):

One Step Registration

Further, the goal of Raveal is for others to discover you.  We spend quite a bit of effort in getting our Raveal profiles indexed with major search engines.

The side affect of these two things is that many “Search Engine Optimization” douche-bags have caught on and are creating accounts for spamming search engines.  Of course, none of us here have any patience for these practices and shut down the accounts within minutes of being created.  Luckily, the flow is just a trickle.  However, I do fear that if the number of spam accounts increases, we’ll have to put measures in place that increase the amount of effort new users spend on getting setup.  And that pisses me off!

So we’ll do our best to not mess up a good thing while keeping these spamtards out of our system.

Over the past month, I have been hard at work migrating our applications to a new home.

Typically, any application service created in the past few years runs “in the cloud.”  Ours was no different.  We opened our doors running on a grid provided by 3Tera (http://3tera.com).  They have a unique twist on virtualization that really stands apart from the rest of the industry.  They take object oriented programming principals and apply them to virtual machines.  This can be described by a simple comparison between VMWare and 3Tera:

• With VMWare, you have to startup a virtual machine and then log in to the OS to configure settings.
• With 3Tera, the OS resides in a “black box.”  You configure settings with the black box.  Internally, when the OS starts, the black box hands off the settings to the OS.  I.e., the OS never has to be started to configure it.

Much like creating a class in programming, the class has functionality hidden from view.  You set values for class fields and it does something for you.  What this means is you can easily create a catalog of virtualized OSes that are trimmed down to task specific appliances.  E.g., you have a DB appliance and a Load Balancer appliance.  You then reuse these appliances in your applications by pulling them out of the catalog and configuring them.

The technology is pretty amazing.  Unfortunately, for various reasons, the solution wasn’t working for us.  We were seeing a significant amount of nodes in our cluster failing due to hardware and software bugs and datacenter mis-management.

So we began the process of moving to a different platform.  As these things do, it took longer then expected.  But that’s okay, because, in the end, the migration happened flawlessly.  As of  2 AM EST last night, all of our services have been moved over to Joyent (http://joyent.com).  For those hip on hosting providers, you’ll notice that this move involved a switch from Linux to OpenSolaris!  Yes, we are all converts now and absolutely adore what OpenSolaris has to offer.

You should see a bit of speed increase in accessing the apps.  Latency might be a bit better for our European customers as the DC is in New England now.  If you notice anything strange, feel free to contact us over at http://support.flowz.com.

Woohoo!  As of today, you can now link your Flickr account with your Voice tab.  To enable it, go to your Voice.  Click on Add Network.  Choose Flickr and click the “Login with Flickr” button.

Here is a sample of what it looks like (with uninspiring techno geek images):

Flickr stream

I’m really excited to finally get this out to users.  This functionality was actually developed way back in August!  We had to disable it in production because Flickr’s approval process might be the only thing on the planet worse the the iPhone App Store approval process.  It took 5 months to get approved!

But hey, at least it is here now.

Happiness injection number 2:

We are now presenting *all profiles beneath the main showcase. This is using the same visual layout that you get when you use our visual search engine. Visit the showcase.

Remember, the goal of Raveal is for companies and clients to discover *you*

More to follow…

(*all being all profiles that have at least a minimum amount of info and are marked public)

There is much writing to do.  You see, we just air-dropped a shipment of fantastic to our users last night.

The first bit of super awesome comes in the form of an expansion of the Raveal portfolio.  Riddle me this: How do you include more detailed background on your past projects?  (Hint: it doesn’t belong in your resume.)

If you answered portfolio, you would be correct.  Your portfolio is your work history.  What you have done.  For just about ever, portfolios were limited to creative types.  People whose work could be displayed on a piece of paper tucked away with many like it in a mobile carrying case.  The problem is, most of us non-creative types also needed to present work that can’t be described by a picture.  Without a portfolio, we would need to stuff all that content into our resumes.  Lucky for the hiring managers, there was a golden rule: A resume shant be more than pages two.  Unfortunately, with the advent of the Monster.com era of electronic applications, the golden rule simply disappeared.  People stuffed more and more junk into their resumes.  Resumes devolved into useless dead trees.  A.K.A., “The Kitchen Sink Resume.” Many articles and blog posts popped up, all predicting the end of the resume.

Well, if you take out all the junk that doesn’t belong, resumes are still useful.  So that’s just what we did with Projects– gave a home to all that “junk.”

Starting today you can now add projects to your portfolio.  What is the difference between galleries and projects?  Well, to put it simply, a gallery is a collection of files, a graphical presentation.  A gallery doesn’t tell a story.  A project is different.  It allows you to explain in words all about projects, initiatives, cases, sales drives, or whatever else that you worked on.  Alternatively, a project could just as well be called a free-form-text-and-inline-image document.  Essentially a structured MS Word document.  Here is what it looks like:

Project Editor

Of course, inline, multimedia content is allowed.  Here is the portfolio view:

Public Portfolio

Now, the next tidbit is great.  Projects are cross referenced in your resume:

Projects are cross referenced in your resume

This allows hiring managers to drill down into detail when they need to:

Project "quick view" from the resume

They aren’t bothered by the excess detail until they want to be.  This feature is very powerful and we believe it will absolutely help people get hired.  We’re very excited to get this out to our users.  We’ll have more tips and tricks to come in follow up posts.

We have spent some serious effort on making the generated PDF of your resume/portfolio even better.  Raveal’s PDF output was already second to none when it comes to other resume websites.  We do some fancy tricks to allow your portfolio’s high res images to be included next to your resume.  The resulting PDF is better than most can do by hand with Microsoft Word.

But there were some places we could improve.

The following features are immediately available to all Raveal account holders today.

The old PDF was a traditional format, using only black and white colors and sans-serif headings with serif body text.  We now provide you with a choice between the original, “Traditional,” style and a new, “Modern,” style.  The modern uses the Myriad Pro sans-serif font throughout and brings in some blues and grays.  It looks great.  You can change your preference from the Dashboard under “Style & Theme.”  Check out a short comparison of the two:

Two styles: Modern and Traditional

Previously, file descriptions were left out when they were inserted into the PDF.  We now include them.  Additionally, if there are files that could not be included in the PDF, say a SWF or HTML file, a notice is added at the bottom to visit your profile online.

File descriptions next to file

We sweat the details.  Who is the one actually using the PDF?  The hiring manager or the client you sent it to.  Let’s make it easy for them to work with it.  Raveal adds bookmarks for each section to quickly jump around.  The last bookmark takes the user right to your online profile.

Bookmarks for those reading your resume

What if you didn’t get the job or it is postponed?  What if your resume goes on file with the company?  Raveal adds metadata to the PDF so that it is properly indexed with whatever computer or system that will be storing it.  Your profile will be found again!

Metadata to search your PDF

Not just the standard title/author/etc metadata, but Raveal also adds profile specific keywords.

Keywords to search your PDF

That’s it for now.  We are working on some other great tools to give you.  I can’t wait to talk about them!

“Managing Your Career as a Business” sounds like something I’ve heard of before.  :)

Check out the article at New York Times:

http://www.nytimes.com/2009/10/15/business/smallbusiness/15edge.html

It makes great points and adds credence to our exact same thoughts: “You are your own company.”

When times get tight with your employer, you are expendable.  You have to be prepared for the worst.  Think of yourself, your family, and your career first.  Manage all of that as if it was your company.  Because it is.  You and your wife/husband/partner make up your board of directors.  Your share holders are your children and sometimes your relatives.  If the worst has happened, be prepared to do whatever it takes.

One of my close friends works in the mortgage industry.  (He is a good person, despite that )  His coworker, Fred we’ll call him, was a very smart guy with a family and made very decent money.  In the summer of 2008, Fred saw what was going to happen to his company.  He immediately started looking for a new job.  But no one was hiring anyone with his experience.  If he was laid off, his savings wouldn’t last long.  What did Fred do?  He took a job at car wash.  I kid you not.  He started washing cars!  Fred was laughed at by all of his old coworkers.  Months later, when they were all laid off, without any jobs, Fred was still paying the bills.  And my buddy was jealous that Fred was humble enough to find work at a car wash.  Even those jobs weren’t available anymore.  This is a true story.  Luckily for my buddy, he is still young and doesn’t have a family.

Back to the NYTimes article, my favorite quote:

Then this year, Ms. Chen said, things changed. “Many companies noticed that after all the layoffs and uncertainty, skilled people were available at lower salary demands than in former years. And now business is very active.” The lesson of the economy’s ups and downs, she said, is that workers cannot let hard times or lower pay discourage them. “It’s a change in the market, not a depreciation of who you are as a person.”

That last line is super important to dwell on.  If you have been on a, thus-far, unsuccessful job hunt, you are no doubt discouraged.  Keep your head up and keep pushing along.