Rokpad: Better than "None"

One of the more important aspects of Joomla!, if not the most important, is the writing of content. Quality of your content is directly affected by the tools provided for you, this is were RokPad comes into play.

Joomla!, by default, provides its own WYSIWYG (What You See Is What You Get) editor (TinyMCE), as well as a None editor which is a basic HTML textarea field. There are various alternative editors available, as developed by third parties. The WYSIWYGs are popular due the diverse assortment of tools they provide, they allow those who are unfamiliar or comfortable with HTML syntax, to easily write well formatted and beautiful content. This is achieved through the use of shortcut buttons in the toolbar which control an array of functions such as headers, colour, indents, images etc... as well as a visual preview of how it will appear once saved and rendered by Joomla!.

Although we at RocketTheme consider WYSIWYG editors very useful and powerful tools for all types of users, we never use them. Using a WYSIWYG editor is no substitute for inserting your own HTML as it results in leaner code and a lesser likelihood of problems due to incorrect formatting. There are a series of conflicts that can come into play once you attempt to construct more complex content, other than the typical Word Document, meaning disabling the editor is the best course of action to avoid frustration.

Quote from Andy Miller, in responding to a member on our forums:

• As we are all experienced html/css guys it's just easier for us to put the html/css we need into a single article to get the layouts we need.

For us, it is much easier and faster to write the HTMl and CSS directly into the content, with the absence of a WYSIWYG editor, as it allows far more control over the code. I am sure many of you operate in the same way. This is the mindset behind the development of RokPad.

The very first thing I do when I install a fresh Joomla! install is to switch the WYSIWYG editor to Editor - None in the Global Configuration. However, the None editor can be just as frustrating, if not more, and can be simply impossible at times. You can easily loose your mind if you start writing all of your content with the None editor. I cannot even imagine writing all of our demo content with the None editor. To the effect, we use the following process / technique:

1. Write the HTML content via your favorite Text Editor
2. Copy
3. Paste back to Joomla! into the None editor
4. Save

This approach is very frustrating though, especially if you have a lot of content to write, or even if you need to make small changes. For all of the reasons stated, and more, we decided to build our very own Joomla! Content Editor, taking the Joomla! concept of a None editor that much further.

What we wanted from our editor

When we thought about RokPad, we had in mind 1 rule: an editor must be built around the content and not vice-versa. Keeping that in mind, we thought about 3 fundamental goals we wanted from RokPad:

• Speed
• Elegance
• Code Highlighting

Speed

As for speed, we wanted to have both a fast editor and a fast reacting editor. one of the greatest limitations and time wasting features the Joomla! editors have, is the saving functionality. Every time you want to save your content, you have to hit Apply or Save and wait until the page has reloaded

This introduces another frustrating limitation which is loosing where your position in the position, forcing you to re-scroll to return to your previous location, most of the time readong over and over again the content, until you find the right place. This for us, was extremely annoying and a complete waste of time. With RokPad, this is no longer a problem as the editor uses Ajax to save the content, meaning no refresh! Also, RokPad still complies with the standard Save and Apple buttons of Joomla! when it is necessary and appropriate to use them

Taking the concept a bit further, I shall explain via an example on how you will gain speed whilst writing your content.

Let us assume your connection speed is very slow, and that you are particularly paranoid (I am) on loosing your progress whilst writing your content. Before, you and I would have hit the Apply button every minute, as to ensure no changes had been lost. Now, with RokPad, you just have to hit the RokPad Save Icon and you can be without worry, just keep writing your content.

A spinner icon will show instead of the saving icon, letting you know the saving process is running. You can continue writing whilst this is running. Once it is complete, the icon will return to its previous state, the save icon. Then, a Last Save update, with the date and time will show in the RokPad status bar. You'll always know when your last save was.

We noticed that this feature along vastly increased our content writing speed. But it was not enough!

The click action, again, is something that slows down and distracts you from your content. When you are in the middle of constructing your articles, any distractions will slow your progression. Taking a forced pause to hit the save icon, is surely better than having to wait for the entire page to reload, as is the behaviour of an ordinary editor. However, this is still not satisfactory, you still need to avert your attention, albeit for a shorter amount of time.

For this very reason, RokPad provides keyboard shortcuts. Pressing CMD + S (if you are a Mac user) or CTRL + S (if you use Windows or Linux), and will activate the Save Process. This saves valuable time and avoids 3 highly distracted actions: 1) Avert your gaze to the icon; 2) Move the mouse over the icon and click it; and 3) Get back to your content.

Since we at RocketTheme are meticulous, even this was not enough! Even the keyboard shortcuts are distracting, because you still have to remember to actually save and press the keyboard shortcut.

This is why, with the advanced Ajax Save Action and the Keyboard Save Shortcuts, RokPad also provides an Automatic Save feature. From the tools settings of RokPad, you can decided whether to enable the Auto Save action and specify how many minutes will elapse before it runs. When you decide to have it enabled, you will be totally free of any save anxiety. RokPad will deal with this for you, you can concentrate on writing your content!

Elegance

Another aspect we have considered for a winning Joomla! editor, was its design. A strong design, that balances both a non intrusive approach, and still feature rich and effective, is key to the editor.

As we wanted to have Code Highlighing, colors in the toolbar and overall style would divert your attention. Therefore, as the content is important, not the toolbar, the colors should be specific to the content areas only.

This is why RokPad is accompanied by a very design, with subtle and elegant icons.

Moreover, the CSS has been enhanced with advanced CSS3 rules, to maximise efficiency

Code Highlighter

The code syntax highlighter is an essential element of RokPad. To meet the goals of the editor, the code must be clearly defined as to compare with a desktop text editor. Colors are very helpful in that regard.

Thanks to the wonderful and lovely written CodeMirror, which RokPad is built on, we could easily achieve this great feature and enhancement to Joomla!. With the large combination of parsing code RokPad comes with, you will be able to have highlighted code for:

• XHTML
• CSS
• JavaScript
• PHP
• Mixed XHTML + CSS + JavaScript
• Mixed XHTML + CSS + JavaScript + PHP

Although the Code Highlighting feature is without a doubt, a great addition to the way we are used by Joomla!, getting fooled by the title I used is very easy. In fact, CodeMirror does not only provide a powerful colored code syntax, but also plenty of great useful features such as:

• Parens Match: If you open a DIV tag and forget to close it, you'll be advised by RokPad. The next open or close tag will be marked RED, telling you that you have an unclosed opened tag.
• Indentation: To be added to the list of frustrating missing bits from "None" Editor, was the inability of tabbing when needed. Other than colors, indentation is another great visual helper to keep track of what you are writing and where you are at.
• Auto Indentation: RokPad comes with an auto indentation system. Hitting "return" from within an HTML tag, it will automatically returns to the right indented position. also, you can decide to re-indent a selected bit or the whole content.

Keyboard shortcuts

What sort of Code Editor could it be, without keyboard shortcuts? As explained above, in regard of the saving function, we believe keyboard shortcuts are a required feature for a good and fast editor.

Below is a list of RokPad keyboard shortcuts, for both MacOSX and Windows/Linux.

MacOSX

• Save: ⌘ S
• Undo: ⌘ Z
• Redo: ⌘ ⇧ Z
• Auto Indent: CTRL-I
• Goto Line: ⌘ L
• Search: ⌥ F

Windows/Linux

• Save: CTRL-S
• Undo: CTRL-Z
• Redo: CTRL-SHIFT-Z
• Auto Indent: CTRL-I
• Goto Line: CTRL-L
• Search: ALT-F

Roundup of RokPad Features

One of the biggest feature RokPad provides is the Tidy functionality. By a simple click your content can be purified and Tidy-ed and reindented and cleaned. A perfect utility that will let the dirty job being done in few seconds.

To sum it up, RokPad looks very simple but I am sure the more you will use it the more you will discover new functionalities and helpers. Below a list of the most relevant features of RokPad

• Ajax Save functionality (with shortcut included)
• HTML Purifier and Tidy functionalities
• Keyboard Shortcuts
• Code Highlighter for XHTML, CSS, JavaScript and PHP
• Find & Replace
• Goto Line
• Line Numbers
• Very clean and light interface
• FullScreen option
• Auto Indentation