TraceMonkey: Another Curious George

TraceMonkey is an updated version of Mozilla Firefox’s JavaScript engine. So what’s so great about it? It’s a looooot faster! Mozilla executives has been stated saying that this new engine is 20 to 40 times more faster than the previous JavaScript engines.

Though we all know that Mozilla has a reputation to give their products some really slick names, TraceMonkey has actually been derived from an earlier JavaScript engine then known as the SpiderMonkey (sounds really weird to someone from the animal kingdom). SpiderMonkey was the first ever JavaScript engine created for the Netscape browser. Here’s what Mozilla has to say:

TraceMonkey adds native‐code compilation to Mozilla’s JavaScript engine (known as “SpiderMonkey”). It is based on a technique developed at UC Irvine called “trace trees”, and building on code and ideas shared with the Tamarin Tracing project. The net result is a massive speed increase both in the browser chrome and Web‐page content.

Source: http://lifehacker.com/5082997/why-tracemonkey-is-going-to-blow-your-web-browsing-mind

Some other good resources to learn about TraceMonkey:

• JavaScript:TraceMonkey
• Andreas Gal’s TraceMonkey FAQ post
• TraceMonkey benchmarks
• John Resig – TraceMonkey
• How To Activate TraceMonkey in Firefox 3.1
• TraceVis: Getting some eyes into TraceMonkey
• Brendan discusses how TraceMonkey is climbing faster; Ruby on the Web with V8

10 Practical Uses For AJAX

The article from noupe.com provides the reader with 10 useful and practical ideas for using AJAX (don’t know what’s that yet?) After the “Ajaxian Revolution”, many sites started to AJAX almost without thinking. They were trying to squeeze AJAX into whatever they think was possible. This lead to memory leaks, security holes, and made them look like ***holes (even though I censored my badmouth, people can still get what I am saying. See RIAA and the homeez, you can NEVER censor the Internet!). So here are the 10 practical uses for AJAX:

1. Login Forms
2. Auto-Complete
3. Voting and Rating
4. Updating With User Content
5. Form Submission & Validation
6. Chat Rooms And Instant Messaging
7. Slicker UIs
8. External Widgets
9. Lightboxes instead of pop-ups
10. Using AJAX With Flash

I was just thinking…the #10 usage seems pretty cool. We all know how Flash revolutionized the Internet and we also know how AJAX is revolutionizing the web today, and now if you think about mashing up these two mammoths of web, you can create a monolith!

Source: http://www.noupe.com/ajax/how-ajax-works.html

Create a REST API with PHP

The abbreviation API stands for Application Programming Interface. What does it do? Well, let’s say it enables your website to be plugging enabled. This means that other websites can request information from your website and your website can process the data and send the result back to the website that requested it. Your source code is always kept intact from outsiders. API is highly synonymous with Object Oriented Programming (OOP), since without the OOP concept the plug-n-play ability of your website wouldn’t be achieved.

A really good example of an API would the Facebook Platform where thousands of new applications get added everyday. How do they work? Simple. Suppose you have a website and you want to make use of the Facebook API. So you request a particular information (suppose the number of friends of a user) and Facebook returns the result to you. So you see, you are not accessing the source codes of Facebook but you can use the information located in Facebook and adapt it for your own use. That’s API in a nutshell. So how do you get to make one? Here’s a great article by Ian from Gen X Design:

One of the latest (sort of) crazes sweeping the net is APIs, more specifically those that leverage REST. It’s really no surprise either, as consuming REST APIs is so incredibly easy… in any language. It’s also incredibly easy to create them as you essentially use nothing more than an HTTP spec that has existed for ages. One of the few things that I give Rails credit for is its well thought-out REST support, both for providing and consuming these APIs (as its been explained by all the Rails fanboys I work with).

Source: http://www.gen-x-design.com/archives/create-a-rest-api-with-php/

PHP, JSON and JavaScript usage

Source: http://ditio.net/2008/07/17/php-json-and-javascript-usage/

Today i want to introduce you to jSON (JavaScript Object Notation), in short, it is a simple format designed to exchange data between different programming languages. I will show you how to create JavaScript object, convert it to JSON string, and send to PHP script, which will decode jSON string to readable format (for PHP). But that’s not all, PHP script will create it’s own data object encode it to jSON string and send it back. All communication between JavaScript and PHP will be done thru AJAX.

Bunch of OOP Tutorials

Lesson: Object-Oriented Programming Concepts by Java

Basically it’s an introduction to Object-Oriented Programming written by Java experts. It’s a delight for programmers though since the tutorials mainly focus on the concept of the OO Programming rather than specific language syntax. Covers most of the topics in OOP including interfaces.

The Object Oriented Programming Web

I guess the site can describe itself better than I can:

The Object Oriented Programming Web publishes FREE programming and computer science tutorials, lecture notes, course slides and e-books. OOPWeb.com is a great resource for all programmers and computer science students, but it’s especially popular among those who are interested in C++, Java and Object Oriented Programming.

And damn, it has some of the nicest collections of algorithms, ranging from graph theory to Sorting and Searching algorithms

Object Oriented Programming in JavaScript by Mike Koss

I know it’s not a language independent tutorial but it is really, really an excellent tutorial. And besides, most of the web designers and programmers need to know JavaScript, the so-called “behavioural” language of the web. HIGHLY RECOMMENDED.

JavaScript Object-Oriented Programming

This is an article from SitePoint, so we can expect it to be really good. And it is. I am not much of a hard-core programmer but I can say that it’s a bit technical and as the name suggests, the article is language specific. But then again, everybody developing the web needs to know JavaScript by heart.

Object-Oriented Programming Concept

The tutorial is relatively short and can be skimmed pretty quickly (hey! that’s a plus point for us lazy coders). Mainly deals with the different types of relations between objects, their lifestyles and soap operas (okay, cancel the last one). Has some neat and easy-to-understand examples (cars and pizzas).

OOPS Concepts

This article from Exforsys Inc. is what you really want. It’s language independent and although sometimes it bends towards technical terms, it is relatively easy to understand. P.S. I first thought the site name was Exorcist (dyslexic? hmm).

What is Object Oriented Programming (OOP)? by Tony Marston

I don’t know about you but I really liked Tony’s series of articles about Object-Oriented Programming. It’s really meant to be Newbie-Object-Oriented-Programming (NOOP? I thought it would be noob). The author puts some really neat examples to make sure that everyone can understand the basic concept of Object-Oriented Programming.

Object Oriented Programming with PHP by Kevin Waterson

I know some guys get upset seeing the wealth of information scattered around the web but none of them giving suitable explanations. Well, Kevin is one of them then. This guy probably packed a whole book into one complete page explaining all the important concepts of OOP and also for us lucky web developers, he has written the article using PHP! He discusses advanced topics like Autoload, Overloading, and Class Constants. MUST READ.

OO PHP Part 1: OOP in Full Effect

And boy didn’t we see the effect in full or what? This article is a whopping huge post of detailed information about the PHP OOP features. Yes sirree it is not language dependent article but WTH (notice: I didn’t use WTF…I think I just did). So get some cups of 100% caffeinated coffee and start gaining vital knowledge about OOP.

AJAX Lessons – ajaxlessons.com

Source: http://www.ajaxlessons.com

I saw this site while I was in the hunt for creating a live AJAX page. That is, a page where it gets updated “asynchronously” by user data. The site has different workshops for AJAX applications and I found what I was looking for. Click here to see the tutorial.

Other than that, it lists many interesting tutorials including Max Kiesler’s collection of AJAX tutorials.

Collection of JavaScript Namespaces Tutorials

JavaScript: Namespaces from Andre Lewis on Tech

This article by Andre Lewis really interested me as it is both informative and really easy to grasp for the first time. Andre also provides nice simple examples and to the point.

JavaScript: Put everything in a namespace from lixo.org

The syntax might look a bit difficult at first, but the script is highly effective and modern.

Respecting the JavaScript global namespace by Mark A. Ziesemer

It is a plea from Ziesemer. Yes, a plea to all the developers out there to use JavaScript namespace. Now you got the importance of it? (no sarcasm intended btw)

JavaScript namespace function by Mark A. Ziesemer

This is the second installment for his “Respecting the JavaScript global namespace” article

Namespacing your JavaScript by Dustin Diaz

He is really to the point. Quoting Dustin, “First things first, we need a name to space“. Sounds logical to me!

JavaScript and Namespaces (howto) by Michael Schwarz

Though the article received no comments, it is simply simple (?) and Michael does know that newbies will be confused about the so-called JavaScript namespace.

30 HTML Best Practices for Beginners

Source: http://net.tutsplus.com/tutorials/html-css-techniques/30-html-best-practices-for-beginners/

Just for your curiosity, I am naming the main 30 practices:

1. Always Close Your Tags
2. Declare the Correct DocType
3. Never Use Inline Styles
4. Place all External CSS Files Within the Head Tag
5. Consider Placing Javascript Files at the Bottom
6. Never Use Inline Javascript. It’s not 1996!
7. Validate Continuously
8. Download Firebug
9. Use Firebug! (duh!)
10. Keep Your Tag Names Lowercase
11. Use H1 – H6 Tags
12. If Building a Blog, Save the H1 for the Article Title
13. Download ySlow
14. Wrap Navigation with an Unordered List
15. Learn How to Target IE
16. Choose a Great Code Editor
17. Once the Website is Complete, Compress!
18. Cut, Cut, Cut
19. All Images Require “Alt” Attributes
20. Stay up Late
21. View Source
22. Style ALL Elements
23. Use Twitter
24. Learn Photoshop
25. Learn Each HTML Tag
26. Participate in the Community
27. Use a CSS Reset
28. Line ’em Up!
29. Slice a PSD
30. Don’t Use a Framework…Yet

Using JSON with JavaScript

Source: http://blog.platinumsolutions.com/node/91

JSON (JavaScript Object Notation) is a light weight data interchange format alternative to using xml with Ajax. It is a subset of the JavaScript object literal notation that which is basically made of 2 object types. The first being a collection of name value pairs similar to a hash table. An ordered list of values is the other, basically representing an array.

Content visualization techniques and views

Original Source: http://www.noupe.com/javascript/10-smart-javascript-techniques-for-manipulating-content.html

1. jQuery pageSlide: jQuery pageSlide is a plugin for jQuery that slides the viewable webpage off-screen, revealing and populating a secondary interaction pane. It may be used in a similar manner to Lightbox, where screen real estate and centralization of the user experience are a concern.
2. Create a simple ul list with a nice slide-out effect for li elements: We want to obtain this effect: when an user clicks on a link (”Hide”), the related
   element disappear with a nice animated slide out effect. A simple way to implement an animated “disappear” effect using MooTools slideOut()
3. Portfolio Layout Idea Using jQuery: Benjamin Sterling created an interesting portfolio layout and added a nice easing method to the main content panel using easeOutQuad and easeInQuad using jQuery easing plugin.
4. Creating a Slick Auto-Playing Featured Content Slider: Niall Doherty’s Coda Slider inspired lot of designers and got them started quickly designing around it. Chris Coyier created a Slick Auto-Playing Featured Content Slider using Coda Slider plugin pretty much “out of the box” and added to it.
5. Easy Image or Content Slider: Easy Slider enables images or any content to slide horizontally or vertically on click. It is configurable with css alone.
6. mooSlide: mooSlide is nice replacement of the common “lightbox” module. It has some interesting options to influence the look and behaviour of the sliding box.
7. jQuery.SerialScroll: jQuery.SerialScroll allows you to easily animate any series of elements, by sequentially scrolling them.
8. Agile Carousel: Agile Carousel allows you to easily create a custom carousel.
9. Animated JavaScript Slideshow: This extremely lightweight JavaScript animated slideshow script includes a number of cool features to to style your content: description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status.
10. Sexy Lightbox 2: Sexy Lightbox 2 is a sexier and lighter clone of the classic Lightbox. Supports displaying images and HTML elements.
11. UI.Layout: Was was inspired by the extJS border-layout. The UI.Layout plug-in can create any UI look you want – from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.