2009 × JAY×R

Archive for 2009

The Microsoft Experience

Wednesday, October 28th, 2009

On October 22nd, 2009, Microsoft opened their first retail store in sunny Scottsdale, Arizona. I was there to witness the event.

It’s no secret that Microsoft Stores are a blatant rip-off of Apple Stores. And from Microsoft’s behemoth coffers, they spared no expense. It’s impressive, but ultimately raised more questions than answers.

An intriguing feature of the Microsoft Store is their “Signature Service.” They take the PC you want to buy, remove it from the manufacturer’s box, remove stickers and plastic wrap, then place it in a white, styrofoam-lined box with a Windows logo. This is after, of course, they have removed all the “unnecessary malware” from the machine, “to provide a better experience.” From this, we understand that Microsoft will undermine their partners marketing in an effort to provide a better experience. Huh? First question: Why wouldn’t you just get a Mac?

But there are more. Marco Arment has a ton:

“To what extent will they offer PC support? What if you didn’t buy the PC from a Microsoft Store? What if it’s one of the same models that the Microsoft Store sells, but you got it from Costco or the manufacturer’s website? What if you built your PC yourself from parts? Will support ever cost money, and if so, how much, and under what conditions? If it will be mostly free or cheap, what’s stopping Microsoft Stores from becoming overwhelming zoos of people waiting on line to plunk down their crapbooks with malware infestations? And if a lot of people go to the Microsoft Store for support, how will this affect the retail partners, such as Best Buy, who make a lot of money performing PC support services today?”

Marco is right in questioning how far Microsoft is willing to go to pursue their goal (be more like Apple?). A series of extremely expensive flat screens line the interior walls of the Scottsdale Microsoft Store. They act together to display high definition content that sweeps around the store. Does Microsoft intend to sink this much money into all of their stores?

Is this all a marketing blitz to recover from the failure of Vista, or is Microsoft here to stay? How does Microsoft aim to compete with Apple Retail, which has established over 200 stores world wide? Steve Ballmer has been downplaying Apple’s popularity lately, saying that Microsoft is a company hundreds of millions of customers, while Apple’s share is quite meager by comparison. But does Microsoft want every PC in the world to be sold in their white styrofoam-lined boxes? Are they ready to?

The final question, then, Why is Microsoft almost nine years late to stealing this idea from Apple? They’ve got a lot of catch-up to do.

I’ve posted some pictures of the Microsoft Store on my Flickr Account.

Tags: Microsoft
Posted in Apple, thoughts | Comments Off

Some Notes On iTunes LP

Friday, September 11th, 2009

It’s clear that I’m pretty excited about iTunes LP. The “deluxe album” format from the iTunes Store is an attempt to revitalize music sales by providing an immersive digital experience complete with detailed art reminiscent of when people used to buy records. Feature-wise, an iTunes LP is a DRM-free album in high-quality 256kbps AAC format, along with digital extras (visualizer(s), photos, videos and interviews) wrapped in a custom WebKit-powered site.

This morning I bought Jay-Z’s Blueprint 3, as well as The Doors iTunes LP, and am very impressed. Below I’ve included some screenshots as well as my thoughts on the experience.

General Use

When you purchase an iTunes LP, the music files begin downloading followed by an additional (hefty) file with an “.ITLP” extension. The .ITLP file itself can be over 500MB.

Once you double-click an iTunes LP in iTunes, it takes over your entire window with a WebKit view. A photo fades in and an audio snippet representative of the album will start to play (about 30 seconds). A list of links leads you to the most obvious feature of the iTunes LP: photos, videos and lyric views.

The LP frame seems to have a width and height of 1280×720. This is nice, but means I get ugly scrollbars all over my 13″ MacBook screen. I switched to a larger monitor for the screenshots, so here are some shots of the main features:

Click for full-size.

Hover for alternate image. Click for full-size.

Click for full-size.

Hover for alternate image. Click for full-size.

Visualizer

A wonderful thing happens when you click “Play All” on an iTunes LP — you are treated to a feature I dub iTunes LP visualizer. The visualizer is the “surprise and delight” feature of iTunes LP; a creative display of digital art.

Jay-Z’s iTunes LP album comes with three different visualizers that cycle through at measured intervals. The initial visualizer shows audio waveforms. I mistakenly thought the waveforms were dynamically generated by the music until I watched for a while. Here are the screenshots of the three visualizers, respectively called “Waves”, “Songlist”, and “Puzzle”.

Hover for alternate image. Click to see full-size.

I’ve also included the only visualizer from The Doors album.

Hover for alternate image. Click to see full-size.

However, listening to music in the iTunes LP introduces some unfortunate user interface problems. Similar to Genius Mixes (also new in iTunes 9) there is no way to ask iTunes to send you to the currently playing song. This means that unless you leave the LP view you cannot rate the song or view any other metadata.

This also causes a problem if you leave the iTunes LP interface to browse your library, then want to return to the LP. The only way is to select the iTunes LP from your file listing and double-click. This results in the iTunes LP site loading from the start and you losing your place through the album.

Fortunately, the usability issue does not cause conflicts with the Play Count, which functions as expected.

WebKit and iTunes LP Internal Structure

I was very curious about iTunes LP and its use of WebKit so I decided to go rooting around in the Finder files. Just like iPhone app files (.IPA files in the Finder), I suspected that changing the .ITLP extension to .ZIP would reveal an archived folder. I was right; once you change the extension you can browse all the files inside. In fact, you can simply right-click and “inspect package contents”, however, it remains to be seen if Apple will take away this functionality in the future. Plus, adding the .ZIP extension allows you to browse the folder without a right-click. Here is what the files inside the The Blueprint 3 iTunes LP look like:

Internal Structure of an iTunes LP, Jay-Z The Blueprint 3

The iTunes LP experience is accomplished with HTML 4.01, CSS and JS. The interface feels very Flash-like, but there is no trace of it. The CSS animations are elaborate and smooth. Font files are referenced with an @font-face declaration in the CSS but there seems to be little to no use. Most text, even long passages of lyrics, is represented visually with a PNG file. I wonder if they originally intended to use font replacement for all text, but changed their mind.

Here is an example the lead me to the above conclusion which I found in The Doors package. The original file was named “song13BackgroundClean.jpg”, but the one used is “song13Background.jpg”.

Hover for alternate image. Click to see full-size.

Perhaps unsurprisingly, most everything in an iTunes LP works in the latest version of Safari (4.0.3 at time of this writing) except when something tries to call iTunes (like a movie file). Here is what the index.html file looks like when you open it with Safari:

Click for full-size.

The Doors package was littered with leftovers obviously intended for internal use, such as reference images for a completed page and style guides for layout. Here is one such image:

Click for full-size.

DRM

I didn’t find much in the way of DRM on the iTunes LP. Though your iTunes Store Account is recorded inside the .PLIST file, everything worked even when de-authorizing my computer in the middle of play, as well as removing the reference all together. I would like to see if it would be possible to roll your own iTunes LP by modifying the included .PLIST to point to different sound files.

Conclusion

As a music fan, and as a web developer, I couldn’t be more pleased with the new iTunes LP offering. If your audience is significantly Apple-oriented (e.g. a site about Mac rumors or a popular iPhone app) this proves that you can provide an incredible experience using only JavaScript and some proposed CSS3 properties.

The visualizer is a fun way to watch your music. And impressive; a friend of mine asked, “Is that Flash?” I may learn a thing or two about CSS animation by diving into the code and I encourage you to as well.

Here’s hoping that square blue badge shows up in the iTunes Store a lot more in the future. iTunes LPs are a really fun way to enjoy your favorite albums.

###

P.s. To make a Smart Playlist of all your iTunes LPs, configure so that “Kind” contains “iTunes LP”. I’ve included this because it took me a while to discover what criteria worked, and I thought I’d save you some time.

iTunes LP Smart Playlists

Short URL: http://jwr.cc/x/3

Posted in Apple, design, HTML and CSS, iTunes, JavaScript, music, thoughts, WebKit | 164 Comments »

iTunes 9 and the Future of WebKit

Thursday, September 10th, 2009

At a Special Media Event on Wednesday morning, Apple unveiled the latest iPods along with a new version of iTunes, version 9.

Apple revitalizes their iPods every year, so this was not unexpected. However, what surprised me was what I first attributed to idle commentary: the redesigned iTunes Store and new iTunes LPs render in WebKit.

Some may overlook this detail, but keep in mind Apple has always used iPods+iTunes to push their digital agenda. And the push for WebKit will be no different.

The first iPod and iTunes combination on Windows opened up QuickTime for millions of users. Now it is a healthy competitor for web media, right up there with Flash. (Remember when music and videos on the Web would occasionally pop up in Windows Media format? Yuck.)

Today, MobileSafari on iPhone provides users with a WebKit-powered “killer app” that makes people actually want to browse the web with their smartphones. Apple’s iPhone OS accounts for an astounding two-thirds of mobile web traffic. And the competition has taken notice: in August RIM acquired Torch Mobile, hoping to bring the WebKit experience to BlackBerries.

The possibilities with iTunes LP are really terrific. The announcement led Engadget frontman Joshua Topolsky to proclaim “Apple has officially reinvented the 12-inch.” Apple is constantly setting design trends and iTunes LPs will be no different. I can already imagine a swarm of imitations from devoted music fans flooding the net with intricate tributes to their favorite artists that render best in WebKit browsers. Not to mention what iTunes LPs may look like on your 50″ (Apple) HDTV.

While most PC users may have never heard of Safari for Windows, iTunes will soon establish a record amount of computers on which WebKit is the conveyor of premium web experience.

It won’t be long until WebKit rules the PC world too.

###

Short URL: http://jwr.cc/x/2

Posted in Apple, iTunes, Mac OS X, thoughts, WebKit | 2 Comments »

Setting Up Your Mac For Local Development Using Coda, WordPress & MAMP

Monday, August 10th, 2009

WordPress is not just for blogs. WordPress is a highly sophisticated content management system that you can use to develop and manage your client’s professional websites. Best of all, it’s entirely free. To get started it helps to experiment without the hassle of publishing files to the Internet. With a Mac, you already have the basics for an excellent local development environment.

In this tutorial, I will describe setting up a folder on your Mac that you can use to practice building websites with PHP and a MySQL database. Before we begin you will need

Let’s get started.

1) Download WordPress from WordPress.org. Unzip it to find a folder called “wordpress”. Rename it YOUR_PROJECT_NAME (Mine will be called “jay”). Drag it to the Sites folder in your Home directory. For easy access, I’ve added the Sites folder to my Finder window sidebar.

Add the Sites folder to your Finder window sidebar

2) Download the free MAMP software from Mamp.info and install. MAMP stands for Mac, Apache, MySQL and PHP. This app helps manage our MySQL databases in a straight forward way.

Open the app and click “Preferences…”, then select the “Apache” tab to select our Document Root. We want to select the Sites folder located in your Home folder. The path should read /Users/YOUR_MAC_OS_X_USER_SHORTNAME/Sites.

Set up MAMP to use ~/Sites as the Document Root

Once you activate MAMP and get the green lights, test if it is working by opening your browser and going to http://localhost:8888/ You should see the contents of your ~/Sites directory. Remember, we’re preparing a local development environment. “Localhost” means your computer, so no one else in the world will be able to see these files in their web browser.

Okay, MAMP is working, and the MySQL is just waiting for us to give it some database tables. Go to http://localhost:8888/MAMP (must be all uppercase) and click “phpMyAdmin”. Once there, “Create new database” with YOUR_PROJECT_NAME. My database name will be “jay” to match my project.

3) Now we just have to match WordPress with the database. Access the YOUR_PROJECT_NAME folder in ~/Sites and rename the wp-config-sample.php to wp-config.php. Open the file to edit the content. DB_NAME means database name, so enter YOUR_PROJECT_NAME. The DB_USER and DB_PASSWORD are both “root”. Leave “localhost” as the server, as the server is our local computer.

Remember to change the name of this file from wp-config-sample.php to wp-config.php

4) Visit http://localhost:8888/YOUR_PROJECT_NAME and you will see the famous five minute WordPress install. Set up the blog name and email, and you will be given a password. (I copy and paste this generated password to get into WordPress, then change it to something easy to remember right away. I use the same simple password for all my WordPress development sites, since they are not live on the Internet.)

The famous five minute WordPress installation process begins

WordPress is now configured to work on your computer, but will only be accessible locally. The final step is to set up Coda to access the directory.

5) Go to Coda, enter Sites view (Command 1) and “Add Site…”

Nickname: YOUR_PROJECT_NAME
Root URL & Local URL: When developing locally, this will simply be used to generate a thumbnail for you to see your project in Coda. These can be the same URL, e.g. http://localhost:8888/YOUR_PROJECT_NAME
Remote Root: None
Local Root: You may use the “Set…” file browser to find your project folder in the Sites folder, or copy and paste this template: /Users/YOUR_MAC_OS_X_USER_SHORTNAME/Sites/YOUR_PROJECT_NAME/
Connecting, Terminal and Source Control: Do not worry about these. You do not have to configure them for local development.

Setting up your new WordPress site in Coda

Short URL: http://jwr.cc/x/1e

Posted in Apple, design, Mac OS X, tutorial, WordPress | 19 Comments »

My Favorite WordPress Plugins

Monday, August 3rd, 2009

The abundance of “Top Ten” Lists of WordPress Plugins helps reinforce those plugins that are extremely necessary; like the All In One SEO plugin, or the Google XML Sitemaps plugin. However, my most essential plugins are never listed. So, while some of the following may not be as sexy as the Increase Your Traffic By 2000% plugin, they do come in extremely handy.

Broken Links Checker plugin by Janis Elsts. Aptly named; once installed, an administrative panel in the WordPress Dashboard displays broken links found within your content.

Nice Search by Mark Jaquith. Takes your ugly search URI (/?s=search-term) and makes it pretty (/search/search-term). I am a big fan of human-readable, hackable URLs.

Improved Include by Vito Tardia. My buddy, Paul, taught me this trick first day on the job: Let’s say you have a complex homepage with three columns of separate content. Laying out this page in HTML/CSS is easy… unless you need the client to be able to change the content. Just make separate pages to hold the specific content and use Improved Include to pull that content in:

improved-include

Of course there are a lot more uses for this, but I’ll leave that for you to discover. I hope you’ve enjoyed this article on WordPress plugins, and maybe even learned a thing or two. What are your favorite, unknown WordPress plugins?

Posted in design, favorites, Plugins, WordPress | No Comments »

Fear

Wednesday, July 29th, 2009

Fear is the great motivator. Fear is a motivator for the animal kingdom, in which only the strong, or quick, survive. Fear is what will keep you alive.

When I lived in Honolulu I was learning to surf. Sitting in the lineup — Waikiki skyscrapers behind me, vast Pacific Ocean blue out in front — I’d see a hill of water rushing towards me and start to paddle. As a beginner I got my share of false starts. I’d see a small hill that looked like it might turn into a wave, and it wouldn’t even break; it wouldn’t turn into a wave that I could ride.

Pretty soon I got the hang of it, but I began to think, “What is the wave that will push me further? What is the next wave that will make me a better surfer?”

The answer I have found is: “the one that scares you.” The small waves you get used to. But when you see that huge wave in front of you, coming for you fast, your heart jumps into your throat as you start paddling hard to catch it. That’s when you know you’ve got the wave that’s going to push you further. The wave that’s going to make you a better surfer.

In business, though, we are often afraid to take risks. We’re afraid to try something different, or push the envelope. We’re afraid that trying something new will alienate us from past clients.

But at Fasturtle we have a saying: “If you do what you’ve always done, you’ll get what you’ve always gotten.” If you’re satisfied with what you’ve accomplished and you don’t ever want to grow, then keep doing what works for you.

If you want to push ahead with anything — you’ve got to have that fear.

Posted in thoughts | 1 Comment »

Return

Tuesday, July 28th, 2009

Back in the day, the educated citizen had access to much less information than we do today. Yet one must imagine a scholarly type would read and reread the same texts, analyzing them in depth, thinking in long form and essentially becoming an expert on the material. They could pull quotes at a moments notice! Today, I just post quotes to my Tumblr so I can Google them later.

Instead of bookmarking countless articles, try going over your Instapaper archives and see what wisdom you find there. Maybe even read a real book.

Posted in thoughts | No Comments »

Help Me Study For Stanford CS193P

Monday, June 29th, 2009

Are you an iPhone developer? Me neither! But I’d like to be…

I have been trying hard to get into the material provided free of charge by Stanford for their CS193P course covering Cocoa Programming (iPhone Application Programming). July seems the perfect month to quit procrastinating, and start learning — the original course started in April, the 1st of which was a Wednesday, just as this July.

You can download the iTunes U podcasts to follow all the lectures, and download all the course material on the Stanford website for CS193P. If you’d like to get all the information in one fell swoop, I’ve created ~~a torrent file for CS193P~~ with all the files you will require. It is about 11GB and includes all files from the Stanford CS193P class, Cocoa Programming – iPhone Application Programming. Taken from http://cs193p.stanford.edu/ and iTunes U. (Complete file list.)

I can be reached via email or on AIM/iChat. More contact information can be found on my website, http://jayrobinson.org.

I bought my developer’s license from Apple to help give me the financial encouragement, so I’m sure I will be frequenting the developer’s forums. Join me in my study of iPhone programming!

Update (12/17/2009): Sorry, I couldn’t host the torrent very long on my MacBook!

Posted in Apple, iPhone, programming, thoughts | No Comments »

Reduce Eye Strain While Working On Your Mac

Monday, March 16th, 2009

Please complete this sentence: Hi, my name is _________, I’m a ( designer / developer) and I stare into a lightbulb all day.

You with me so far? Staring at a bright white background while you read and work is like staring into a light bulb. It’s only a matter of time until as computer junkies we need thick black-framed glasses. I’d like to tell you about two applications I use to save my sight, and they both work great on Mac OS X.

The first app helps you remember to give your eyes a pause rather than remain fixed on a screen for hours on end. AntiRSI gently reminds you every few minutes to let yours eyes focus on things at different distances around the room. All times are adjustable, so Customize AntiRSI to your workflow: Make micro pauses from 1 to 30 seconds long, and the time between pauses from 1 to 16 minutes; let it remind you to get out of your chair for a few minutes each hour. AntiRSI has a pie-chart icon that updates as it sits in your Dock so you can recognize how long you’ve been working.

Reducing Eye Strain While Working On Your Mac with AntiRSI.app for Mac OS X

The next app is Nocturne, which helps invert screen colors to your liking. As a designer you know that light text on a dark background is not always the best for the masses — but as a developer, you can really appreciate some inverted colors when you’re staring at mountains of code all day. Nocturne sits in your Menu Bar and shows up as a little Sun. Click on the Sun to switch to Night Mode and invert the screen. Choose grayscale, inverted, or change colors to something you find more soothing. Nocturne is great when you’re working in the dark, or simply to avoid some eye strain during the day.

Reducing Eye Strain While Working On Your Mac with Nocturne.app for Mac OS X

Keyboard Shortcut Tip: If you don’t want to download an application, check out your inverted screen right now by pressing Command-Option-Control-8. Press again to switch back.

As one last tip, simply try turning the brightness down on your monitor. While working with my 24″ iMac, I keep the brightness on the lowest possible setting and it’s still very bright. Do you have any tips that keep you from turning into the Hunchback of Notre Dame after hours on the computer?

Tags: Anti-RSI, Nocturne
Posted in Apple, Mac OS X | No Comments »

An Interview with Jay Robinson, Web Designer at Fasturtle

Wednesday, February 4th, 2009

Waferbaby.com recently featured a series of interviews called The Setup, which ask the general question: “What do people use to get the job done?” Focusing on designers and developers, the interviews are short, to the point and provide an interesting mix of software, hardware and ideal interaction theories.

I thought I’d use the same format to introduce myself to you. I hope you enjoy this interview with myself!

An Interview with Jay Robinson

So who are you, and what do you do?

My name is Jay Robinson and I’m a web designer and developer at Fasturtle Interactive. I’ve dabbled in making websites since I was about 12, but didn’t take it seriously until (more…)

Posted in Apple, design, favorites, HTML and CSS, iPhone, JavaScript, Mac OS X, PHP, WebKit, WordPress | 3 Comments »

JAY×R Jay Robinson designs the web @Sencha.

Archive for 2009

The Microsoft Experience

Some Notes On iTunes LP

General Use

Visualizer

WebKit and iTunes LP Internal Structure

DRM

Conclusion

iTunes 9 and the Future of WebKit

Setting Up Your Mac For Local Development Using Coda, WordPress & MAMP

My Favorite WordPress Plugins

Fear

Return

Help Me Study For Stanford CS193P

Reduce Eye Strain While Working On Your Mac

An Interview with Jay Robinson, Web Designer at Fasturtle

An Interview with Jay Robinson

So who are you, and what do you do?

Pages

Archives

Categories