Posts tagged with 'development'

My Customised TinyMCE: Come Get Some

8 Comments

Last week I wrote about my customised version of TinyMCE which I whipped up because a client needed a WYSIWYG editor to manage content on their site, that is one without a layout that does not suck.

My solution:

A nicer looking TinyMCE editor which is easier to use too.

Several people requested I release it so that is what I’m doing.

View an online Demo

Download surfi_tinymce.zip

The download archive contains instructions (readme.html) on how to implement and customise the appearance of the editor to how you’d like.

As far as I know, it is completely compatible with the following browsers:

  • Mozilla Firefox 2.0
  • Internet Explorer 6
  • Internet Explorer 7

I’d love to see what layouts people come up with, where they’re using my modified TinyMCE theme and any bugs they have to report or suggestions for things they’d like to see.

Wow, two posts in one day. Something must be wrong with me.

January 7th, 2007 8 Comments

My Customised TinyMCE

10 Comments

TinyMCE is a great free javascript based WYSIWYG editor however it is distinctly lacking in one main area: appearance. If you ask me, the default design of the editor sucks and one of the most important features of web based WYSIWYG editors is that it looks and feels like a real editing interface.

The default “full featured” interface of TinyMCE looks as follows:

TinyMCE - Full Example
The layout of the elements, though customisable is a mess – you have no clear division of elements which serve different purposes – tools which relate to text manipulation, inserting content or formating text.

TinyMCE - My Version

I spent the better half of the afternoon redesigning TinyMCE in to what I’d say is a much more pleasant interface to work with. I did this for a client project I’m currently working on that requires a simple WYSIWYG editor for managing site content.

I honestly feel I’ve improved the interface a lot and at some time in the future I’ll submit my changes to the TinyMCE Sourceforge site as a patch as well as a few other code modifications I’ve made. All that I feel the need to do now is replace the silly popup windows TinyMCE uses to insert links, smilies, images, etc with some inline versions which would make TinyMCE just that much better once again.

If there is enough interest – I’ll release them here.

That’s basically it for now as I’m really busy with several things so Merry Christmas for last week and Happy New Year for this week.

December 30th, 2006 10 Comments

My Evolution of Design: 2004

5 Comments

So lets take a look at some of my good (and not so good) designs and how my design patterns have changed or evolved since 2004. (I got asked to post something and I managed to come across some old archives of mine)

MyBB website designs

Prototype design that never went live:

My first go at a personal site in 2004

(The design never went any further than that)

AvidBlog prototype UI

(Never finished either)

First version of SurfiOnline

(Powered by bBlog)

August 4th, 2006 5 Comments

AvidCP: Keeping it simple, but real

12 Comments

Take two – AvidCP, an accessible and usable control panel application. So previously , I took a bit of a quick look at the control panel solution i’ve been developing to run here. Tonight’s update focuses on the “Email Services” area of the system.

The Email Services section allows users to easily add mail handling for domains to their account. Further to that they can create domains which redirect to another domain or standard POP/IMAP/SMTP accounts and forwarders. The underlaying base of this is powered by Postfix and Courier-IMAP/POP3 as well as a MySQL database.

The client site implementation makes use of some javascript techniques to hide or show certain parts or features. This reduces the clutter in the layout but still provides full functionality to the user when they place their mouse over a certain item or click a certain check box.

The focus was once again on keeping the design simple and minimalist whilst maintaining the functionality of other control panel scripts. Other control panel scripts make horrible use of tables with hardly any spacing and present all of the information in one huge “chunk”. Not very appealing to look at (Yes Hsphere, I’m primarily talking about you!). My focus here is to try and get the word out to developers that there are much simpler and attractive ways of doing things instead of throwing all of the data on the screen.

Email Domains Overview

After clicking on “Email Services” in the menu you’re presented with a page which lists all of the domains in your account associated with email. It shows you domains which contain mail accounts as well as redirection domains. Placing your mouse over one of the domains (and the section of data below it) will show the various control links for that domain – the delete button in the case of this screenshot.

Email Domains Overview - Showing forwarded option in new domain

At the bottom of the screen there is the “Add a new Domain” form which allows you to either add a new domain or forwarded mail domain. Want a forwarded domain? Check the appropriate check box and the form content turns in to one specifically for creating that (i.e., it adds another text box to enter the domain to redirect to).

Clicking on a domain leads you to another page.

Listing of mailboxes and forwards for a specific domain - shows mailbox type in new mailbox

You’re taken to a page which lists all of the specific mail accounts assigned to that domain. You get an overview of both your standard mail accounts and your forwards.

Once again – icons are used to differentiate between the two different kinds of accounts and the controls (Edit, Delete and Set as catch all) are shown or hidden using javascript depending if the mouse is over that item or not.

Listing of mailboxes and forwards for a specific domain - shows forward type in new mailbox

A form similar to that of the create domain form exists at the bottom of the page allowing you to create new POP/IMAP accounts as well as forwarded accounts. Using a similar javascript based system, checking either “Mailbox” or “Forward” presents two different forms allowing for the different types of input.

Clicking edit on one of the mail accounts or forwards takes you to a page where you can change a few of the options for that mail account – such as the password or redirection address.

Editing an individual mailbox

Now, a bit on the back end of the system. I’ve developed a custom daemon in PHP which stays in memory on the server. This daemon checks the modified time of a certain file – if it has been modified since the last check then the daemon needs to perform some tasks. Tasks are assigned on the front end. An example of a task is the creation of mailboxes on the server (done using a Unix command). The front end stores task information needing to be done in the database and then touches the task to do file updating its modified time stamp.

The server was built in a modular way so that I can easily add new functionality to it by simply dropping a file in a “modules” folder and then storing the appropriate information in the database when I need to run that specific module.

That’s all for this little installment. The next module will either be DNS, Database or Web management.

April 21st, 2006 12 Comments

AvidCP: A Simple Web App

14 Comments

There’s no doubt about it, people like simple things. Simple applications to perform simple tasks with a simple interface which is clean and intuitive.

When people come to me asking for design advice the most common thing I find myself saying is that you need to keep it simple but attractive. People are most probably visiting your site to find out some sort of information (Whether it be MSN Messenger related, or your own personal blog). If you think a layout looks good because it has all of this fancy stuff happening then it most probably doesn’t look good to other people who could care less about that. Minimal design can be attractive too.

And you’re about to ask what does this have to do with the subject line?

Today I found myself designing (after Dane requested it) a simple sort of control panel which would allow him to manage his POP/IMAP accounts and mail forwarders on my server. I don’t believe in traditional control panels which waste resources.

What I needed to do was build my own and keep it very simple. I didn’t have the time to add feature X and feature Y to it so I concentrated on what was important for myself as well as the people I host. Most importantly would be their disk and bandwidth usage on the server.

I’d already designed a framework set of scripts which run via cron jobs every few hours to calculate the disk and bandwidth usage on each account on the server so I just needed to build an interface to access that information.

AvidCP

So there we have it – a simple and attractive looking interface which directly presents you with the information you need and no extra “bloat”. It makes use of the Windows Vista icons which really add up making it an attractive layout.

I’ll throw up screenshots of the mail management screen when I get around to working on it.

April 19th, 2006 14 Comments

New Year, New Layout

23 Comments
SurfiOnline

You know how it works; you get tired of your old layout so you spend 2 months on and off trying to create something you would want to use. Once you finally hit the nail on the head and begin improving on what you’ve already designed, you get bored of it. You start again, only to find the same happening over and over.

Well, at least that is how it is for me. The number of times I created prototype layouts and threw them into WordPress over the last few months is just ridiculous. If I could find something I like, and stick with it, that is what I’d do.

That is what I did. I created something fairly quickly (as to not get bored of creating it), and decided i’d put it into place. Welcome to the new SurfiOnline, in a rather simplistic layout, but something I find is nice.

So, let’s take a look:

  • Peter Akkies kept telling me to lose the defined border look I go for. I think I sort of took his advice this time and ditched having a hard border between the body and the container. Although, the items on the sidebar do have borders around them.. Oh well.
  • Liquid width layouts are cool. Zoomable Liquid width layouts are so Web 2.0. I had to have them. If you’re in Firefox, change the text size and the layout width also changes. Sadly, Internet Explorer users are stuck at a fixed width layout.
  • How else could you get more Web 2.0, than using Ajax. I decided I’d hack up the Ajax commmenting plugin and pretty much rewrote it to include previews, and better error handling.
  • RSS Feeds and Content Syndication are also soooo Web 2.0, that I had to make sure they were mentioned in as many places as possible. You’ll see more of the little feed icons popping up soon too.
  • I found a few “Quote this comment” plugins for WordPress, however they were all pretty dodgy and I didn’t like the way they worked. I decided I’d write my own.
  • The FamFamFam Silk icons are cool. I decided I’d use them in a few places. Now I see Michael has done the same with K2!
  • It was time for a logo. I was getting bored with just using text in my header, or text on an image with a drop shadow and stroke applied. I came up with something simple, which I find looks nice.

So, just where the hell have you been?

The short answer is: really busy. In fact, too busy to even wish everyone a Merry Christmas! I hope you had a great one, mine was!

The new year is upon us..

Well, maybe me because I’m GMT +10:00. What does a new year bring for SurfiOnline? Hopefully a whole lot more in terms of activity, updates and design. I’ll be trying to get things as finished as possible given that I have time.

And MyBB you ask? Alot of things are happening. Peter, Dennis and I have been having a few branstorming sessions on things we’re going to add, the team and I have rewritten a fair deal of code, optimised things, and added a few new small features (we’re trying to concentrate on optimisation and code cleanups). You’ll hear more about a lot of this soon!

Happy New Year! and welcome to 2006!

January 1st, 2006 23 Comments

How do you like your comment posting?

6 Comments

I like mine with a touch of AJAX functionality and the script.aculo.us effect library for both commenting and live previewing of comments.

Woah!

Coming soon.

November 11th, 2005 6 Comments

Docking boxes

These docking boxes look fairly interesting and although it’s been possible for years, movable and dockable items seem to becoming more popular along with the implementation of AJAX to provide full customisation of a page to a visitor whilst saving their preferences for their next visit. Must see how this can be used in MyBB.

July 18th, 2005 0 Comments