Archive for the 'Plugins' Category

Google Gears Enables Disconnected Web-Apps

Thursday, May 31st, 2007

Google Gears is an open source browser extension, less than 1Mb in size, that lets developers create web applications that can run offline. There are two main ways the extension can be used - by embedding the API or runtime software in an application you distribute to end users, or by writing a web application which makes use of installations of Gears on end-users' computers.

What problem does it solve?

Web developers write software for … the web. For applications that run via a browser that is connected to the Internet. Google Gears will take web applications to the desktop - enabling Web applications to work offline. A user will not be required to be connected to the Internet to use the application.

How does it work?

First of all web applications will need to detect whether or not Google Gears is installed on a user's machine. If Gears is installed, then the application will be able to access the Google Gears APIs from JavaScript code. If Gears isn't installed, the user can be directed to a customized installation page.

The APIs can then be used to access Google Gears three core features:

  • A local server, to cache and serve application resources (HTML, JavaScript, images, etc.) without needing to contact a server.
  • A SQLite database, to store and access data from within the browser.The Database module is used to persistently store an application user's data on the user's computer. Data is stored using the same-origin security policy, meaning that a web application cannot access data outside of its domain. Standard SQL can be used to access the data, and full-text indexing is supported using SQLite's fts2 extension.
  • A worker thread pool, to make web applications more responsive by performing expensive operations in the background. In web browsers a single time-intensive operation, such as I/O or heavy computation, can make the UI unresponsive. The WorkerPool module runs operations in the background, without blocking the UI.

What browsers are supported?

The final release will run on the following browsers:

  • Apple Mac OS X (10.2 or higher)
    • Firefox 1.5 or higher
    • Safari
  • Linux
    • Firefox 1.5 or higher
  • Microsoft Windows (XP or higher)
    • Firefox 1.5 or higher
    • Internet Explorer 6 or higher

What next?

To find out more about this project you can visit the Google Gears website. From there you can download Gears and then install some of the sample applications available.

Some developers are already playing with Google Gears and sharing their experience and their plans. For example you can listen to a podcast about Dojo Offline being ported to Google Gears, or take a look at RSS Bling moving to Google Gears.

This is definitely a project to watch. With Google obviously coordinating with the efforts of popular projects such as Dojo, as well as supporting all the major browsers, there are some interesting possibilities opening up for web applications.

Linus Upson, the engineering director at Google, stated that the goal of Google Gears is to "create a single, standardized way to add offline capabilities to Web applications." Google is certainly on the right track … I'm off to have a play!

WordPress Plugin: Visual.SpellCheck

Saturday, February 4th, 2006

Current Version: 0.95

I don't use the WYSIWYG Editor that comes with WordPress 2.0, and as a result have been getting extremely frustrated with the lack of a spell-checker. So I decided to try and get one working, preferably using AJAX to make it as fast and user-friendly as possible.

I am now proud to present Visual.SpellCheck - an AJAX-based Spell Checker for WordPress. It includes the ability to:

  • Highlight incorrectly spelled words
  • List suggested words from the aspell dictionary
  • List suggested words from your custom dictionary
  • Allow new words to be added to your Custom Dictionary

The Spell Checker works in Firefox, Internet Explorer, Opera and Safari.

Demo

Here is a demo of Visual.SpellCheck. It should work fine in Mozilla browsers (including Firefox) and Internet Explorer. It will also function in Opera, although there are some small issues. Follow the instructions in the textarea itself, and feel free to edit it's contents and then test.

Installation

Follow these basic steps:

  • Download this file: Visual.SpellCheck.zip (37Kb)
  • Unzip the file on your computer.
  • Upload the complete folder "Visual.SpellCheck" to your WordPress plugins directory (found in "/wp-content/plugins")
  • Login to WordPress and go to the Plugins module
  • Find the line that says "Visual.SpellCheck" and click "Activate"
  • Change the permissions on the file Visual.Syntax/personal_dictionary/dict.txt" to "757″ so that the server can write to the file

Note: Pspell must be installed on the server for this to work. Also this plugin is not compatible with the WYSIWYG HTML Editor that comes with WordPress (TinyMCE comes with its own spellchecker anyway). You will have to disable the WYSIWYG and be using the old-style editor (textarea).

Credits

This project is based on code from Broken-Notebook. Thanks to Garrison who has modified his original code to allow the plugin to integrate with WordPress and minimise issues with future compatibility.

Known Minor Bugs

This is the only bug I am aware of - and it is pretty minor:

  1. In Opera the popup menu that shows the suggested words always sits top-left of the textarea

If you are able to help with this that would be great. :)

ChangeLog

2006-02-04 - Firefox QuickTags conflict fixed. Now version 0.95
2006-02-04 - Public release of version 0.90

If you liked this plugin you can digg it here or please leave a comment.

My First WordPress Plugin: Visual.Syntax

Monday, January 30th, 2006

WordPress PluginCurrent Version: 2.01

"Visual.Syntax" is a plugin for WordPress that preserves source code formatting and provides full syntax highlighting. It is compatible with WordPress 1.5/2.0 and PHP 4/5.

Unlike other code plugins Visual.Syntax offers highlighting of HTML and CSS in addition to PHP. I have customized the highlighting to match Dreamweaver's syntax coloring as much as possible, as well as my own preferences. Visual.Syntax will also force any CSS into a readable pre-defined format.

Installation

Follow these basic steps:

  • Download this file: Visual.Syntax.zip (5kb)
  • Unzip the file on your computer.
  • Upload the complete folder "Visual.Syntax" to your WordPress plugins directory (usually found in "wp-content/plugins")
  • Login to WordPress and go to the Plugins module
  • Find the line that says "Visual.Syntax" and click "Activate"

Note: This plugin is not compatible with the WYSIWYG HTML Editor that comes with WordPress. You will have to be using the old-style editor (textarea) if you want to highlight your code.

How to Use

It is quite simple - simply wrap your PHP and HTML code in <code>text</code> and your CSS in <css>test</css>.

Each block of code is wrapped in a DIV with a CSS class of "VisualSyntax" so that you can customize the appearance of the code block. For example see the grey background on the code blocks shown below.

Output Examples

PHP Example:

<?php
    
//output "Hello.World" to the browser
    
$text "Hello.World";
    echo 
$text;
?>


HTML Example:

<p><img src="/images/wordpress.png"></p>
<p>This is an example of 
   <a href="/weblog/visual.syntax/">Visual.Syntax</a>
   highlighting HTML.
</p>

CSS Example:

@import "stylesheet.css";

body {
    margin: 0px;
    padding: 0px;
}

a {
    color: #0000FF;
    text-decoration: none;
}

Support / Feedback

I welcome any comments, feedback, suggestions, or bug reports. Please either use my Contact Form or leave a comment.

ChangeLog

2006-01-30 - Fixed problem with smart quotes. Now version 2.01.
2006-01-30 - Released version 2.0 to WordPress Users.