Unlimited Edition » Development

Sad news – Smultron no longer supported

michaelo — Sun, 26 Jul 2009 12:26:21 +0000

As of 2009-07-06 will my editor of choice for the last 2-3 years, Smultron, no longer be further developed by the sole developer Peter Borg:

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.

Adventures in Opera Unite

michaelo — Wed, 24 Jun 2009 09:53:22 +0000

Opera recently released Opera Unite claiming to reinvenet the web. I have used Opera Unite the latest week, and been playing around developing for it just as long. Heres what I think about it and have learned so far.

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:

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:

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 = "AppTitle/head>Welcome!";
    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:

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

Update:
Ref comment from António Afonso, it seems that it’s only the data-attributes (used for importing, iterating through lists etc), that were affected of this. The “patch” is simple:

Open the template.js
Find the method “this.parse = function( data )” (line 1439)
Switch the order of the this.parseDataAttributes( data ) and this.fillValues( data )-calls
Save and go on!

Imported files through the templater can’t be empty

If you try do something like this:

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(  message)
void widget.showNotification(  message,  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:

Install myapp

Possibly related reading

Opera Unite: Convenient tips and snippets for developers

Google Wave – the email-killer?

michaelo — Fri, 29 May 2009 17:01:46 +0000

Google recently announced their new tool/protocol/invention, Wave. I’ve seen their presentation and read through most the documentation, and think it will be interesting to see how it will evolve in the future. It’s currently only available as a sand-boxed version for invited developers, as well as it is possible to ask for access – I do not have any idea yet of how many there is who will gain access in this “early” stage.

What is Google Wave?

Google Wave is simply a way of communicating, with it’s own protocol, which aims to replace IM and e-mail and other means of some-to-some communication. They are trying to remove the limitations of the regular communication-apps to ease the flow (waves) of information. This means that every conversation is a tree of messages, which in turn can contain text-messages, video, documents, images etc, and with control of it’s own history as well as access-control – mainly by inviting users to the conversation, but it’s also possible to delegate access to any sub-trees.

The protocol is open, making it possible for anyone to build their own systems – a good decision, i think, by Google as it will have to reach widely to get the share and usage it will have to get to be a success.

Will it succeed?

It depends on what they think of as success. In some way or another – yes. It’s undoubtedly some good ideas, although little or nothing by itself is revolutionary. Similarly solutions exists already, but just as proprietary software as far as I know, so the idea of making it freely available, easily embeddable and with a good API is one I really like. Not to forget that it all is supposed to run inside a web-browser .

It is not likely that it will be of regular use anytime soon, as it relays heavily on HTML5-features as well as a proposed addition of their own – although it is these kind of “killer-apps” that possible could speed up the adaptment of the specification in the coming UA’s and the transition to these new UA’s for the end-users.

But it is yet to tell if it will replace the regular emails and IMs as they are deeply rooted in ways of communication the regular users really can associate with – sending letters, and talking – but I personally would love to see it happen!

What do you think? Is it anything new, does it have potential, or is it just old ideas in a new suite?

Related resources

No related posts.

Usability-tips for your application (Part I)

michaelo — Mon, 25 May 2009 15:07:20 +0000

There are a exponentially growing amount of applications being developed. Some of them vanish at an early stage, while others grow to be quite (and sometimes extremely) popular. What really dazzles me is how sucky many of them (both the popular and the unpopular ones) are regarding how they deal with user-interaction. I’m not an expert in user-interaction-design, but as a user of quite a lot of applications (both web and desktop), I do know when something feels cumbersome or just wrong or missing. About a year ago, I started to write down some of those situations having ambitions about writing something useful. I started writing the headline “1000 or so tips for your application”, so although I still have quite some way to go to reach that goal ( ) I figured I’d rather start writing about what I’d already got and take it from there!

Keep in mind that, as I’m kind of an web-guy, I’ll mostly keep things related to the web, but much of what I’m going to write about is easy transferable to the desktop-applications. And I will also encourage you to mention issues you’ve encountered as a comment and help me finish my list.

In this post I’ll go through:

Make tables sortable
Make sure “Skip-intro”-links are visible at once, even before the flash is loaded.
When working with tables, make sure a key-press highlights the first, closest matching row.

Making tables sortable

In short – what is the use of organizing tabular data in tables, when you don’t/won’t enjoy the full power of it? When coming to using tables on the web, it should really be up to the UA’s to implement such features, but until then you’ll have to do it yourself. There are mainly two solutions to this case (on the web, that is):

Backend processing

Your table-headers are links, with parameters to be sent to the web-server, where your script than sorts the listenings (assuming you have your data in a database-table or an array/hash-table), and then output the correct result. The query-string sent to the server will probably look something like this: “field=name&dir=desc”. The script will then sort the results while taking the parameters into account, and then return a nice dataset ready to be rendered in html. The downside of this approach is the extra requests to the server and the loading time, which in turn will make the user have to wait. We all know that that’s not good you bad boy!

Frontend processing

This is easily done, if you have used correct markup for your table (thead and th’s for defining the header-area, and tbody td etc to define the content-part. Check out this for more info). There are a great amount of javascript-scripts dealing with this issue, although they have their shortcomings. The main functionality of these are to attach javascript-events to the text in the table-headers, and make them sort the table on the corresponding column – pretty straight-forward and as expected.

The problem, though, is best imagined through an example: Let us say you have a search-form, which search through an database of articles. The result is in return displayed in a table, with columns for title and creation-date. The searchresults are also grouped in pages of 20 rows each, so to view the next 20 results you’ll have to click on the neat little “page 2″-link. Let us now stay on page one, and click on the “creation-date”-header to sort the results after date of creation. The problem here is that your javascript will (usually) only sort the current page, because – of course – it doesn’t know about the remaining pages. This issue is avoided using backend-processing. It is obviously also possible to work around this, but as a default behaviour – this is usually the result.

“Skip-intro”-links

While this is an issue I come across quite often, this is also the the situation with one of the easiest solutions. The situation: There is this super-fancy site, with an even more super-fancy intro (usually in Flash), to really show off how cool this site really is. And – as this super-fancy-site-intro-flash is quite heavy with regards to loading images, animations and sound-effects – they also have to have a status bar to indicate the progress of loading the intro. All in all fair enough, and the solution for those of use who doesn’t feel like watching this intro and really just want to get on with the real content, is to give us an “Skip intro”-link which in turn will send us (hopefully) directly to the main-site.

So the followup-question is “Where do I place this link?“, which basically has two answers (and only one of them are actually good): Inside the flash-animation (usually with s a getURL-call), or as an HTML-link located somewhere around the intro (above, underneath, left, right, or even diretly onto it (behold the the magic of CSS) ). The good solution here is to locate it in the HTML as an anchor. This is for several reasons: It’s fetchable for search-engines (allthough some SE’s by now know how to read swf’s), and it’s in reach already before the flash is loaded. On the other side, the worst solution was by someone who had the link inside the flash, and only visible after the progress bar was finished. Great!

In short: place the “skip intro”-link in the HTML-code, and keep it visible as long as the intro is running.

Highlight corresponding cell/row on key press

This is another tip related to tabular data, and are often directly related to the sortable-part. When working with tabular data, and selecting/sorting a certain column, and pressing a key, ie. the letter “B”, please jump directly to the closest matching row.

In short: If the user presses a key, make sure to highlight the corresponding row, depending on which column is highlighted/sorted on. If the user presses “B” and the table is sorted on surname, jump to the first row with a surname which starts on “B”. If there are no rows with matching surname, then highlight the closest matching one. I.e. the first starting with “C” etc.

Perhaps not exceptionally relevant for websites yet, but I do think that as more and more content-heavy applications are being developed for the web, it is something to look into. I’m working on a JavaScript-solution to this and will post about it a little later. Keep following

More to come

I’ve got plenty more to come in upcoming posts, and would also very much like your input on especially the discussed issues as well as proporsitions for coming cases.

Does entry-highlightning on tables after key-press have anything to do with the web?
How can this be implemented in a good fashion?
What other magic is reasonably to accomplish with neatly marked up tables?

The whys, hows and whens of pagination

michaelo — Sun, 24 May 2009 15:04:01 +0000

Why

In the most basic form, pagination is best illustrated by books: there’s a lot of content, and just expanding the sheet would too cumbersome. And then we discovered that by dividing the content into pages, and stacking them we’d get a lot of content in a handy way, and also making it pretty easy to navigate. Especially by prepending or appending a table-of-contents (ToC).

Web-pagination came, I believe, in the days of modems as a solution to keep the amount of data to download smaller, and then letting it up to the user to decide which parts of the paginated content (s)he’d check – although that’s a pretty basic assumption – anyhow, that’s not of the scope of this post.

The problem

What I see all too often is something like this:

Example of common pagination

The problem with this approach, even though it’s the most common one, is that the links to the different pages gives no indication of what you’ll find there. Yes, if you’ve performed a search, then you’ll know that you’ll find even more results, and as it probably is sorted by relevance you know that the entries will be less and less relevant (probably) the further you go. But what then if the decrease of relevance between each entry isn’t linear? Then entries in page 10 won’t no longer be half as relevant as those in page 5, etc.

Another example of common pagination - guess from where!

In books, pagination is practical mainly in cooperation with the ToC, and also for keeping track of relevant pages – like which page something specific is written, or the current position of your progress. On the web we usually just throw in pages – and skipping the ToC – leaving it up to the user to manually search.

This is again no problem for those who are reading the entries from start to end – but rather for those who are looking for something specific.

Alternatives – and when and how to use pagination

Dynamic filters

Screenshot from Amazon.com's filters - click for full image

Filters are a great way to allowing the user to skip those entries he assumes is unrelevant to the current search. Webshops, catalogs and similar sites are now becoming pretty good at using this approach – just take a look at Amazon.com’s approach (image). Here I’ve searched for blues-DVD’s, and is presented with relevant filters depending on the current result. I can ie choose to just see entries from 1960 – 1969, and skip out all those who aren’t english as well. This reduces it down to sub-13 from 914 – great! Now I won’t need to browse among 76 pages anymore.

To integrate a good implementation of this you’ll have to find out what attributes of the entries are reasonably to filter by (remember to take into account the demgraphics of the users going to use this), and make sure your solution present this in a good way.

It will usually be reasonable to allow multiple filters (I want english entries from the 1960′s), but in some situations singe-filter-support will suffice.

Other sites using this technique: finn.no (no), ebay.com, telefonkatalogen.no (no)

This is probably mostly relevant for web-books, but elements of this can also be integrated into other solutions and situations. It will usually be used instead of dynamic filters where the content is linearly continuated in a given order – instead of some arbitrary sorting.

Web-books, online documentation etc is natural places where this is applicable.

Informative links

Screenshot from my framework which takes care of descriptive links depending field and sort-ordering - with norwegian i18n. The arrow (not included in screenshot) is pointing at "3" and the UA is accordingly displaying the information.

Screenshot from my framework which takes care of descriptive links depending field and sort-ordering – with Norwegian i18n.There will probably always be some situations where you have to use pagination, and often will dynamic-filtering be a little overkill. The solution here can be to add information to the title-attribute of the link which says something about what you’ll find there. For example, if I have a result-set sorted by dates ascending, then a link to page might have the following pattern for it’s title-attribute: “Articles from to ”. This way you’ll give the user an indication of what to find at that page, without having to check first.

Feedback

This is how I feel about the issue of organising larger amounts of data, and making it easy for users to find whatever is relevant. I’m sure there is situations I havent’ covered here, and would like your comments on how this can be improved to give our users a best possible user-experience – and with that giving our clients a more valuable website.

Is the title-attribute of anchors the best / right way to display information for informative links?
Are there other ways then filters, ToC’a and informative links that can solve the problems?
What other places can ToC’s be a good alternative?

Your feedback is very much appreciated.

Usability-tips for your application (Part I)

My look on the web

michaelo — Sun, 24 May 2009 12:29:56 +0000

I feel strongly for the idea of the open web. A web accessible for everyone.

Now, this doesn’t mean that every single page on the web should be 100% identical for everyone, but more like: Relevant information ought to be available and easily accessible by those who need and/or want it, regardless of disabilities. So in my view, it is important to separate the thought of content and functionality on the web. And as well, in these days of the ever-increasing amount of web-applications this has got to be taken into account. As I’ll discuss further in a soon-to-come post there are some things to take into consideration whether the “website” actually is a website, or a web-application. In short: every web-application doesn’t necessarily have to be accessible to everyone, regardless of platform, disability etc, while most of the websites does have to be so.

There is a common misunderstanding that idea of the open web mean that every piece of content, associated with every bit of fancy functionality ought to be done in such a way that everyone – regardless if they’re using IE 5, some old Netscape or even Lynx -should be able to enjoy both the content and the functionality.

How I/to do it

When I create a website for any company, I do make sure that all of their public content is accessible – this mean that the webpages are neatly marked up in as meaningful markup as possible, as while as making sure my stylesheets as looking fancy for the waste majority of users, and using javascript just to enchance the experience for those of them who support/enable it. This way it will be accessible for those using supporting UA’s (ie. those with reduced sight) and also degrades nicely for those with older browsers – or for some other reasons doesn’t fully support CSS and/or JavaScript).

This is not anything new for anyone who’ve heard for web-standards, semantic markup and progressive enhancement – which in turn will make sure of graceful degradation.

I know there are those out there who will shoot me for not saying that 100% ought to be accessible to everyone, but as we live in a real world – we have to make real decisions to make real business.

Usability-tips for your application (Part I)

First year finished

michaelo — Mon, 18 May 2009 21:41:48 +0000

I’m now finished with the first year of university, leaving only two more years left. I feel I’ve managed quite well, and I’m looking forward for the upcoming classes: game-development, general programming, object-oriented analytics and design, etc.

Now it’s time to focus on my jobs and private projects – beside enjoying at least some days off - this summer.

Note to self, projects to get further during this summer:

kidlock – a computer-lock for worried fathers, with a pedagogical twist
oppetider.no
mydemoground.com
MioNoid – My Arkanoid-creation, for practicing my game-development skills

No related posts.

Unlimited Edition » Development

Sad news – Smultron no longer supported

Thank you, Peter Borg

Related posts:

Adventures in Opera Unite

What is Opera Unite

Developer-experiences so far

Initiating your app

Welcome!

Markuper

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

Imported files through the templater can’t be empty

404 Not found

POST and GET

Custom fonts

Notifications

Quick tips

Packaging the app

Possibly related reading

Related posts:

Google Wave – the email-killer?

What is Google Wave?

Will it succeed?

Related resources

Usability-tips for your application (Part I)

In this post I’ll go through:

Making tables sortable

Backend processing

Frontend processing

“Skip-intro”-links

Highlight corresponding cell/row on key press

Related links

More to come

Related posts:

The whys, hows and whens of pagination

Why

The problem

Alternatives – and when and how to use pagination

Dynamic filters

Table of contents

Informative links

Related reading

Feedback

Related posts:

My look on the web

How I/to do it

Related posts:

First year finished