Skip navigation.

web:config

tips and tricks for the interwebs

Posts tagged with "web development"

for heavy duty posters

, , , ...

I present you with a new script to enhance user experience on my.opera, dubbed Scribit.

The script provides the user the hability to edit all his/her forum posts, blog posts and comments, dev.opera comments and widget discussion's page comments without the need of opening a new webpage with the edit form. The script will create a inline editor, that will replace the original post, or comment, so the user can edit it inplace, therefore making editions much more pleasant and quick. The script also displays a inline toolbar with all the available formatting commands used to produce bbcode. The toolbar is not only displayed in the inline editor, but also in the already existing reply boxes in the forums, blogs and at dev.opera.

This script initially only worked for forum posts and was very simple. I coded version 2.0, to submit to the User Javascript contest but by influence of the others the script never got to the juri's inbox. Oh well...

Screenshot with default setup (standard skin)

Screenshot of Quick Edit link

Screenshot of post quick editing (Oxygen skin)

Instructions
The following keyboard shortcuts are supported in the inline editor, producing bbcode formating. Press Ctrl plus any of the following keys:
  • b - bold
  • i - italic
  • u - underline
  • s - strikethrough
  • p - preformatted code
  • t - insert unordered list
  • l - align text to the left
  • g - center text
  • r - align text to the right
  • j - justify text
  • m - insert image
  • h - create hyperlink
  • e - insert email link
  • f - attach file
  • q - format text as quote
  • w - whisper text
  • ENTER - submit post
Later on, I'll make these easier customizable.

The script's configuration has sensible defaults. The entire UI is drawn using the current Opera skin, therefore providing an extra integration with the browser. Note however, that some skin bugs might be releaved. This script was succcessfully tested with Opera's default skin, and some other popular skins.
You can tweak the editor's behavior, although you need to edit the script itself.

This script does a daily new version check, warning the user of the new script version. You can disable this feature though. Check the configuration kCheckForNewVersion.

This entire script was done by me from scratch. The version check code was imported from the myopera-enhancements script, also made by me, and Robin Zalek. I recomend you to check it out. :cool:
http://my.opera.com/xErath/blog/2009/02/10/my-opera-community-enhancements

Credit also for AyushJ's quick-reply script for some inspiration. :wizard:
http://my.opera.com/community/forums/topic.dml?id=185091

Many thanks to Lars Kleinschmidt as well for testing and feedback. :wink:

However, the script has much to catch up. The roadmap is:
  • finishing html editing support :yikes:
  • supporting html to bbcode convertion and back on the fly
  • adding a 'remove formatting button', trivial for html, hard for bbcode :knight:
  • removing all prompt boxes and replacing them with proper floating
  • menus providing the user input suggestions, like listing his/her files when the attach button is pressed.
  • replacing the default new blog post, new form thread, and new dev opera article
  • making a lovely UI to edit configurations

Etimology: Scribit derives from scribe :spock:

Download the script from:
xerath-myopera-scribit.js
Future versions will be announced here, and the script will notify the user of the new version.

For the geeks
Script documentation is available at, generated using JSDoc:
scribit-documentation.zip

All text strings stored by this script are properly grouped to ease the script's localization. Currently, the suported languages are english and portuguese. Other users are encouraged to contribute. The language is autodetected and will match your UI language, but this can be overriden by setting the kPreferedLanguage configuration variable. If the UI language is not supported, english will be used.

Translations code chunk:
var translations = {
    en:{//plain english 
        L_SUBMIT: 'Submit',
        L_CANCEL: 'Cancel',
        L_QUICK_EDIT: 'Quick edit',
        L_QUICK_EDIT_LINK_TOOLTIP: 'Quick edit this post using inline editor',
        L_ERROR_ON_LOAD: 'Error loading post from server',
        L_LOADING_DATA_STATUS_MSG: 'Loading data from server...',
        L_POST_NOT_CHANGED_NOTIF: 'Post not changed (to quit press Cancel)',
        L_SUBMITTING: 'Submitting...',
        L_ERROR: a'Error',
        ...

Have fun! :cheers:

Developer tools unleashed

, ,

Allas ! The wish of many developers and Opera fans was partially fulfilled ! Real developer tools officially supported in Opera :yes:
See some screenies
I personally have my own tools, but Opera's ones seem much more polished, and since they're in javascript, they're fully editable. :yes:

But, being me the techie person I am, aka geek, and knowning that the tools announced at dev.opera are scripts, I opened my menu.ini, and saw the following
[Advanced Tools Menu]
Item, 69887            = Manage cookies
Item, 69888        = Manage wand
Item, 920136405    = Content block details, 1
--------------------1
Item, 50838            = Go to page, "opera:plugins",,,"Blank"
Item, 50835            = Go to page, "opera:cache",,,"Blank"
--------------------3
Item, 54122            = Show Java console
Item, 67476            = Show Message console
Item, "Developer Console"="Go to page, "javascript:(function(){var ele=document.documentElement.appendChild(document.createElement('script'));ele.src='http://devfiles.myopera.com/tools/developer/8679/devConsole.js';ele.parentNode.removeChild(ele);opera.tools.console.open();})();", , , " ""
--------------------4
Item, 51212            = Refresh display


Neat, uh ? :right: hum, maybe not.
What happens if you are offline, or have javascript off ?
Besides, the script is 170kb, which takes time to download, or check if it's not modified, therefore the menu entry does not respond instantelly, which is a usability problem.

The solution is simple. Download the file http://devfiles.myopera.com/tools/developer/8679/devConsole.js to your user js folder, and add this as a bookmarklet, or replace the Developer Console command with
javascript:(function(o){if(o&&o.tools&&o.tools.console&&o.tools.console.open)o.tools.console.open();})(window.opera);
and you're done.

Don't forget to periodically check for the script version.

Happy development ! :yes: :hat:
Download Opera, the fastest and most secure browser