Hackszine.com: Firefox Archives

Archive: Firefox

Page 1 of 2 1 2 >>

May 9, 2008

Processing.js - visualization library for Javascript

John Resig, of jQuery fame, released a port of the Processing visualization language for Javascript. Seriously, John is on fire:

The first portion of the project was writing a parser to dynamically convert code written in the Processing language, to JavaScript. This involves a lot of gnarly regular expressions chewing up the code, spitting it out in a format that the browser understands.
It works "fairly well" (in that it's able to handle anything that the processing.org web site throws at it) but I'm sure its total scope is limited (until a proper parser is involved). I felt bad about tackling this using regular expressions until I found out that the original Processing code base did it in the same manner (they now use a real parser, naturally).

The full 2D API is implemented, with the exclusion of some features here and there between browsers (Firefox 3 is pretty full featured). You can interact with the Processing API directly from standard Javascript. This lets you make use of these drawing features by simply instantiating a Processing object, and then calling its various drawing methods.

Another capability is to write code natively in the Processing language. This allows you to make use of extended language features such as method overloading and classic inheritance, though it looks like type information is pretty much ignored.

John has many of the demos from processing.org working. Most of them are going to peg your CPU, but this is some seriously cool stuff to see working in a first release.

Javascript just got a lot more interesting.

Processing.js
Processing: open source data visualization language

March 28, 2008

CSS ad blocking for Firefox and Safari

Using Firefox's CSS-based chrome feature or Safari's advanced stylesheet preferences and a little clever CSS coding, you can disable most banner ads, making them invisible in your browser. This technique is considerably easier and more flexible than setting up a private DNS server or proxy to filter out images from ad-serving domains.

The trick is setting up a number of CSS rules that use "*=" substring selection on an element's properties. For instance, matching an IFRAME tag with the SRC parameter containing doubleclick would look like IFRAME[SRC*="doubleclick"] and matching an anchor tag with an HREF containing a url with "ads." in it would look like A:link[HREF*="ads."]. Giving the style "display: none ! important" to all of the possible combinations and adding the stylesheet to your browser's chrome effectively turns off the ad-serving web. The site below has a comprehensive CSS file that's been tailored to assassinate ads from most networks.

To be honest, I didn't realize that you could do this type of parameter matching and subselection in CSS, so it's worth looking at the CSS source for that alone. If you don't use it for this purpose, perhaps the technique will come in handy for something else you are working on.

Better Ad Blocking for Firefox, Mozilla, Camino, and Safari
Ad Blocking userContent.css

November 15, 2007

HOWTO: using tabbed bookmarks in Safari and Firefox

A friend of mine was commenting today on a common scenario that a lot of us run into. When you're actively working on a project, you often times have several tabs open in your browser solely related to that work: some API documentation, a couple versions of a site you are working on, a google spreadsheet, a project resource/status page, and things of that sort.

When you change gears to work on something else, you might have another entirely different set of pages that you keep open all the time. If you juggle several projects at the same time, it can be a nuisance (not to mention a waste of time) to constantly be closing and opening all those windows throughout the day.

This isn't new news, but Firefox and Safari both have a really convenient--and often overooked--feature built into their tabbed browsing and bookmarking functionality that makes managing groups of commonly viewed documents really simple.

In Safari, just create and fill a folder in your bookmarks menu for each group of sites. When you open the bookmarks menu, in your project subfolder there will be a link titled Open in Tabs. Clicking that will open the entire folder's bookmarks at once, each in a tab of the active window.

Firefox makes it even easier. Just set up your tabs the way you normally would, then click on Bookmarks->Bookmark All Tabs. Firefox will create a new folder in your bookmarks menu and automatically import all of your current tabs to the folder. When you open the bookmarks menu, in your project subfolder there will be a link titled Open All in Tabs. This works just as you would expect, conveniently loading all of the documents in the bookmark subfolder.

June 8, 2007

HOWTO: Port Firefox extensions to IE

Hackszine reader Pete Warden is the author of a cool Firefox extension called PeteSearch. He wrote in to tell us about his progress with porting the functionality to IE:

PeteSearch is an extension that mashes up Google (and Ask, Technorati, Live and Exalead) search pages to give you hot-keys, dead-link checking and split-screen preview.
Now I'm trying the IE port, and I've my own HOWTO with sample code and articles on that painful process!

Building a browser object for IE is a much more laborious process than making a Firefox extension. Welcome to COM DLL hell. Thankfully, Pete's done a nice job of documenting things while porting his app over, and it's this sort of first-hand experience that makes it bearable to start a project like this of your own.

June 6, 2007

HOWTO - Build a Firefox extension

Gina at Lifehacker posted a really nice rundown of what goes into making a Firefox extension:

The meat of a Firefox extension is simply Javascript - the not-very-mysterious stuff of bookmarklets and regular old web pages - and a markup language called XUL (pronounced "zool.") To build your own, you'll need some Javascript know-how, comfort editing XML files, and a healthy curiosity about bending your favorite web browser to your will.

Check it out, then make something awesome and tell us about it in the comments.

How to build a Firefox extension (Gina@Lifehacker)- Link
How to create Firefox extensions (Eric Hamiter) - Link
The Official Building an Extension Guide - Link

June 5, 2007

Use GPG encryption with Firefox and GMail

FireGPG is an awesome little plugin that adds GPG support to Firefox. You need the GPG package installed on your machine to start, and after activating the plugin, you'll have a new right-click menu that will let you sign, encrypt, decrypt and verify any selected text.

You can use this to add strong crypto functionaliy to any webmail system or forum that you use! Special support for GMail is already built-in, which provides encryption and signature buttons right alongside the normal send button.

Currently, there isn't a lot of documentation, but the author has set up a Wiki. If you want to help out, try the software for a while and pitch in with a page or two on the maual.

FireGPG: Use GPG Easily in Firefox - [via] Link

GPG (GNU Privacy Guard) for Linux, Mac, and Windows - Link

May 27, 2007

Beautify Firefox widgets in Ubuntu

The thing about Firefox under Linux is that its form widgets look a little nasty. Thankfully, Osmo Salomaa created some nice replacement widgets that really clean up the interface, and fatsheep over at ubuntu forums put together a quick script for installing/uninstalling the patch. It's a big improvement, unless you're into the whole super-aliased, shadow-casting button thing.

New Firefox Widgets and Install Instructions - [via] Link

May 12, 2007

iGoogle Greasemonkey hacks

If you use Firefox with Greasemonkey, there are a lot of really nice scripts available for tweaking the iGoogle interface. You can resize columns, replace the iGoogle logo, or, my personal favorite, add some subtle transparency effects to the search interface so that it blends in with the theme you are using - Link.

Related:

May 1, 2007

Real Costs - emissions data into travel related e-commerce website

Make 601
Adds C02 emission information to travel sites, extremely clever -

Real Costs is a Firefox plug-in that inserts emissions data into travel related e-commerce website. The first version adds CO2 emissions information to airfare websites such as Orbitz.com, United.com, Delta.com, etc. Following versions will work with car directions, car rental, and shipping websites. Think of it like the nutritional information labeling on the back of food... except for emissions.

The objective of the Real Costs is to increase awareness of the environmental impact of certain day to day choices in the life of the Internet user. By presenting this environmental impact information in the place where decisions are being made, it will hopefully create an impact on the viewer, encourage a sense of individual agency, and provide a set of alternatives and immediate actions. In the process the user/viewer might even be transformed from passive consumer to engaged citizen. Real Costs is project by Michael Mandiberg.

Real Costs - Link.

April 30, 2007

Open 2+ start page tabs in Firefox

Make 595
Every time I launch Firefox I'm usually researching something online and/or something that has appeared on MAKE - so here's a fun feature... You can have two pages open up in tabs as your start page, just put a link, the pipe symbol "|" and the other URL - handy!

April 20, 2007

Firefox as a Web Development IDE

The Firefox Web Developer Extension and Firebug plugins are two very cool tools for editing and debugging HTML and CSS. Jeff Atwood of Coding Horror had this to say:

I can't imagine debugging a web app without these two essential tools, which transform Firefox into the Visual Studio of browsers. It'd be akin to writing a .NET application in Notepad.

Firebug, pictured above, can even assist with profiling and debugging your AJAX/Javascript code. You can evaluate javascript expressions and see how it effects the document in realtime, as well as view the "generated source," which comes in really handy when debugging code that populates elements in the page at runtime.

Firefox as an IDE -Link.

April 5, 2007

New del.icio.us Firefox extension, super-good

Make 498
The new del.icio.us Firefox extension is so good, I'm using del.icio.us again (I stopped for awhile when things just seemed slow/down too much)... The mosst useful feature for me is the bookmark search right from Firefox. Soon I'll add this extension to every computer I use so I have bookmarks across multiple machines. If you want to tune in to our bookmarks on MAKE, check'em out here - Link.

Related:

del.icio.us: making Firefox more del.icio.us - Link.
del.icio.us bookmarks Firefox install - Link.

February 27, 2007

Hacks Authors' Blogs: One Feed to Rule Them All

Hacks Authors' Feed

Ed note: In this guest post, veteran Hacks series author Paul Bausch takes on a challenge that's been on my todo list for a while, providing a solution that should be of immediate interest to all readers of this site and just might serve as a seed for future hacking around here.

I have a shelf full of O'Reilly Hacks books across a wide range of subjects. I contributed a couple in the Web Applications category, but I also have Hacks books about digital photography, hardware, scripting languages, gaming, and operating systems. The series has introduced me to a number of authors who are doing unusual things with technology in their particular area of expertise. I thought it would be interesting to follow each of these authors outside of the Hacks series by subscribing to their blogs, collectively. I figured it would be a good way to keep up with areas of technology that I'm not necessarily tuned into. I have a collection of blogs that I read to keep up with what's happening in Web Applications, but I don't have a sense of what's going on with gaming, for example.

So I went on a mission to gather the Hacks authors' blogs using the tools I know best: Web Applications. I started with an Amazon power query for books by O'Reilly with "Hacks" in the title via the Amazon API, and ended up with a list of 80 authors' full names. I plugged each name into Google by hand, adding the word "blog" (or if that didn't turn anything up, "hacks"). Then I visited the blog to make sure it was the Hacks author I was looking for, clicked the orange feed button in the Firefox address field to get the feed URL, and copied the URL to a text file. I ended up with a list of 40 feeds. (A 50% blogging rate among an arbitrary group isn't too shabby.)

I plugged the feeds into Google Reader, and renamed each feed the author's full name. Here's what the final list looks like (click for larger view):

Here's the list of feeds as OPML if you'd like to try it: Hacks Authors.

I've only been tuning into this list for a few days, but I'm already getting to know these authors in a new way. And I was right—I am finding out about developments in tech areas I don't normally tune into. I especially found Brian K. Jones's recent post about Fighting Specialization appropriate, something I wouldn't have seen otherwise.

Related:

February 11, 2007

Tweak the Google with the CustomizeGoogle Firefox Extension

Make 320
I'm setting up a new computer all weekend, so that also means adding a zillion tweaks and add-ons to get stuff done as the week rapidly approaches. One of my favorites is "CustomizeGoogle". Check out the image above and the other search engine links, which you're looking for stuff and need to compare results it's super handy. The extension does *a lot* more - from removing ads to forcing a secure connection for docs and calendar. It's a Google world, we just live in it.

Make 321
If you use Firefox, check it out and post up your favorite extensions.

More:

CustomizeGoogle: Improve Your Google Experience -- Firefox Extension - Link.

Firefox Hacks @ the Maker store - Link.

Google Hacks, 3E @ the Maker store - Link.

February 10, 2007

LinkBack: Trackbacks Everywhere and Without the Spam

The concept of trackbacks and bidirectional linking has always been really intruiging to me, but it's such a difficult problem to solve, even if you ignore the spam issue... and that's awfully hard to ignore.

Ted Nelson coined the term Hypertext over 30 years ago, and articulated its principles, most of which have been ignored in the triumph of the Web. One of the principle elements of Nelson's vision that was left out of the web is the inherent bidirectionality of hyperlinks. This just means that a link from A to B should be visible, and traversable, from B to A as well. A simple idea, but suprisingly difficult to implement if you start with the sort of document-centric model that the WWW uses.

The problem is that bidirectional linking requires a certain level of cooperation between referencers and referencees. You can't force every publisher of every document to maintain a trackback-style referencing policy or system. Fortunately, however, you can expect that someone will be in the business of crawling and indexing the web, and the topic of references, as any fan of Pagerank will tell you, falls squarely into the search domain.

LinkBack is a Firefox/Greasemonkey plugin that queries Yahoo web services as your browse the web, displaying incoming links for the web pages that you visit. It's pretty much like using the "link:" qualifier in a Google search, except that it does this automatically for you for every page that you visit, showing the results in a semi-transparent floating div over the document you are viewing.

Of course, there are privacy issues with sending all your browsing information to Yahoo, and the results are only as good as the search engine is capable, but it's a step in the right direction, and for the most part, it works. -Link.