The majority of methods use JavaScript to trigger the functionality. The issue here is that external scripts increase the page loading time. If you load to many scripts, your website could be punished for this by the search engines by reducing the page’s position in the rankings. Depending on the number of social media buttons that you embed, you could be loading multiple external JavaScript files.

But JavaScript can also be used for tracking purposes. Visitors who load a web page with external JavaScript will always at least pop up in the external service’s access logs.

The only positive effect for the webmaster is that users can vote for their articles on the linked social networking sites. But this is also achievable without JavaScript. The benefit of that solution? Faster page loading times and guaranteed no user tracking.

The following solution has been created by Daniel Pataki. It is a solution for WordPress, if you use a different script or software you may need to modify the code accordingly.

The code consists of two parts. First CSS code that you need to add to your blog’s stylesheet, and then the code that displays the links to the social networking sites on the website.

CSS Code:

You need the following sprite image that contains all four icons. This speeds up the loading time as only one image needs to be loaded instead of four separate ones. Place it in the /img/ directory of your theme folder or alter the background:url code to place it somewhere else.

.social_icon {
background:url("img/sprite.png");
display:block;
width:33px;
float:left;
margin:0 3px 0 0;
height:32px;
opacity:0.8;
filter:alpha(opacity=80);
}
.social_icon:hover {
opacity:1;
filter:alpha(opacity=100)
}
.social_icon.twitter {
background-position:-33px 0;
}
.social_icon.googleplus {
background-position:-99px 0;
}
.social_icon.print {
background-position:-66px 0;
}

WordPress single.php code

You need to add the following code to WordPress’ single.php file.

<div class='social'>
<a href='http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>' class='social_icon facebook' rel="nofollow"></a>
<a href='https://twitter.com/share?url=<?php the_permalink() ?>' class='social_icon twitter' rel="nofollow"></a>
<a class='social_icon googleplus' href="https://plusone.google.com/_/+1/confirm?hl=en&url=<?php the_permalink() ?>" rel="nofollow" ></a>
<a href='javascript:window.print()' class='social_icon print'></a>
<div style='clear:both'></div>
</div>

The functionality should be available immediately. Users who click on a social networking icon are taken to the selected site where they can post about the web page that they have originated from. The page url is automatically included in the post.

I hope this helps some of you out there who want to offer functional social networking buttons without the JavaScript.

Update: Have added rel=”nofollow” to all external links.

Mozilla developer Brian Hackett worked on a new feature called type inference for over a year. You may know that you need to define types for variables in some programming languages, while it is not necessary to do that in others. JavaScript for instance does not require type definitions for variables. The downside here is that this practice can have an impact on performance.

Type inference now refers to an algorithm that is automatically deducting the type of an expression.

Type inference is boosting Firefox JavaScript performance big time. Mozilla’s David Mandelin noticed JavaScript performance improvements of up to 44%.

On my machine, TI takes our Kraken score from about 4900 to about 3400, a 1.44x speedup. And on V8-v6, our score goes from about 5000 to about 6600, a 1.3x speedup.

Sebastian Anthony over at Extreme Tech did some measuring of his own and came to the conclusion that the performance gains depend largely on the benchmark used. He noticed performance improvements between 15% to 30% in benchmarks on a Intel i7 930 processor with 6 Gigabytes of RAM and a fairly speedy Nvidia GTX 460 video card.

With Firefox 9, and without type inference, the Kraken benchmark takes 3895 milliseconds; with type inference enabled it takes just 2763 milliseconds. Firefox 9, without type inference, scores 6075 on the V8 JavaScript Benchmark; with type inference, the score jumps up to 6585. Even on banal tests like Microsoft’s HTML5 Sudoku, type inference improves the solving time for 10,000 grids from 2.6 down to 1.62 seconds — and yes, the FishBowl framerate, at 2,000 fish, is increased by 15-20% with type inference enabled.

Interested users can download the latest Mozilla Central release with type inference enabled from the official Mozilla ftp server. The next Firefox channel to get type inference is Firefox Aurora, which is going to be released on September 27. Firefox Beta will get the feature on November 8, and the stable channel on December 20.

Every new button on the other hand increases the page loading time of a website. Most buttons make use of JavaScript. The three buttons here on Ghacks, that link to Facebook, Twitter and Google, all have their own JavaScript file that needs to be loaded during page loading time.

One of the things that webmasters can do to speed up the loading time is to combine JavaScripts, another to load scripts asynchronously.

Google recently announced that they have made their +1 button load faster on websites. The search giant enabled asynchronous loading for +1 buttons. This basically means that the JavaScript of the button gets loaded without interrupting the loading and rendering of the website it is embedded on.

Webmasters who would like to integrate the new button need to visit the Google +1 button generator at Google to generate the code for the new button.

The code for the old +1 button was placed in two locations. First at the location on the page where the button should show up and second in the site’s footer just before the closing body tag.

The new Google +1 button changes this slightly. You still add the tags to the location where you want the +1 button to appear on your site. The JavaScript code on the other hand needs to be placed after the last +1 tag on the page.

Just copy and paste the generated code into your site. You need to remove the old JavaScript from the footer of your website before you place the new JavaScript code into the site.

Webmasters who do not want or cannot integrate the new code into their website will benefit from rendering optimizations which can speed up the rendering of the button on a website by a factor of 3. This is automatic and independent of the button code that is implemented on the site. Additional information about the speed improvements are available on the Google Webmaster Central blog.

Chrome users who want to open some websites with scripts and plugins disabled have now another option. The Safy extension for Chrome offers to open links in the browser in in iframe sandbox with both JavaScript and all plugins disabled.

Options provided are to open the selected link in a new tab in the same browser window or in the current tab. This works fine in most instances, but not all the time. It is for instance not working in Google Search. An error message is displayed if Safy is used to display a search result in a sandboxed tab.

That’s the biggest quirk right now. The other problem that some users may experience is that they cannot launch websites using Safy if no link is present. Say you are on a website and want to open it without JavaScript or plugins, or you want to enter a web address directly, or open a bookmark in the browser. Safy cannot be used in all of those cases.

Then again, it works very well for normal links on most sites. Ideal for opening a link on Twitter, Facebook or blogs in a safer environment.

Safy is available only for the Chrome browser. It can be installed directly from the Chrome extension gallery.

There are a few things Epiphany handles differently than most browsers. One of those is bookmarks. With Epiphany you will not find a bookmark toolbar, but the way it does bookmarks is rather interesting. In this article I will show you how to work with bookmarks in Epiphany as well as keeping this little browser from crashing on you every few seconds.

The Crashes

When I first started working with Epiphany it crashed on most sites I visited. After doing a little research (and then a little debugging) I realized the issue was with javascript. Epiphany (in its current release), for some strange reason, doesn’t like javascript. The only way around this was to disable javascript. Yes this means a lot of features won’t work on a lot of sites – but this also means those same sites will load faster and won’t be so prone to having issues (like crashing my browser).

To disable javascript all you need to do is click Edit > Preferences and then, in the Privacy tab, un-check Enable Javascript. Click close and you’re good to go. Epiphany will now run like a champ on most sites.

Bookmarks

Now it’s time to see how the other side of the tracks deals with bookmarks. Epiphany looks at bookmarks as more of a database than a hierarchical file folder. This minimizes the interface (no bookmarks toolbar) and allows the user to associate a bookmark with one ore more topics quickly. Let’s take a look at how you manage your bookmarks in Epiphany.

Step 1: Navigate to a web site. This is done as you would do with any browser.

Figure 1

Step 2: Click Bookmarks > Add Bookmark (or <Ctrl>d) to bring up the Add Bookmark window (see Figure 1).  When the new window is up you need to do the following:

Change the title of the bookmark (most sites’ titles are far too long for Bookmark titles).

Add topics: These will aid in bookmark searching. Do this by click the check box associated with each topic.

Click Add.

That’s it. But what if you need new topics? By default Epiphany has only a few topics to select. You will need to add your own to make your bookmark life much easier. To do this open up the bookmark manager by clicking Bookmarks > Edit Bookmarks which will open up the Bookmarks Manager (see Figure 2).

Figure 2

To add a new topic all you need to do is click File > New Topic. This will create a new line in the left navigation where you simply have to type the title of your new topic. To keep your searching to a minimum, make sure you add multiple topics to a bookmark. For instance, I can associated the Ghacks bookmark to the following topics:

• Linux
• PC
• Computers
• Technology
• Work
• Writing

With that Ghacks will show up in every one of those topics.  One thing that is nice is that you don’t have to have the bookmark manager open to get to your bookmarks. You can actually show a topic in a toolbar…effectively giving you a bookmark toolbar. To do this right-click a Topic in the bookmark editor and select “Show on toolbar”. This will add a drop-down for that topic on your toolbar.

Final thoughts

Although Epiphany hasn’t fully replaced Chrome and Firefox as my one-stop-shop browser, I now use it much more than I would have previously. Of course part of this is simply because it supports RGBA (and I am a sucker for a well designed desktop), but also because of it’s small footprint, fast startup, and clean interface. Give Epiphany a try and see if you, like me, have an epiphany about your browsing.

So what’s the deal with JavaScript and Thunderbird? The Thunderbird developers have apparently decided to remove JavaScript support in Thunderbird 3.

Due to various security considerations. Javascript has been disabled completely in message content (the javascript.allow.mailnews preference no longer has any effect). Javascript is enabled for remote content including RSS feeds.

JavaScript is still available for RSS feeds but not in message content. To begin with, this change likely affects only a minority of Thunderbird users, with most probably not even knowing that JavaScript was enabled at a time in the email client.

The definite answer at this point is that the developer’s have no intention of adding JavaScript again to the program. There is currently no config option or add-on that will bring back JavaScript in Thunderbird 3.

Thunderbird 3 users who read RSS feeds in the application might want to consider disabling JavaScript in this context as well to improve the security of the client. JavaScript is usually not needed to read RSS feeds although some media feeds might require it.

Here is how this is done:

Open the Tools > Options menu in Thunderbird. Switch to the Advanced tab and click the Config Editor button in the General sub-tab.

thunderbird 3 options

Confirm to be careful if this menu is opened for the first time. Enter JavaScript in the filter and locate the parameter JavaScript.enabled. Double-click that parameter to set it to false.

thunderbird javascript

This disables JavaScript for RSS feeds in Thunderbird 3. Scripts that are included are ignored by Thunderbird. It is not clear if a restart is required, it is recommended to restart to make sure the new setting is recognized by Thunderbird.

And that’s what the developer did. The userscript changes several key elements on the website. Its main features are options to customize the script display on the website and the option to add scripts and authors to a blacklist so that they will no longer be displayed when browsing the website.

The default changes include an increase in the amount of scripts that are displayed per page (triple the default amount), and options to install or blacklist any script right from that page without visiting the script’s profile page first. A trashcan icon is also placed next to each userscript in the script table listings to add it to the blacklist.

The left side contains a link to the settings of the userscript which provide access to additional options. This includes removing rows of the table layout (Hide ‘Rating’ Column, Hide ‘Posts’ Column, Hide ‘Fans’ Column, Hide ‘Installs’ Column, Hide ‘Last Updated’ Column, Hide ‘Votes’ Column), add scripts based on title or description to the blacklist or to change various author and script related blacklisting settings.

Because it’s your userscripts.org can be downloaded from the userscripts website.

The main problem with pagination is that it limits the amount of content on each page forcing the user to click on one of the buttons to be taken to the next or previous page of the website to access new content. Some extensions and scripts are available that automatically load the new content once the user reaches the end of the page.

Another alternative is provided by the SiteFlow bookmarklet. The bookmarklet recognizes the headlines of the active page (which would be the titles here at Ghacks for example) and displays them in an overlay on top. It offers previous and next buttons which will load previous or next pages of the website both in its interface but also on the screen.

A click on a headline will take the user right to the beginning of the article.

Keyboard shortcuts are available to perform the following operations:

• Go to next page [right arrow key]
• Go to previous page [left arrow key]
• Return to first page [Shift Home]
• Skip to last page [Shift End]
• Jump to next headline [CTRL down arrow]
• Jump to previous headline [CTRL up arrow]

The keyboard shortcuts to flip pages come in handy in many occasions as it only takes one key to perform the action. SiteFlow is compatible with many modern web browsers including Mozilla Firefox, Google Chrome, Opera and Safari.

A proof of concept has already been created that demonstrates the vulnerability. No patch has been made available yet. Firefox users are encouraged to disable JavaScript until a patch is issued to avoid leaving their computer system vulnerable for the attack.

Users working with security add-ons like NoScript might consider their Firefox installation safe without disabling JavaScript. It is however theoretically possible to compromise websites that are in the whitelist of the add-on (if the whitelist is used) which would make the system vulnerable to this kind of attack.

JavaScript can be disabled in the Firefox options in the content tab.

The Firefox add-on gets updated quite regularly and one rather annoying trait is that it will open the NoScript website after each update. Most users do not care that much and close the tab in this situation. Some users might prefer a permanent solution so that the website will not be opened when the script updates.

This can be achieved in the Firefox preferences. To go there type in [about:config] in the address bar, confirm the “it’s dangerous” warning if it is your first time and filter for the parameter [noscript.first].

The parameter noscript.firstRunRedirection should be displayed with the default value true. This means that NoScript will open the website whenever the add-on gets updated. A double-click on the line will change the value to false which will prevent this from happening from now on.

It is possible to revert the changes with another double-click on the line.

I am not taking credit for this, so if you did this before me feel free to let us know, but I did arrive at it on my own. The methods you could try is the “defer” attribute, which defers loading to the end of the page load, however, this had no effect at all. You can also try a “window.onload”, but this didn’t help either. With any other function combinations the ad either loaded as usual or did some weird stuff.

In the end, I decided to load the ad at the bottom of the page, right before the “” tag, and then use javascript to “transfer” the contents to where I need it do be, while keeping the source hidden. This is achieved using the “document.getElementById” method, read on to take a look at a specific example.

So what we need to do is create a div at the bottom of our page, load the advertisement there, and transfer it to the place we want it to be. I will be using inline CSS and inline javascript, which should not be done in real “life”, the best practice is to have all your CSS in external stylsheets and you javascript called from files in the header (where possible). The bottom of our page would look like this:

<div id=”top_ad_loader” style=”display:none;”>
Ad code in here
</div>

<script type=”text/javascript”>
document.getElementById(“top_ad”).innerHTML = document.getElementById(“top_ad_loader”).innerHTML
</script>

</body>

So what is going on here? We have two divs, the first is “top_ad_loader”, which you can see right here. This div is hidden, but contains the ad code. When the code is being read, the javascript might take a while to load, but we’re right at the bottom, so all our content is displayed already. There is also another div, “top_ad”, which can not be seen here, it is somewhere way above this part of our code, somewhere near the “<body>” tag.

There is javascript code right beneath the ad loader, the purpose of which is to transfer the loaded contents of the ad loader to te place where we want it to be. We “grab” the contents inside the ad loader using “document.getElementById(“top_ad_loader”).innerHTML“, and we want the contents of the actual ad block to equal this.

Once the page load gets to the ad it will slowly load it, when finished, parsing will continue, and our javascript will transfer the contents to the top.

If you have a page that loads a bit slowly, perhaps this method would be worth a try? Contents usually load faster than javascript, so if you place the javascript load last your content will load in 1-2 seconds (maybe much less), making the javascript load 1-2 seconds later. However, if a javascript at the beginning loads in 5 seconds, you need to wait that out just to start loading the content.

If you’d like to read some similar articles, take a look at Scriptastique, a blog all about web development and coding, with great tips on CSS, HTML, PHP, MySQL and Javascript and tutorials and screencasts coming soon! You can follow us on our RSS feed, or Twitter where we’re posting 3-4 short tips daily now!

Doc Shots tries to bring in more control to the webmaster by allowing them to present documents on their websites easily. The visitor is able to view a selected document right on the website in an overlay with basic controls, such as downloading, printing, searching and zooming. It feels like a document viewer on the web and resembles desktop document viewers enough to make it easy for visitors to use it.

Webmasters have to be registered users of the service before they can configure Doc Shots for their website. Registration is free on the other hand and not problematic or time consuming at all. The configuration of the document presentation script can be customized by setting the width and height of the overlay window. Other options include the display of related items and document storing policies.

Webmasters receive a JavaScript code in the end that they have to embed in the source code of their website to make use of the document presentation engine. The script will automatically recognize popular document formats such as .doc, .pdf, .ppt, .xls. Hoovering over document links or clicking on the documents will open the document presentation overlay on the same website.

The first viewer will experience a small delay while opening the document as the conversion is initiated at that time. It is therefor a good idea to be the first viewer so that regular visitors do not experience the delay. Visitors can still right-click the document and save it to their computer system directly.

Update: The service does not seem to be available any longer.

I stumbled across loc.alize.us. loc.alize.us is a bookmarklet and website which uses Google Maps for geotagging. It is remarkably simple to use and quite minimalist.

The bookmarklet works through going to one of your photos on Flickr, hitting the bookmarklet, searching for the location using Google Maps, clicking the location and pressing save. Pretty simple, if you ask me! I find this much quicker than Flickr’s service and Google Maps, in my opinion, is much better than Yahoo! Maps.

Their website allows users to explore geotagged photographs, much like the explore option on Flickr’s maps. Once again, the difference is primarily choice. It allows users to use Google Maps, which has much better satellite coverage for example, rather than Yahoo! Maps. Results, naturally, can be refined by user etc.

loc.alize.us allows its maps to be embedded into website. I question the practical uses of this, but it’s still a good idea. I believe Flickr lacks this.

loc.alize.us doesn’t offer anything important that Flickr doesn’t. The key difference is the mapping site it uses; and that’s one big difference!

The Opera team speaks of a 30% speed increase over the previous version of the rendering engine. A test of the JavaScript performance of Opera 10 revealed astonishing results. Opera 10 completed the
Web Browser Javascript Benchmark in 188ms which is very fast compared to Firefox 3.0.4 which needed 349ms, Safari 3.1.2 with 344ms or Opera 9.52 with 420ms. It’s obviously not fair to compare a development release with web browsers who have already been released but it should give anyone an understanding about the performance increase in this new Opera version.

What else is new in Opera 10? Opera 10 adds a long requested inline spellchecker and an interesting auto-update function which can update Opera automatically whenever a new version has been released.

Web developers will like the support of web fonts, SVG and opacity through RGBA and HSLA. The current release schedule aims for a beta in early 2009 and a final release of Opera 10 later that year.

Interested users can download the Opera 10 alpha release for Windows, Linux or Mac.

The name stems from the fact that Malzilla is based on the Firefox JavaScript engine SpiderMonkey. It basically provides opportunities to load a webpage in the program using custom referrers, User-Agents, cookies and proxies.

The application will display the source code and the http header of the webpage in the interface. The user can view the webpage in text mode, hex view, cookie mode and using a links parser. Single or multiple scripts can be send to a script decoder.

Some of the interesting features:

• JavaScript decoder
• Decode Hex, USC2 and Base64
• Link Parser
• Clipboard Monitor
• Hex Viewer
• Note taking
• IP Converter

Malzilla is not a tool for just anyone but it can be very helpful for analyzing webpages. It definitely eases the process of analysing and identifying webpages.

Cnet used the SunSpider JavaScript Benchmark to test browser performance of the browsers. There are other factors that have an impact on JavaScript performance like the processing power of the computer system.

The results were that the latest Firefox 3.1 beta with the new JavaScript engine TraceMonkey was the fastest with a score of 2,257, followed by Chrome with 2,904, Firefox 3 beta 1 without TraceMonkey with 4,233, Safari 3.1.2 with 6,351 and Internet Explorer 8 Beta 2 at the end with a score of 9,025.

Cnet failed to test any version of Opera and should probably have tested the latest nightly test of Safari instead. Here are the results that a Windows XP service pack 3 with a Intel 8400 Wolfdale processor and 4 Gigabytes of computer memory.

• Firefox 3.1 Beta 1 without TraceMonkey- 1800
• Firefox 3.1 Beta 1 with Tracemonkey 1817
• Firefox 3.03 – 2139
• Opera 9.6 – 2736

It’s a bit surprising that Firefox without TraceMonkey was faster than Firefox with it enabled. It could be due to the fact that the portable version of Firefox has been used to run the tests. But the interesting question is, how does your browser compare? You need to run at least two browsers to be able to tell how it compares to the other browser.

Keep in mind that JavaScript performance is not everything and that page loading time is dependent on additional factors.

That would make most of the Internet unusable and produce some bad looking websites with reduced functionality while some would stop working completely.

Local Rodeo is a Firefox extension that protects Firefox against two types of JavaScript malware. The two types are Intranet Exploration and Anti DNS-Pinning.

Intranet Exploration (i.e. JavaScript portscanning and fingerprinting): The extension classifies all network locations to be either local or external, with local locations being part of the intranet. All http requests that have an external origin (i.e. were generated within the execution context of an external webpage) and a local target (i.e. an intranet resource) are canceled by LocalRodeo.

Anti DNS-Pinning: LocalRodeo detects this attack method by monitoring DNS answers. The switch of a given domain from external to local (or vice versa) is a clear indication of an anti-pinning attack. If such a switch is detected, all further requests from or to the malicious domain are prohibbited.

A detailed explanation of Anti DNS-Pinning can be found at the blog of Christian Matthies. The extension was updated to be compatible with Firefox 3 today.

The Firefox add-on JSView adds that possibility to the Firefox browser. Installing the Firefox extension adds a new entry to the right-click menu which displays the amount of Javascript and CSS files that are referenced by the website.

Each file can be opened by selecting it. The source code of the selected file will be opened in the default source viewer of the browser.

The extension provides the option to view the source code of all Javascript or CSS files at once. The tool is especially useful for web designers.

Some webmasters use this method to display the social bookmarking and news batches of websites that their visitors have been through which is very effective in gaining popularity on those websites.

Others came up with a script that is using this method to estimate if the visitor is male or female. The Javascript makes use of the Quantcast Top 10K websites and the male:female ratio that they provide plus a neat algorithm to compute the percentages for male and female likeliness.

Mine turned out 50/50 because I don’t use the history at all. Good luck and let me know what the script thinks about your gender..

The same principle could possible be used to display targeted advertisements. Have been to a lot of parenting websites lately? How about parenting ads? Like sports? How about an ESPN subscription? It’s a bit scary, don’t you think?

Sounds scary ? There is no fix for this vulnerability yet other than to disable Javascript or allow it only on trusted domains. Some researchers claim that other browsers are affected as well but have failed to deliver proof for those claims yet. It would not hurt however to use the Firefox add-on No Script for instance.

The vulnerability can be tested on this page if you visit it with Internet Explorer. It opens a new window and records the user input on that domain. There is an explanation from the same researcher available.