Jquery Library

Yo,

In this article I will cover how to use Jquery library in your website.
For those who have no idea what Jquery is, well in short, it's a javascript library, you'll only need to include 1 file, and it's super-javascript made easy! visit jquery site here: http://jquery.com/

I'll be posting more about Jquery in the coming articles, so check out this website for more Jquery articles. Now, I'll be discussing about:

1. Jquery Basic
2. Element Selector

1. Jquery Basic

To enable jquery in your website, download the latest library from their site, and include the script in ur html, something like
<script type="text/javascript" src="js/jquery.1.4.2.js" ></script>

we use jQuery or $ prefix to use the functionality, and we can combine it with normal javascript function.

Document Ready function
this function will be executed once the html document is finished downloaded in the browser, ensuring that all html elements are there and ready for manipulation.

$('document').ready(function(){
..
your script here
..
});

2. Element Selector

We use jQuery to simplify the way we get an element in our web page.

After we master how we can get the element that we wanted using jQuery, we can make use a vast number of functions from jQuery, like to get/set a specific element value, to assign/remove a CSS class to html elements, to do animation, and a lot more.

There are three basic selecting method using jQuery, using element id (#), class (.), or element type.

Sample:

1. Use # sign to get element by it's id.
   
   $('#aDivElement') <-- this will get element with id: "aDivElement"
   
   
2. Use . sign to get elements by it's class.
   
   $('.elementClass') <-- this will get all elements that has class: "elementClass"
   
   
3. Use element type to get all elements with that specific type
   
   $('div') <-- this will get all div elements in your page
   $('div.withClass') <-- this will get all div elements in your page that has class: "withClass"
   
   
4. Combination of Selector: we can use multiple selector by selecting element from the select result set. We can make use of children(), parent(), parents(), siblings(), find(), next(), prev() to traverse the select result set.
   
   $('#myElement').parent() <-- this will get parent element of element with id: "myElement"
   $('div').children('p').children('.aClass') <-- this will get elements that has class: "aClass" in a p element within a div
   
   

Steve Jobs Open Letter on Flash

taken from - http://www.apple.com/hotnews/thoughts-on-flash/


Apple has a long relationship with Adobe. In fact, we met Adobe’s founders when they were in their proverbial garage. Apple was their first big customer, adopting their Postscript language for our new Laserwriter printer. Apple invested in Adobe and owned around 20% of the company for many years. The two companies worked closely together to pioneer desktop publishing and there were many good times. Since that golden era, the companies have grown apart. Apple went through its near death experience, and Adobe was drawn to the corporate market with their Acrobat products. Today the two companies still work together to serve their joint creative customers – Mac users buy around half of Adobe’s Creative Suite products – but beyond that there are few joint interests.

I wanted to jot down some of our thoughts on Adobe’s Flash products so that customers and critics may better understand why we do not allow Flash on iPhones, iPods and iPads. Adobe has characterized our decision as being primarily business driven – they say we want to protect our App Store – but in reality it is based on technology issues. Adobe claims that we are a closed system, and that Flash is open, but in fact the opposite is true. Let me explain.

show more...

First, there’s “Open”.

Adobe’s Flash products are 100% proprietary. They are only available from Adobe, and Adobe has sole authority as to their future enhancement, pricing, etc. While Adobe’s Flash products are widely available, this does not mean they are open, since they are controlled entirely by Adobe and available only from Adobe. By almost any definition, Flash is a closed system.

Apple has many proprietary products too. Though the operating system for the iPhone, iPod and iPad is proprietary, we strongly believe that all standards pertaining to the web should be open. Rather than use Flash, Apple has adopted HTML5, CSS and JavaScript – all open standards. Apple’s mobile devices all ship with high performance, low power implementations of these open standards. HTML5, the new web standard that has been adopted by Apple, Google and many others, lets web developers create advanced graphics, typography, animations and transitions without relying on third party browser plug-ins (like Flash). HTML5 is completely open and controlled by a standards committee, of which Apple is a member.

Apple even creates open standards for the web. For example, Apple began with a small open source project and created WebKit, a complete open-source HTML5 rendering engine that is the heart of the Safari web browser used in all our products. WebKit has been widely adopted. Google uses it for Android’s browser, Palm uses it, Nokia uses it, and RIM (Blackberry) has announced they will use it too. Almost every smartphone web browser other than Microsoft’s uses WebKit. By making its WebKit technology open, Apple has set the standard for mobile web browsers.

Second, there’s the “full web”.

Adobe has repeatedly said that Apple mobile devices cannot access “the full web” because 75% of video on the web is in Flash. What they don’t say is that almost all this video is also available in a more modern format, H.264, and viewable on iPhones, iPods and iPads. YouTube, with an estimated 40% of the web’s video, shines in an app bundled on all Apple mobile devices, with the iPad offering perhaps the best YouTube discovery and viewing experience ever. Add to this video from Vimeo, Netflix, Facebook, ABC, CBS, CNN, MSNBC, Fox News, ESPN, NPR, Time, The New York Times, The Wall Street Journal, Sports Illustrated, People, National Geographic, and many, many others. iPhone, iPod and iPad users aren’t missing much video.

Another Adobe claim is that Apple devices cannot play Flash games. This is true. Fortunately, there are over 50,000 games and entertainment titles on the App Store, and many of them are free. There are more games and entertainment titles available for iPhone, iPod and iPad than for any other platform in the world.

Third, there’s reliability, security and performance.

Symantec recently highlighted Flash for having one of the worst security records in 2009. We also know first hand that Flash is the number one reason Macs crash. We have been working with Adobe to fix these problems, but they have persisted for several years now. We don’t want to reduce the reliability and security of our iPhones, iPods and iPads by adding Flash.

In addition, Flash has not performed well on mobile devices. We have routinely asked Adobe to show us Flash performing well on a mobile device, any mobile device, for a few years now. We have never seen it. Adobe publicly said that Flash would ship on a smartphone in early 2009, then the second half of 2009, then the first half of 2010, and now they say the second half of 2010. We think it will eventually ship, but we’re glad we didn’t hold our breath. Who knows how it will perform?

Fourth, there’s battery life.

To achieve long battery life when playing video, mobile devices must decode the video in hardware; decoding it in software uses too much power. Many of the chips used in modern mobile devices contain a decoder called H.264 – an industry standard that is used in every Blu-ray DVD player and has been adopted by Apple, Google (YouTube), Vimeo, Netflix and many other companies.

Although Flash has recently added support for H.264, the video on almost all Flash websites currently requires an older generation decoder that is not implemented in mobile chips and must be run in software. The difference is striking: on an iPhone, for example, H.264 videos play for up to 10 hours, while videos decoded in software play for less than 5 hours before the battery is fully drained.

When websites re-encode their videos using H.264, they can offer them without using Flash at all. They play perfectly in browsers like Apple’s Safari and Google’s Chrome without any plugins whatsoever, and look great on iPhones, iPods and iPads.

Fifth, there’s Touch.

Flash was designed for PCs using mice, not for touch screens using fingers. For example, many Flash websites rely on “rollovers”, which pop up menus or other elements when the mouse arrow hovers over a specific spot. Apple’s revolutionary multi-touch interface doesn’t use a mouse, and there is no concept of a rollover. Most Flash websites will need to be rewritten to support touch-based devices. If developers need to rewrite their Flash websites, why not use modern technologies like HTML5, CSS and JavaScript?

Even if iPhones, iPods and iPads ran Flash, it would not solve the problem that most Flash websites need to be rewritten to support touch-based devices.

Sixth, the most important reason.

Besides the fact that Flash is closed and proprietary, has major technical drawbacks, and doesn’t support touch based devices, there is an even more important reason we do not allow Flash on iPhones, iPods and iPads. We have discussed the downsides of using Flash to play video and interactive content from websites, but Adobe also wants developers to adopt Flash to create apps that run on our mobile devices.

We know from painful experience that letting a third party layer of software come between the platform and the developer ultimately results in sub-standard apps and hinders the enhancement and progress of the platform. If developers grow dependent on third party development libraries and tools, they can only take advantage of platform enhancements if and when the third party chooses to adopt the new features. We cannot be at the mercy of a third party deciding if and when they will make our enhancements available to our developers.

This becomes even worse if the third party is supplying a cross platform development tool. The third party may not adopt enhancements from one platform unless they are available on all of their supported platforms. Hence developers only have access to the lowest common denominator set of features. Again, we cannot accept an outcome where developers are blocked from using our innovations and enhancements because they are not available on our competitor’s platforms.

Flash is a cross platform development tool. It is not Adobe’s goal to help developers write the best iPhone, iPod and iPad apps. It is their goal to help developers write cross platform apps. And Adobe has been painfully slow to adopt enhancements to Apple’s platforms. For example, although Mac OS X has been shipping for almost 10 years now, Adobe just adopted it fully (Cocoa) two weeks ago when they shipped CS5. Adobe was the last major third party developer to fully adopt Mac OS X.

Our motivation is simple – we want to provide the most advanced and innovative platform to our developers, and we want them to stand directly on the shoulders of this platform and create the best apps the world has ever seen. We want to continually enhance the platform so developers can create even more amazing, powerful, fun and useful applications. Everyone wins – we sell more devices because we have the best apps, developers reach a wider and wider audience and customer base, and users are continually delighted by the best and broadest selection of apps on any platform.

Conclusions.

Flash was created during the PC era – for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short.

The avalanche of media outlets offering their content for Apple’s mobile devices demonstrates that Flash is no longer necessary to watch video or consume any kind of web content. And the 200,000 apps on Apple’s App Store proves that Flash isn’t necessary for tens of thousands of developers to create graphically rich applications, including games.

New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too). Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.

Steve Jobs
April, 2010

Jon Stewart Slams Apple Over Its Handling of Gizmodo Case

Definitely watch this if you've been following the lost-iPhone-4G saga!

Tonight on The Daily Show, Jon Stewart gave his take regarding Gizmodo's iPhone exclusive and the subsequent police raid on Jason Chen's home. Speaking directly to Apple and Steve Jobs, Stewart didn't hold back his criticism of them. Video inside

Stewart first talked about how "excited" he was to see Gizmodo's report, before mocking the circumstances that led to its acquisition of the device.

Then, Stewart questioned whether it was necessary for Chen's home to be raided, stating, "the Gizmodo reviewer gets the meth lab in the basement treatment after he'd already given the phone back," before talking about how "creepy" Apple—or the "Appholes," as the screen called the company—was for its handling of the case.

Finally, Stewart delivered a direct address to Apple and Jobs in which he criticized the company for its increasing paranoia and obsessive control over the information related to its products, and also took some hilarious shots at AT&T.

State of Web Development 2010

I found this image from my google reader lists.
quite interesting, so I share it all with u guys ^^

Photographic Memory

This is cool! this guy either has a photographic memory or he has an awesome drawing skills.
my opinion: He has both!

Mod Rewrite

A quick guide about mod_rewrite module in apache, please check if your server supports mod_rewrite and that u can edit ur htaccess file. for more thorough documentation read here.
basically to use this redirect, there are some line that you need to put in your htaccess.

Click on below links to view more details about this function:
* RewriteEngine
* RewriteBase
* RewriteCond
* RewriteRule

Rewrite Engine

RewriteEngine on

Put this before all other rewrite commands to activate apache rewrite module.

Rewrite Base

RewriteBase /baseurl/

Put this to specify the base url for ur website, we use this if ur website is not located in the directly in the root domain folder (ex:your website is located at http://www.z3r0c0d3.com/blog) so you need to specify that the baseurl is blog. Put in RewriteBase /blog, so we can also use this value for later processing.

(example is to create a link, we can put baseurl in front of the link to link to other pages in the website.

Rewrite Rule

RewriteRule <Pattern> <Substitution> <[flags]>

This is the redirection rule that is really working to rewrite the request URL to a new address.

Take note that the order of this rule is important as we can implement combined rule to rewrite a request URL. Unlike the previous redirect command in htaccess, that simply redirect the request when the old_address matches. RewriteRule if the pattern matches, will first rewrite the old url to a new url with the substitution, then according to the flags given, continue to examine the next rule and apply second or more rewrite if the pattern matches. When all rewrite rules has been examined (or until Last flag is found) then the request url will then be transformed to the new url (or being redirected to the new url, according to the flag given).
the Pattern here is using regex (regular expression) to compare whether the request URL matches the pattern or not. important to take note is that we can save group of text in the old url and use it in the new url using () in the pattern, and use $N in the substitute.
example:

RewriteRule ^index.html$ another-link.html [R=301]

this will substitude http://dovestation.blogspot.com/index.html to http://dovestation.blogspot.com/another-link.html

and then redirect the request with 301 response code (defined in flag R=301)
RewriteRule ^.*$ http://www.google.com/another-link.html [R=301]

this will redirect all request in http://dovestation.blogspot.com/ to www.google.com/another-link.html.
RewriteRule ^blog/(.*)/index.html$ another-blog/$1/index.php [R=301]

this will redirect requests in blog folder that ended with index.html, to another-blog folder and use the same path in old request before index.html, and put index.php behind.

http://domain.here/blog/1/2/3/4/asd/index.html will be redirected to http://domain.here/another-blog/1/2/3/4/asd/index.php
RewriteRule ^blog/(.*)/images/(.*)[gif|jpg|png|ico|bmp]$ images/$2jpg [R=301,L]

this will redirect all request to an image inside images folder folder in blog to a jpg image in images folder in root domain with the same filename.

http://domain.here/blog/1/2/3/images/some-picture.gif will be redirected to http://domain.here/images/some-picture.jpg
there are some flags that can be specified for the rule, some commonly used are

R=code which will redirect the request to the new url with specified code.

L is a flag to stop rewriting, (meaning don’t examine further rewrite rule sets) and that this is the last rule applied if match.

N means go back to the first rule and do the process all over again with the new url.

NC means to ignore case when matching the pattern.

Rewrite Cond

RewriteCond <TestString> <CondPattern>

Put one or sets of RewriteCond to help filter Request URL for a RewriteRule. So we can put one, two, or more RewriteCond and if all RewriteCond is matched then RewriteRule would be applied.
Some list that we can use for TestString:

HTTP_USER_AGENT

HTTP_REFERER

HTTP_HOST

REMOTE_ADDR

REMOTE_HOST

REMOTE_USER

REQUEST_METHOD

PATH_INFO

QUERY_STRING

SERVER_NAME

SERVER_ADDR

SERVER_PORT

THE_REQUEST

REQUEST_URI

REQUEST_FILENAME

THE_REQUEST

REQUEST_URI

REQUEST_FILENAME

CondPattern is a regular expression with some additionals:

“-d” is an existing directory

“-f” is an existing file

“!” continued by other CondPattern is to specify a non matching pattern.
example:

RewriteCond %{QUERY_STRING} .*

RewriteRule ^blog/(.*)$ another-blog/$1? [R=301,L]

the RewriteCond will check for every request with/without query string. Inside blog folder will be redirected (RewriteRule) to another-blog. We can put the “?” sign behind to remove the query string from the old url.
RewriteCond %{REQUEST_FILENAME} !-f

RewriteRule ^.*$ index.php [L]

the RewriteCond will check if the request is not an existing file, then rewrite the URL to index.php (but does no redirection because we didn’t specify R flag). so the url in address bar will stay the same, is just that the server will serve index.php to the browser. the RewriteRule won’t be applied if the request points to an existing file. (meaning it will serve the designated file if it’s exists, like images/css/js).

Stay Hungry, Stay Foolish

I like this quote from Steve Jobs’ Commencement speech for Stanford University. Steve said to the graduates to stay hungry, and stay foolish. What I learn from this quote are:

- stay hungry: people that is in hunger crave for something, they will try and try to get what they crave for, and not just being idle and stay where they are, they force themselves to be creative to get what they want. We should not stay idle, and stay with our current condition, keep on moving forward, and crave to be better person. Don’t settle with this, keep looking and moving forward. This talks about character, about skills, also about ideas, try to keep on craving forward, be creative to get the ‘food’. innovate new ideas, build a better character, learn new skills, keep moving forward, stay hungry!
- stay foolish: people that feel that they are a fool, realize about their weaknesses, and that keeps them modest and make it easier for them to learn. they thirst to learn something new cos they knew that they need to learn and to tolerate their foolishness. We need to keep on learning, know that there’s always a bigger sky up there, a roof for house, a sky for the world, and a universe to conquer. stay foolish, keep on learning!

Kuroshio Sea

Kuroshio Sea - 2nd largest aquarium tank in the world - (song is Please Don't Go by Barcelona) from Jon Rawlinson on Vimeo.

a nice shot from Jon Rawlinson. This is taken at the Okinawa Churaumi Aquarium in Japan. So those who plans to travel to Japan, I think this gigantic aquarium is definitely worth a visit.
The main tank called the “Kuroshio Sea” holds 7,500-cubic meters (1,981,290 gallons) of water and features the world’s second largest acrylic glass panel, measuring 8.2 meters by 22.5 meters with a thickness of 60 centimeters. Whale sharks and manta rays are kept amongst many other fish species in the main tank.