VG.no is rickrolling us… every day

Most likely, you’ve encountered the internet meme of rickrolling, where you get fooled into viewing the music video for the Rick Astley song “Never Gonna Give You Up”. It seems like the developers at Verdens Gang, Norway’s largest newpaper, has taken a liking to this meme by putting the song in their header response:

Thanks to my friends: Lasse Lambrechts for pointing this out to me, and to Vidar Løkken for writing about this six months earlier.

Review: Wimp

If you haven’t been living under a rock for the last 6 months, you’ve undoubtedly heard of Spotify. Wimp is a new challenger in the music streaming world. From the Norwegian company Aspiro, it is currently under development with a private beta period. I was lucky enough to receive one of these invites. Here are my initial thoughts. Naturally, most of my observations will be compared against Spotify’s features.

The application

Wimp is a music service that gives full access to a library of several million tracks. You are free to play any music whenever you like, create your own playlists and build your own music library. You are also able to share your playlists with your friends.

Wimp is developed on top of the Adobe Air platform. This makes Wimp easily deployable on the three major platforms (Windows, Mac, Linux). While this a great plus, the interface feels a bit sluggish compared to a native application. I guess this is the downside of using the Flex/Air platform. The app is currently only available in Norwegian.

Registration

The registration process was fairly easy and fool-proof. Instead of verifying the account through email, I received a confirmation code on my cell phone. You log in with your cell phone number and password. I cannot say for sure, but I’m guessing the cell phone verification as of now limits Wimp’s user database to people with Norwegian phone numbers.

Home Screen

Wimp has a complete home screen with three album ads, and newest/top albums and tracks. I’ve utilized this home screen more often than the home screen of Spotify. I guess this is because everything is directly available in Wimp, as where in Spotify, you would have to click the alternative tab view on the home screen to view the top lists.

Recommended

Wimp has a left column that stays the same where ever you navigate, just like iTunes Music Store or Spotify. What I like with Wimp, though, is the editorial playlist selection at the top, called “Vi anbefaler (We recommend)”. Here, you will find gems such as “Klassiske rockealbum (Classic Rock Albums)” or “Hip-Hop 101″. The playlists are of high quality, and I’m looking forward to more recommendations in the future.

Artist/Album

I like the album screen. In addition to a standard artist biography and image, it supplies us with external links to Last.fm and YouTube. The YouTube link is strictly a normal band name search on YouTube.

I really enjoy the tab view below the artist information. Here, you can filter the music with categories such as Albums, Collectors Edition, Singles or Most Popular Songs.

The album screen is identical to most other apps, like iTMS or Spotify. If you find the song you are after, you can click on it and it will play instantly. I am having trouble with the track seeking, though. If I want to jump to the middle of the song, the seeker bar would jump right back to its original position, ignoring my wish. I’ve encountered this problem a couple of times in Flash development myself, therefore I’m guessing this is a Flash issue. I’m not sure of the track bitrate, but as far as I can tell, there is no difference from Spotify’s track quality.

Search

The search results are displayed in a normal playlist. Above the list, an extra grid displays the results as artists and albums. I love this quick overview, as it is much faster and easier to navigate than a long playlist. Hopefully, the search mechanism will be more versatile in the final version, as creative searches and spelling errors rarely give you what you’re looking for. For instance, “lizzy jailbrak” in Spotify would give me the results I’m after, but Wimp returns with no hits.

Playlists

Playlists are easily maintained, and works as expected, like iTMS and Spotify. Wimp also has shared playlists, and I was lucky enough to encounter a shared one on Twitter:

After pressing the link, Wimp opens with the playlist loaded on the screen. It is not automatically saved under “Spillelister (Playlists)” to the left. I have to press “Lagre (Save)” first. One thing we realised, is that the shared playlists aren’t collaborative. If I add Kjartan’s playlist to my Wimp account, I basically save a copy of his list. The changes I make are only visible to me. Aspiro has told us this feature will be addressed in the future.

Aspiro is hard at work with this beta, as their status screen in Wimp states, working on improvements on playlists and navigations. Planned features are integrated buy-and-download as well as mobile services. I’m not sure how they plan on making a profit, but rumor has it they will only offer subscriber accounts, and avoid free advertisement-based accounts.

After a couple hours of testing, I’m sure Wimp will be a worthy competitor of Spotify. The fact that Wimp is available on many platforms and has a mobile version on the roadmap, makes me think this application is here to stay.

Recommendation: Paparazzi!

Have you ever wanted to take a screenshot of an entire web site? Most likely, the site in question will have a vertical scroll, where you would have to take several screenshots and merge them together in Photoshop later on. It can be a lot of trouble.

Trouble solved

Paparazzi! is a small utility for Mac OS X that makes screenshots of web pages. More precisely, a screenshot of the entire web page, not just the part you can view with your screen resolution. To illustrate, here is a screenshot of my blog post Building Cappuccino 0.7b from source.

Screenshot of blog post

Building Cappuccino 0.7b from source

Playing with bleeding edge tools and libraries is always fun, and now I’m trying to merge my still-under-development apps from Cappuccino 0.6 to 0.7.

Cappuccino, you say?

From Cappuccino.org: Cappuccino is an open source application framework for developing applications that look and feel like the desktop software users are familiar with.

Cappuccino is built on top of a new language called Objective-J. Obj-J implements a lot of the syntax from Objective-C and APIs from GNUstep, as a subset language in JavaScript. Cappuccino gets a lot of inspiration from Apple’s Cocoa frameworks, and in the latest release (0.7b) they even provide a tool called nib2cib, which basically converts interface layouts from Apple’s Interface Builder to be used in Cappuccino. Obj-J and Cappuccino is released under the LGPL.

Building from source

Cappuccino has its own build system. In previous versions it uses the steam command, which is based on their own build application and ant. The new build system uses rake. According to 280north, rake is definately a better choice because of the dependency implementation and scripting abilities. At any rate, both steam and capp works as expected. I encountered a problem while moving from steam to capp, though, which is the reason I’m writing this blog post.

Setting up Cappuccino 0.7b

Thomas Balthazar has already done numerous screencasts on Cappuccino. One of his latest contributions is #5 - Playing with Cappuccino, where he explains how to install 0.7b. After following Thomas’ great how-to, I received the following error while trying to create a new application.

$ capp MyApplication
Exception in thread "main" java.lang.NoClassDefFoundError: objj

My build seemed to be missing important files like objj, objjc and cputil (in ~/objj_build/Release/env/bin/). The documentation on capp is still a little scarce as 0.7 is in early beta, but I gathered that I need the following libraries installed to build Cappuccino properly: Java 1.5, gcc, rubygems with the gems “plist” and “rake”. I had all of these installed, save “plist” which doesn’t ship as default with Mac OS X.

After upgrading every dependency in Mac OS X, I realised it was the default rake library that needed to be bumped up to version 1.8.4. The following command installs/upgrades rake:

$ sudo gem install rake

Remember to clean your repository before rebuilding the Cappuccino release, or else the build will fail and end up with the previous result.

~/your_cappuccino_git_folder $ rake clean
~/your_cappuccino_git_folder $ rake release

Check your ~/objj_build/Release/env/bin folder. bake, blend, capp, cputil, nib2cib, objj, objjc and press should all be present. You are now ready to build your first Cappuccino 0.7b application.

The following command will create a “Hello World!” application in a new “MyApplication” directory, and you’re good to go

$ capp MyApplication

Screenshot:

MyApplication - Hello World!

New Year’s Resolutions

Around new years I wrote myself a couple of new year’s resolutions. Since I didn’t have a blog then, I’ll post them now with a status update to see if I’ve been faithful to my list.

- Spend more time with friends. Too much work and traveling the last two months to make a difference.
- Work out at at least three times a week. I’m at between 2-3 times a week so far.
- Go on mountain walks more often. Still winter outside, but I’ve had a couple of walks.
- Read a book a month. Check. Read two books so far in ‘09.
- Drink more water and less coffee. Still too much coffee. I can’t help it!
- Learn Objective-J and Objective-C. Check! The biggest adjustment is the message-passing style. I like the languages so far.
- Pick up diving again I’m going on a diving weekend next week with the local diving club.
- Start a blog. You’re reading it…

Not too shabby

Integrating StatSVN with Phing

Have you ever wondered when your developers commit code? Or how much they commit? Or who has worked on what, and when? Then StatSVN might be the tool for you.

StatSVN

StatSVN retrieves information from a Subversion repository and generates various tables and charts describing the project development, e.g.

• Timeline for the lines of code
• Lines of code for each developer
• Activity by Clock time
• Authors Activity
• Author activity per Module
• Author Most Recent Commits with links to ViewVc
• Stats per directory
• File count
• Average file size
• Largest files
• Files with most revisions
• Directory Sizes
• Repository Tags Number of LOC per version.
• Repository tree with file count and lines of code
• LOC and Churn the evolution of LOC and the amount of change per day
• Repo Map the dynamic hierarchical view of your repo for the last 30 days

The current version generates a static suite of HTML documents containing tables and chart images. StatSVN is open source software, released under the terms of the LGPL, based on StatCVS.

It can, however, be tedious work to generate an SVN log file and run StatSVN with various option properties every time you want the latest digits. Phing solves this easily.

Phing, you say?

Phing is a project build system based on other projects like Apache Ant, make or Maven. Compile and build processes are not tasks we PHP developers are faced with on a daily basis. Phing intends to help us with testing, deploying, packaging or any other repetative procedure in our applications. Phing provides a large number of out-of-the-box tasks, and can easily be extended with your own custom tasks.

The integration

I’m not going into detail on how to set up Phing or StatSVN. You can set up Phing with PEAR, and put statsvn.jar within PATH on your computer.

Hooking StatSVN into Phing

To be able to run StatSVN in Phing, we simply need to define the StatSVN commands in a target configuration within build.xml.

<?xml version="1.0"?>
<project name="example" default="stat" basedir=".">
 
	<property name="build.stat.dir" value="build/stat" />
	<property name="build.src.dir" value="src" />
	<property name="statsvn.command" value="statsvn.jar" />
 
	<target name="stat">
		<echo>Creating folder...</echo>
		<delete dir="${build.stat.dir}" />
		<mkdir dir="${build.stat.dir}" />
		<echo>Creating SVN log file...</echo>
		<exec dir="${build.src.dir}" command="svn log -v --xml > ${build.stat.dir}/logfile.log" />
		<echo>Generating stat report...</echo>
		<exec dir="." command="java -jar ${statsvn.command} -output-dir ${build.stat.dir} ${build.stat.dir}/logfile.log ${build.src.dir}" />
	</target>
 
</project>

This snippet above will create a log file from your current repository checkout, and generate statistics based on it.

Running the task

$ phing stat

Now you have a web page in the folder build/stat containing a lot of statistics on your SVN project, including this:

Check out my other article on Phing, and how to use it in harmony with Eclipse.

IE6 Campaign, Drafts and RSS

IE6 Campaign

It is nice to see that measures have been taken here in Norway to help bring the percentage down of IE6 users in the world. Many of the large web corporations in Norway has taken action and placed a notice at the top of their front page, reminding people to upgrade to IE7 or switch browsers.

- Current Web sites in Norway warning against Internet Explorer 6

Draft

I accidently published a Draft of my two part series called “Introduction to AMF with ActionScript 3.0″. Sorry about that, I am still learning Wordpress. Part 1 will be up next week.

RSS

I switched from the default Wordpress RSS feed to Feedburner. I am impressed with the service. It took me about 2 minutes to sign up and add the feed to this blog.

Web Development Tools

As a web and IPTV developer, I’m constantly using Firefox with Firebug. Luckily, with IPTV I only need to worry about the browsers at hand. When it comes to traditional web development, I prefer Firefox with Firebug.

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Introducing Firebug Lite

Ok, ok. Firebug Lite is not really a new product. Still, it is worth the occational mention. Firebug Lite is a JavaScript file you can insert into your pages to simulate the most important Firebug features in Firefox, IE, Opera and Safari. Great when you’re on a machine where you can’t install additional software to check your pages.

Easy as pie

Insert this line of code into any page that you want to contain Firebug Lite:

<script type='text/javascript' 
  src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

But Firebug isn’t the only option out there!

That is true. In recent years, Safari, Opera and IE all have released native official toolbars with much of the same functionality as Firebug.

They all allow viewing the highlighted source of web sites, selecting elements, as well as viewing the DOM source and the CSS descriptions that is coupled with the DOM element, tracing CSS style inheritence down to its original declaration.

Safari

WebKit has a great developer tool called the Web Inspector. It does pretty much the same as Firebug - it even has a network panel.

Opera

Opera has developed a tool named Dragonfly for v9.5 and upwards. It has support for scripts, DOM and error console, but lacks network support.

Internet Explorer Developer Toolbar

In 2007, Microsoft released an official toolbar for Internet Explorer 6 and 7. In general, it has the same features as Opera’s Dragonfly. We use this toolbar on a daily basis while checking sites in IE. It will be bundled with IE8 under the name Developer Tools.

SilverStripe and Newsletters

I love SilverStripe CMS. The modular extension approach and the easy configurable ORM with automatic database building makes it a dream for developers to focus on just the business logic and the design that needs to be implemented. We’ve been using and recommending SilverStripe for our customers the last year. For that period of time, I’ve only had one gripe. The newsletter module.

In itself, the module is fairly easy to set up and use. The newsletter template follows the same template logic as the rest of the CMS. The problem arises when you have thousands of emails in your mailing list. One of our customers have almost 3000 email addresses in their address book, which makes it difficult for SilverStripe to swallow.

The SilverStripe implementation is actually pretty clever - using AJAX callbacks at an interval, requesting the server to send the newsletter to 10 new recievers at a time. In the meantime, the administrator watches a nice progress bar as it progresses to 100%.

The code in question is the last parameter of NewsletterAdmin::sendToList() and DataObject::get. On every request to the server, SilverStripe fetches ~3000 rows from the database and populates ~3000 ORM objects. NewsletterAdmin::sendToList() and NewsletterEmailProcess depends on every 3000 emails, although it uses only 10 of them. The memory usage easily exceeds 80MB per request.

From /cms/code/NewsletterAdmin.php:

echo self::sendToList( $subject, $body, $from, $newsletter, $nlType, $messageID,
    DataObject::get(
        'Member',
        "`GroupID`='$groupID'",
        null,
        "INNER JOIN `Group_Members` ON `MemberID`=`Member`.`ID`"
    )
);

Gjermund @ Kamikaze Media has rewritten bits of NewsletterAdmin and NewsletterEmailProcess to support lazy loading of objects. After a couple of rounds in production we will suggest our diff in the SilverStripe Trac.

To be fair, The SilverStripe Team is aware of the issue. See this ticket for details and solution. It is scheduled for a 2.4 release, as the intended fix depends on the new DataMapper.

How to vertically align content in CSS

Have you ever used vertical-align: middle in a block of CSS without it ever working? You too, huh? This article will show you a method on how to center content properly with CSS only.

The table-cell method

The CSS specification declares that vertical-align only refers to table cells. When applied to other elements, like in most cases - divs, the alignment will not work. After all, we want to mimic the <td valign="middle"> attribute. For this to work, the parent element needs to have a given fixed height. The content you want to vertically centered does not have to have a fixed height.

Here is how to center an image in a div with only CSS (and CSS expression for Internet Explorer).

<html>
	<head>
	<style type="text/css">
	.content
	{
		width: 200px;
		height: 200px;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		border: 1px solid red;
	}
	.content img
	{
		margin-top: expression((200 - this.height)/2);
	}
 
	</style>
	</head>
	<body>
		<div class="content">
			<img src="wordpress.png" />
		</div>
 
		<div class="content">
			<img src="prado.png" />
		</div>
	</body>
</html>

display: table-cell og vertical-align: middle in the .content declaration seems like the correct thing to do. And it is, but unfortunately display: table-cell doesn’t work on Internet Explorer versions prior to 7.0. Expressions for CSS (Dynamic Properties for Internet Explorer) can help us fix this problem. Watch this:

margin-top: expression((100 - this.height) / 2);

Explained: [the height of the parent element] / [the height of the image we want to center] / 2. The result leaves us the margin spacing we need between the img and the edges of the div. If we set this calculation as margin-top, the img will be centered. In the results below, we clearly see two different img elements in size being placed in the middle of the parent div, with the same block of CSS code.

This solution has been tested in IE5/6/7, Firefox 2/3, Opera 9 and Safari 2.

Previously written by me for Inside Web Dev