Google Instant Search Debuts

This is a welcome and logical development in the world of web search: get realtime google search results as you type. No need to hit that search button anymore. What has stopped a search engine from doing this previously? I’d wager nothing, but it sort of takes the search out of search engine and dilutes the magic of googling a bit. I’m satisfied with the interface and results it produces, although there needs to be more of a notification as to when the search results are updating.

Check out Google’s pep talk about it:

Tidy up your forms for a painless experience

A recent inquiry by uxmovement.com shows that users get more out of having form labels above the fields rather than beside them. Having it illustrated makes the point quite painless and straightforward:

visualfixations

It just looks cleaner and it uses the natural flow of the eyes to help in processing of information. This is something that every designer has either overlooked in the past or simply neglected.

Keep it above the fold

Jakob Nielsen again reiterates how important it is for web designers to consider the mythical page fold as a tried and true way to target users and gain their attention.

He shows that the first 800 pixels from the top of the page are the most important, with 300-400 pixels garnering the most viewing time. Users spent about 80% of their time above the 800 pixel mark and about 20% below it. The fold represents what a user sees without having to scroll down when viewing a web page. Continue reading

Netflix Goes Mobile, Pay TV Subscriptions Drop

Netflix, Hulu, Tv.com, Amazon, and even YouTube are bombarding the streaming entertainment arena with awesome content, tons of programming, and options for everyone. These services are popping up everywhere from Nintendo Wii consoles, TVs and now your beloved iPhones and iPads – soon to be on the Android platform as well. The goal seems to be heading towards making Netflix ubiquitous making it accessible to anyone and everyone on nearly any platform or device.

Just last week Netflix announced their first serious foray into the mobile application market and beat out other similar services by releasing their own app designed to allow users to manage their queue and stream content directly from Netflix over WiFi or 3G. If you’ve got the data plan to handle it, it looks like you’re about to be connected to entertainment no matter where you are.

This announcement goes hand-in-hand with the uptick in use of networked backed services like Hulu and the first time ever drop in pay-TV subscribers. The market as a whole lost over 200,000 subscribers and I’m sure part of that group are still glued to their TVs, mobile devices, and PCs happily watching streaming on-demand content.

It’s about time that old media realize that pay-TV is quickly becoming a thing of the past.

Netflix iPhone App Video from Netflix on Vimeo.

Specify Stylesheets for Different Media Types with $html helper

I’m expanding my CakePHP experience and now I’ve delved into displaying the application on multiple devices and of course, print.

Print stylesheets can be tricky to design, but it took me a while to figure out how to have cake automatically add them to the template using the $html helper.

<?php 
	//you specify the file name first, then the media types at the end.
	echo $html->css('simple', null, array('media'=>'print'));
	//
	
	echo $html->css('regular', null, array('media'=>'screen')); 
	echo $html->css('simple', null, array('media'=>'print')); 
?>

This will output something like this:

<link rel="stylesheet" type="text/css" href="/css/simple.css" media="print" />

Demystifying Web Development: What It Means to Be a Modern Web Developer

The world of modern web development is not understood by anyone outside of it. The intricacies, the intense segmentation, and the true strength of the professional community is often overlooked by the layperson.

“So what do you do?” they ask. “I’m a web developer.” I pause for a moment. “I build and design websites and web applications.”

“Oh cool I used to do some of that at my old job with Frontpage.”

I’ve had about a million conversations with people that start off like this. For sake of brevity, I usually leave things at this – but secretly I’m steaming inside. Not necessarily because they’re not familiar with my realm, but because how the profession is written off as something almost trivial. The value is constantly being eroded and stereotyped, making educating clients and consumers that much more difficult. This is partly because to get your hands dirty in development the only thing you really need is a text editor and a web browser. That’s where many people think development ends.

If web development was an iceberg that would be the 18 feet sticking out of the ocean. What you don’t see is the remaining monstrosity that sinks the hive-mind Titanic as it approaches and blows people’s minds so much so that they nearly refuse to acknowledge it exists or is even nearly as complex as it truly is.

Being a web developer means three things:

  1. You program for the web – anything you program or develop is meant to be executed on a web server or presented to an end-user in a browser
  2. Most of the work you do is never seen or understood by those who use it. They just accept that it works and don’t ask questions as to why or how.
  3. You have a specialty. You are awesome using AJAX, web design, PHP, Haskell, ASP.net, Actionscript, Zend Framework or any of the other 149.54 million tools, methods, languages, and utilities that help make web development such an interesting field.

This escapes a lot of people even in 2010. Think of it in terms of construction. You want to build a house (or website) so you draw up plans that meet your needs, find a suitable plot of land for it, start estimating costs, and start assembling a team to complete the job. You’re going to need a general contractor or foreman, a drywall crew, framing crew, clearing crew, electricians, plumbers, masonry crew, cabinet crew, and the list goes on. And within each of those general fields there are also long lists of specialties. You have to be careful to select the right candidate for the right purpose and stay mindful of each crew’s specialties and core competencies. Don’t expect your master masons to be able to run electrical wiring…

The same is true in web development. Given the nearly endless array of specialties and qualities that development professionals possess, the world that consumes the fruits of our labor needs to know what it truly takes to make a monster like facebook, a twitter, a blog, or even a digg or reddit. This comes through on sites like craigslist where someone wants to create the next facebook or myspace – for a budget of $220 and a 24 pack of Miller Light. There is no concept to what it takes to actually create something from the ground up, make it function properly, design a great user interface, and get people to start using it.

As professionals we all develop specialties to serve a certain purpose – it’s about time we stop generalizing and start educating. The next time someone asks what you do for a living tell them as succinctly as possibile – any of the following are good examples:

  • “I’m a web developer. My main focus is developing applications that balance the servers for large sites like facebook and myspace so that they will run smoothly even though 18 million people are using them at one time”
  • “I’m a web developer specializing in designing highly usable web sites and applications. I make the web sites your love easier to use – so it just works the way you expect it to.”
  • “I’m a web developer and build the technology that powers web-based video streaming so you can watch the latest “Keeping up with the Kardashians” on hulu.”

Don’t cop out. Tell people what you do – don’t be mad at them for having no idea what it means to be a developer. Educate them.

Ubuntu 10.04 LTS: First Thoughts

I have Ubuntu installed on my laptop as a dual-boot and on my work PC inside a VirtualBox. I use it for all kinds of things that Ubuntu just does better – especially heavy development.

After yesterday’s public release of Ubuntu 10.04 LTS I decided it was time to get my hands dirty and install the new version.

A few things stuck out during the first boot and installation process:

  • Slick Graphical Interface during installation (see screenshot)
    4-30-2010 1-39-49 PM
  • More emphasis on making the user aware of features: sliding panels explaining features and benefits during installation just like Windows OS install process
  • Seems more readily geared towards a wider user base – features like music store, built-in social networking and instant messaging platforms
  • It boots up in seriously just a few seconds. Really great benefit.
  • Default theme and desktop configuration are attractive…and surprisingly not orange/brown!4-30-2010 1-53-32 PM
  • Tweaked window layout: note the ‘close’, ‘minimize’ and ‘maximize’ buttons in the top left
    4-30-2010 1-56-47 PM
  • The feel of the OS seems much more familiar than it used to. I’m impressed and I think this is a great leap towards a wider user-base.

Well, those are some first-impressions. I’m really excited about the level of polish that has been reached with Ubuntu 10.04. Props to everyone involved in the project.

Dynamically Sync Your Files With Amazon S3

I’ve been getting used to using the cloud over the past week or so and I’ve got to say it’s much easier to manage than I had imagined. I know there are tons of great desktop clients to manage your S3 buckets and files, but I wanted something to do all of the management for me – to make things simple.

I’ve put together a script using Undesigned’s awesome PHP S3 class that will scan a directory, compare all of the files in the directory to those in a given directory on your bucket and then upload missing files or replaced unmatched files.

You could set this PHP script up to do a lot more than it does currently, as it was set up to be a quick and dirty solution. Here’s the basis of it. You can download the full script and classes below.

//check to see if the file exists and can return file info
if (($info = $s3->getObjectInfo($bucket, $uri)) !== false) {
//if the local hash doesnt match the remote hash, upload and replace the file
if($info['hash'] <> $local_md5){
print_r('Can\'t match file: '.$the_file.' -- Now uploading');
echo "Putting $the_file . . . at $uri ";
//this will upload files with private permissions - you need to set the permissions as
//needed by changing S3::PRIVATE to whichever level you need.
if($s3->putObject(S3::inputFile($object), $bucket, $uri,  S3::ACL_PRIVATE,
array(),
array( // Custom $requestHeaders
"Cache-Control" => "max-age=315360000",
"Expires" => gmdate("D, d M Y H:i:s T", strtotime("+5 years"))
)))
echo "OK\n";
else
echo "ERROR!\n";
}
else{
echo "The hash values for $the_file are equal ";
}
}else{
//file doesn't exist in your bucket, so upload it
print_r('Can\'t find that file: '.$the_file.' -- Now uploading');
echo "Putting $the_file . . . at $uri ";
if($s3->putObject(S3::inputFile($object), $bucket, $uri,  S3::ACL_PUBLIC_READ,
array(),
array( // Custom $requestHeaders
"Cache-Control" => "max-age=315360000",
"Expires" => gmdate("D, d M Y H:i:s T", strtotime("+5 years"))
)))
echo "OK\n";
else
echo "ERROR!\n";
}
Get the Class Get the sync script

Google gets a facelift

Google search results It looks like Google has finally come up with a search results page to go along with their revised home page with fade-in effect. The UI is a little bit different, most notably the filters along the left sidebar, as you can see in the screenshot. Coincidently the first search result on that page is for Bing.

I’m a big fan of the filters they provide. The time sensitive filter is probably something I’ll use a lot, especially when researching anything programming related. I can filter to make sure the information is current and still applicable.

google search results with screenshot filterYou can also sort results along with a screenshot of the page itself. I really like this feature for the simple fact that you can get a quick glance of a page design and main content elements without diving all the way in.

Overall it’s a big move for what everyone across the net is used to seeing. At the same time it’s still pretty vanilla – but useful in all the right ways. I’m curious to see if a lot of people even notice.

Head in the clouds: Amazon s3 and CloudFront with Joomla! and PHP

I’m managing a LAMP server on a virtual dedicated setup and have recently run into some performance issues. During periods of higher user visits the CPU usage shoots up This could be partly because of the platform running on it, but I’m not sure that the PHP scripting is the root cause.

To alleviate some of my concerns, I’ve moved most of the static images, css, and javascript over to Amazon s3 and set up a CDN for that data with CloudFront. It’s fast. Really fast compared to what we’re used to. It has drastically helped load times and from what I can tell it is improving the performance of the site altogether by reducing the load on the server.

Caching is out in full force for the main joomla site while the content being served from amazon s3 is gzipped, minified, and speedy. I’m still working through YSlow to get things even more streamlined, but I’m more satisfied now than before.

I was using a minify component to grab scripts on-the-fly and combine them but that’s just a nightmare for performance so I’m going to revamp and get the remainder of those files out to the CDN and compressed.

For those who are interested, I’m serving gzipped js and css but using some varied methods also depending on if the connection is secure or not. Since S3 does not function over https using cnames, I had to set up a check to see which URL to use for my CDN files.

Something like this did the trick for my Joomla! template (placed in the template’s index.php):

//check to see if the browser supports gzip content
$gz = strpos($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip') !== false ? 'gz' : '';
if ($_SERVER['HTTPS'] != "on") {
//insert your code to execute over http here
$document->addStyleSheet('https://yourbucketname.s3.amazonaws.com/templates/css/style.'.$gz.'css');
}
else{
//enter your https code here
$document->addStyleSheet('http://cdn.yoursite.com/templates/css/style.'.$gz.'css');
}

I’ve got this loading the CNAME urls such as cdn.yourdomain.com/css/style.gzcss for the non-secure connection but using the secure URLS that amazon provides for the secure connection.

And no, style.gzcss is not a typo. There were issues with how the browser was grabbing files with the regular style.gz.css extension, even when I had set the content-encoding to gzip and the content-type to text/css. This has worked for me, but there may be a more elegant solution floating around. Cloudberry explorer has been a great asset in doing this quickly and efficiently.