“…I am always easily fed up by having too many options…”

This blog is more about reflection of realization of how I think I can keep up with the world’s latest technologies rather than Peppy itself.

When I first read about Peppy, yet another CSS selector, I was very reluctant to wholeheartedly accept it. I’ve just become a fan of jQuery and now there is something new. Nowadays everyone is trying to impress others and nobody can tell immediately whose work will last for a long time. However given a bunch serious unit tests by the author and a solid benchmark results, apparently some great work is done here. So I’d like to check out how to integrate this new CSS selector with some of other JS frameworks to use it in my next project.

[Read the rest of this post ...]

Reflections of objects usually give the interface a crisp and clear look and feel. It’s no magic to generate such effects in Flash or WPF/e as they’ve got dedicated graphic components. In the Ajax/DHtml world, creating graphics suffers from problems such as lack of tools, platform incompatibilities and bad performances.

Some of the standards available for use are canvas, svg, and vml. But none of the three is supported by all major browsers.

This morning, from Ajaxian.com, I saw link to a post in which the author mentioned his reflection generating script. It’s implemented based on canvas, which isn’t supported by IE at all but sufficiently covers Firefox and Safari. Here is the link to the demo page.

Then I’ve got some idea regarding implementing the cool effect with pure Javascript and DOM, which at first I thought should be straightforward. So I started immediately. But soon I figured out that in order to create the reflection, I must be able to “flip” the original picture, which is immediately out of the capability of JavaScript and standard html! “Hmmm, so that’s why it wasn’t done before.”. However, right before I was going to give up, I found the solution. Which leads to the following.

Reflection Implemented!

Works on IE7.0 and Firefox 2.0. Didn’t test on other browsers. You may click here to see it in action or click the image to open the screenshot, if it is not working on your browser or is too slow to open.

Well…the effect is implemented, but by no means a feasibly one due to increased rendering overhead. But that’s the best I can do.
Because for each element needs reflection casted, there will be the “height of the element” number of clones of the exact same elements created to vamp the shadow.

The demo page can be found here. It may take a few seconds to load, although the file itself is fairly small.

Current features

• Reflection of images;
• Reflection of div elements, partially supports nested images and text;

So the reflection of text is an extension of the original idea.

(I will explain the algorithm later)

It’s implemented for proof-of-concept purpose. So the code is really badly organized and contains no documentation. I didn’t even bother to edit it in an IDE. Glad it got up and running as intended quite smoothly with little debugging. :)

Complaints

Ack! Well, maybe I am too shy to SEO my blog entries…don’t wanna stand at the front of search engines.

No! It’s a lie. XD.

Right, I’ve learnt to dynamically load content, even posts, for reasons like minimizing bytes needed to transmit, such and such…then I found myself a victim of that “advantage”/”best practice”…

• First of all, it’s impossible (yet for me) to keep accurate track of page clicks….because all the posts after the first load are via HTTPRequest Object;
• Secondly, because of above, the page is not refreshed, and the permanent links are very rarely activiated…the consequencies are neither visitors can easily bookmark/reference the post, nor search engines would be able to detect permalinks;
• And because of the above two, search engines can only find and index my blog index page, but almost never other pages, so literally I am pruned from search engines….

“…I am pruned from search engines…”

That’s the bloody lesson I’ve learnt from it….but…feeling lazy to rewrite the portion of the code…XD….

O well, maybe…I’ll not experiment abusing new things any more…

Solution?

What might be a solution to satisfy both “SEO-ability” and “Minimized Bytes”?

Dirty and Quick…Cookie all my js, header and footer templates..and on refreshing the page, load cookies to fill the skeleton…

…But I guess I will save the hassle by simply ignoring “minimized bytes” recommandation….how much does it cost to transmit a js file when it’s usually cached by browsers by default…

Well, it seems that we’ve got into a real “No idea is too crazy” paradise. 3 weeks ago I post something about webware, and “imagined” a central OS that users can connect to from browser, and now it’s becoming reality! Anyhow, the webOS concept is still in discussion. Many people, including myself, have concerns about its application in the future, many issues have been raised. See the original post from the link below.

http://www.readwriteweb.com/…_vs_browser_apps.php

I quoted a section of it and would like to try to analyze a bit of the downsides we see from today’s point.

Analsis of the Downsides

• This issue is not only imposed on WebOSs, indeed most of web services are based on this server and client model. Everything we do largely depend on the performance of the server, and potentially there could be a failure of the system and we cannot do anything about the service. Just like we use MSN so often and even though it occasionally fails or rejects us from logging in, we don’t feel as if it’s the end of the world. Fortunately accountablity and stability are something websites and web service providers cherished to have, presumably. The bottom line would be, if you find comfort to transmit or store some sensitive information through or in a public email system, you might not feel less comfort to store them in a WebOS;
• Performance is the next big issue. According to today’s browser technology, relied on which even a smooth fading effect is not really “smooth”, it is such a turn down to imagine a graphic intense WebOS. Yet, the development of technology always turns out to be out of people’s expectation, in a relatively long term, say 20 years. Now step back from fictions, in the following few years, at least bandwidth won’t be a bottleneck at all. Internet access? Welcome to the “Wireless Matrix”, in which Neo doesn’t have an Ethernet port!
• If you think WebOS as a complement or a backup of DeskOS (what’s the word again?), it would not need direct controls on the devices. How are you going to change your hard-drive? Buy one from eBay and fill in the address of your WebOS host company?
• Web technology is still in its infant age, people are exploring the capabilities. It’s a bit too early to know what they will be like 5 years later. Before the Windows time, was it really clear what was going to come up and dominate the world? People are exploring, everyone is. Yet once people find out they’ve got enough to start with, backwards compatibility would be considered, or, it may not matter at all!
• As I’ve mentioned above, WebOS, is a good partener of the DeskOS (still cannot remember its original name), not a step son of it. The idea of having a central WebOS, was largely derived from the trend that people are having more than one terminals in their household and are getting frustrated by the complication of synchronizing these dull computers. They are supposed to communicate with their buddies spontaneously, aren’t they? So will less people have multiple PCs at home? No. Then, the need and the market is big.
• It’s evident that WebOS is not powerful in terms of performance. Admittedly, I don’t think installing a game on my WebOS and play the game using the server’s CPU would ever happen. My thought is, the DeskOS (again~) would retain the power to run games, play movies, make graphics and store downloaded data. While WebOS, stores my Calendar, my Address Book, my Notes, my Documents, my Pictures, and my Works etc.; basically things update frequently, containing non-sensitive information if you want.

As I was writing this blog, I wrote a bunch of generic functions that I thought are short cuts of the tedious javascript and DOM functions. For example,document.getElementById(), one of the most often used functions, is definitely overwhelming.

Also, there are a lot of incompatible issues from browser to broswer, so there are functions attempting to overcome these and make them transparent, at least to me.

Download Script: (kunalu.js)

I am open to discussions. Many of them are very primative and need improvements. I have only addressed issues in Firefox and IE6+. I did NOT test them in Safari, Mozilla, Netscape, or Opera. Please feel free to leave your comments and suggestions.

I will post some code segment and talk about my initial design ideas.