User:Pilaf/Live Preview

From Wikipedia, the free encyclopedia

Status notice: After a long period of neglected mantainance (due to an unfortunate HD crash) I've taken this up again and a new version is already under way with many bug fixes. I have also decided to give the utility a new name, so beginning at the next update it will become InstaView.

The text below corresponds to the old version.

A screenshot illustrating Live Preview
A screenshot illustrating Live Preview

Live Preview, as I chose to call it, is a nifty extension to Wikipedia's edit page which allows you to generate instant previews of the page you're editing. You might think this is silly as Wikipedia already has a preview feature, but this is unlike Wikipedia's preview in that it gets generated into your browser on the fly, without needing a page reload, in fact with no delay at all (except for very long pages).

If you grasped the idea already and can't wait to give it a try, just skip to the install instructions. Otherwise keep reading.

SECURITY WARNING: By installing this script, you implicitly trust Pilaf not to use it for malicious purposes (the source code is open for anyone to examine, though).

Contents

[edit] Benefits

The regular Wikipedia preview works by sending the wiki text to the servers, which in turn processes it and sends the resulting page back. Although this is generally not too demanding for the servers, it does have a small hit which contributes to some extent to the general slowdown of the site. Conversely, Live Preview runs 100% on your computer, avoiding those (unnecessary) hits, thus giving some relief to the servers. The effectiveness of this, of course, depends on how many people actually stop using the regular preview when not needed.

Apart from caressing the servers, Live Preview has the much more direct advantage of faster previews, often meaning gains in time and faster editing, as you would no longer have to wait for a page reload to see the results of your edits. This is perhaps Live Previews' largest appeal, or the most visible one at least.

[edit] Requirements

All you need to use Live Preview is a web browser with modern JavaScript support and have it enabled when editing a page. These are the browsers in which I've tested it and know that work:

  • Mozilla, Firefox, K-Meleon, Camino or any other Gecko-based browser
  • Opera 6/7/8
  • Konqueror 3.3 and Safari 1.2
  • Internet Explorer 6/7 (An error message appears in IE7, but it still works)

On the following browsers it does not work:

  • Internet Explorer 5

If you've tested it on any other browsers, please feel free to add them to the corresponding list.

In terms of computer power, any modern computer should suffice. You may notice some delays when processing very long pages on old computers though.

[edit] Instructions

[edit] How do I install it?

Please check the requirements before installing Live Preview.

If you intend to install it on another wiki, read this.

To install Live Preview simply copy/paste the full contents of User:Pilaf/monobook.js into your own monobook.js page (in case you haven't guessed yet, you need to use the MonoBook skin in your preferences). Once you've done it refresh your browser as indicated at the top of your monobook.js' page. Note that you need to be a registered user in order for this to work.

You may want to configure a few parameters, such as your user name (for signatures). To achieve this simply edit the following line in your monobook.js:

wpUserName = 'Your user name here';

If you're already using some other sort of extension that uses monobook.js you might not want to replace it with mine, but have them combined instead. In that case you may message me for help, I'll be glad to help you as long as I have the time to do it.

[edit] How do I use it?

If you've already installed it, all you need to do to start using it is to edit any page. You should now notice a new button labeled "Live Preview" below the regular "Save page" and "Show preview" buttons. Once you've made your edits just click on the Live Preview button to see the resulting page appear instantly before your eyes. You may click it any number of times to see further changes, you never need to reload the page.

If you've installed it and still can't see it, please check you fulfill the requirements. If that doesn't seem to be the problem, try messaging me.

[edit] How do I install it on other wikis?

Note: please don't do this on your own if you think you lack technical skills. If you want to use Live Preview on your wiki it would be safer to ask for help from someone on your wiki with good computer skills.

Installing Live Preview on other wikis is of course possible, but has a few issues that need to be cleared out first.

Firstly, as this is still a work in progress, it is bound to undergo updates regularly. That makes copying the code directly into each wiki a very bad idea, as each new update would have to be manually copied to every wiki. Please do not do this.

A much cleaner solution is to reference a centralized script (i.e. the one on this wiki) from every wiki where this will be used. The problem then becomes how to configure the script on each wiki, as there are things which are not constant among all of them, such as namespaces. I've made it so that all configuration variables have defaults, so if a given variable is missing it will fallback to its default value, but if it is already there it will not be overwritten. So the problem is reduced to where to place those configuration variables. There are two choices:

  1. An additional script file with all system-wide settings to be "included" from every user's monobook.js alongside with the actual Live Preview script.
  2. The user's monobook.js.

Each has its pros and cons, but in general terms I'm inclided towards the first one, as it makes updating the script much less of a hassle and doesn't clutter the users' monobook.js any further.

Now, here are the configuration variables that would generally need changing:

var wpLanguageCode = 'en';
var wpImageBasePath = 'http://upload.wikimedia.org/wikipedia/'+wpLanguageCode+'/';
var wpUserNamespace = 'User';
var wpImageNamespace = 'Image';
var wpCategoryNamespace = 'Category';

The variables should be self-explanatory. You can put these somewhere in your wiki and make everyone's monobook.js point to it before including the actual Live Preview script. Check my own monobook.js to see how this can be done (I'm feeling lazy).

The final step would then be to test this with your own monobook.js at your wiki and test it (you should need to hard-reload your browser each time you update the scripts). Once you've seen it working as it should go ahead and anounce it to your wiki's community, just remember to give me some proper credit ;). It would also be nice if you could drop me a line telling me you're using it.

[edit] Limitations

Live Preview is a work in progress and as such it has its limitations. Some are due to its state of incompleteness, some will most likely never be lifted as there are certain things that are just not possible to do without running on the servers. In any case you should be aware of what Live Preview can and can't do, and never expect more, you can still use the regular preview for those cases where Live Preview fails.

Here's a maintained list of the current limitations of Live Preview (i.e. what it still can't do):

  • <hiero></hiero> tags
  • Templates and MediaWiki messages
  • Undesired HTML stripping
  • Table of contents
  • Red links (to non-existing pages)
  • Time tables
  • Image galleries

In addition to the above list, it should be noted that Live Preview is meant to be an approximation to the real results and should not be considered accurate. If in doubt use the regular preview.

In contrast, here is what Live Preview currently can do:

  • Headings (all levels)
  • Regular paragraphs
  • Horizontal bars
  • Inline formatting (bold and italics)
  • Wikilinks
  • External links
  • Numbered and unordered lists
  • Definition lists
  • Tables
  • Preformatted text (whitespace at line start)
  • Signatures
  • Invisible links (interwiki and categories)
  • Images (with a few limitations)
  • <nowiki></nowiki> tags (inline only so far) NEW
  • <math></math> tags (very limited) NEW

[edit] Summary of changes

[edit] Version 0.5.2

Updated Feb 15, 2005

  • Added basic nowiki support (inline only, supports nesting)
  • Added basic math support (inline only, images only)
  • Added support for [[:lang:Article]]-like links
  • Fixed bug in definition lists
  • Fixed many other minor bugs

[edit] How does it work?

Note: This is a technical explanation of how Live Preview does its trick, if you're not into programming you'll probably not be interested in this.

Yet to be written.


[edit] Name change

A new name has already been picked, thanks to everyone who shared suggestions.

Brion Vibber made me note that MediaWiki 1.5 has a feature called 'Live Preview' already, seemingly unrelated (I don't know what it does). Therefore I need to seek a new name for my Live Preview, so here are a few proposals.

Please vote or add suggestions. Thanks.

  • Quick Preview
  • Instant Preview
  • InstaView
    • has my vote--Unforgettableid | Talk to me 11:02, 4 November 2005 (UTC)
    • This is the chosen one. Pilaf 19:09, 7 December 2005 (UTC)
  • Local Preview
    it is logically correct and can also be understood by novice users (local is the opposite of far, and the server is far away for most people) 18:19, 14 July 2005 (UTC) Sin23
  • WYSIWiki
    Very nice word play, but not very obvious to those who don't know what WYSIWYG means, IMHO. Pilaf
    Not wanting to be snide but anyone who doesn't know what WYSIWYG means should maybe think twice about editing here. --Phil | Talk 13:09, Feb 9, 2005 (UTC)
    What does that have to do with editing Wikipedia articles? :\ Pilaf 01:06, 10 Feb 2005 (UTC)
  • QuWiki
  • RT Preview (Real Time Preview)
    I like the expanded form better. Pilaf
    I suppose it is nicer, but just in case you didn't notice, the intended idea was to read it Ar-Ty (Arty Preview). Get it? (I still prefer the others though) --Yelhsa 18:48, Feb 17, 2005 (UTC)
  • PIMAP (PIlaf's MAgic Preview)
    Cute :) Pilaf
  • 1Click Preview (I suppose the other preview is one click as well) --Yelhsa 18:50, Feb 17, 2005 (UTC)
  • Quick'n'Easy Preview (Suggested by Netdroid9, a proud member of the Creatures wiki)
  • Preview killer
  • Click-and-see
  • P-I-M-P (almost like above)
  • Pilaf view
  • Preview lite / Lite preview
  • Indie view -- it's an alternative
..and much more ✏ Sverdrup 20:53, 28 Feb 2005 (UTC)
  • WikiSimi ('See me')
  • Viewiki -- sounds almost like "doohickey" --HymylyTC 20:36, 10 September 2005 (UTC)

[edit] Testimonials

Are you a happy user of Live Preview? You can leave your testimonial here and let the world know how good it is :)

Very impressive work, Pilaf!--Eloquence* 06:53, Feb 7, 2005 (UTC)

  • I agree. I'm promoting it at Wikicities as well. :) Angela. 07:34, Feb 7, 2005 (UTC)
  • This is very cool and works like a charm. Thanks, Pilaf! mu5ti/✏ 05:27, 8 Feb 2005 (UTC)
  • Very handy for janitorial work. --Phil | Talk 13:14, Feb 9, 2005 (UTC)
  • been using it for the better part of a week. Thanks. --Alterego
  • A very handy tool. Best of all it's completely free to use! Thanks a lot Pilaf! --Yelhsa 14:29, Feb 17, 2005 (UTC) (I even used Live Preview to preview this testimonial!)
  • Live Preview is cool! I use it a lot, especially when editing on slow systems. Thank you Pilaf! — mark ✎ 21:23, 8 Mar 2005 (UTC)
  • Hi! Richie did indicate to me this page. I will use the live preview if I am online. I also find it very good. But my question to Richie was different; I would be interesting to install a real wikipedia software on my PC for two reasons: a/ so, I can work long hours in my garden next summer (I have no internet connection in this part of the house), and b/ I can save my pages like an ready to work original on my PC including templates etc. without to have to risk changes that I don't want, mistake in what different "wiki kings", "king trolls" like netoholic in simple english, are specialists... can you say me if it is possible and what is to do? --oui 16:49, 27 Apr 2005 (UTC)
  • Note so good for math, even with simple HTML tag like . Try editting this page with Live Preview and you will see what I mean:

http://vi.wikipedia.org/wiki/%C4%90%E1%BB%8Bnh_l%C3%BD_c%E1%BB%99ng_h%C3%A0m_c%E1%BA%A7u_%C4%91i%E1%BB%81u_h%C3%B2a Tttrung 10:03, 13 September 2005 (UTC)

  • Very nice work. Very useful on a slow connection. --Blackcap | talk 02:01, 23 September 2005 (UTC)
  • Very nice extension. I only installed it a few minutes ago, and I'm already hooked! 11 points out of 10. κаллэмакс 13:12, 5 February 2006 (UTC)
  • Splendid tool, very useful for the impatient. Thanks! Sandstein 08:10, 12 March 2006 (UTC)
  • Great for an early wikipedian! Schweiwikist 00:07, 24 March 2006 (UTC)
  • Lovely work, thankyou for taking the time to develop and release this -- Serephine ♠ talk - 09:55, 21 June 2006 (UTC)

[edit] Who's using it?

For users inside this wiki this should give you a clue: clicky.

[edit] Disclaimer

I (Pilaf) will not be held responsible for any damage this may produce you. By using it you agree to take full responsability and accept that I have no idea of how to write a disclaimer notice at all.