Posts Tagged ‘opera’

Help Translate Noteit Posts

May 16th, 2011

The next version of Noteit Posts (v1.3-0) will support multiple languages. But I can only speak English fluently, so I will need help. If you can help translate Noteit Posts into another language, please read on.

Translating Noteit Posts

All text in Noteit Posts is stored in the file lang.js. This file can be provided in multiple languages, allowing for easy translation of the Noteit Posts interface.

Download the original lang.js file.

Open the downloaded lang.js file in a text editor, such as notepad, you should see something like this:

Noteit Posts Localization File v1.3-0
Language: EN-gb (Default)
Translator: James Glover
Contact: (Optional: Useful to notify you of updates)
Short Desc: Add notes to a URL or domain to remind you of the important things.
Long Desc: Noteit posts allows for the addition of persistent notes to any webpage. A simple interface allows for notes to be edited freely, recoloured, and moved about and resized through a simple drag and drop interface. Notes can be tied to a single page, or and entire domain, and can easily be managed, edited and deleted from a centralised interface.

var string = { //Declare the String variable
lang: "en-gb", //Language code
credit: "Default English translation by James Glover.", //eg. Translated into British English by James Glover
1: "Create Note", //Mouseover text of button
2: "EXTENSION ERROR: Can't read ", //path
3: "Database creation error: ",
4: "Database creation failed without error",
87: "Display create note button on extension bar",
88: "Duplicate ID detected!",
89: "No ID detected!"

The top section, between the stars/asterisks provides information about the translation and the mod in general.

Language: Defines the language of the translation. Please include the language code here, you can include a full text description in brackets afterwards. Specifying regional variations (eg. fr-CA) is not necessary but can be included.

Translator: Your name. This is purely for administrative purposes and is optional.

Contact: An E-mail address. This provides contact details in the language file itself. It is optional. While the information will not be displayed by the extension it WILL be accessible to anyone who looks at the extensions files.

Short Desc: The extension short description, used in the extension catalogue. To avoid confusion, please translate the English text, rather than writing a different description.

Long Desc: The extension long description, used in the extension catalogue and the manage extensions page. To avoid confusion, please translate the English text, rather than writing a different description.

The next section defines the text which will be used in the extension itself. It includes error messages, preferences screen text, and text displayed by the extension itself. The var string = { //Declare the String variable line is important and should not be modified.

lang: “en-gb” Defines the language of the translation. Replace en-gb with the language code here as in the header. Do not include other text.

credit: “…” Displayed on the preferences screen when your translation is being used. Replace the text between the quotes (“) to give yourself credit. If you do not wish to be credited, leave this blank.

The remaining lines each follow the same: format: number: "text",. In each case, simply translate the text between the two quotation marks. Leave the number alone and do not remove the quotes or the comma. Some lines contain // followed by a comment. These comments provide more information to help your translation, they do not need to be translated.

Completed Translations

en-gb Me
en-us Me

Learning the script: Noteit – An Opera Extension

Mar 8th, 2011

Web standards can be split into three major elements: HTML, CSS and javascript. HTML controls content, and gives it meaning and semantic structure. CSS controls style and form, it gives web documents their colour and shape. The third element, javascript, can be used to control the activity of the other two; it instils interactivity and makes the content dynamic and responsive.

I’ve been familiar with both HTML and CSS for a few years now, and, while caught in the dull cycle of job searching, I decided it was a good time to add javascript to my belt as well. I had already dabbled with a few other programming languages, many of which used similar mark-up to javascript, so was already familiar with the overall concepts, which meant I felt happy starting with a reasonably ambitious goal. I would make an Opera extension.

Opera extensions are built on the technology of the web, as this makes them ideal for interacting with web content. As a result, by choosing to make an Opera extension, I would also learn valuable lessons that could apply to more traditional web content, as well as familiarising myself with the Opera extension API. I also already had an idea, and one which would take me through several different lessons.

When looking for jobs, I would sometimes find myself looking at an advert I had already read, trying to work out why I had rejected it. Often these reasons were buried deep in the job advert, and I’d waste time trying to re-find them. Unfortunately, while job sites make it easy to mark jobs you are interested in, they rarely make it easy to indicate those you aren’t. If only I could stick a post-it note on the page, which would stay there if I returned. I quickly formulated a plan for the extension I wanted to make.

The Requirements

In order of importance.

  1. Clicking a button in the menubar would add a ‘post-it’ note to the page.
  2. The contents of this note could be edited from the keyboard.
  3. The note would be saved, and would reappear on the page if I were to return to it.
  4. The note could be moved about the page, and resized at will. Ideally through a similar mechanism to moving and resizing windows. The size and position of the note would be remembered.
  5. The note could be recoloured.
  6. Notes could be attached to a specific page, or a whole domain.
  7. Notes would remain until specifically deleted. They would not disappear over time, or on simple cookie deletion.
  8. Notes could be administered from a central interface.
  9. The central interface could be used to change the default note settings.

This list of requirements hinted at a neat work flow, and ensured I covered a range of topics, from simple manipulation of the DOM, communication between the browser and the web page and setting up a suitable storage system.

Introducing Noteit Posts

Today I finished the first version of the extension, which meets all the criteria listed above. While it is complete, it hasn’t been extensively tested, and could probably do with some optimisation. Additionally, there are a couple of minor issues that I’d like to get solved:

  1. Saved notes are loaded onto the website with the DOMContentLoaded event. Loosely speaking this means when the base of the website has finished loading. With larger websites or slow servers this can introduce unsatisfactory delay. Ideally I want the notes to appear as soon as I can add children to the document body.
  2. Searching the database for saved notes is unsuccessful with more complicated URL’s. I’m assuming that this is an issue with how some characters are processed before being added to the database. I’ve found the cause of this bug. I converted everything into lower-case before storing in the database, and then forgot to do the same before checking it. Ironically I did the first step to avoid case sensitive situations just like this one. I’ll correct it in the next version.
  3. In a couple of cases, by WebSQL transactions are composed dynamically. While security is unnecessary in this extension, and all content directly editable by the user is scrubbed, I realise that this is not best practice and would love to avoid it is possible. If anyone has any advice on how best to accomplish something like the following, it would be greatly appreciated: transaction.executeSql('UPDATE Notes SET '+field1+'=? WHERE id=?',[value1,id], null, function (transaction,error) {errorhandle('updatenote',transaction,error);})

I’m making this early version available for anyone who wishes to play around with it, for the purposes of beta testing. If you have any issues, please let me know. Also, if you are familiar with javascript, and opera extension development, then please feel free to look at my code. Any feedback, especially with respect to ‘bad practice’ would be greatly appreciated.

Edit: Uploaded a new version to correct the case-sensitivity bug. Additionally modified the version number to be more suitable for pre-official release version, and altered the ID to refer to this blog post, as Opera seem to like URLs as IDs.

Edit: Version 0.0.3 uploaded to provide increased security, and to ensure that posts are correctly assigned to the current page when switching from domain mode to page mode.


Download Noteit Posts 0.0.3