Hackasaurus makes it easy to mash up and change any web page like magic. You can also create your own webpages to share with your friends, all within your browser.

WCTeditor
A super-simple text editor for modern browsers. Supports:

bold
italic
underline
numbered lists
bulleted lists
links
stripping html (except line breaks/paragraphs)
spell-check via callback
Tested so far and works ok in:

FF 3.6
Chrome 8
Safari 5
Opera 11
IE 7+
NOT mobile WebKit
Usage

Requires jQuery and the jQuery templates plugin (there's also a version with no template dependency). Get those and then apply the WCTeditor plugin to a textarea with some options:

$("#myTextArea").WCTeditor({
showNumList: true,
showBullList: true,
pathToPlugin:"../"
});
Yay! Done.

Options

showBold

boolean: Whether or not you'd like the bold button to be shown. On by default.

showItalic

boolean: Whether or not you'd like the italicize button to be shown. On by default.

showUnderline

boolean: Whether or not you'd like the underline button to be shown.

showNumList

boolean: Whether or not you'd like the ordered list button to be shown.

showBullList

boolean: Whether or not you'd like the unordered list button to be shown.

showLink

boolean: Whether or not you'd like the link button to be shown. On by default.

showStripHtml

boolean: Whether or not you'd like the strip/clean up HTML button to be shown.

showSpellCheck

boolean: Whether or not you'd like the spellcheck button to be shown.

userClasses

array of strings: CSS class(es) you'd like to have applied to the div that wraps the editor.

defaultText

string: Text you want the editor to display with, if different than what's in your textarea.

showCharCount

boolean: Whether or not you'd like to show a character counter. See below for where to change the way the character counter works.

charCountTmpl

string: The template for your character counter. This can be just text or some HTML, but you need to insert "{{html chars}}" where you want the count to actually appear.

maxLength

integer: The maximum length of the user's input, including HTML, if different than the maxlength of your textarea.

spellcheckUrl

string: Path to the spellchecking service you'd like to call.

pathToPlugin

string: Location of this plugin (i.e., location of WCTeditor.js) relative to the file it's being implemented in.

theme

string: A directory name. The plugin will look for a stylesheet at [pathToPlugin]/themes/[theme]/WCTeditor.css

placeholderText

string: Helpful text that will display within the editor while it is empty, if defaultText is not set and the textarea is empty.

Functions

You may want to override some of these to change the default functionality.

applyFormatting

Applies the basic designMode commands.

updateTextarea

Pushes changes to the editor to your textarea, then calls updateCharCount if it's enabled.

updateCharCount

Updates the character count. Counts down from your specified maximum, then goes to negative. Assigns the CSS class "tooLong" to the count only once it goes negative.

updateButtons

Updates the state of the formatting buttons depending on the cursor location.

setLink

args: leftPosition (left position of formatting button)

Displays the interface to set a URL and wires up the button in that interface to update the editor markup.

stripHTML

Removes all markup except paragraphs and line breaks.

stripHTMLComments

Removes HTML comments from content pasted into the editor.

spellcheck

IE-only implementation, because other browsers include spellcheck. Sends the text within the editor to the service specified by the spellcheckUrl property, and expects an array of results in the format:

{originalWord: string, suggestions: []}
Wraps each misspelling in a font tag, and wires up an event handler to display a small window with the suggestions and an option to ignore the misspelling. Clicking a suggestion replaces the misspelling and removes the font tag, clicking ignore simply removes the font tag.

function getRange() {
return window.getSelection ?
window.getSelection().getRangeAt(0) :
document.selection.createRange();
}
function setSelection(range) {
if (range.select) {
range.select();
} else {
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
}

This tutorial describes how to use features found in Microsoft Internet Explorer 5.5 or later to create an HTML Editor Application. The application you create in this tutorial contains an editable region where users can type and format text using all of the standard formatting commands. For example, users can make the text bold or italic, change the font size, and make bulleted or numbered lists. A toolbar provides the formatting buttons, buttons for opening and saving files, and drop-down list boxes for font and block formatting selections. A menu allows alternate access to the functionality provided by the toolbar. As of Internet Explorer 6, you can also use the HtmlDlgSafeHelper object to change the face or color of the font.

With this HTML Editor Application, users can create HTML documents and save them to disk in either HTML or text format. If saved as an .htm file, the documents are viewable in Windows Internet Explorer or in the HTML Editor Application. Files saved as .txt can be viewed in any text editor.

This tutorial demonstrates how to do the following:

Create and use editable regions with the CONTENTEDITABLE attribute.
Use formatting Command Identifiers and the execCommand method.
Use the Internet Explorer WebControls toolbar element behavior, as well as a menu element behavior and an HTML+TIME (Timed Interactive Multimedia Extensions) time2 behavior that displays a splash screen.
Use the HtmlDlgSafeHelper object to access the fonts and block formats on a user's machine, and to display the color dialog box. Internet Explorer 6 introduces the HtmlDlgSafeHelper object.
Create an HTML Application (HTA).
You can use this kind of application to allow "what you see is what you get" (WYSIWYG) content editing of Web sites by users. You can also use this type of application as an editor for an Internet e-mail program.

Requirements and Dependencies 
Implementation Steps 
Step 1: Create the HTML file 
Step 2: Create the Toolbars 
Step 3: Create the Text Formatting Functions 
Step 4: Create the File New, File Open, and File Save Functions 
Step 5: Create the Menu 
Step 6: Create the Splash Screen 
Final Wrap-up 
Related Topics

Sets or gets a value that indicates whether the document can be edited.

Syntax

Copy
[ sMode = ] object.designMode
Possible Values

sMode String that specifies or receives one of the following values.
On
Document can be edited.
Off | Inherit
Default. Document cannot be edited.
The property is read/write. The property has a default value of Off | Inherit.

DHTML expressions can be used in place of the preceding value(s). As of Internet Explorer 8, expressions are not supported in IE8 mode. For more information, see About Dynamic Properties.

Remarks

You can use the designMode property to put Windows Internet Explorer into a mode so that you can edit the current document.

While the browser is in design mode, objects enter a UI-activated state when the user presses ENTER, clicks an object that has focus, or double-clicks the object. Objects that are UI-activated have their own window in the document. You can modify the UI only when the object is in a UI-activated state.

You cannot execute script when the value of the designMode property is set to On.

Here are the reasons why someone would want to create a minimal firefox extension.

1. When you wish to create a local computer( disk) resident browser based application, interacting with the file system for reading and writing is possible if the application is structured as an extension.

2. Quick prototyping without worrying about XmlHttpRequest cross domain issues. When you run as plain application, user is hassled with a pop-up whenever XmlHttpRequest is attempted.

3. Many a times, installing an extension causes a lot of angst in terms of 'Will this mess up with my other customizations?'. A work in progress extension can be distributed along with a profile so that the user can preview, test it. Without worrying about messing with the default firefox browsing experience.

Here is a code to get you started with a minimal firefox extension bundled along with a user profile. The code comes with startup script(run.sh, run.bat)

Run your regular firefox browsing session and then run the startup script.( To avoid the feeling 'WTF, the stupid extension has messed up with my default firefox settings!?!' )

Vimperator is a Firefox browser extension with strong inspiration from the Vim text editor, with a mind towards faster and more efficient browsing. It has similar key bindings and you could call it a modal web browser, as key bindings differ according to which mode you are in. For example, it has a special Hint mode, where you can follow links easily with the keyboard only. Also most functionality is available as commands, typing :back will go back within the current page history, just like hitting the back button in the toolbar.

But Vimperator is more than just a simple command interface to Firefox — it is a complete development environment as well. If you are a web developer, you can enjoy an interactive JavaScript shell — even with completion support. Or if you want to extend Vimperator, you can easily do that by just dropping a JavaScript file in its plugin directory. Browse through our wiki pages for nice tips to customize Vimperator and for frequently asked questions. If you have more questions, you can visit us on IRC, in #vimperator on freenode.

The network is a key component of any web application, whether it is used to download JavaScript, CSS, and HTML source files and accompanying resources (images, videos, …) or to reach web services (XMLHttpRequest and <forms>).

Yet having offline support for web applications can be very useful to users. Imagine, for example, a webmail application that allows users to read emails already in their inbox and write new messages even when they are not connected.

The mechanism used to support offline web applications can also be used to improve an application’s performance by storing data in the cache or to make data persistent between user sessions and when reloading and restoring pages.
Demo: a To Do List Manager

To see an offline web application in action, watch Vivien Nicolas’ demo, which shows a to do list manager working online and offline on an N900 running Firefox:

You may have installed countless add-on in Firefox to enhance your using experience, but if you want to get the most out of Firefox, you really have to hack your way into the about:config.