HTML5 quickstart

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.

After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain ajax and flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on.

Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed.

http://html5boilerplate.com/

Via Benjamin De Cock (@deaxon)

There’s also an HTML5 reset:

Like a lot of developers, we start every HTML project with the same set of HTML and CSS templates. We’ve been using these files for a long time and we’ve progressively added bits and pieces to them as our own personal best practices have evolved.

Now that modern browsers are starting to support some of the really useful parts of HTML5 and CSS3, it’s time for an update, and we thought we’d put it out there for everyone to use. By no means do we see this as the end-all and beat-all, but we think it’s a fairly good starting place that anyone can take and make their own.

http://html5reset.org/

And even am HTML5 site template to get started:

The whole point of this is to abstract things I do over and over again when starting a new web design/development project. This reflects my workflow and may change over time because of that.

http://github.com/dcneiner/html5-site-template

Quicktip: Internet explorer does not trigger key events on the window object

In one of my latest projects I had to use jquery keypress events for next and previous navigation. I develop on safari and do the cross browsertesting afterwards, and it didn’t work in Internet Explorer…

so instead of listening to the window for keypress events:

$(window).keypress(function(){...});

I had to do this:

$(document).keypress(function(){...});

Mobile development

As the mobile market continues to grow, it is essential for us, web developers, to make sure our stuff works on all platforms. As I was previously wondering how most of you are testing cross browser experience, I’m now curious to know if you test for mobile devices, and if so, what tools do you use?

Most of the mobile browsers use webkit as render engine, there are however some exceptions. Besides the render engine, the viewport is another bottleneck. So how do you deal with that? My first thought was to focus solely on the iphone. Using the iPhone SDK and the iPhone emulator that comes with it, I could easily test sites on my mac. The latest iPhone SDK even has an iPad emulator! So making sure everything works on those 2 devices was sometimes a pain in the ass… So after optimizing for iphone and ipad came the actual testing, not on-screen, but on my iPhone / iPad using my fingers to flick, tap, scroll, zoom and pinch my way around. A good help for making sure everything was usable were the iPhone human interface guidelines.

So now I had my projects working on only 2 mobile devices, whereof one not sold (yet) in Belgium. Hooray… Therefore I tried installing the Android SDK so I could mess around with their emulator. And then what? Install another SDK for nokia, blackberry (nowadays they use webkit),… Some time ago, someone on the fronteers irc channel mentioned  Adobe Device Central. They offer a lot of platforms to test, but it seems a bit too flash minded and doesn’t always work the way I want.

Another great tip came in from Jon Hicks: Liveview, for Mobile Application Design & Prototyping Tool.

The point is: I’m kind of stuck with mobile testing, I can test on iPod touch, iPhone and iPad which seems ok for an apple fanboy like me, but off course, there is the harsh truth that not everybody is using one of those mobile devices… So what’s your secret setup for mobile testing?

Webdeveloper toolbox

For all you google chrome webdevelopers out there, this might come in handy (or perhaps it already did): https://chrome.google.com/extensions/featured/web_dev

I prefer working with the nightly build webkit, mostly because the web inspector had a full redesign. Before I used firefox with a gazillion addons ending up using only firebug… And speaking of firebug, check out the firebug lite bookmarklet, ideal for Internet Explorer issues. And not to forget dragonfly for those who use opera.

Cross browser testing

It’s inevitable, sometimes annoying and yet, it’s part of our charming job: cross browser testing, and even cross OS testing. As frontdend developers, we want to deliver quality, therefore making sure that what we deliver is functional. It doesn’t have to look 100% the same, their might be some fallback (cf. css3, javascript) but in the end, the visitor has to be able to do what he is ought to do, browse, search, navigate, buy, etc…

So I have my own setup to test everything, but I’m eager to learn new ways.

At the moment I work on a macbook pro, I have vmware fusion running windows xp with IE6 and firefox, windows vista running IE7 & 8 and firefox, windows 7 running IE8 and an ubuntu with firefox and Konqueror. I don’t test chrome because I use safari 4, firefox and opera on my mac to test stuff, but maybe I should add chrome to my vista setup. I also use the iphone developer tools to test sites on iPhone and iPad.

So how do you test your sites?

How do you bill your clients?

I use this lovely piece of software called billings, it gives me a nice overview of my clients, projects and the time I’ve spent on each part of their project. I’ve always given them a fixed price, sometimes I get ready early, on time and sometimes late. The fact is I’m like public transport or an airline company. My clients ask me how much something will cost, I give them a price and we’re set, the same as booking a flight from Brussels to London, you pay the price and you get there, maybe you’re early, maybe you get some delay, but the price stays the same.

But maybe, you’re like a taxi driver, you give them an estimate and if the client agrees you start working. If you deliver on time the pay less, if the job takes a little longer, the customer pays more. I believe this is the most fair way to work, unfortunately web development seems to be in the dark zone for most people, as if we just click buttons on some kind of magic box that does all our work.

So how do you bill your clients?

The right solution for my server problem

When I bought my first shared hosting, I hosted a small community, some linked assets and that was about it. With the growth of the community, I had to look for a solution for our bandwidth that exceeded our maximum. So I switched hosts, went from 50MB webspace to 500MB, and instead of one domain, started hosting 3, 4 extra domains. Time went on, the little community disapeared, I started hosting more websites (part of my own, some for friends). So the problem was no longer bandwidth or available webspace, the problem became uptime and server management. Two problems that couldn’t be solved with the current provider, so a solution was needed. The uptime was a pain in the ass, as the promised 99,99% is neglected. The server management still is an issue, because using the right tools and technologies, like a UNIX server with shell access, GIT, SVN, etc… would come in handy, it would definitely get the workflow tighter, getting rid of the lost time in exporting files from a versioning system, uploading them with some kind of ftp app and all sorts of other issues that makes me loose time, valuable time…

As I started looking for solutions, the first thing that came to my mind was a virtual private server. Looking at different providers and after talking to Thijs Feryn from combell, a combell vps was a possibility. The OS of choice would be a Darwin Freebsd, the core of apple’s OSX. So I started saving some money until… something strange happened. The apple store went down and a whole new line-up of iMacs and mac mini’s were presented, and one of the mac mini’s is … a server, running the allmighty snow leopard server

1c6295bf63eopard

So I started thinking about a mac mini server, and maybe some colocation at easyhost. The problem is that is would cost me 75 euro a month. Which is more than the VPS at combell. The advantage is that I have the snow leopard server GUI. I kept looking for a solution for my problem, and I think I’ve found one! November 20, 2009 I’m planning to move. My girlfriend and I have decided to live together, and therefore, I have to look for an internet providor. So maybe I could host my mac mini server at home, with a 1TB time capsule as a back, an optional UPS, a static IP address and a high speed internet connection. The biggest issue on my plate right now is which provider would be the best choice? Telenet is blocking all ports under the 2000 range, so I guess they’re not really an option… Maybe belgacoms ADSL2 would be a good choice?

So if you have any experience in the hosting business, host your own server, work for a providor or you’re just a guy/girl willing to give his/her opinion, I would say: Fire away!