Hackszine.com: Web Archives

Archive: Web

Page 4 of 6 << 1 2 3 4 5 6 >>

July 10, 2007

Server-side Javascript/DOM - search friendly AJAX?

John Resig posted yesterday about his experiments with creating a full Javascript/DOM pseudo-browser environment that runs from the command line:

This weekend I took a big step in upping the ante for JavaScript as a Language. At some point last Friday evening I started coding and didn't stop until sometime mid-Monday. The result is a good-enough browser/DOM environment, written in JavaScript, that runs on top of Rhino; capable of running jQuery, Prototype, and MochiKit (at the very least).

The really nice touch is that you can issue PUT and DELETE requests on the XMLHttpRequest object to manipulate files on the local file system! Here's an example script that scrapes post titles from alistapart.com and stores them in a file (remember, this runs on the server like a shell script):

load("env.js");
window.location = "http://alistapart.com/";
window.onload = function(){
  load("dist/jquery.js");
  var str = "Newest A List Apart Posts:\n";
  $("h4.title").each(function(){
    str += " - " + this.textContent + "\n";
  });
  var out = new XMLHttpRequest();
  out.open("PUT", "file:/tmp/alist.txt");
  out.send( str );
};

Read full story

July 2, 2007

Client-side SQL database in Javascript

I was thinking today about how a person might go about creating a rich offline web application for devices like the iPhone, where your application may need to run entirely from cache from time to time.

In the extreme example, you could imagine an application that stored its data entirely on the client side, and used cached html and javascript files to manipulate that data. Assuming you could get around the storage issue -- either via cookies, a Flash shared object (not available for the iPhone), Firefox or IEs storage objects, or some trickery with browser form autocompletion -- you'd still run into the task of manipulating that data.

Web developers are used to using an SQL database for the retrieval, joining and sorting of data, so it's convenient that similar functionality exists within Javascript, thanks to a small Javascript library called TrimQuery. After defining a simple table schema, you can use TrimQuery to issue a subset of the standard SELECT syntax. This will let you do something like the following, all within Javascript:

selectStatement = queryLang.parseSQL( "SELECT table1.columna, table2.columnb 
  FROM table1, table2 
  WHERE table1.id = table2.fkid 
  ORDER BY table1.columna" );
var results = selectStatement.filter( tabledata );
for (var i = 0; i < results.length; i++) {
  var record = results[i];
  // ...
}

TrimQuery Demo - Link
TrimQuery: Javascript SQL Library - Link

June 20, 2007

HOWTO use the Wiimote buttons in Flash

A while back, WiiNintendo posted the keycodes that are detectable by Javascript when the Wii's buttons are pressed. With this ability, you can create Javascript games that will play on your Wii. Unfortunately, even though the Wii browser ships with the Flash plugin, those keycodes cannot be detected natively in the Flash environment.

Quasimondo came up with a really clever hack that solves the problem. You can create a second flash movie and use Javascript to resize it to specific widths for particular keycodes. Even though Flash cannot detect the keycodes, it does receive an onResize event. When it receives this event, it then retrieves its current width, which was set to the value of the keycode. This second swf file can then use Flash's LocalConnection to communicate that value to the primary swf.

How to Make the Wiimote Work in Flash - Link
Aral Balkan's discussion on using the Wiimote in Flash - Link
Wiimote Key Codes @ WiiNintendo - Link

June 18, 2007

DSL for $10

It only applies to folks in the 22 states that AT&T serves, and you need to sign a 1 year contract, but check out what The Consumerist found:

As part of a concession made to the FCC in order to get its mitts on BellSouth, AT&T is required to offer basic DSL for $10 a month to its entire 22 state coverage area for a period of 2 years.
If you can't find the plan listed on the website, don't worry. AT&T wants it that way. They've hidden it, according to the AP.

Cory Doctorow makes a good point, though:

But even at $10/month, AT&T DSL should be avoided like the plague. These are the scumbags who illegally wiretapped the entire Internet for the NSA, who broke net-neutrality to find "copyright infringements, and who inspired NBC to call for a law requiring all ISPs to do the same (imagine -- a law forbidding network neutrality!). Seriously: the only day I wouldn't piss on AT&T is if they were on fire.

But, if you're the type that can stomache the death star's policies, $10/mo is a darn good deal. Just inquire about the secret FastAccess DSL Lite plan.

AT&T's Secret $10 DSL - [via] Link

June 14, 2007

Graph your Flickr pageviews with Statr

Ever want to track how many folks are viewing your photos on Flickr? Just give Statr access to pull your pageviews and it will collect and graph your Flickr statistics for you.

Statr for Flickr allows you to track and plot page views statistics for your Flickr account. Graphs are automatically updated on a daily basis and can be linked from external websites.

Statr for Flickr: tracking page views for your Flickr account - [via] Link

June 13, 2007

Use a Google Spreadsheet as a simple CMS

Using Google's Spreadsheet API, you can create a simple CMS for your website extremely easily. It's as simple as making a new sheet with key/value pairs for any fields you want dynamically populated. You can then access the data from javascript via the JSON API. Any updates to the spreadsheet will be immediately reflected in your page.

The only downside to this approach is that the content of your page is populated by Javascript on the client side, so search engines won't see the content of your pages during a crawl. You could overcome this obstacle by using the PHP API to pull the spreadsheet data and render the HTML on the server side.

Simple CMS using Google Spreadsheet API - Link
Google Spreadsheets Data API - Link

June 11, 2007

Crreate a Wii media server

Wii Media Center X is a Java-based web media server that you can have up and running in about 15 minutes. After downloading and unzipping the application, just run the following command (from the mediacenter folder) to start it up:

java -jar MediaCenter.jar

Run this on any machine that your Wii can see and you can use the Internet Channel web browser to access your media center at http://x.x.x.x:8192/.

I've noticed a few problems with playing audio files and the video isn't sized optimally (you can zoom to adjust for this), but this shows a lot of promise. With this running on my primary desktop machine, I can encode/download FLV files that I want to watch and MP3s that I want to listen to. You just drag them to the Video/videos and Music/music folders. You can do this during the day as you come across things, and then you can view and listen to media in your living room whenever you like.

With a little spit and polish, this could be like having all the AppleTV or Windows Media Center functionality right on your game console.

Red Kawa Wii Media Center X - [via] Link

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 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

June 2, 2007

Update Facebook status with PHP and cURL

Christian Flickinger wanted to be able to sync status updates between his Twitter and Facebook accounts, so that when his status is updated on Twitter, his Facebook status is automatically updated at the same time. Unfortunately, Facebook didn't have an API for setting status, so Christian decided to hack his own using PHP and cURL.

With a few lines of code, his script will authenticate with Facebook account and update its status. It's a simple script you can incorporate into your own project to sync your status to anything - Link.

May 30, 2007

Gears API: create web apps that work offline

Google released a new Javascript API today called Gears that makes it possible to write modeless web applications that will function offline. A browser plugin is available for IE and Firefox (OS X, Linux, and Windows), with Safari support planned for the near future. The plugin will need to be installed by users of Gears-enabled applications.

From what I can see--and keep in mind that I haven't used the API yet--there are 3 basic services that the API provides:

local file resource storage and caching so that you can view files after disconnecting
a client-side SQL database that can be used by Javascript to store and fetch data
a worker pool module for running asynchronous background processes

The obvious use for this is to make stateful applications that continue to operate when you're offline, but maybe there are some privacy opportunities here too. Today, applications come in primarily two varieties: apps with user data and software stored locally, and web-based applications that execute and store data on the server. What I'm curious to see is if developers will begin making a third, hybrid category of application, where software release and maintenance is web-based and global data is available for local consumption, but the storage and processing of user-specific data takes place on the client side, safe from unwanted profiling.

Google Gears API Developer's Guide - Link

May 24, 2007

reCAPTCHA: distributed book digitization while fighting spam

Thanks to spammers, we now are forced waste a substantial portion of time every day, typing in obfuscated wiggly letters to prove we are human. reCATPCHA is a slick idea for using the CAPTCHA system for doing something productive (...besides distinguising between homo sapien and homo computatralis).

With reCAPTCHA, the user is given two words, one known by the system and one from a book that previously failed character recognition. When the user enters both words, the sytem verifies the known word, proving human-ness, and submits the second word to a central database, which helps digitze books from the Internet Archive. With 60 million CAPTCHAs being solved every day, this could be a huge assist for portions of text that can't be handled by optical character regognition techniques. [via] Link

Related:
Negative CAPTCHA

May 6, 2007

WikipediaFS - a Linux MediaWiki file-system

WikipediaFS is a Linux virtual file system that allows you to interact with Wikipedia as if it were a typical directory on your machine. This means you can view and edit Wikipedia entries with a normal text editor like vi.

WikipediaFS can be configured to work with any MediaWiki-based site, so this makes it a pretty powerful tool for maintaining your personal Wiki project as well.

WikipediaFS - Link.

May 3, 2007

CSS and Javascript in a single file

If you're really crazy about optimizing page load time for your website, here's an interesting trick. By abusing some parser quirks in common browsers like Firefox and IE, you can actually combine a CSS file and a Javascript file into a single download.

The technique relies on how CSS and JS parser behaves in IE and Firefox.
When the CSS parser encounters a HTML comment token (<!--) in CSS content, the token gets ignored.
When the JS parser encounters a HTML comment token (<!--) in JS content, the token is treated similar to the line comment (//) and hence the rest of the line following the HTML comment token gets ignored

So, if you can combine your JS and CSS files into a single file like the following, the Javascript parser will only see the Javascript code and the CSS parser will only see the CSS code:

<!-- /* function t(){} <!-- */ <!-- body { background-color: Aqua; }

You can still keep the files seperate for coding purposes, and then combine them at publish time or on the fly with a simple script, similar to what's commonly done with Javascript obfuscation/compression.

Combine CSS with JS and make it into a single download - Link.

April 21, 2007

Bypassing Online Censorship

We've written before about using services like Google's translation software to bypass web filters and access censored/restricted content online, but this really only scratches the surface of the various technologies that can be used to bypass online censorship systems. Reporters Without Borders put together a nice article on the subject, which discusses both the merits and disadvantages of the following circumvention mechanisms:

Public web-based circumvention services, such as http://www.anonymizer.com
Installing your own web-based circumvention software, such as pHproxy or CGIProxy, on a safe external host
Running your own proxy server, Ie. Squid
Tunneling via a socks proxy or ssh
Anonymization tools like JAP (pictured above)

From the article:

This paper aims to inform users who have made the decision to use circumvention technologies of the available options and how to assess which is best suited to the specific needs of the user. This is done by determining the needs and capacity of the users involved - those using as well as those running the circumvention technology - while balancing the appropriate level of security with the technologies' usability by the end-user. Effective, secure, and stable circumvention is achieved by matching the right technology with the right user.

Reporters Without Borders: Technical ways to get around censorship -Link.

Related: