ffffrozen - Adam Bezulski's blog

Today I spent one hour trying to figure out why I wasn't getting the right response from the AJAX call using jQuery. There were no JS errors, fake repository once called directly was giving me the response/data back but not using the AJAX.

Looking at the documentation, I tried different methods to resolve the issue, but without success. Finally my boss figured out what was wrong and it was the lamest mistake that I could possibly make. As usual, devil is in the details.

In my JS code I had:

$.ajax({
       URL: $url,
       success: function(data){...

instead of

$.ajax({
       url: $url,
       success: function(data){...

URL vs. url makes a difference. JS is case sensitive...

On one of the design forums someone posted link to website that presents Twitter Fail Whale done using HTML5 and CSS. Here is the opinion that I posted.

I have to say - it looks cool and it also could be another ACID_X test for browsers, how they actually deal with HTML5 and CSS3. Definitely it shows the potential of HTML5 and CSS3.

Would I do something similar in the real project? Probably no, as it has to many points of failure. It means that alternative versions should be prepared (Flash or low level implementation using images, divs and JS frameworks to handle the animation) just to avoid this:

Would I do something similar in my R&D or downtime project? Possibly yes, if I wanted to learn myself, but at this stage I am too lazy not excited about HTML5/CSS yet...due to the reason above.

For better animation and richer effects I would still stick to the flash despite the fact that I am not greatest fan of that technology. That gives very predictable cross-platform behavior.

At the end, it goes down to the target audience (read browsers market).

Last week I found some solutions that will made front-end development easier (at least mine).

Google Font API

The first one is the Google Font API (with Google Font Directory). Google have released font embedding technique that allow to use custom fonts on the websites. There are some well established solutions like sIFR, Typekit, Cufon, Typeface and this is another technique to choose from. What is the difference?

The implementation is is very straightforward and only requires the link to the external CSS file provided by Google. The significant difference between existing solutions is the font library, which is limited and provided by Google (currently 18 fonts).

So far I've been using sIFR as a font embedding technique and I am looking forward to switch to Google API. It is way much simpler and easier to use.

• URL: http://code.google.com/intl/en-EN/apis/webfonts/

jQuery Tiny Carousel

This is another content slider based on jQuery. I've been using jCarousel lite so far and this one also looks interesting. The library itself is very small but when compared to jCarousel lite, more HTML markup is required. The configuration is very simple and offers scrolling direction and paging functionality.

• URL: http://www.baijs.nl/tinycarousel/

Microsft again confirm their contribution to jQuery. In new version of Visual Studio 2010 newly created projects, have jQuery library included by default. How cool is that. Now have another confirmation of their contribution - client templating and data binding with jQuery.

The new proposal slightly reminds me Smarty for PHP where you can separate code from the presentation layer but in this case it is done on the client side. I have tested that solution already and I am looking forward to use that in the future projects.

If you have data in JSON this is the fastest and cleanest way (IMHO) to display the data. What I really like (this is also the main principle of the solution) that you don't mix HTML tags wit JS code.

More about jQuery templates and how to use the prototype you can read on Scott Guthrie's blog.

Finally, the latest Apple product has arrived - last week Steve Jobs presented the iPad. Before that, we have been hearing a lot of rumours about the name, design and specification.

The iPad receives mixed reviews, some say that Apple mixed an opportunity to revolutionise the market and point out that the iPad is just the enlarged version of iPod touch. The design of the iPad made a good impression on me, so the price range as well (at least the prices in US) which make the device more affordable (prices in EU yet to be confirmed). Where is the criticism?

The OS

Let's start with the operating system - iPad uses same version of OS X that we can find on iPhone and iPod touch but most of the scream is about that, this is not the full version of OS X that we can find on iMacs and Macbooks. But that makes iPad compatible with applications developed for iPhone and iPod Touch. You can run the same application without rewriting the code. Even more - that makes the application market even bigger. I also find another positive thing - inexperienced users will not be able to "brake down" the OS and make the device unusable for a while.

No Flash support

The same story as we have with iPhone and iPod touch - iPad doesn't support Flash and if you want to enjoy youtube there is an application that you have on iPhone/iPod touch. To be honest I don't have a problem with that. If you browse the web, you won't be annoyed by flash ads that pops in and interrupts your reading. People tend to forget that Flash uses a lot of processor's power. What does it mean? More processor power, less battery time. Apple declares that iPad can run up to 10 hours so I can only imagine that Flash usage will significantly reduce that time. I do realize that full flash websites will not work, but designers and developers have think about creating websites and web application for mobile devices.

Where is the camera and USB port?

With this one I might to agree. I am not the fan of built-in cameras (if you want to make pictures get a proper one - not a toy) but in this case, camera would be ideal for video conferences. Also at least one USB port also might be useful so it would extend the existing functionality.

The interface

People say that Apple missed the opportunity and didn't revolutionise the interface which is the same for iPhone and iPod Touch. Why the hell they should change that? If you have a successful recipe, you don't change but tweak a little bit. iPad is not only targeted to new customers but also to the ones that own iPhone/iTouch. People don't like to change their habits and change of the interface would make more harm. 

Will it be another successful device such as iPhone or iPod Touch? Well, time will show us soon. In my opinion the device is perfect for users that are not familiar with computers at all, but they would like to browse the internet or enjoy the music. Having an iPad, the learning curve is much easier for them, they don't have to worry about the usual things that all PC/Mac users have to cope with.

If your are a web developer and you are developing Content Management Systems probably you know what FCKEditor is. If you don't, let me tell you - it is a WYSWIG editor based on JavaScript and it looks and works like MS Word (or similar) and it is available for free. The problem with FCKEditor is that implementation may cause some headaches (specially with .net) and also it is quite heavy. The reason why I chose FCKEditor is built-in image up loader with preview option.

Same guys that developed FCKEditor have released CKEditor - a lightweight and much modern version of FCKEditor. The best thing about that new editor is implementation. It takes seconds and it is fully based on JavaScript:

<script type="text/javascript" src="ckeditor.js"></script>
<script type="text/javascript">
window.onload = function() {
CKEDITOR.replace( 'textareaId' );
};
</script>

For asp.net integration I would use <%= controlId.ClientID %> just in case if ID on output is different.

The downside is that CKEeditor suffers lack of image up loader. That functionality can be found in CKFinder but it is not available for free (price starts form $59).

• ckeditor.com

Since I released my blog, I was wondering how it works on mobile devices such as iPod touch/iPhone. As an owner of iPod touch I took that opportunity and did some testings.

Testing was done using mobile version of Safari which comes with Mac OS X for iPhone and iPod touch. At the beginning I knew that some functions will not work because of some limitations that has Safari (and whole platform):

• different interpretation of JavaScript DOM events
• no Flash support

Layout

The first thing that I spotted is an issue with top red border. No matter what is an orientation of iPod (horizontal or vertical), top red border is not stretched to full width. I have tried to apply 100% width for html and body by adjusting CSS, but it didn't help:

The other important thing is that large blocks of text (i.e. main text for entries) is much more larger that originally defined. Currently font-size for text is set to 12px but it looks like, that large text blocks are recognised and font size is automatically increased to improve readability:

Safari has been known for adding its own fancy look&feel for form elements. Here is the same story: input fields and text areas get rounded corners and internal shadow. Once any field is tapped, it gets zoomed and keyboard appears for typing:

Flash

Lack of Flash support means that font replacement done with sIFR and any embedded flash players will be not available unless it is youtube video. Because Apple developed dedicated youtube api for iPhone, embedded youtube clips are available via that application:

Once video is clicked, youtube api is open with the clip. After playback youtube api is closed and browser appears again.

Javascript and DOM events

This is area with significant differences. JavaScript events work different because there is no mouse movement. Basic events like onmouseover, onmousedown and :hover state work once an element is tapped by the user. In this case, if I want to see pop-up elements in header, I need to tap one of them. In standard browser once mouse moves out from the visible element, it fades out, meanwhile on iPod touch, it stays visible unless other element is tapped:

Main navigation is based on nested lists. Description underneath of each item (lighter blue) is a nested list item based on suckerfish drop-down menu. If item is tapped, styling for :hover state is applied and drop-down becomes visible, but no page is loaded. Once tapped second time, Safari opens selected location. For any other hyperlinks,:hover styling appears once element gets :focus state - that means :hover state is triggered on hyperlink is tapped:

The list of events and how they behave on iPhone/iPod touch can be found on QuirksMode.org.
I was surprised that I couldn't find documentation on Apple website (maybe it doesn't exist yet).

What needs to be done?

If sIFR is in use, styling for flash-replaced elements needs to be added, but this is not only related to mobile platforms. If some users on standard PCs have flash disabled (for example flashblock plugin) or not installed at all, they will see text elements that follow styling similar for sIFR. For other flash elements (like animations), alternative version needs to be added. For example, adding background image (based on still image from flash) to the div containing flash is a good idea.

What about JavaScript? That's a good question. If I want to keep my look and feel similar to standalone version, my JavaScript needs to be changed. Because onmouseover and onmouseout events work on iPhone/iPod touch in a different way, I should consider onfocus as a key event. But it would just work for iPhone/iPod touch. I haven't tested my blog on other mobile platforms such as Palm or Blackberry and I don't know how JavaScript is implemented. On the other hand, removing JavaScript effects would be the safest way to get similar effect across the mobile platforms and alternative layout for mobile version would be a good solution. Because of popularity of iPhone and iPod touch some websites are iPhone/iPod touch optimised where content is scrolled horizontal. Here is a showcase of websites following that trend.