Posts

java bot

JavaScript Engine Develops Consciousness, Hates Programmers

(From the point of view of V8 JavaScript Engine)

So I’m just sitting there, minding my own business and all of a sudden, out of nowhere this guy gets up in my face and says:

Oooookay…. now at this point I don’t know what to expect.  “numpoints” isn’t any variable I’ve ever heard of, and 5 seems like a fine value to assign to it.  Ditto for this “graphValues” business so I decided to play ball.

Next he’s all like

Woah woah woah there buddy what is this “$” ?  Never heard of it.  I have no idea what you’re talking about.  I ain’t searching the internet for your JavaScript library of choice. Here’s how this works: you do the thinking and the typing, I do the doing.  Thanks.  Try again.

Okay so after he tells me ALL about this “JQuery” thing (that he just refers to as “$”) he sends me back the same stuff as before.

So I un-hide this maincanvas thing for him.  But big Mr. “Programmer” still isn’t satisfied. He says:

And I nearly want to puke.  Why keep telling me over and over what canvasElement and ctx are each time?  I’ve known that since this “i” was zero.  Ugh.  But, alas, who am I to judge?  He goes on:

I didn’t even need to read any more.  Sorry buddy a canvas context doesn’t have any method called “movTo”.  So I says to the guy:

Now I know what you’re thinking. It seems pretty obvious from a human reader’s perspective that this dolt programmer is trying to use the “moveTo” method, so why, you ask, don’t I suggest this to him? I simply refuse to be an accomplice in the dumbing down of the JavaScript language. Sure this time I could tell him that he forgot the “e”, but what’s next? Should I let him leave out the “a” in a variable declaration? Should I allow curly OR square brackets in array assignment?  Hell why don’t we just forget the semicolon altogether!?!? No. No leeway will be given to the barbarians constantly attacking my native tongue.

So… long story short he figured it out and then his whole quaint little program is:

So after all that what does this guy end up with?

One of these “radar charts” that are just all the rage these days.  But there are no axes labels, a boring color scheme, no support for multiple lines, no way to dynamically load data, no error checking, generally no way to reuse any of this code. The list goes on and on.  A good start; that is the best I can say about this program.  I keep telling myself I will stop caring about these sorts of things but I just can’t.

And the icing on the cake?  It’s only Monday.

speed1

9 Easy Ways to Speed Up Your Website’s Load Time

Google recently announced that they began factoring in web site load time into their search engine ranking algorithm. This has brought the importance of a fast load time front and center even though “fewer than 1% of search queries will change as a result” of this update. MentorMate.com likely was not impacted very significantly from this change to Google’s ranking algorithm; however, we still decided to optimize our site’s load time. We did this because Google showed that “delays of under a half-second impact business metrics.” It’s better to be safe than sorry, and besides, it’s not that difficult to optimize your site. We recommend you do the same with your web site, here are nine easy ways to do just that:

1. Place scripts near closing body tag

Scripts block parallel downloads. While a script is downloading, the browser will wait until it finishes before downloading anything else. This is why it is recommended that you get everything else out of the way before having your users download scripts.

2. Remove any broken links/references

Simply enter your web page URL in Pingdom’s Full Page Test Tool. This tool will color-code any broken links/references in red so you can easily identify them.

3. Specify image dimensions

When image dimensions are not specified in the HTML and/or CSS of a web page, the web server must spend resources calculating these dimensions. It’s particularly important to specify the dimensions of images being used in conjunction with heavy Javascript image-manipulation libraries.

4. Localize external file references to minimize DNS requests

This is another spot in which Pingdom’s Full Page Test Tool comes in handy. Enter your URL and look for any file references to external domains. If possible, copy these files onto your own domain and link to them locally to minimize DNS requests.

5. Minimize slow-loading libraries and external widgets

Libraries and external widgets need to be chosen carefully. Sometimes it’s worth sacrificing load time for particularly engaging/useful libraries and/or widgets; however, sometimes you can live without the library and/or widget. For example, on MentorMate.com we felt it was worth sacrificing Sexybuttons for better load time, but sacrificing load time for Shadowbox. External widgets can be particularly bad for a site’s load time because of their reliance on external servers.

6. Compress your files using gzip

These days, gzip comes pre-installed on most web servers. You can check to see if gzip is running your server quite easily using Google’s Firebug “Speed Test” extension. Open Firefox, visit the web site you’d like to optimize, and open Firebug. From there, click “Analyze Performance” and select the “Resources” tab. Then you can expand any file to view details. If gzip is installed and compressing the element you are viewing, you will see what is highlighted in red in the following screenshot:

gzip

7. Merge Javascript and CSS files or use Minify

Depending on the complexity of your site, it can be quite time consuming to merge all CSS into one file. The same goes for Javascript. This is why Minify was developed.  Minify “combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.” Then you simply need to install it on your site, select the files you want it to serve together, change some references in your header, and you’re good to go. This will minimize your site’s load time by further helping to reduce HTTP requests.

8. Load cross-browser compatibility hacks only for necessary browsers

For instance, we use the IE PNG FIX for IE6 PNG transparency compatibility. This script adds an extra second to web site load time. For this reason, we only load the script if the visitor is running IE6 by applying an IE6-specific stylesheet which references the IE PNG FIX. This way the extra load time will only impact IE6 visitors.

We simply added the following line of code to our header:

9. Use CSS sprites to minimize HTTP Requests

A CSS sprite is the combination of multiple images into one. Then CSS is used to reference different aspects of the image where needed. This reduces load time by minimizing all of these images into only one  HTTP request. CSS Tricks has a good example of CSS sprites.

iphone webview1

How to load a local .CSS file & JavaScript resources using iPhone UIWebView Class

This post will cover the basic setup and creation of an application with web content for iPhone that will load local CSS files and some useful JavaScript functions. Most of these hints I found partially in different blogs and forums listed in the reference section. The idea is to collect all them together. You can use the following technique to create a more attractive application design.

Creating an application using UIWebView control is not the focus of this post. Here is a helpful beginner’s tutorial for creating an application using UIWebView. We assume that you are already familiar with this topic.

UIWebView load

Our work will start with a little change in calling load method of the UIWebView instance. Instead of loadRequest

we use the loadHTMLString method, providing an NSString object that contains HTML code of our page as a parameter:

To get this page to load resources and styles correctly, you have to set up the right URL:

screen1

Initial loading screen with progress indicator

On the following reference[2] you can find a short and clear revision of the problem of displaying local images in a UIWebView using CSS. To use relative paths or files in UIWebView, you have to load the HTML into the view with the correct base URL parameter. The following example shows how to do this:

And then call load method of UIWebView provide above NSURL parameter:

A short explanation: An NSBundle object represents a location in the file system that groups code and resources that can be used in a program. mainBundle method returns the NSBundleobject that corresponds to the directory where the current application executable is located. bundlePath instance method of NSBundle returns the full pathname of the receiver’s bundle directory. NSURL class is used to create an object which will hold the URL information. It provides a way to manipulate URLs and the resources they reference. loadHTMLString method of UIWebView has parameter base URL that accept an NSURL object instead of a pathname as the file reference. Giving the above base URL to UIWebView, you can refer to your bundle’s resources directory like this:

Or from within CSS like this:

It’s important to note that resources (images, CSS and JavaScript Files) inside your application bundle are at the root of the bundle, even if you place them in an separate group (folder) in your project.

Giving the correct URL to UIWebView will allow you to refer to local resources in your page, but it does not work in all cases. If you want to use JavaScipt, some additional settings have to be done.

Link CSS and JavaScript files

screen2

Second loading screen with progress indicator

Now you can use generic HTML technique to add CSS and JavaScript to the web page and displaying in a UIWebView.

Do not forget to add your CSS and Javascript files to the xCode project (if you are using external files).

Some additional actions have to be taken before starting your application and using JavaScript functions.[3]

XCode setup (*.js) javascript as some type of source code needs to be compiled in the application. We would like to include it as a resource so I’ve solved it by doing two things:

  1. Select .js file and in the “Detail” view unselect the bullseye column indicating it is compiled code
  2. In the “Groups & files” view expand the “Targets” tree and expand the application then go to “Copy Bundle Resources” and drag the *.js files into it.

The Apple dev forums has a posted solution. [4] You need to do two things – select the .js file in your project, and turn off the checkbox that indicates that it is compiled (the “bullseye” column). If you don’t do this, you’ll get a warning in your build log about being unable to compile the file (which should be your first warning – always try to figure out and and correct any and all warnings that appear in your build).

Set transparent background color for UIWebView

MentorMate

Final screen with graph representation.

In our example we need to figure out a transparent background for UIWebView. On the parent View Container we have additional controls (buttons, labels) and already defined background. The following code will set this:

Example

MentorMateDemoJS is a simple application example which uses the settings described above. It is a view-based application that shows a graphical representation of some data. Application behavior consists of a predefined call with formatted data to Vvidget Service[5] for graph generation. The service returns an image that is loaded in UIWebView Design Resource. The update button is added to resend the graph request and update view.

The Problem: Graph image requires some time for loading.

Our Decision: Notify user of graph loading process by showing a progress bar during load time.

To achieve this, we use UIWebView with local resource of two JavaScript functions. One to show/hide notification messages and the other to visualize a progress bar during loading time. In the provided sources you can find all these steps implemented.

Sources of the example iPhone application

References

  1. iPhone SDK Articles, UIWebView Tutorial
  2. iPhone Development Blog, UIWebView – Loading External Images and CSS
  3. StackOverflow, iPhone UIWebView local resources using Javascript and handling on orientationChange
  4. Developer Forum, UIWebView and JavaScript
signature1

How to use HTML Signatures in Gmail (Google Mail)

Plain Text Signature

First of all you need to decide on the plain text you will input into your default text-only signature.

Example

Full Name

Job Title

www.spydermate.com

Example Code

HTML Signature

Next you will need to design the HTML signature version of the same signature.

Example

Full Name

Job Title

www.spydermate.com

Example Code

Javascript Bookmark

Next a Javascript Bookmark must be setup to find the Plain Text Signature and replace it with the HTML Signature

Example Code

Gmail Settings

Next Gmail must be setup to use the Plain Text Signature. Then the Signature tweaks feature in Gmail Labs needs to be enabled. Once all these steps have been completed, the user simply has to compose an email and click on the Javascript Bookmark in order to use their HTML Signature. The best part about this method is that even if the user forgets to click on the Javascript Bookmark for the HTML Signature, at the very least the Plain Text Signature will always be there.

Known Issues

This script will not work while a chat window or a task window is open in Gmail. These windows must be closed before this script can be used properly. We’ve also noticed that this script does not find and replace properly in FireFox while running the Personas Add-On. If you know of any other issues with this script specific to a certain browser or plugin to a certain browser, please make a note of them in the comments.

WiseStamp

If you use FireFox as your primary browser you can simply use the FireFox Add-On WiseStamp (https://addons.mozilla.org/en-US/firefox/addon/8206) to accomplish the same result. However, the solution we just described above will also work in other browsers and does not require any additional browser add-on installations.

chrome ie1

Is the Google Chrome Browser faster than Internet Explorer in JavaScript performance?

JavaScript Speed in Google Chrome versus Internet Explorer

The latest stable version of Chrome browser at the time this article was written was 3.0.195.33. We will compare it to the current version of IE, which is 8.0.6001.18865. We started with Google’s own benchmark that is hosted at their site and is called V8 Benchmark Suite. The result differed from one machine to another, but the score of the Google browser was always about 38 times higher than the one of IE – very close to the numbers that Google is claiming. Of course, as much we believe in the accuracy of the tests, we wanted to use some independent benchmarking sites, too. After some research, we found some of the major ones are SunSpider JavaScript Benchmark and JSBenchmark. Their tests are a complex mixture of different tasks, including drawing, code decompression, encrypting and operations with arrays, dates and handling exceptions. As we expected, the difference between the two browsers was much smaller compared to Google’s own test, but it was again pretty impressive. The results differed from platform to platform, but overall the “SunSpider” test showed that Chrome is ten times faster, while the “JSBenchmark” reported that it is “only” seven times faster.

JavaScript Speed Test

In order to conclude that Internet Explorer is much slower than Google Chrome in JavaScript performance though, we still needed more facts. As an alternative to the complex and heavy testing suites, we created a very short example with few array operations. We wanted it to be fairly simple and pretty close to real life examples. Basically, this piece of code assigned random numbers to an array of 20,000 items. Then we reversed the order of the elements. In the next two steps we sorted it in ascending and descending order. The script outputs the milliseconds needed for its completion. We did not expect a lot of difference in doing something so basic. Here is the code:

JavaScript Speed Test Source Code

JavaScript Speed Test Results

There were differences from PC to PC as with the other tests, but the tendency stayed the same. The time of completion of the tasks in Chrome was about six times faster than IE. This was the smallest advantage the Google browser had compared to the tests that were run so far, but it sounds pretty prestige for Chrome to have such a boost in performance for a really small task.

In conclusion, we can say that Google Chrome has set new standards for speed as far as JavaScript is concerned. Although the advantage the browser has might not be as big as Google claim in their advertising campaigns, it is something very impressive and gives the users additional speed for simple everyday tasks as we saw in the example above. We are looking forward to see the ninth version of Internet Explorer soon, as in the early discussions the developers show ambition to reach the level of performance that Chrome already has. The acceleration of the JavaScript engines for all the browsers can only bring benefits to users and contribute to the creation of richer, more complex Internet applications.