SBala

JavaScript Interpretations

Internet Explorer is finished. End of story. If there was any hope for the buggy browser from Redmond waiting to surprise thousands of developers, it has now been put to rest by the onslaught of JavaScript performance increases. While Internet Explorer is still catching up on trying to render CSS correctly, its primary competition - Webkit and Gecko - are speeding ahead. The Browser Wars are alive again, and this time IE is not invited to party.

It started ten months ago when I noticed Minefield (Firefox's Nightly Build) renderring pages faster than anything I had used before. I read into it - Mozilla had developed a new JavaScript interpretation engine called SpiderMonkey, which improved performance on top of the improved memory consumption and an "Awesome Bar" interface. I thought Firefox had just won. I was wrong.

It was after Firefox 3's glory was made public to the world on a record-setting launch date that WebKit announced some very interesting news. They unveiled Squirrelfish.

SquirrelFish is a register-based, direct-threaded, high-level bytecode engine, with a sliding register window calling convention. It lazily generates bytecodes from a syntax tree, using a simple one-pass compiler with built-in copy propagation[...]

SquirrelFish’s bytecode engine elegantly eliminates almost all of the overhead of a tree-walking interpreter. First, a bytecode stream exactly describes the operations needed to execute a program. Compiling to bytecode implicitly strips away irrelevant grammatical structure. Second, a bytecode dispatch is a single direct memory read, followed by a single indirect branch. Therefore, executing a bytecode instruction is much faster than visiting a syntax tree node. Third, with the syntax tree gone, the interpreter no longer needs to propagate execution state between syntax tree nodes.


After the introduction of Squirrelfish, WebKit and Safari seemed much more appealing; until Google unveiled their Chrome Browser. Google Chrome uses the WebKit rendering engine for HTML and CSS, but opted to create a separate JavaScript implementation for performance. Google's V8 JavaScript Engine increases performance by compiling JavaScript to native machine code before running it, rather than to a bytecode or interpreting it. Thus, JavaScript applications will run at the speed of a compiled binary.

As if Chrome's V8 engine were not an advancement enough, Firefox's TraceMonkey JavaScript engine took shape in their beta version of Firefox 3.1. TraceMonkey utilizes a technique called tracing to speed up JavaScript performance. Tracing involves watching for commonly-repeated actions (such as loops, function calls, or type checking) and tries to optimize their resulting native code into the lowest number of actions. The performance war didn't end here either, however.

SquirrelFish, not to be outdone, was reincarnated into SquirrelFish extreme.

SquirrelFish Extreme uses four different technologies to deliver much better performance than the original SquirrelFish: bytecode optimizations, polymorphic inline caching, a lightweight “context threaded” JIT compiler, and a new regular expression engine that uses our JIT infrastructure.


Opera is left out from the JavaScript optimizations, but Internet Explorer improvement is nonexistent in the realm of standards-compliant browsers. With very little known as to what exactly the future will hold, it is still certain that web development will entail newer, faster, and more exciting enhancements.

| January 1, 2009 at 11:34am | 0 Comments

5 Ways to Ditch HTML

When making any sort of web application, a backend interface is a must-have, and nothing makes this more user-friendly than a non-HTML implementation for the text areas in the interface. Below is a list of 5 different, solid content editing methods - each with their own style and featureset; and best of all, they are all free. Without further ado, here is the list (in no particular order).

1. Nice Edit


niceedit
NiceEdit is a standalone JavaScript WYSIWYG implementation that uses some of the beautiful FamFamFam Silk Icons for its interface. It takes simple textareas and converts them to a fully functional and familiar interface with a fair bit of functionality. The full panel includes text decorations, paragraph alignments, WYSIWYG lists, font sizes, font families, indenting, support for images, links, subscripts and superscripts, horizontal rules, a format remover, and a view for HTML source editing.

2. FCK Editor


fckeditor
The FCK Editor is very similar to NiceEdit minus the "lightweight". FCK is a solid (and large) editor with a ton of customization options and buttons. FCK, unlike NiceEdit, is not meant to simply create content for the web; rather, the FCK editor aims at bringing the feature-rich environment of desktop word-processing to the web through JavaScript. When fully configured, it has buttons for editing the source, saving, adding pages, previewing the page, selection of templates, copy, cut, paste (supports pasting from MS Word), undo, redo, find, replace, select all, remove format, forms, checkboxes, radio buttons, text fields, text areas, selection fields, buttons, image buttons, hidden fields, text styling, subscripts and superscripts, blockquotes, lists, indentations, links, pictures, Flash-based content, tables, smileys, printing, and spell-check.

3. TinyMCE


tinymce
TinyMCE is probably the most popular and the most widely recognized JavaScript-based WYSIWYG editor around. It is used extensively in many Content Management Systems and has a very robust feature-set that rivals the FCK Editor. It has all of FCK's features, but has a plugin library and a wide userbase. A few extra buttons that TinyMCE has on top of FCK's offering is a button for non-breaking spaces, special characters, page breaks and a full-screen mode.

4. MarkDown


markdown
While Mark It Up adds HTML tags, MarkDown uses its own unique markup system that is easily understandable and requires much less work to both read and edit. It is a natural flow that is entirely text-based and does not use any sort of interface for publishing. This is a similar approach to Wiki Syntax, but (in my opinion) easier to learn and understand. It is hard to explain before you see it in action, so pay the Daring Fireball a visit.

5. Mark It Up


markitup
Where TinyMCE, FCK, and NiceEdit are WYSIWYG, Mark It Up is more of WYPISWYG (what you press is what you get). Mark It Up doesn't entirely ditch HTML, but makes using HTML as an editing format much easier. Instead of actually rendering changes made to the text inside of the text area, Mark It Up simply shows the tags, which is very useful if you like fine-tuning the HTML content of the content. It also works very well as a complement to blog comment forms due to its small set of buttons. It is based on jQuery, which is a put-off for some, but a major benefit for others (all dependent on whether or not you already use jQuery - chances are, you do). But wait! There's more! Mark It Up even works as a BBCode, Wiki Syntax, Textile, Dotclear, and Markdown Syntax editor.

| December 9, 2008 at 4:10pm | 0 Comments

You Comment, I Follow

Since I just switched CMS's, (from Wordpress to Habari) I also made a new change. This blog is now a "Dofollow" blog. If you post a valuable comment, I will follow your link for SEO purposes. I get more user participation, and my users in turn receive a little bit of Pagerank love.

If you have any comments, please feel free to post them up. Just remember a few things if you want your comment to be approved.

  1. Be Respectful
  2. Please Post A Valuable Comment (More than just a quick one-liner)
  3. Don't Abuse The System (I've got Akisment)
  4. Don't add an obscene amount of useless (not pertaining to the subject) links to your comment
  5. Have Fun!

| November 29, 2008 at 1:29pm | 0 Comments

10 Reasons You Should Use 960

Although CSS frameworks and grid systems are relatively new, Blueprint tends to receive most of the attention when speaking of building a grid-based layout. Blueprint is great, but sometimes the extra features in it are unnecessary for most people who just want a fundamental and easy to implement grid. The 960 Grid System is just that.

1. It's LightweightLet's face it, adding too much extra bloat just for a CSS framework is the last thing a web developer wants. Adding only 3kb with a fully functional grid is a good compromise of functionality and efficiency.2. The Magic NumberThe 960 Grid System uses the backbone width of 960 pixels, which is the magic number for all modern monitors. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. The large number of divisors that it has makes it an ideal candidate for website widths. It isn't a good choice for fluid layouts, but does a great job of grid layouts.3. Reset Your ValuesThe 960 Grid System includes a small file that includes a statement that automatically resets all of the default browser styles that commonly plague a good grid layout. This ensures that your grid looks the same - regardless of which engine is rendering it.4. 12/16You can make a grid composed of twelve or sixteen columns. This allows you to tweak the widths of the various elements on a page, but still maintain a unified alignment with the columns.5. Auto Margins960 automatically adds margins to its grid-based elements, so they never overlap. 'Nuff said.6. Typography960 automatically sizes text for you, which makes things look pretty good with sans-serif fonts. If you don't like any of the settings, you can easily edit and change them without harming your grid.7. Sketchy960 provides printable sketch paper that allows you to draw and plan using the column-grid system before you begin coding.8. Openness960 is 100% open source. It is licensed under the GNU GPL and the MIT license. This basically allows you to do anything you want with the code. The MIt license permits any use, reproduction, sale, and modification of the 960 Grid System as long as the code remains under the very same license.9. It's Float-TasticIt is very easy to arrange block-level elements by adding float attributes to them. Since 960 takes care of all the sizes and margins, your block-level elements arrange themselves without any width-related hassles. Also, remember to take advantage of using multiple CSS classes by separating class names with a space.

10. It's Easy

Simply add the class "grid_[number]" to your block-level elements to specify the amount of columns that composes their widths, and and the class "container_12" or "container_16" to specify how many columns are going to be in your main container/block-level element. See the demo and view its source for an idea of how it works.

| November 16, 2008 at 1:49pm | 0 Comments

25 Innovative/Experimental CSS Techniques

Here are some interesting CSS techniques that do some really interesting things. Not all of them are completely perfect, but a good lot work in Firefox/IE/Opera. Although generally the use of CSS techniques that involve hack(ish) code is something I disapprove of (since browser rendering behaviors change), these are meant to show the power of CSS rather than a list of things that are ready for use.?

[List of CSS Techniques]

My favorites include:

  • CSS House 2 (a cartoon image of a house with gradients - no images - pure css)
  • The CSS Sticky Footer
  • CSS Menu Descriptions
  • CSS Gradients & Gradient Text
  • CSS Bar Graphs

| October 23, 2008 at 6:46pm | 0 Comments

 1 2 3 4 Next →