Forgive me, I was bored. At least I found out what the <marquee> tag is good for. It was created for George Lucas.
Read more
Sometimes it's cool to just try stuff out in web development without having to support every old browser. Here's the result of playing around for an afternoon attempting to recreate Windows Aero look using just CSS in the current browsers (Firefox 21, Chrome 27, MSIE 10).
Read more
After ensuring that your newly created website works great on all desktop browsers, you put in the effort to make the site responsive. Everything is spot on with any of the Android browsers, but then you test on iOS/Mobile Safari and some of your click events aren't registering. Why is that? In my most recent project, I've encountered two different causes for this. Oddly enough, neither has anything to do with JavaScript, but CSS is the culprit. While one of them might be by design, the other is most definitely a bug, in my opinion. Since Mobile Safari is hell to debug (especially since in iOS 6, the developer console was removed and the only way to debug is by using desktop Safari, which isn't even available for Windows any more — probably a good thing, as the Windows versions were utter crap), it took ages to find the cause of this and I figured I'd spare you the trouble. Here's what happens and how to fix it.
Read more
There was an interesting article about website bandwidth usage posted on Hacker News today. It contains some bar graphs explaining which fractions of the total download size of a site home page is attributable to text content, images, CSS, scripts etc. The author said he had "cheated" in creating those bar graphs by taking screen shots from Safari's development console. I figured this was a nice challenge to see if I could recreate those graphs in pure HTML and CSS.
Read more
My current job involves a lot of web development for mobile phones. Compared to the WAP phones of 10 years ago, present day phones are like supercomputers, with browsers almost as capable as those on the desktop. The major challenge posed by designing for these devices is making sure that mobile web sites are lightweight in terms of bandwidth, easily viewable on a small screen and that the site can be navigated easily with both the four-way directional key as well as with a touchscreen. With mobile browsers catching up to desktop web browsers, I figured it would be a good time to take a look at some of the eye-candy effects that are possible with CSS2 and see what the support for these effects is across the mobile browsers.
Read more