Eli Grey

Title image files in Opera

By Eli Grey 2 comments

I recently discovered a method to title image files in Opera. I was experimenting with CSS generated content in regards to the <title> element in various browsers, and discovered that as long as the <head> and <title> elements are not display: none, generated content applied before and after the <title> element is added to the page title itself in Opera. It was obvious to me that I should combine this with HTTP Link: headers containing stylesheets, as to make it possible to modify the title of usually non-titleable media, such as images, plain text, audio, and video.

In this demo, the following CSS rules are applied in Opera.

head, title {
	display: block;
	width: 0;
	height: 0;
	visibility: hidden;
}
 
title::before {
	content: "Just an image — ";
}
Tagged: , ,
❧

Voice Search Google Chrome extension

By Eli Grey 18 comments

Voice Search screenshot Voice Search is an open source Google Chrome extension I made that allows you to search by speaking. For example, just click on microphone and say kittens to search for kittens. If you specifically want pictures of kittens, say google images kittens. Want to learn more about World War II? Say wikipedia world war two. The source code for Voice Search is on GitHub.

Voice Search comes pre-loaded with many popular search engines by default, and you can add your own user-defined search engines. It also integrates a speech input button for all websites using HTML5 search boxes, all of the default search engines’ websites, Facebook, Twitter, reddit, and GitHub.

In later versions, I plan to introduce ability to import/export settings, create aliases (e.g. map to Google Maps and calculate to Wolfram|Alpha), OpenSearch description detection, and scripted terms that do more than open URLs.

Tagged: , ,
❧

Better font smoothing in Google Chrome on Windows

By Eli Grey 24 comments

Screenshots: before and after.

Firefox 4 and Internet Explorer 9 already support improved font smoothing offered by the DirectWrite API in Windows 7 and Vista. Google Chrome (WebKit) has yet to support DirectWrite, which may be the deal breaker for you when choosing to use either Google Chrome or Firefox if you are primarily a Windows user.

I recently discovered while messing with the CSS3 text-shadow property in Google Chrome that it somehow improves font smoothing in Google Chrome (but surprisingly not the WebKit-based Safari too). To use the better font smoothing on your website, just use text-shadow: rgba(0, 0, 0, .01) 0 0 1px in your CSS on whatever you want to have better font smoothing. I have also created a Google Chrome extension called “Enhanced Windows Font Smoothing“, which applies this CSS hack to every website and to all text. Please note that smaller text may look a little unsightly, though it will still be completely readable. For a good example website try the extension on, see how the text logo on the Ubuntu Font Family website looks before and after installation of the Google Chrome extension. Please note that this CSS hack may cause adverse side-effects on Mac OS X, so I suggest that you try to target Windows UAs only.

Tagged: ,
❧

Encrypted DuckDuckGo with Google Suggest search plugin

By Eli Grey 14 comments

I made a version of Nathan Friedly’s DuckDuckGo + Google Suggest search plugin that only uses encrypted endpoints, and I would like to share it with everyone else. It uses the encrypted versions of DuckDuckGo and Google Suggest so no one can eavesdrop on your searches (except DuckDuckGo and Google, of course).

Installation

In most browsers, the following link should work for you: Install encrypted DuckDuckGo with Google Suggest search plugin. If you are having any trouble installing the search plugin, refer to the detailed instructions by Nathan Friedly for the original search plugin. For manual installation in Opera, replace every instance of http:// with https:// and replace every instance of suggestqueries.google.com with encrypted.google.com.

Encrypted Google Search and Suggest search plugin

If you’re looking for an encrypted search plugin but want to keep using Google, I made that too. Install encrypted Google Search and Suggest search plugin.

Tagged: , ,
❧

Passive localization in JavaScript

By Eli Grey 22 comments

Today, I created a passive localization JavaScript library named l10n.js. l10n.js is a JavaScript library that enables passive localization through native JavaScript methods, gracefully degrading if the library is not present. You can make Ajax applications, JavaScript libraries, etc. that can be localized but not require l10n.js to function. There is already a placeholder method for all API calls as specified in the ECMAScript specification and is present in all JavaScript engines, so when l10n.js isn’t present, your application works fine.

Demo

You can try out the online demo to see l10n.js in action. Currently, only the languages mentioned in the readme are supported, but more will eventually be added.

Usage

API

API documentation can be found in the readme. All API calls gracefully degrade, so calling them even without l10n.js loaded causes no problems.

Localizing strings

Calling toLocaleString() on every localizable string can create a lot of extra typing and bloat for sending your JavaScript down the wire. I recommend using the following helper function to localize strings. The reason I don’t define this in l10n.js is to not introduce any new globals, which keeps l10n.js a one of the JavaScript libraries least-prone to conflicts with other libraries.

var l = function (string) {
    return string.toLocaleString();
};

With this helper function, you can start writing l("Your localizable string") instead of "Your localizable string".toLocaleString(). I chosel instead of _ (an underscore), because it’s easier to spot so you can quickly skim your code to see which strings are localizable.

Variable replacement

If you don’t mind requiring l10n.js for your JavaScript application or library to function, I suggest using short variable strings instead of default strings. It saves bandwidth by decreasing the size of localization files, and it enables you to write nice, short code as such in the following.

  • document.title = l("%title.search")
    • Example results: "Seach - Acme, Inc."
  • confirm(l("%confirm.deleteAccount"))
    • Example results: "Are you sure you want to delete your account?"
  • link.href = "http://www.google" + l("%locale.tld")
    • Example results: "http://www.google.co.uk"

Often, string concatenation is used instead of replacement in JavaScript. With l10n.js, to make localization easier, you may have to use replacements instead. You might want to use a JavaScript library that implements something similar to C++’s sprintf(). A nice JavaScript implementation I’d recommend is php.js’s sprintf().

When localizations are downloaded

If you are using single localization URLs (<link rel="localization" hreflang="..." href="..." type="application/vnd.oftn.l10n+json"/>), they will only be downloaded when needed. If you are using multiple localizations in one (<link rel="localizations" href="..." type="application/vnd.oftn.l10n+json"/>), then the file will be downloaded right away, but externally linked localizations in the localization file will not be. If you provide an interface for your users to change locales, any non-loaded localization files will be loaded when necessary.

Including localizations with link elements

Multiple localizations can be included with one localization JSON file, with all of the top properties being language codes. Instead of putting all of the localized strings directly in the file, you may want to assign a specifc localization JSON URL to each locale, as to save bandwidth by only downloading locales the user needs.
The following is an example localization file for <link rel="localizations" href="path/to/localizations.json" type="application/vnd.oftn.l10n+json"/>.

{
  "en-US": {
      "What is your favourite colour?": "What is your favorite color?"
  },
  "fr": "path/to/french-localization.json"
}

Using localization files is the same as calling String.toLocaleString() with the JSON localizations object as the first parameter.

You can also include single localizations by specifying the standard HTML5 hreflang link element attribute and using a rel of localization instead of localizations with an ‘s’, as shown in the following.

<link rel="localization" hreflang="en-US" href="american-english.json" type="application/vnd.oftn.l10n+json"/>

The JSON file for the localization might look like the following.

{
    "What is your favourite colour?": "What is your favorite color?"
}
Tagged: , , , , ,
❧

tinylog

By Eli Grey Comment

tinylog is a minimalistic logging platform JavaScript library I created which is primarily intended for online IDEs and implementing console.log() for browsers without native consoles. There is also a lite version intended for embedding in other JavaScript libraries. One such library that embeds tinylog lite is Processing.js, which uses it to implement Processing’s println().

There are also online demos of using tinylog that you can try out. The tinylog saved log viewer demo only works in browsers that support the W3C File API which is only Firefox as of now.

Tagged: ,
❧

Pausing JavaScript with async.js

By Eli Grey 2 comments

async.js is a library that aims to make it so you don’t have to mess with callbacks when making applications in JavaScript 1.7 or higher by using the yield statement to pause function execution.

Examples

Please note that user interaction with the page is not blocked during the course of any of these examples.

A node.next(eventType) method

The node.next(eventType) method would pause a function until the specified event is fired on the node that next was called on and would return the captured event object.

var listenForNextEventDispatch = function ([node, eventType], callback) {
    var listener = function (event) {
        node.removeEventListener(eventType, listener, false);
        callback(event);
    };
    node.addEventListener(eventType, listener, false);
};
Node.prototype.next = function (eventType) {
    return [listenForNextEventDispatch, [this, eventType]];
};

You could now do the following in an async()ed function to handle the next click event on the document.

var clickEvent = yield document.next("click");
// handle click event here

Asking the user for their impressions of async.js

The following code does not use any obtrusive and annoying functions like prompt or alert yet still can utilize execution-blocking features.

yield to.request("feedback", "POST", (
    yield to.prompt("What are your impressions of async.js?")
));
yield to.inform("Thanks for your feedback!");
// do more stuff here

As opposed to the following, which is functionally equivalent to the previous code but doesn’t use async.js’s blocking features.

async.prompt(
    ["What are your impressions of async.js?"],
    function (response) {
        async.request(
            ["feedback", "POST", response],
            function () {
                async.inform(
                    ["Thanks for your feedback!"],
                    function () {
                        // do more stuff here
                    }
                );
            }
        );
    }
);

That’s a lot of callbacks, all of which are implied when you use async.js.

Creating an async.js module for thatFunctionThatUsesCallbacks

async.yourMethodName = function ([aParameterThatFunctionUses], callback) {
    thatFunctionThatUsesCallbacks(aParameterThatFunctionUses, callback);
};

You could then use yield to.yourMethodName(aParameterThatFunctionUses) and immediately start writing code that depends onthatFunctionThatUsesCallbacks function after the statement.

Tagged: , ,
❧

Fonts in Processing.js

By Eli Grey 4 comments

I recently implemented fully-featured cross-(HTML5-supporting)-browser loadFont() and text() functions in Processing.js. This implementation does not suffer from the limitation of the old implementation that only supported SVG fonts and writing text from already-installed fonts only worked recent Mozilla-based browsers. I also revamped the entire library, fixing a few hundred errors, changing and optimizing many Processing method implementations, and getting rid of all of the implied global variable leaks. Included is an image gallery of the same Processing program being run using Processing and Processing.js. The one showing only the outputted image was saved directly from a canvas element. You can also try out fonts in Processing.js at this demo page. The demo page does not use the same font as in the screenshot but it is similar. If your browser does not support @font-face CSS rules but does support the canvas text API, your system default monospace font will be used instead.

processing-js-loadFont-test-150x150 processing-loadFont-test-150x150

Tagged: , ,
❧

Another E4X DOM library

By Eli Grey Comment

I just made another E4X DOM library, but this one is intended to implement the optional features in the ECMA-357 standard that are not implemented by Mozilla in JavaScript. The library is named e4x.js due to, for the most part, it only implementing stuff already specified in E4X. The only difference between the standard and my implementation is that the XML.xpath(xpathExpression) method also supports numeric, string, and boolean result types.

Tagged: , , ,
❧

E4X DOM toolkit

By Eli Grey 3 comments

I have created a small JavaScript toolkit named e4x-dom.js for making it easy to manipulate the DOM with E4X.

The following methods are implemented on XML objects by e4x-dom.js:

node()
Returns the HTML node representation of the XML.
over(element or selector)
Either overwrites element or every element matched by the CSS selector with node().
overId(id)
Same as over(document.getElementById(id)) but also preserves the the id of the element being overwritten in the element replacing it.
fill(element or selector)
Removes every child node of element or every element matched by the CSS selector. Then node() is appended to all of the emptied elements.
fillId(id)
Same as fill(document.getElementById(id))
appendTo(element or selector)
Appends node() to element or every element matched by the CSS selector.
appendToId(id)
Same as appendTo(document.getElementById(id)).
insertBefore(element or selector)
Inserts node() before element or every element matched by the CSS selector.
insertBeforeId(id)
Same as insertBefore(document.getElementById(id)).
insertAfter(element or selector)
Inserts node() after element or every element matched by the CSS selector.
insertAfterId(id)
Same as insertAfter(document.getElementById(id)).

The following are examples of using the toolkit:

var img = <img
 src={prompt("Enter an image URI")}
 alt={prompt("Describe the image")}
 id="foobar"
/>;
img.appendTo(document.body);
 
<h1>The image was <em>removed</em>.</em>.overId("foobar");
<![CDATA[And then this text node filled the header]]>.fill("#foobar");
 
// the CDATA isn't itself put into the document but the data inside it is escaped so it
// works in HTML and XHTML
<h1><![CDATA[<html> in here is <escaped>]]></h1>.insertBefore(document.body.firstChild);
 
// if you just want to create an element quickly, do xml.node()
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"/>.node(); // SVG node
<div/>.node(); // div node
 
// DOM methods are forwarded to .node()[method]()
<canvas/>.getContext("2d");
<foo bar="baz"/>.getAttribute("bar") === "baz"; // same as getting .@bar
 
// mass-modifications with CSS selectors
<strong>Absolute links are <em>not</em> allowed</strong>
 .over('a[href^="http://"], a[href^="https://"], a[href^="//"]');
 
if (user.hasEditPrivileges) {
 // wikipedia-style "put an edit link at the start of each section"
 <a href={"/edit?page=" + page.id}>[edit]</a>.insertAfter('h2');
}
 
// <![CDATA[]]> nodes directly accessed are converted to text nodes:
 
<![CDATA[
 This is a text node.
 <html> is escaped inside it.
]]>.appendTo("#some-element");
Tagged: , , , ,
❧