If we take that and say that there is “Frontend” and “Backend”, we certainly need to put our guy on the Frontend side. But where does the “Frontend” actually “end”?

I have been working at my current company for a bit over a year now and I have been on 3 different projects. On the first one, we worked in pairs on new features, where each pair consisted of a backend engineer and a frontend engineer/web developer. The backend person had to deal with all the stuff that one would relate to backend, such as:

• Setting up Apache rewrite rules for SEO friendly URLs
• Getting the appropriate data out of the framework/database and provide them to the templates in the frontend
• Doing the data processing when it comes to form submits
• (add more similar things here)

As a frontend guy, I had to take care of the following:

• Implement the mock from the designer using HTML, CSS and JavaScript in one of the templates inside the framework
• Using the data provided from the backend guy and displaying it in the template (usually not anything complex, so e.g. looping through an array)

I find this a nice separation and it gives the frontend person enough “room” to focus on the things he is good at: implementing the pages in nice, proper and semantic HTML, CSS and JavaScript, adhering to Web Standards.

But on another project, it worked completely different. I, as the frontend person, was responsible for, what I think, more stuff that I should actually be responsible for. Apart from the things mentioned above, my responsibilities were, amongst others:

• Owning the entire framework tree, including the libraries that are responsible for MVC, which obviously included talking to the database layer (actually setting up the appropriate functions and classes), extracting the appropriate variables out of the response, feeding them into the template.
• Validating and processing form responses
• Messing around with setting up rewrite rules

I think there are 2 sides to this. On one side, it is a great challenge and experience to not only touch templates, CSS and JavaScript, but also dive deeper into the layers behind. There is nothing wrong with that and adding those skills to your skill set. But on the other hand, it adds another huge area of responsibilities to the ones that you already have, namely to make sure that the page adheres to Web Standards, renders correctly in different browsers, degrades gracefully when certain technologies (JavaScript, CSS) are not available, and so on and so forth.

Of course, if you have a guy at hand who is a whiz in the frontend AND the backend, lucky you. Of course you would put that person in charge of all these things cause you can be certain that he can handle that. But my question is rather: Should a frontend developer be made responsible for things that are, actually, more related to backend?

Normally, coming to work in the morning I would type in the following to connect to my development machine:
ssh servername.my.awesome.company.com

That is a lot of typing if you ask me :-). So I found out about ~/.ssh/config which gives you the opportunity to define aliases for hosts you would like to connect to using ssh. You simply open ~/.ssh/config in vi and add the following:

Host myalias
HostName servername.my.awesome.company.com

So next time you would like to connect to your host, all you need to type is:
ssh myalias

I have to agree with Dave Child’s blogpost: Developers are lazy.

In addition to that and to further automate the login process, you could then add additional commands you would like to get executed as soon as you log in to ~/.profile. You might decide to set up an environment variable or aliases for some more type-heavy commands, e.g.:

# add /home/me/bin to the path
export PATH=$PATH:/home/me/bin

# alias for checking apache error log
alias ta='tail -f /home/me/logs/apache/error'

What is it about?

Euro KickOff lets you download all or individually selected fixtures into your favourite calendar application, whether it is Microsoft Outlook or iCal. You visit the Fixtures page and select whether you would like to follow your favourite team, get all the games of a specific group or stage of the tournament, or even from a particular venue or on a particular date. All that is left for you to do is hit the download button and import the generated file into your calendar application or it might even do it automatically (depending on which application/system you use). You will then have the fixtures in your calendar which will remind you when it is time to meet your friends and watch some football.

Backstage

For the techies amongst my readers, this is for you. The header of the site uses the Paralax effect demonstrated on Clearleft’s Silverback App page. Just adjust the width of your browser window and you will see what I mean by that. A nice effect which also incorporates the flair of the hosting countries.

We are using hackable URLs, so you are able to access particular fixtures using, for example:

• http://www.eurokickoff.com/en/fixtures/ (for all fixtures)
• http://www.eurokickoff.com/en/fixtures/austria (for a particular team)
• http://www.eurokickoff.com/en/fixtures/vienna (for a specific venue)

The awesome design was put together by Gareth Brown, whereas the script behind the generation of the calendar files is courtesy of Brian Suda. Just before the weekend we are planning to put in translations for German and hopefully some more languages before the actual start of the tournament on June 7.

After all, it has been great fun working on this project and I am glad and happy how it turned out in the end. Even if you are not a huge football fan, I encourage you to try it out and provide feedback. Thanks!

My friend Annie wanted to run the London Marathon for quite a while, but due to the strict entry regulations, it is pretty hard to get a spot. So she finally decided to run the Marathon in Vienna instead. I was really inspired and impressed but also thought that I couldn’t do such a thing—mainly because I consider the time commitment (training runs at least 4 times a week) being simply too much for me. But, on the other hand, I figured that I maybe might not be able to do 42 kilometers, but 21 maybe? So I signed up for the Half Marathon in Vienna, my hometown.

So we rolled into Vienna on Friday. Unfortunately, I was still feeling a bit sick from a slight cold I caught the week before. But I figured and hoped that everything will be fine on Sunday, the day of the big event. I did not sleep well the night from Friday to Saturday cause I had trouble breathing through my nose because of the cold, woke up at 3 in the morning and fearing that I won’t be able to run. I felt pretty miserable but decided I will try it and if I feel bad during the run, I will just stop.

On Saturday, Annie and I picked up our numbers and the timing chip, which was pretty exciting. Also, the weather was really gorgeous with sunshine all over the place, warm temperatures and an even better forecast for Sunday, the day of the event.

In our “Marathon package” we had also included a carb loading party, which was actually called “Kaiserschmarrn” Party in the City Hall in Vienna. That was pretty nice, had a portion or two of this traditional Austrian dish and chilled out in Rathauspark afterwards to enjoy the beautiful weather.

Sunday. The big day. We got up around 6 in the morning (the start was scheduled for 9), had some carb-rich stuff for breakfast (Palatschinken) and made it to the starting area at Reichsbrücke around 8. It was pretty interesting to see that street, which is a popular high traffic street in Vienna, completely sealed off and instead of cars, there were only runners.

We came across people from all over the world (apparently there were participants from more than 100 countries) and found a spot in the middle of the crowd. Then, at 9am sharp, we heard the start signal and the two of us plus about 30,000 other runners were on our way to conquer 21,0975km and 42,195km respectively. For me, the feeling of being part of such an event with so many other people felt really great.

We made our way over the Reichsbrücke along Lassallestraße with spectators watching and cheering, it was so great and it filled me up with more energy than any drug in this world could have given me probably. I was emotionally touched by the whole atmosphere and I felt just great.

We ran along Prater Hauptallee and I was already running considerably faster than on any of my training runs, but the combination of the great weather, the atmosphere, the stream of people that are in this with you together just pushed me to keep up the speed and it felt really good—at this stage.

After the Prater, we made it to the Ringstraße, along the Ring and turned left after the Opera House into Linke Wienzeile. Again, at the Opera House, lots of people chanting and supporting the runners. Another touching highlight.

Then came the hardest part for me. Along Linke Wienzeile, passing the Naschmarkt, we were supposed to go to Schönbrunn, make a turn and then go along Mariahilfer Straße, back to the Ring. Towards Schönbrunn, we had to go slightly uphill, with no shade in sight, in the bright sun…it was definitely a tough couple of kilometers. For the first time during the run I felt my body aching, especially my knees and I thought: “Oh jeez, that is going to be tough.” But I also said to myself, as Annie and I noted a couple of times during our training runs: it is all mental. Your body tries to tell you a lot of times that you should stop because of some little pain here and there and that what you are doing does not really serve ANY purpose at all.

But that is a lie. The thing is that your body is capable of much more than any normal person needs in his or her everyday life. We are just used to have it comfortable and not challenge our bodies that much. So in situations like that, it is normal to think that lying on a couch with your feet on the table should have been the better choice. But that is not the case. You can do it. It is all mental.

Finally we made it to the turning point at Schönbrunn and made our way back to the city center. Going back again felt rather easy, there were some areas of shade from the adjacent buildings and the fact that it was going slightly downhill made the thing a lot easier too. Then we crossed the Gürtel at Westbahnhof and I knew: now it is just down Mariahilfer Straße (a famous shopping street, kind of like Oxford Street in London).

Well, and kinda like Oxford Street, Mariahilfer Straße is, in fact, pretty long too. But finally, we got to Museumsquartier and made the left turn onto the Ringstraße again. I could already see the last turning point onto the Heldenplatz so I started to run faster, already sprinting actually. There were lots of people, more than on any other area along the route. It was just electrifying, gave me a last push of energy. I was making the last turn, through the Heldentor, into the finish area. There were, again, lots of people on the stands, chanting, applauding, shouting and with a couple of other people I crossed the finish line. It was awesome, the feelings I had were hard to describe in words. I felt happy, exhausted, but happy, disbelieving that I really achieved my goal of finishing it. It felt just great. My time in end was 02:03:02, with some more details on the VCM web site.

After picking up some refreshments and resting on the grass in the park, I waited for Annie to finish the real challenge, the full marathon. I was waiting along the Ringstraße behind the barricades and a little bit before 3pm, I crossed the finish line with her. I felt so happy for her and have so much respect for her for achieving this goal—running the whole marathon. My deepest respect, I am really proud of her. Proud of both of us.

It has been such an amazing experience, the atmosphere, the weather, it was just great. And now I can finally understand why people get addicted to running and doing these kind of events. At least for me, I feel that doing this with so many other people, conquering the distance with other runners and the support from the other runners and especially from the people watching is just so emotionally touching, it is hard to describe. It is an incredibly good feeling of happiness. Something I could see myself wanting to feel again.

PS: As soon as I find the time, I will upload some pictures to the Photos section. Meanwhile, check out some pics on flickr about the Vienna City Marathon.

Yahoo! Junior Web Developer — Job Description

As the world’s number one Internet brand Yahoo! delivers news, entertainment, information and fun to over a half billion people every day. Our European web development team, based in London, is seeking standards-savvy front-end developers to work on Europe’s busiest sites.

You should be able to provide examples of your work showing use of progressive enhancement techniques (e.g. unobtrusive scripting), and clear separation of structure, presentation and behaviour layers.

Required Skills

• Hand-coded (X)HTML, CSS, and JavaScript
• Solid knowledge of standards-based, accessible, cross-browser web development
• PHP programming skills
• User-level experience with BSD/Linux
• Experience using version control systems such as CVS & Subversion

Desirable Skills

• Client– and server–side performance optimisation techniques
• Search engine optimisation
• Experience in developing web applications with rich client interfaces using AJAX, drag and drop, and other DOM Scripting techniques
• Experience with JavaScript libraries, especially the YUI
• Experience of Web Services (eg REST, SOAP, XML-RPC)
• Knowledge of web site internationalisation issues and experience developing web sites in multiple languages particularly in Europe
• Use of the following technologies: XML/XSLT, Perl, Microformats, JSON, Flash/Flex
• Experience developing functionality/applications by assembling existing code modules

Responsibilities

You will work closely with Information Architects, Visual Designers, User Researchers, Software Engineers, and Product Managers to ensure that our web based products in Europe provide the best possible experience for our users.

Does that sound like you? Then either leave your comment below, get in contact using the contact form or send me your CV to mail at klauskomenda . com.

Step By Step

I did some digging on the net and some investigation and tried to come up with a concept that makes sense. The steps I was thinking about:

1. On page load, a 10kB image gets requested “in the background” (hidden from the user by CSS)
2. Via JavaScript, the time it takes to load that image gets recorded and the bandwidth gets calculated
3. As soon as this process is done, the image gets removed again from the DOM
4. Some sort of bandwidth cookie gets stored on the client, telling the site which content to serve on subsequent calls to the site

I came up with a prototype that demonstrates the bandwidth measuring using JavaScript. It does not take care of Steps 3 and 4 mentioned in the list above, but I think it conveys the idea behind it.

Some things to note about the JavaScript:

• Line 47: I am using onload as an attribute of the element itself, which is bad practice in general, cause behavior should entirely be controlled using JavaScript and Event Handlers should be added e.g. with YUI Event. To not waste execution time and maybe alter the measure of the bandwidth, I used it in this instance. Because of that, I also had to author this document in HTML 4.01 strict, to make sure it validates.
• Line 52: Also, I am using innerHTML to quickly insert the piece of code that constructs the image element. I could have created the image element using document.createElement, but innerHTML works just fine and occurred to me as just more convenient in this case.

Conclusion

Honestly, after I was finished with the prototype, I was not really sure if that whole thing makes sense at all. Cause what it does is it makes an additional request to the server which would make the page even slower to load for people already suffering from a slow connection speed. Also, thinking about the cookie thing, as people tend to be mobile these days, they might have a slow (WiFi) connection when requesting the site, but have a fast broadband connection at home. But with the cookie already written when they visited the site when they were mobile, they would get the low-bandwidth-experience at home as well – which defeats the purpose, kind of.

So especially after writing this blog post about it, I am not really sure if my idea makes sense. So I am asking you guys, what is your opinion on that?

Resources

• Harvard University Information Systems: Bandwidth Tester
• Upload bandwidth as a bottleneck to busy web pages

Luckily, with CSS, you have the ability to put in some sort of fallback mechanism that comes into play when the first font-family you mention is not available, the user agent picks the next one in the list, and so on. But especially people coming from a print background, they tend to ask which fonts they can use and be almost hundred percent sure that what they see on their screen will look the same to what their users are going to see. Well, what is a hundred percent certain these days…

It is always hard to answer such a question, but thanks to some people out there, there is some statistical data out there to back up whatever your answer might be. The guys at Code Style conducted a survey (which is still ongoing I think) and came up with the following results, nicely broken up into categories:

• Windows font survey results
• Mac font survey results
• Unix font survey results
• Combined survey results

VisiBone is another provider of a font survey, conducted amongst 800 systems. Their results can be viewed on one big page on their site. WebSiteWorks combines these two surveys and provides conclusions regarding those findings. In a different article, the are talking in more detail about what they consider the 31 of the most commonly encountered fonts from all operating systems. Vivien also provides a nice summary of fonts which are popular with web designers these days.

Conclusion

Taking a look at these results, it becomes quite obvious that if you really want to make sure that you are only using web safe fonts, you are down to a handful number of fonts (with a focus on Windows and Mac).

If you consider using fonts that are below 90% in the surveys - which is a number that I came up with and I would consider everything above that figure to be web-safe - on any system, you need to provide a “fallback font-family” in your CSS.

So, for example, you are a designer who works on a Mac and really wants to use Monaco as your font of choice on a web project, you need to mention a fallback font in your CSS. Why? If you have a look at the surveys done by Code Style, you can see that almost 97% of Mac users have Monaco installed, but the font is not even listed in the font survey for Windows machines. So, lets say, you choose Tahoma as your second font of choice, you could note that in your CSS as follows:

body {
  font-family: Monaco, Tahoma, sans-serif;
  font-size:12px;
}

So, I guess, when you come from a print background and are used to the luxury of being able to choose every font you want for your design…well, as a Web designer, you need to show a little bit of flexibility when it comes to fonts. That said, of course you can still use your favorite font of choice, if you are inclined to do so, but only if you convert your whole text into a graphic or Flash (which is used for image replacement techniques). Apart from headings (which only get replaced by nicer graphical headings), any part of your body text should never ever be a graphic.

With the Dust-Me Selectors Firefox extension provided by SitePoint, there is a way out of this. The extension provides a convenient way of cleaning up your CSS file(s) and identifying selectors which are not used anymore.

After installation, the presence of the application is indicated by an icon in the browser bar showing a spiffy broom. The extension comes with several options. First, you can select that upon visiting a certain web site, it starts recording which CSS selectors from the CSS files loaded get actually used on the site you are on (indicated by an animated broom icon and listing the amount of unused selectors found in how many CSS files). It then creates a list and bit by bit ticking off every selector being used. While you continue browsing the site, that list (hopefully) gets smaller and after you have browsed through samples of significant pages on your site, it will give you a list of CSS selectors which - it thinks - are redundant and can be deleted.

With version 2.0, the clever guys at SitePoint (cause they know what we want) built a spider functionality into Dust-Me. This means that you can provide the extension with a sitemap of your site (either an HTML file with a list of links or a Sitemap XML file) and it will spider the pages provided (and going one level deep from there). From my perspective a more convenient way, if you have a tool that creates a site map like XML-Sitemaps.com Sitemap Generator or GSiteCrawler. There is even a Google (XML) Sitemaps Generator for WordPress.

The “view saved data” option in the plugin will then give you a nice list of used/unused selectors which will give you a sense of which selectors might be save to delete. I say might, because it does not check whether you might use one or the other CSS selector to style markup you insert via JavaScript into the page. This is beyond the scope of the plugin, so with the final output data from Dust-Me at hand, you will need to check whether one or the other applies to markup added using JavaScript — and then don’t delete them, of course

Further reading

• Dust-Me Selectors plugin homepage
• Plugin User Interface
• Plugin Preferences
]]> http://www.klauskomenda.com/archives/2008/03/18/using-dust-me-selectors-plugin-to-find-unused-css-selectors/feed/ http://www.klauskomenda.com/archives/2008/03/17/testing-on-mobile-devices-using-emulators/ http://www.klauskomenda.com/archives/2008/03/17/testing-on-mobile-devices-using-emulators/#comments Mon, 17 Mar 2008 22:13:05 +0000 Klaus http://www.klauskomenda.com/archives/2008/03/17/testing-on-mobile-devices-using-emulators/ With mobile devices becoming more and more popular each year, it is about time for the state-of-the-art Web Developer to not only test the sites he is building on a desktop/laptop computer, but also on mobile phones and PDAs. But there are so many out there! Do you need to buy each and every model to be able to test? Well, for a start device emulators can give you a helping hand.

For a couple of years we have heard from experts that using mobile devices for using the Internet will become increasingly popular and will move peoples using habits away from the desktop and into the mobile world. Apart from Japan, this is not quite true yet. Mobile devices such as PDAs, cell phones and pocket computers are getting more and more popular and feature-rich, but it still seems quite tedious to browse web sites on small screens with limited interaction capabilities. Apple with its iPhone has done a great job and we can only hope that others will follow in terms of anticipating how users would like to use a mobile device and which features would help them in doing so.

From a developers point of view, it is not only time consuming, but also expensive to consider a fair share of devices out there for testing. Different resolutions, different screen sizes and different browser implementations form a pretty high number of combinations a developer has to cater for. Unless you have a very high budget for testing, this is not gonna be possible.

That is where device emulators and browser simulators come in handy. Luckily for a whole lot of devices out there, software programs exist that replicate the behavior of such a device on your computer screen. Whereas in device simulators you actually are able to navigate and interact with various parts of the underlying operating system (Windows Mobile, Symbian OS etc.), browser simulators provide you just with the interface you most likely will also find on a particular device (e.g. BlackBerry).

Below you can find a list of emulators and simulators which let you inexpensively test how your site will be displayed on the device. Unfortunately, all of them, except the emulator for the iPhone, can only be installed on Windows.

Windows Mobile Emulator



Installation

To install the Windows Mobile Emulator, first you need to download and install the following components:

• Virtual PC (for network capability)
• Emulator with Emulator images

Network Configuration

After installing the two items above, you can find the Emulator Images under Programs > Microsoft Windows Mobile 5.0 Images, which gives you a list of images for different types of devices, e.g. Pocket PC. When selecting one of these images, it fires up the Emulator and loads the respective device image. But before you can use it to test your own site, you need to configure the Network Settings to ensure proper connection to the Internet through your computer. For this, you need to do the following after the device has been booted up the OS:

1. Chose File > Configure > Network in the Emulator Application window
2. Check “enable NE2000 PCMCIA network adapter and bind to” (if you are using the Pocket PC image, it might be different for the other images)
3. Select your computer’s network connection card from the list (e.g. Intel PRO) and hit OK
4. On the (emulated) device itself, locate the “network card” settings dialog (on Pocket PC: Settings > Network Card)
5. Here, select “connect to: The Internet”
6. select “NE2000 compatible Ethernet driver”

Now you should have a connection to the Internet from the emulated device and can use Internet Explorer on the device to test how your site would look like on e.g. a Pocket PC.

I just noticed that there are more up-to-date version of the emulator and device images available from Microsoft. I have not actually installed and tested these, but I am just hoping the installation is as straightforward as with version 1.0 that I used.

iPhone

The oh so beloved iPhone also has an emulator on its own, which is called iPhoney. It can easily be downloaded from marketcircle.com and installed, but only on Mac OS X. The look and feel is pretty nice and neat and it also supports the physical device capability of switching from portrait to landscape mode when rotating the device. In the Web Development circles I heard rumors that iPhoney is, despite the slick look, not providing accurate results and is mere a simple browser window re-sizer than actually providing a correct implementation of the browsing capabilities of the physical device.

Opera Mini

Opera has a big market share when it comes to browsers on mobile devices with its Opera Mini. On their site, Opera offers an Opera Mini Demo/Simulator which can be used for testing your Web site. You can even call that site by using a parameter in the URL to call your site straight away, e.g. ?url=http://www.klauskomenda.com. Other people have also had a look at that Simulator and even provided an alternate implementation.

Blackberry

You can download one of the many simulators they have on their web site after registering with their developer network. After that, download and installation is pretty straightforward and you can then find the simulator under Programs > Research In Motion > BlackBerry Device Simulators.

The look and feel of the device emulator is pretty great and gives you a good understanding of what capabilities the physical device really has. Unfortunately, I was not able to get a connection to the Internet (from what I have learned you would need to connect to the BlackBerry MDS Connection Service, but how?). So, to keep it short, no testing on BlackBerry. Nice simulator though.

ACCESS NetFront

Another emulator for mobile devices is provided by ACCESS. The ACCESS Netfront browser emulator can be obtained from their web site, and can be launched by just running the executable from the ZIP archive. Upon launching the application, it took me a couple of minutes to figure out that hitting F1 actually gives you a menu from where you can select “URL” and type in the URL of your site.

Openwave simulators

From what I have heard, Openwave is also pretty popular on mobile devices and on their website, they offer a simulator for download (but you need to register before you can do so). I downloaded version 7.0 and I was a bit disappointed by the look and feel and the capabilities it provides. I am not really sure if that is the default or if there are newer versions which can provide more functionality when it comes to rendering Web pages.

Nokia simulators

Nokia, as one of the leading mobile phone makers, provides a decent selection of SDKs on their developer network, but unfortunately the device emulators included within these SDKs are built for actual application testing (written in e.g. J2ME) but not for testing Web sites using a mobile browser. So the only simulator I was able to find was the Nokia Mobile Browser Simulator 4.0 as part of the Nokia Mobile Internet Toolkit 4.1. They were made publicly available May 13, 2003 and July 2, 2004…so not the newest ones, I would say. Before downloading the Browser Simulator, you need to be registered with the Forum Nokia and request a serial number (in the sidebar, where it says “Request serial number for:) for the Browser Simulator.

The downloaded package is pretty small and after unzipping it, you can simply run the executable to install it. During installation, it will ask you for your Forum Nokia username and the serial number. After the installation, you can find the simulator under Programs > Nokia. The simulator itself is pretty disappointing cause it offers an interface with fits to the date of publication of the simulator and, more importantly, I was again not able to connect to the Internet. All I would wish for is that Nokia would update their standalone simulator to the newest models as soon as possible.

I just learned on their Forum, that the emulators provided with the SDKs actually provide full device capability, but I have not had the time yet to download one of these bundles and check for myself. SDKs are available, e.g. for Java (Series 80 and Series 60).

Further reading

• CSS tutorial on Media types
• 7 usability guidelines for websites on mobile devices
• Make your site mobile friendly
• Usable web pages for mobile devices
• ready.mobi (a tool for testing the mobile-readiness of web sites)
• Mobile Web Book (book by Cameron Moll)
• How to Install BlackBerry Simulator, Pocket PC Simulator, and Nokia Emulator
]]> http://www.klauskomenda.com/archives/2008/03/17/testing-on-mobile-devices-using-emulators/feed/ http://www.klauskomenda.com/archives/2008/03/06/taking-a-guitar-on-an-airplane/ http://www.klauskomenda.com/archives/2008/03/06/taking-a-guitar-on-an-airplane/#comments Thu, 06 Mar 2008 16:32:02 +0000 Klaus http://www.klauskomenda.com/archives/2008/03/06/taking-a-guitar-on-an-airplane/ Have you ever tried to take a guitar with you on an airplane? When going to Vienna yesterday, I was thinking about it, but finally decided not to due to the fact that the risk of it ending up with the other luggage was too high. (more…)
]]> http://www.klauskomenda.com/archives/2008/03/06/taking-a-guitar-on-an-airplane/feed/