Firefox seems intent on autocompleting password fields, whether you want it to or not, which is not good for security if you’re building a web app with “old password / new password” functionality.

Luckily, I’ve found a way to trick it into not doing this.

Simply place a hidden password field, with no name, at the start of your form:

This seems to trick firefox into thinking that this is the main password field, but as there’s no name it a) doesn’t get set and b) doesn’t get submitted.

Great

I’ve got really, really tired of re-inventing the wheel (alright, HTML, CSS, JavaScript) every time when it comes to site forms.

I do so much database stuff these days that seems to be virtually every site I’m starting from scratch, or hacking an old site’s template to work on a new site. Then once the CSS has been hammered out, comes the laborious task of form validation – tidying up all the names and ids, dusting off my RegExp-foo to validate emails, usernames, etc, etc.

It’s very time-consuming and just feels like I’m missing a trick!

Wouldn’t it be great if there was a magic bullet to convert a list of text into fully validated, accessible HTML form controls!?

Form Builder

Enter “Form Builder” – an online JavaScript application that will build accessible, cross-platform and validated form HTML in literally 10 seconds flat. Just type or paste in your form labels, edit some options (if you want to) and view the Live Preview and HTML.

Form builder does pretty much everything you might want…

So I’ve done some hard research and have employed best-practices for:

• HTML Code
• Styling
• Accessibility
• Validation

For example, what about:

• Ease of use: copy all your labels to one text field and a whole set of controls built on linebreaks, tabs, commas
• Live preview: not happy with the code? Edit the HTML and watch the Live Preview update
• Intelligent attribute naming: for example, a form label is “Blood pressure (mmHg)”, your names and ids are truncated at the first illegal character and re-named “blood_pressure” / “blood-pressure”
• Automatic values: values are automatically built from the label names, or you can just paste in another list of values
• PHP (or other) naming styles: specify a data sub-group, or use your own square bracket naming [] to group data into discrete chunks
• Accessible HTML: all controls are married with labels, and where appropriate wrapped within
  tags
• Validation: Optionally include basic validation attributes on elements using jQuery’s Validation plugin.

Jump in and play here, then go do something more useful with all that spare time!

Mindjet Mind Manager is an awesome tool for mind mapping, note-taking, planning and organising. I use it often these days in place of Word to flesh-out complex hierarchical ideas quickly and easily, with the most freedom from any package I’ve ever used ever!

If you don’t know what mind mapping is – remember those spider diagrams you used to make at school? Same thing. Only once it’s on computer with drag and drop, linking, formatting, full text-insertion, it’s like spider diagrams on acid (in a good way!)

From mind map to HTML

So, you’ve got MindManager. You’re using it to create these amazing mind maps, or web site maps, or anything you like really. But what then? It’s all very well having these wonderful maps in MindManager, but what I wanted was some way to
get what I saw on the screen…

… onto my hard disk.

Unfortunately, the built-in MindManager site export is shit. Utter, utter, shit. It’s so bad I can’t even begin to describe how shit it is.

However, one of the best things about MindManager is that its fully scriptable through VBA. The documentation is sadly lacking in concrete examples, but once you manage to hack your way through and get used to the MindManager DOM, it’s an incredibly powerful tool and you can do pretty much anything you want.

VBA

Enter the wonderful *cough* bullshit *cough-cough* world of VBA.

Now, VBA is not my favourite language in the world for a few reasons (it’s a bit old now), however I really like Microsoft’s IDE, and the fact I can leverage Office apps or anything else that’s VBA-enabled makes the pain more than bearable. Hell I sometimes even enjoy it!

So, the plan was to create an exporter that would recursively trawl my map, and spit out files in the same structure on my hard disk. To add to this, I wanted the script to:

• Give me some control over which nodes became directories, folders, and page sections or headings
• Use a templating system that would provide a flexible base HTML and CSS framework
• Build the top and sub-navigation blocks, complete with ids, rollover and down states
• Convert any text on nodes to body HTML copy
• Insert the correct page titles
• Do it all quickly and seamlessly!

I think in the end it took about a week to get to version 1.0, and ended up at about 1000 lines of code.

Here’s the list of procedures I ended up with:

The end result…

So… what does the final export look like!?

Well, I built a site for a friend recently who didn’t have a massive budget, so this was the perfect choice. The site has about 20 pages, and it takes about 1.5 seconds to generate all the files and folders for the complete site.

Here’s the base site export from MindManager		And here’s the final site after images and the final style sheets have been developed

The key thing to notice here is that the base HTML for both pages is exactly the same! The only thing that has been added to the final site are the images, and updated CSS.

Benefits of this approach

Firstly, using MindManager for any organisational task is a must for me these days. I really can’t live without it.

From a client perspective, it allows me to get all their Word-formatted text straight into an hierarchical system, which can then be dragged and dropped to create far better site maps than they originally come up with. The whole process of editing text, dragging nodes and seeing the results is so hands-on; it’s amazing.

Secondly, by being able to export the map with literally a couple of key-presses we’re able to see within seconds exactly how the finished site will work, and then edit, re-edit, and re-re-edit as much as we like.

For small sites (less than 20 pages) where static HTML pages are preferable to a CMS, the process is incredible. Using MindManager and custom scripting has allowed me to:

• Collaborate with clients far more easily by quickly generating workable sites for review
• Streamline the initial design documentation process for a site by including all copy within one file / application
• Rely upon a tried and tested HTML/CSS layout and navigation framework
• Minimize development (and-redevelopment) time for page-generation
• Spend less time coding laborious CSS and HTML and more time doing interesting stuff

Download

This application is not available for download, but to get in contact with me for any development work, please see the link at the top of the page.