Reference: About disk optimization with Mac OS X.

No related posts.

I feel it’s important that there is a open discussion about the ups and downs between the “alternative” browsers as I would like to see the best browsers possible. Right now the main focus of the normal tech-savvy folks is to promote Firefox as the hero to break IE’s monopoly. It’s all great – but to get a truly widespread usage to the average computer-users as well as the power-users we have to offer an alternative with the least possible amount of compromises and with the best implemented features that ease ones days on the web. Right now Firefox is not doing that. Neither is Opera – but I think Opera is quite a bit ahead by now – and been so for a couple of years.

Firefox is not a bad choice – quite the opposite actually. It has done some great improvements during it’s lifetime, but in my case does still lack those features that makes me think: “That was clever, this will make my day a little easier”. Some of it’s extensions has – but I don’t like the way they rest on the extensions (and inevitably – the end-users) to do all the work.

Related posts:

• Opera Wand security issue AKA how to get passwords saved in the Wand which you don’t remember
• Essential mac-applications

Hi!

First of all I’d like to thank you for your interest in my applications. But I have now come to a point where I don’t have the time to spend on the applications that they deserve so I have decided to not release any more versions for the foreseeable future.

Cheers,

Peter Borg

It’s not of immediate trouble for me,but I fear that in time this will have to make me switch editor.

Thank you, Peter Borg

A big “thank you” goes out to Peter for his great work and I’m sure he’s up to other great work. Thank you for taking so much time giving us this great editor and developer-utility which has made my days for quite some time now.

As this is an open source-project I have this hope that some skilled developer will adopt the project and continue on the same path: maintaining an editor which keeps out of the way (!), has this neat set of functions and a relatively small footprint.

No related posts.

Here is how to implement “data-if”, some debugging-tips and a patched Markuper amongst others.

Introducing a basic “data-if” in Markuper

The Markuper has a great, simple method of adding custom attributes to determine whether or not keep an arbitrary element and it’s content. You may already know the “data-keep-if“-attribute, now – here is “data-if“, a tad more flexible:

/**
Author: Michael Odden
Email: me@michaelodden.com

A simple example of an extension of Opera's Markuper - a Unite JavaScript template-library:
Implementing the "if"-operator, allowing for boolean expressions, and does only show
the element if the value is true.

To allow variables in the expressions, you'll have to download the patched Markuper, currently found at:

http://michaelodden.com/files/unite/template.js

See blogpost for details:

http://michaelodden.com/opera-unite/opera-unite-convenient-tips-and-snippets-for-developers

NB! You should not include data in the attribute which you don't controll 100%, as the method
is currently using "eval". Yup, bad, I know. I'm working on a better approach.

= USAGE:

- In the server side JavaScript, where you initiate the Markuper:

var data = {"sum":101};
var template = new Markuper("path/to/template.html", data);
template.registerDataAttribute('if', dataAttrIf);

- In the template:
<div data-if="{{sum}}>100">
<p>The sum is more than 100</p>
</div>

*/

function dataAttrIf(node, data, key) {
	node.removeAttribute("data-if"); // Remove the attribute, leaving no trails
	if(!eval(key)) {
		node.remove(); // remove the node
		return false; // avoid processing the contents of the node
	}
}

NB! I’m currently using JS’ eval-method, which – in short – is not recommended if you don’t have 100% control of the code being evaluated. While it gives you extreme flexibility, it will probably also affect security. It is amongst others a very common source of XSS-vulnerabilities.

I am working on a better expression-parser, perhaps built upon Markuper’s “operatorsRegExp”, which is used for some neat interpretation of the “data-keep-if”-values. As far as possible I will for now recommend data-keep-if as long as it’s possible, and this is mostly an example of how easy it is to expand the Markuper, and making a little more flexible option needed for an application of mine.

You will also need the patched Markuper found at the bottom of this post (template.js) if you want to allow variables in the expressions. See my previous Unite-post for details.

Check if files exists

I came across a situation where I preferred to use the _request event-handler, which is a “fetch-all” event, this mean that I won’t need to dispatch events for every single action, but rather take care of the logics in one gateway-method. But there is a problem: when using the _request-handler, Unite won’t dispatch through to any publicly available files either, unless explicitly told so. In my case this meant my .css og client-side .js-files wasn’t loaded.

To work around this, I created a function which checks if there is a file matching the current request – and if so serve this instead of continuing with the regular logic.

Remember to include access to the file i/o by adding the following in your config.xml (inside the widget-element):

    <feature name="http://xmlns.opera.com/fileio"></feature>

/**
 * @author	Michael Odden
 * @email	me@michaelodden.com
 * @url		http://michaelodden.com/
 * @description
 * 		Checks if the requested path can be mapped to an existing static file (underneath public_html).
 *		If so: server the static file, otherwise continue the normal flow. Intended used with the _request event handler.
 *
 *
 * @return	mixed - true / false regarding if file exists, or the result of response.closeAndRedispatch ()
 * @param	OperaEvent - e - The event-object as sent to the eventhandler (required)
 * @param	boolean - dispatch - should the method autmaticly dispatch to load the file, or just return true / false.
 */
function requestedFileExists(e, dispatch) {
	var fileExists = true;
	var uri = e.connection.request.uri;
	var dir = opera.io.filesystem.mountSystemDirectory('application');
	dispatch = typeof(dispatch)!="undefined" ? dispatch : true;

	if(dir) {
		try {
			var relPath = uri.replace(new RegExp(e.target.currentServiceName,"i"), "public_html");
			var stream = dir.open(dir.resolve(relPath ), opera.io.filemode.READ);
		} catch(err) {
			fileExists = false;
		}
	}

    return (dispatch && fileExists) ? e.connection.response.closeAndRedispatch() : fileExists;
}

I found it necessary to also have a function which simply checks if there is a public file with a given name, and simply returns true or false.

/**
 * @author	Michael Odden
 * @email	me@michaelodden.com
 * @url		http://michaelodden.com/
 * @description
 * 		Checks if a given file exists under the public_html folder. Returns true / false accordingly.
 *
 *
 * @return	Boolean - true / false regarding if file exists
 * @param	OperaEvent - e - The event-object as sent to the eventhandler (required)
 * @param	String - file - path relative to public_html to look for
 */
function publicFileExists(e, file) {
	var fileExists = true;
	var dir = opera.io.filesystem.mountSystemDirectory('application');

	if(dir) {
		try {
			var relPath = "public_html/" + file;
			var stream = dir.open(dir.resolve(relPath ), opera.io.filemode.READ);
		} catch(err) {
			fileExists = false;
		}
	}

	return fileExists;
}

Usage

window.onload = function() {
	var w = opera.io.webserver;
	if(w) {
		w.addEventListener("_request", onRequest, false);
	}
}

function onRequest(e) {
	// Demo 1: requestedFileExists()
	// Check if the requested URI can match to an existing file under public_html.
	// If so, dispatch directly to that file, and cancel further load
	requestedFileExists(e);

	// Demo 2: publicFileExists()
	// this demo as a whole does the same as Demo 1, but the publicFileExists does
	// only return true / false, and the developer has to decide action herself.
	if(publicFileExists(e, "tesfile.html")) {
		e.connection.response.closeAndRedispatch();
	}
}

Notes to self

window.onload is only run when the application is started (through the Unite Control Panel), and not on each page-load as some would believe.

Markuper does of course need access to the filesystem.

Try-catch is my best friend. If you have some weird situations where your application doesn’t load, it might be because a missing library (not including the file-io through your config.xml etc) then you’ll have to start debugging. By wrapping essential parts in try-catch and check the error-object as passed to the catcher you might save yourself quite some time debugging in the darkness. It is a matter of best-practice to use try-catch on parts of your code that might fail, but it will also come handy as a debugger tool just for checking large or small parts of your code.

JavaScript on both sides

It seems to be a common source of confusion for some: it’s important to remember that – in Unite – JS is used both on the server-side as well as on the client-side. Methods like “alert()”, won’t work on the SSJS (the ones included in the main index.html-file, either directly or indirectly). Pretty obviously, but I remember my first debugging-action was to try an “alert()” .

Recommended

• template.js – patched version of the Markuper, fixing the bugs as mentioned in my previous Unite-article. Thanks goes to António.
• Offical Opera Libraries – Opera does have some really skilled developers, and it’s worth checking out the libraries.
• JavaScript for hackers – a great article, and the title says it all – well worth read for everyone working with JavaScript.

Related posts:

• Adventures in Opera Unite

Let’s say you have saved your login-credentials at http://examplecommunity.com/, which consists of a user name and a password. The password-field at the login-page uses type=”password” to display asterisks to hide the input from any users watching. Opera has a neat feature which lets you modify the source of any page, and “Apply” it to reload it as if it was the original page. So if you changes the type=”password” to type=”text” (or simply removes it, as text is the default type), and clicks “Apply” you might still use the wand, and now the text inserted into the password-field is perfectly visible. It’s just to hit “esc” to cancel the loading of the next page and you have the password written en clear text.

Now, it is unfortunately not usual amongst the browsers that has this kind of feature to have easy ways of working around it, either by hacking the local files which contains the passwords or by some other tricks which differs a little from browser to browser.

There are some ways which webdevelopers might make this a little bit harder, by i.e. including the login-form with JS etc, but first of all it’s a big NO because it’s bad , bad practice against UA’s which either not support JS, or has it deactivated. Second it’s just to use the developer-tools and modify the DOM which is created none the less.

Verified with Opera 9.64 and 10.00 beta

Possibly related

Show passwords feature is a serious security issue in Firefox and Chrome

No related posts.

One of these things are regarding how to format a URL.

This post isn’t really server-technically focused, as it is more a discussion of an idea. I’ll none the less assume that the reader has some familiarity with mime-types, basic webserver-settings (like handlers and URL-rewrite-techniques).

Why

As far as I’m concerned, any URL should give a hint of what you will find there, and by stripping the file-extension and just sitting left with something that’ll look like a directory, or using the scripting-language’s extension, I believe that we works against this. File-extensions gives an important hint regarding what the content is. What do you expect when you see “.jpg”, “.gif” or “.png”? Yes, images. Then what about “.html”, “.txt” and “.odf”? It’s most likely some kind of text, perhaps formatted. So what does “.php”, “.py” and “.aspx” tell us? Not much – it mostly a directive to the webserver, telling it to use some kind of parser to compile/process the contents before outputting it. And it might output html, xml or pdf as well as anything else.

A couple of years ago it had a “coolism” about it, saying that “I know how to develop fancy websites”, but nowadays people mostly expect some kind of interactivity anyway.

How

All relevant webservers today have to possibility to map any kind of extensions to any kind of (supported) language-parsers. I.e. with Apache you can use the AddType-directive like this:

addhandler php5-script html xml json

- to parse all .html-, .xml and .json-files in the given directory as PHP 5.

Now, let’s say you have an API which allows you (or perhaps other users), to query a service for information – and allows it to be delivered in xml, json and html. This is usually solved by adding some parameter like “of” (output-format) or something like that in the request to tell which format you’d like. I prefer to keep everything as logical and reducing the need to look up in manuals as far as reasonably possible, so instead of sending GET-requests like this:

http://example.com/gateway.php?id=15&key=11341&of=xml

http://example.com/gateway.php?id=15&key=11341&of=json

http://example.com/gateway.php?id=15&key=11341&of=html

I’d rather prefer:

http://example.com/gateway.xml?id=15&key=11341

http://example.com/gateway.json?id=15&key=11341

http://example.com/gateway.html?id=15&key=11341

This applies just as much for those sexy search-friendly URLs – just append .html to that pretty URL. Google says that it atleast won’t affect negatively on your ranking – so why not?

Possible problems

There are some obvious problem to this approach:

1: What if you want different parsers (let’s say php and python) for different files but which will serve the same kind of output? How do we tell the server which to use when?

- Possible solutions to this is to either separate them in different folders (the cleanest approach), or expand the extension to ie. .php.html and .py.html. Perhaps in combination with some mod_rewrite-kind of tricks.

2: What about the overhead for static files, which still is sent through an interpreter although nothing is changed?

- If you are running a service which is sensitive to these kind of margins, you should just use dedicated servers or CDN’s to deliver the static content no matter what.

3: How far shall we take it? Should we use extensions like .html5 and .xhtml etc?

-  I do believe that these differences are mostly relevant to the software parsing them, so in these cases it may suffice with keeping with i.e. .html, and use the MIME-type to send further details.

Summary

Although all my examples might not pinpoint all the benefits I do believe that there is an idea in keeping the file-extension, both to assist external users as well as might reduce some clutter.

What are the pros and cons of an approach like this? I’ve barely touched a few in this post, but I hope I was able to mention some of the most essential ones.

No related posts.

What is Opera Unite

Opera Unite is the latest member in the Opera-family and brings some new ideas to the table. Opera calls it “Reinventing the web” – those kinds of claims will of course provoke a lot of people (especially the know-alls). It does perhaps not reinvent the web, but it does give the users more power and controll of their own data again, as was intended in the – oh so far away – beginning of the web

Opera’s idea is that you should be able to share your own data easily and with whoever you want, and to achieve this Opera has bundled the browser with a web-server. The applications you can share with Opera Unite is closely related to the Opera-widgets, but gives a little more power – i.e. access to the server and file-system through JS. So by using standard web-technologies (SVG, HTML5, CSS, JS…) you can now pretty easily develop server-applications as well.

A popular rant-attack is against the fact that you have to create an opera-account to get this up and running, as Opera uses a proxy (operaunite.com) to organize the traffic and getting through your router. A lot of people complain of this as “Opera monitoring our data” (like this isn’t possible for Google and Facebook already) – so listen: as long as you’re connected to the Internet, your data will pass through quite some servers no matter what. Though luck. Now, if this is a service that will stand the test of time and users, I will expect the possibility for users to either run their own proxy-services or bypass it all together.

Now, what concerns me the most right now, is the security-aspect. A lot of people will by running Opera Unite give any bad people out there (yup, I know you’re out there!) one more frontier to fight on – they can now attack the Opera Unite-server running on your computer, as well as attacking the browser. This means that Opera has to be extremely thorough to eliminate any security-issues that surely will come.

Beside of this, I’m very excited in seeing how this will evolve. They have released some developer-resources already, and I’m sure more will come – so I’m eager to see how developers out there will develop creative tools to run under Unite.

Developer-experiences so far

As this is still in alpha there are a lot of issues I assume will get better when getting closer to release-date. This is meant as tips to other developers more or less new to Unite-development.

Initiating your app

You will need a config.xml, index.html and a javascript-file to get started. Your app can have a setup like this:

• myapp/
• config.xml
• index.html
• script.js

See the config.xml-link for details of the setup of this. The index.html can be a very simple HTML5-file, ie like this:

<!DOCTYPE html>
<script src="script.js"></script>

Now we’re getting started, I’ll give an excerpt of a script.js-file, and give an idea of how it can look:

window.onload = function () {
    w = opera.io.webserver
    if (w)
        // the default page, kind of like index.html : )
        w.addEventListener('_index', showMainPage, false);
        // And two common
        w.addEventListener('newEntry', newEntry, false);
        w.addEventListener('editEntry', editEntry, false);
    }
}

function showMainPage(e) {
    var response = e.connection.response;
    var myhtml = "<!DOCTYPE html><head><title>AppTitle</title>/head><body><h1>Welcome!</h1></body></html>";
    response.write(myhtml);
    response.close();
}

- As you probably can see, we are adding event-listeners to the webserver to listen for actions, and every page/action of an application requires it’s own method which takes care of the logics and displays any contents by writing the necessary HTML. This is good explained in Opera’s documentation so I won’t dive further into that here.

What I’d rather like to mention is those things that will “crash” your app:

Every action-method must accept a named argument for the event-object – which in turn will give access to the response and request-objects. If not specifically named, then the app won’t load.

You will also have to write something (response.write(“something”)) _and_ close the response (response.close()) in the current action, otherwise the app won’t load.

Markuper

Opera does also give out a template-helper, which is just a JS-library which will come handy. I haven’t found a place that distributes it in an organized manner, but you may download it as a part of the barebone-example in the previous link, or you may dissect any of the existing apps (download the .us-file, rename to .zip and extract). It seems there are some different versions out there so beware.

The templater doesn’t currently seem to allow variables in attributes

This is cumbersome, as I’d like to do something like this:

<div id="content" data-import="templates/{{page}}.html"></div>

I assume this will be fixed, as it seems – when skimming through the library – that it should have been taken care of in the XPath-expression looking for the variables. I’m working on a patch.

Imported files through the templater can’t be empty

If you try do something like this:

<div id="content" data-import="templates/content.html"></div>

and the “content.html”-file is empty, then the app won’t load :p.

404 Not found

If you get the “404 Not found – Resource not found” it’s propably a JS-error. Unfortunately you won’t get any better debug-messages by now if you haven’t implemented it yourself (see the “Notifications”-part of this post). Take a close look at your code, and I assume Opera will fix integration with dragonfly in upcoming releases.

POST and GET

GET: e.connection.request.queryItems['id'][0]

POST: e.connection.request.bodyItems['title'][0]

Custom fonts

@font-face {
    font-family: MyFancyFont;
    src: url('fonts/MyFancyFont.ttf');
}
/* Use like this: */
body {
    font-family: MyFancyFont;
}

This is pretty obvious of course, as the new Opera-engine, Presto, has support for a lot of snacks when coming to HTML, CSS and SVG – and hopefully soon more JS-snacks will come as well.

Notifications

You will more than once want to give some kind of notifications, either to yourself as developer or to the end-users. Notifications can ie be debug-messages, or event-messages like incoming message in an IM-app.

opera.postError() will let you post a message which only will appear in the error-console.

widget.showNotification() will pop up a message in the lower right corner of the screen. It’s possible to attach a callback-function which will be called when/if the user clicks on the message.

void opera.postError( <String> message)
void widget.showNotification( <String> message, <Function> callback )

Quick tips

If you want to test any changes made to the javascript-files, you will have to restart the app. If you’ve just changed any HTML-files ie for the Markuper, you can just reload the page as you’d normally do. If none of them seem to work, you might have to remove the app and install it again. Remember to empty the trash as well before installing!

Packaging the app

The app-packages are simply zipped folders, renamed to the prefix “.us” (Unite Service), and to install it it’s only to drag-drop the file onto an Opera Unite-able browser, or if you want to share it online, give it a link like this:

<a type="application/x-opera-uniteservice" href="url/to/myapp.us">Install myapp</a>

Possibly related reading

• Opera Unite Official Site
• Opera Unite Developer Resources
• Unite API Overview
• Opera Unite Howto’s
• Is Opera Unite a revolution, or is it just the fat lady singing?
• Opera breathes down Firefox’s and Chrome’s Necks
• Setting up custom domains for Opera Unite
• How to debug JavaScript problems with Opera
• API: The widget-class
• Unite: Some questions and answers

Related posts:

• Opera Unite: Convenient tips and snippets for developers

Stevie Ray Vaughan (1954 – 1990)

Stevie (SRV)  is my personal favourite musician and guitar-player – no doubt. He has an amazing energy (watch any concert) and is a true maestro on the guitar besides being a good song-writer and a descent singer. The genre of choice was mainly electric blues, and few others have made such an impact on the genre as he has. He was again inspired by artists such as Jimi Hendrix and Albert King. SRV Died as a result of a tragic helicopter accident on October 3, 1990.

Recommended treats – (Album in parenthesis)

• Pride and joy (Texas Flood)
• Love struck baby (Texas Flood)
• Wham (The Sky is Crying)
• Rude mood (Texas Flood)
• Come on pt 3 (Soul to soul) ( Jimi Hendrix – Come on pt 1, Earl King- Come on)
• Life by the drop (The Sky is Crying)  - A cover originally by Doyle Bramhall and Barbara Logan – about Doyle and Stevies friendship
• MTV Unplugged – Rude Mood, Pride and Joy and Testify

Marius Müller (1958 – 1999)

One of the greatest Norwegian musicians and guitarists that I know of. He is greatly underrated as far as I feel, partly because he’s commercially only remembered for the songs “Den du veit” and “Carmen“, whereas “Den du veit” is an easygoing rock-tune and Carmen is a ballad although with some beautiful guitar-parts.

Marius died as a result of feeling ill while driving.

Check him out at Spotify or buy a CD or three.

Recommended treats

• My town (The Big Beat)
• Your blues (Plugged!)
• Soul of a man (Big / Plugged!)
• Sunburst Shuffle (Seks)
• Ikke tru et ord (Marius Müller) – Norwegian Thin Lizzy-cover

David Gilmour (1946 – 2009-and-counting)

While perhaps not the most technically skilled guitarists, he has an distinct style and adds a heck of a lot of attitude and feelings to his compositions which never fails to impress me. Adding this to his eminent songwriting-skills – it just gives me the goosebumps. Every time. His best work is together with Pink Floyd, but he do have a lot worth listening to when it comes to his solo-albums as well.

Recommended treats

• Pink Floyd – Shine on you crazy diamond (Dark Side Of The Moon)
• Pink Floyd – Comfortably Numb (The Wall)
• Pink Floyd – Time (Dark Side Of The Moon)
• Pink Floyd – Lost for words (The Division Bell)
• Pink Floyd – Coming back to life (The Division Bell)

But there are more – lots more

There are many great guitarists out there, no doubt. Some other personal favourites worth mentioning are Don Felder of The Eagles (used to be, at least); Mark Knopfler of Dire Straits (ah, Brothers in arms – beautiful!); Nils Lofgren of the E-street band and Crazy Horse – but I admire him the most for his solo-work (check out his “Acoustic Live”); and of course Øystein Sunde.

Everyone mentioned here could of course fill a bunch of posts each and every one, but as I like to keep it short and simple I’ll let the clips “speak” for them selves .

No related posts.

In a day that’ll probably save enough time to go and get me a nice cold beer. Mmm! Ah, those little things

No related posts.

See the original blogpost – for information of the concept – or go straight to the demo-page or jquery-demo-page to watch it in action. jQuery has turned out to be the tool of choice for many developers out there, both because of it ease of use and it’s powerful features.  Although jQ might be a little overkill for some applications, it has the sleakest way of packaging a lot of functionality and allowing for modularity through plugins as I’ve experienced so far. Feel free to contribute if you’d like , i.e. adapting it to other frameworks or suggest new neat features.

Please give it a try and let me know what you think!

Download

• jquery.trh-0.3.js (4.5kB)
• jquery.trh-0.3.min.js (1.8kB)

Activation

$(document).ready(function() {
  var params = {}; // See the jquery-demo-page for available parameters
  $("table").highlighter(params);
});

Known limitations

You should avoid activating it at more than one table on each page for now – the next version will have fixed this with several activation-modes. The next version will also include dynamic column-selection as well, allowing i.e. to let the users press any column to match against.

Possibly related

• 10 Table Plugin For jQuery Must To Be Learned

Related posts:

• table-row-highlighter.js
• Usability-tips for your application (Part I)