Matt Brindley

Announcing Doctype - a Q&A site for web designers

Fri, 14 Aug 2009 14:48:28 +0000

I'm thrilled to announce our latest venture, Doctype!

Doctype is a free question and answer site for web designers. You can get fast solutions to your CSS, HTML, web design and email design problems.

For each question, Doctype can generate screenshots of your design on any browser or email client. This makes it much easier for other people to see the problem and help you fix it.

Everything is editable, just like a wiki. This means answers are accurate, neat and up-to-date.

Check it out and email us with any feedback at hello@doctype.com.

Detecting the next available, free TCP port

Sat, 20 Jun 2009 01:08:02 +0000

.NET 3.5, C#

I recently had a need to find an available port for selenium, starting at the default of 4444. The code below checks to see if the port you're about to use is available, incrementing your port number to find the next free port if your first choice is in use.

This very simple method uses a global mutex to avoid a race condition when releasing a port.

Adapting it to use UDP is beyond what I need, but it'll be very easy to do - just replace ipGlobalProperties.GetActiveTcpListeners() with ipGlobalProperties.GetActiveUdpListeners();

/// <summary>
/// Provides static methods for operations 
/// commonly required when working with TCP ports
/// </summary>
public static class TcpPort
{
    private const string PortReleaseGuid = 
        "8875BD8E-4D5B-11DE-B2F4-691756D89593";

    /// <summary>
    /// Check if startPort is available, incrementing and
    /// checking again if it's in use until a free port is found
    /// </summary>
    /// <param name="startPort">The first port to check</param>
    /// <returns>The first available port</returns>
    public static int FindNextAvailablePort(int startPort)
    {
        int port = startPort;
        bool isAvailable = true;

        var mutex = new Mutex(false, 
            string.Concat("Global/", PortReleaseGuid));
        mutex.WaitOne();
        try
        {
            IPGlobalProperties ipGlobalProperties = 
                IPGlobalProperties.GetIPGlobalProperties();
            IPEndPoint[] endPoints = 
                ipGlobalProperties.GetActiveTcpListeners();

            do
            {
                if (!isAvailable)
                {
                    port++;
                    isAvailable = true;
                }

                foreach (IPEndPoint endPoint in endPoints)
                {
                    if (endPoint.Port != port) continue;
                    isAvailable = false;
                    break;
                }

            } while (!isAvailable && port < IPEndPoint.MaxPort);

            if (!isAvailable)
                throw new NoAvailablePortsInRangeException();

            return port;
        }
        finally
        {
            mutex.ReleaseMutex();
        }
    }
}

For usage examples, please see my integration tests:

[TestFixture]
public class TcpPortFixture
{
    [Test]
    public void FindNextAvailablePort()
    {
        Assert.That(TcpPort.FindNextAvailablePort(4444), 
            Is.EqualTo(4444));
    }

    [Test]
    public void FindNextAvailablePortInUse()
    {
        var tcpListener = 
            new TcpListener(IPAddress.Parse("127.0.0.1"), 4444);
        try
        {
            tcpListener.Start();
            Assert.That(TcpPort.FindNextAvailablePort(4444), 
                Is.EqualTo(4445));
        }
        finally
        {
            tcpListener.Stop();
        }
    }
}

Announcing: Flare 1.0

Fri, 19 Jun 2009 23:37:35 +0000

Download: http://flare-browser.googlecode.com/files/Setup.msi (.msi, 2MB)

Forum Support: http://code.google.com/p/flare-browser/issues/list

Chat Support: Matt Brindley | Public Room

You can now download Flare 1.0 - the site-specific browser for 37signals' Campfire web app.

Flare lets you stay logged into a room in your Campfire account and notifies you of any new messages.

Features

Stay logged into your favourite Campfire room in the background - even between reboots.
Quickly switch between open rooms using Ctrl + the room number
Be notified of new messages with a preview.
Tray icon changes colour to show new messages have arrived (in case you miss the preview)
Request your password through the app if you've lost it.
Run multiple copies of Flare keeping you logged into many different rooms at once.

Instructions

Make sure you've got .Net 2 installed, if not, get it here
Click here to download and install Flare (.msi, 2MB)

Flare has been tested on Windows XP, Server 2003, Vista, Server 2008 and Windows 7.

How to use Flare

After installation completes visit Start > All Programs > Flare
If you've not used Flare before it will ask you for your account name, username and password.

Once Flare has logged into your account you'll see your campfire lobby, enter the room you want to and minimise the window. Flare will keep you logged into this room until you leave it.

When new messages, pastes, files or users arrive you'll be notified with a semi-transparent message preview.

If you miss the preview, don't worry - Flare's icon will glow orange until you next view the window.

Update: SSL support has now been added. If your account uses SSL, make sure you check the "Use SSL" checkbox when entering your account name, username and password.

Update: I've released Flare under the GNU GPL. More details at: http://code.google.com/p/flare-browser/

Building a web app - Get involved!

Fri, 19 Jun 2009 22:22:36 +0000

I've put together a "coming soon" page for http://consolewriteline.com/ that includes a form to sign up for beta notifications.

If you'd like to get involved and try consolewriteline out first, enter your email address in the signup form or email me at matt@mattbrindley.com.

Thanks!

Building a web app - Part 3: Designing a mock up

Fri, 19 Jun 2009 22:09:27 +0000

This is part 3 of Building a web app. You can find part 1 here.

I want to pitch the idea to a few, carefully selected developers to get their feedback. I thought a mock-up could help to explain the idea, and add a little weight to the proposal.

Design is not my forte, but I also appreciate how important good UI design is. Rather than spending a disproportionate amount of time on the design, I've decided to approach the design of my app in two stages:

Purchase a clean, simple and easy to amend template that I can bend to fit my app.
If the idea is well received, I can hire a designer to pay some further attention to the UI.

I have no doubts that an excellent UI designer will make a big difference to the product's success, but I just need a mock and something to use during testing right now.

Turns out there's a lot of ugly templates out there! Luckily I've found something clean for $59 that I think I can change to suit.

View image

After some tweaking, I have my first mock, ready to begin pitching the idea:

View image

I'm a little nervous now. I've only invested 2 evenings and $147 so far, but I'm growing increasingly attached to ConsoleWriteLine and tomorrow's job is to pitch the idea to a few developers to get their take on it.

I hope they like it, but if they don't, I'm prepared to write the idea off.

There'll be a small wait before the next post while I wait for replies.

Building a web app - Part 2: Naming it

Thu, 18 Jun 2009 19:38:53 +0000

This is part 2 of Building a web app. You can find part 1 here.

First I went hunting for a name. I wanted something techy and specific to my audience (.net developers). One idea was something you use in temporary apps while experimenting with a part of the framework you're not familiar with:

Console.WriteLine("Result: {0}", result);

Some developers use Debug.WriteLine, Trace.WriteLine or custom logging implementations, but after a cursory glance over StackOverflow and Bytes, most examples seem to use Console.WriteLine.

I've decided to start with Console.WriteLine and the domain name consolewriteline.com, I can always change it later.

With idea, product and domain name under my belt, and with motivation at an all time high, I'm all set for tomorrow evening's task: design a mock up.

Read Building a web app - Part 3: Designing a mock up.

Building a web app - Part 1: The idea

Wed, 17 Jun 2009 23:10:42 +0000

I've been sitting on an idea for months and I'm still excited about it.

I think there's potential in an online version of the MSDN library docs that allows you to edit, build and run example code in your browser. A kind of prepared scratch-pad. This solves a problem that I've been referring to as ConsoleApplication99 syndrome.

I'm going to document building the service in a series of articles, I'm doing this because:

As I'll be working on this alongside my main job, sharing progress with you should help keep me motivated and focused. I'm not going to out-right promise stuff, but I know I'll feel more obligated.
Silly decisions will stand out. If I have to justify my decisions with you, I'm far less likely to spend hours on things that don't matter to *you* - the reader and potential user.
Money. I'll be spending some in place of spending extra time. Justifying expenses openly will be an interesting (and useful) exercise.
Your feedback will help shape the project.

I've started investigating the feasibility of the project and have made some conclusions:

The service will use an API called MTPS to fetch MSDN Library content.
Republishing this content is within Microsoft's terms of use.
Security issues will be addressed with cloud computing (Litmus has 400 instances with Amazon EC2, so I'm familiar with it).

When I have specifics, I'll share them properly. Right now I'm just keeping an eye out for show-stoppers.

Read Building a web app - Part 2: Naming it.

Fingerprint: Email client usage statistics

Wed, 18 Jun 2008 03:21:02 +0000

David, Paul and I have just finished launching our latest product, Fingerprint!

From the Fingerprint home page:

There has been no way to get accurate, up-to-date statistics on email client usage. Until now.
Fingerprint shows you which email clients your readers are using.

Knowing which email clients are popular means you can be certain your messages are being displayed as you intended. Get actionable statistics within 24 hours of sending your next campaign.

Fingerprint is a clean, simple idea, and the data we've received so far (on our own mailing lists) is proving incredibly valuable; we had no idea 6% of our subscribers read our emails on an iPhone!

How does it work?
We give you a small 'bug' to put in your email, it's a small bit of HTML that we use to track which clients your subscribers are using. Every 30 minutes we update your analysis with the latest stats from your readers. The site offers percentages, and there's a spreadsheet you can download with a full breakdown of clients and quantities.

How much does it cost?
We're charging just $39 per analysis. An analysis is a two week snapshot of your subscribers' email client usage.

Why should I care?
Good question. It's very hard to know which clients to design your html email newsletter for, and with clients such as Lotus Notes 6-8 and Outlook 2007 out there, it's often unrealistic to design for all of them. Especially since there's a growing number of smaller, web-based clients. Do you know how many of your readers are using these?

Fingerprint gives you a single report answering all these questions, and allows you to make a firm, informed decision on which clients to design for and support.

From the data we've seen passing through so far, you'll be amazed at the results. During development, Paul, David and I had talked about what sort of results to expect, Outlook would be high, naturally, we also expected Gmail, Yahoo, AOL and Hotmail/Live mail to be up there. So far only Outlook has proved as popular as we expected, the iPhone was a notable surprise for our own list, with Lotus Notes making an unexpected appearance as well.

I can't wait to see the overall averages per industry!

1 year of Litmus updates in 60 seconds

Sat, 14 Jun 2008 02:12:13 +0000

Litmus makes compatibility testing easier by serving you screenshots of your web pages and email newsletters in a huge range of browsers and clients across all 3 major platforms.

We've recently launched another wave of updates for Litmus, including some brand new price plans, a totally free version and a brand new marketing site!

To mark the occasion, I've drawn up the last year of updates into a quick, '60 second' list.

Aug 2007 SiteVista becomes Litmus.
Sep 2007 Opera 9.5 and Yahoo! mail join the line-up.
Oct 2007 Automated validation added.
Nov 2007 Seeed.org, a community site, launched.
Jan 2008 Spam filter reporting for webmail clients added.
Feb 2008 Bulk-API announced, new partners begin integrating Litmus immediately.
Mar 2008 24-hour passes launched, they become our most popular product overnight.
Mar 2008 Internet Explorer 8 beta is announced by MS, it's available to all Litmus users within a few hours.
Mar 2008 New updates system announced, powered by Twitter.
Apr 2008 Lotus Notes 6.5, 7 and 8 are added to the testing suite.
Apr 2008 Safari 2, 3.1; Camino 1, 1.6 are added.
Apr 2008 Apple Mail 2.1 and 3.1 added.
Apr 2008 Konqueror and Firefox on Ubuntu added.
May 2008 Customer API released.
Jun 2008 Spam filter reporting for 17 spam clients/services begins beta testing.
Today So impressed with Litmus, you sign up and marvel at how easy compatibility testing has become.

As if all that wasn't enough, we've got another product up our sleeves - more about that shortly!

Shout: At a glance status using twitter

Sat, 14 Jun 2008 02:01:19 +0000

David Smalley, who I work with at Litmus, has recently released Shout, a merb web app.

It's a great idea; we've been using it internally at Litmus and I can't recommend it enough.

BarCampSheffield

Sun, 27 May 2007 20:02:46 +0000

I've been at BarCampSheffield this weekend and it's been a lot of fun!

Within the first 2 hours I'd learnt more from casual conversations with people than I learnt during the whole 3 days at MIX07.

We saw demos from some great other applications - MeeCard and aFeeda in particular stood out.

I gave a ThinkFold demo as well, it went really well - I had 4 people from the audience come up and enter their email addresses to share the outline I'd used to build the presentation.
The feedback was fantastic, plenty of stuff we'd not thought of yet and some great tips on how to improve it further.

Thanks to everyone that participated in the demo, people had some very nice and constructive things to say about ThinkFold inside the outline:

"This is very clever, seriously impressed"

"Awesome."

We also had some great questions:

How long did it take to code this?
Around 15 weeks of development spread over a year.

Will you integrate this with any third party sites?
Yes and no - we want to create the platform for people to do that, primarily consuming other products' APIs within a ThinkFold document, but later sending data directly into 3rd party services.
I expect I'll get stuck in and build a few basic ThinkFold plugins myself, stuff like a google define plugin and an 'outline a page' plugin - but more importantly we want anyone to be able to create one that works with their service.

Thanks again to everyone that voted for ThinkFold in the 'Best Web App' competition as well! (We came 2nd - the MeeCard guys just beat us to it ;-)

Flare Released Under GPL

Thu, 17 May 2007 16:54:09 +0000

I've released Flare under the GNU General Public License and hosted the project on GoogleCode, I've thrown together a landing page on this site for now:

http://flarenow.com/

Since all of Flare's comments, bug reports and suggestions live in the comments of the post announcing Flare I'll keep using that until something more suitable is found.

If you'd like to contribute or help in any other way - let me know!

Artificially Delayed Splash Screens

Wed, 09 May 2007 22:38:16 +0000

Recently, Dave, Paul and I were laughing about how, when very new to developing, we would place artificial delays in our loading 'splash' screens (this was a long time ago, if you're worried :). The very idea of making the user wait for no reason seems absurd now, but it got me thinking about why we did it (ultimately our goal was the same as it is now - that our product be useful and valuable to the end user).

I think we did it because we wanted the user to think our app was big, powerful and did so much important stuff it couldn't possibly load in under 3 seconds. It's interesting that we associated a long waiting time with a better, more powerful app.

Now, I'm not proposing we all start forcing our users to wait 3 seconds before every page load, but there's definitely something to associating longer waiting times with more 'power' - and therefore smaller waiting times with small, simple actions.

Of course, the first time we request an action be performed we have no idea how long we will have to wait. But after just a few requests of an action (such as clicking a button) we'll begin to associate that action with a degree of waiting. After a while, we begin to make decisions about how we use software based on the time we expect to wait for the requests we can make. There are often many alternatives to achieve similar results (for example, I will often Ctrl+click links in a browser to open them in a new tab in the background as I know that action will take a few seconds to complete and I wish to stay reading the current page while waiting for it.).

Armed with this knowledge base of actions and their associated delays, we then begin to weigh the expected delay with the expected result in every decision we make.

Take Adobe Acrobat Reader for example, I rarely click PDF results in a Google search because I associate the “[PDF]” tag with an action that doesn't yield a result that justifies the expected delay. Now I can't possibly know how valuable the content of that PDF will be to me before I open the PDF, so why does my mind decide the delay doesn't justify the result? Perhaps it is because my mind compares the opening of a PDF in my browser to the opening of a normal, html web page. The request for the action is similar and the result is identical (text, images, form elements) - so why wouldn't it be disappointed with the result after such a considerable delay when compared with opening a web page?

With this in mind, the use of AJAX becomes very important. Requests for actions in web applications can be associated with small, simple actions (a simple AJAX request) and longer, more powerful actions (a page postback).

Consider every request in your web application. Does the delay reflect the result of the action? This works both ways; it should not be possible to invoke more powerful actions with significant results via a small, quick request. Say I wish to delete a task item, such a small action should not have a delay, but if I want to delete a task list of 500 tasks? From a technical point of view this action will not take any longer (as far as the client-side view is concerned) but to the user, this action is huge. So what do we do? Artificially delay the action's result so the action's delay reflects the power of the action?
One idea is to bloat the delay by prompting the user to confirm their action. This is certainly worth considering, but falls down as it doesn't reflect the size of action. If I attempt to delete a task list with a single task, I would consider this a small, quick action. If I attempt to delete a task list with 500 tasks, I expect a longer, more delayed action. It's this delay that allows my brain to build a knowledge base of actions and their associated delay so I know in future which actions can be performed with little thought or attention and which actions I need to think through before requesting.

The time delay between requesting an action and getting results back is an ideal, Real variable that we can use to quantify an action's 'size' in a user's mind.

Sure, I don't know how long an action will take before I request it, but it doesn't take long before I've built up that knowledge base and I can switch off or focus on other things while using the application - until I'm about to request an action that I know is big, then I'll give it all my attention before clicking that 'delete all tasks' button.

Sign Up for the ThinkFold Private Beta

Sun, 06 May 2007 00:11:59 +0000

We're getting very close to launching ThinkFold's private beta and I'd like to give readers of my blog the first chance to sign up.

Click here to access the future ThinkFold homepage.

To sign up, enter your email address in the sign up form on the right of the page. We'll let you know as soon as ThinkFold is ready for you.

At this early stage we're particularly interested in two types of people - those that have never outlined (to make sure that ThinkFold is the best possible introduction to outlining) and those that are experienced outliners (to make sure ThinkFold stands up to the competition).

Of course, everyone is welcome - but if you have never outlined before, or don't know what it is, I'd really recommend trying out the ThinkFold beta once it's ready. Outlining is a fantastic thinking tool that I only discovered myself just over a year ago.

We do ask that you give feedback via the web app as often as you can, it's very easy to use and doesn't take you away from your current, open outline.

ThinkFold?
Wikipedia on outlining:

An outliner is a special text editor that allows text to be structured as an outline.

Outliners are typically used for computer programming, collecting or organizing ideas, Getting Things Done, or project management.

ThinkFold is an online outliner that allows you to share outlines with other users and edit the document together, in real-time.

It's fast, reliable and I'm sure you'll find it an invaluable thinking and planning tool, both when alone and when collaborating.

As always, feel free to contact me: matt@mattbrindley.com if you have any questions.

I'll also be hanging around in my campfire room: http://mattbrindley.campfirenow.com/85df4.

Announcing: CSSVista 0.15

Sat, 21 Apr 2007 11:08:25 +0000

Download
CSSVista 0.15 (.msi, 8.9MB)

Mirror Download Link

Please uninstall any older versions of CSSVista before installing 0.15.

Features

Editing of CSS and inline styles, with a live preview in both Internet Explorer and Firefox at the same time.

Element outlining in both Firefox and Internet Explorer.

Powerful CSS Editor, including:
- Syntax highlighting.
- Auto complete.
- Dual-pane editing (view two seperate places in the same css-file at once).
- Find (and Replace) with RegEx support.

Option to resize the window to typical sizes.

Option to disable images and/or css.

Firefox now supports various plugins such as Flash and QuickTime.

Lots and lots of bug fixes.

~~Auto file-version saving~~ Testing has uncovered a lot of problems with this so I'm removing it for now.

Auto-updates - all updates happen silently in the background.

Requirements
Windows XP, 2003 or Vista
MS .net Framework 2.0 (if you're using Vista you don't need this - if you're using XP or 2003 you probably already have it installed - if you don't - download and install it here).
The version of Internet Explorer you have installed determines which version CSSVista will use.

Troubleshooting
If CSSVista seems to be running slowly, try unchecking "Automatic CSS Refreshing" found under the tools menu. You'll need to press Ctrl+S from now on to update the browsers.

If you receive an error about IE throwing an 'out of memory' error, please post the url you were using at the time, or email it to me at: matt@mattbrindley.com if you prefer.

If your outgoing firewall blocks CSSVista, approve it and then restart CSSVista.
Some firewalls (including Windows Firewall) will continue to deny CSSVista access because of the way it first connects - restarting CSSVista will fix this problem.

What took so long?
First of all, an apology.
Sorry for the problems CSSVista 0.1 had, and sorry it's taken so long to get a fix out.
I'm not going to dwell on this, but I would like to explain why it took me so long to get an update out.

Not long after launching CSSVista 0.1 we saw an opportunity with SiteVista's email testing service and decided to focus on that, most of my time was spent developing email testing and CSSVista unfortunately took a back seat.

A few weeks ago I decided to just do everything I could to get a new build out. I started stripping out incomplete features and focusing completely on getting a stable, deployable build ready.

I really, really hope you'll find the tool useful.

It's also really important to mention that this may be the last major-version release of CSSVista. It will still be developed, but under different names (don't worry, we'll still be offering a free version of something very similar) and will not be out for a while. We have some fantastic and very exciting ideas for this application.

Post any bugs you find here and let me know what you think of it!