Text 2 HTML converter online tool and API

By Peter Bryant | Published: September 20, 2012

For a bit of fun we posted an simple online tool to convert text to HTML.  We even added an API so you can use it to get results in JSON or XML.

And for more fun we added an HTML to text tool and an HTML simplifier/sanitizer/cleaner tool.

Posted in All | Comments closed

Adding Responsive Design Features to an Existing Webapp Part 2: Touchscreens and Tables

By Justin Taylor | Published: July 20, 2012

Continues on from Part 1

Adapting to touchscreens

Responsive design
Our main navigation uses drop down menus. These are not compatible with touchscreen devices, and also contain links to pages that were not desirable on smaller mobile devices. The navigation layouts would also need alterations to fit properly.
Firstly, we need the ability to target touchscreen devices only. Media queries are not helpful here, as a desktop browser opened in a narrow window would be indistinguishable from a mobile browser at similar width.
So I used some Javascript to add a class to the page body if the device being used has a touchscreen. At the same time we can show or hide certain elements depending on the device having a touch screen. Read More »

Posted in All | Tagged , | Comments closed

Developing a Web Application with a native feel for Tablets

By Justin Taylor | Published: July 20, 2012

The 2PartsMagic team recently completed a project for a client that enables tablet users to download auction data while online, then view and annotate individual lots (with drawing tools, notes and categories), compile and manage shortlists, and send results by email.
Further requirements included:

  • The project must be web application only, not iPad or Android native app.
  • The server provides static directories of data for downloading, responds to calls for latest updates, and receives email data for sending on. Everything else to be handled on the client by Javascript.
  • The application must be useable while offline, and maintain a persistent local data store accessible after device or browser restarts.
  • The web application should feel more like a native app than a webapp.

Notes: We used jQuery in this project, most Javascript examples below require it. Also, our main development testing platform was iPad, so often this will be mentioned and not android for certain parts of the process.
This post is focussed on the user interface of the webapp and our success in making it quick and usable. Development concerning offline data with local storage management, WebSQL, cache manifest and our solutions will not be covered in this post. Read More »

Posted in All | Tagged , | Comments closed

Adding Responsive Design Features to an Existing Webapp Part 1: Adapting Grid960

By Justin Taylor | Published: July 19, 2012

A viable alternative to full redesign?

Responsive design

I recently did some work on pingability.com, bakop.com, zonomi.com, inboxharmony.com, 2partsmagic.com and 25mail.st. My aim was to see how easily the layouts could be tweaked to incorporate responsiveness, given that the page structure was not being redesigned at this time.

In the last year or two, the ideas and techniques behind responsive web design have been adopted more and more widely. Handheld web enabled devices have continued to become more widespread and are now able to render web pages with similar quality to desktop machines. Browsers on newer devices continue to get faster Javascript engines and css capabilities. Increasingly, the most important differences between mobile and desktop web experience becomes the physical size of the screen and user input methods. Responsive design can enable smaller devices to access the same content as desktop browsers with optimised layouts for a range of screen sizes without redirections to multiple versions of a web application.
Read More »

Posted in All | Tagged , | Comments closed

Making better apps. Pleasure. Flow. Meaning.

By Peter Bryant | Published: February 23, 2012

You need to move your app from usable to delightful.

Usable apps factor in things like human-computer interactions; ergonomics; style; usability conventions.  All the hygienic things you expect from a good hospital.  Nothing that would make you ever want to go there if you did not have to.

Delightful apps are somehow ‘different’.  Special.  They make you _feel_ something.  You are intrinsically motivated by using them or getting their benefit.  After using them you understand a small part of the world a little better.

To create these awesomely delightful apps used by super enhanced users mentally chant this mantra: “Pleasure; flow; meaning”.  When everyone in your design meeting asking what you are mumbling just smile.

Pleasure:

  • Make your app pleasant to use.
  • Language flirts, anticipate needs, be nice every chance you get.
  • Give consideration, anticipate user needs, respond to context.
  • Be aware of the user.
  • Leave the user in control.
  • Consistent voice and attitude.

You’ll know you have nailed pleasure when people smile, say ‘nice’ and ‘got it’.

Flow: Keep things out of the way if they are not necessary.   Read More »

Posted in All | Tagged , , , , | Comments closed

Bootstrapping a new tomcat server

By Peter Bryant | Published: September 6, 2011

Every few months I setup a new Tomcat based website. It is mostly the same, simple steps. And I keep needing to re-remember those steps. So for my own reference and to maybe help some others I have gone and documented my process.

First up: order a VPS. I do that at http://launchtimevps.com/ Anything with 768MB of memory is going to be OK for tomcat. Go with 1.5GB is a reasonable option.

Wait a couple of minutes for the server to install. Then log in and install a few extras:

apt-get install rsync subversion sun-java6-jdk ant

Per http://rimuhosting.com/mod_jk2_and_mod_proxy_ajp.jsp we will need this enabled to connect up Apache and Tomcat:
a2enmod proxy proxy_ajp
Read More »

Posted in All | Comments closed

Resolved: Safari crashing after clicking on a select field (woff issue)

By Peter Bryant | Published: July 29, 2011

MacOSX Lion’s Safari crashing on you?  Reloading a page after clicking on a select field?  Running Safari Version 5.1 (7534.48.3)?

There appears to be a bug triggered when you have:

a) a woff format webfont (not eot, or svg, or ttf) and

b) a select field (being clicked)

c) a border css set (e.g. border:none, or boder:1px).

The solution is to not have a woff format webfont and border specified on a select field.

 safari-woff-fail.html
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>

<head>
<style>

@font-face {
    font-family: 'MuseoSans';
    src:
        /*url('http://localhost:8080/mailserv/type-face/Museo-Sans/museosans_500-webfont.eot?') format('eot')*/

    url('http://www.huqueerpress.com/type/chaparralpro-regular-webfont.woff')
    format(
    'woff'
    )
}

select {
    border: 1px;
    font-family: 'MuseoSans';
}
</style>

</head>
<body>
    <form method='post' action='signup.jsp'>
        <select id='foo'>
            <option value='' selected='selected'>Select Country*</option>
            <option value='Zimbabwe'>Zimbabwe</option>
        </select>
    </form>
</body>
</html>
Posted in All | Comments closed

Tomcat SSL over a self-signed certificate

By Peter Bryant | Published: February 4, 2011

Go to your Tomcat directory.  e.g. cd /usr/local/tomcat/

Create a certificate:

keytool -genkey -alias tomcat -keyalg RSA   -keystore .keystore –storepass ‘password’

Use your domain name for the first/last name field.  e.g. example.com or localhost.

Then in conf/server.xml uncomment the SSL connector and set the keystore file and password attributes.

<Connector port=”8443″ protocol=”HTTP/1.1″ SSLEnabled=”true”
maxThreads=”150″ scheme=”https” secure=”true”
clientAuth=”false” sslProtocol=”TLS”
keystoreFile=”.keystore”
keystorePass=”password”
/>

Then restart tomcat.

Ideally I would be able to use my PEM files from my apache configuration.  Anyone know how to convert those to a keystore?  Or how to get tomcat to use a PEM file?

Posted in All | Comments closed

Safari Develop menu. AKA Save a day’s Safari debugging

By Peter Bryant | Published: January 11, 2011

Most of us are Linux geeks running Ubuntu and Firefox (and every now and then Chrome).  We also have one PC for the devs to do IE testing on Windows.  Safari ends up not that well tested.  Since most of us don’t have Macs.

Recently a few safari users pointed out that our VPS ordering system at http://launchtime.ri.mu was not working.
We spent an age messing about with the Firefox lite extension and not making progress (it is a little too light).

Eventually we found the magic command (to run in Terminal) which will enable the Develop menu:

defaults write com.apple.Safari IncludeDebugMenu 1

After that is is a quick matter of reloading the page. And getting the javascript error (javascript object attribute name of class without the quotes). And fixing it.

To disable it (but why?):

defaults write com.apple.Safari IncludeDebugMenu 1
Posted in All | Comments closed

Using tcpdump to sniff http headers

By Peter Bryant | Published: January 4, 2011

Note to self: this tcp dump command will grab the first 1024 bytes (vs. smaller 68 or so) and line buffer the output for all packets going to example.com.  e.g. letting me see exactly what headers are being sent by my browser.

tcpdump -s 1024 -l -A dst example.com

Read More »

Posted in All | Comments closed

Secure https google chart API images

By Peter Bryant | Published: December 21, 2010

The Google chart API lets you easily create all sort of pie, bar and graph goodies.

On http://launchtime.ri.mu we use it during the server ordering process to display what proportion of a server’s price is due to its memory or disk or data transfer allowance.

The only think is, the ordering page is https secured.  We originally displayed the google pie chart using a regular http url.  But then, of course, the browser warns we are mixing secure and not-secured content.

Google does not currently offer a https url for its charts.

The work around is to ‘proxy’ the chart.  To do this in Java/JSP:

Read More »

Posted in All | Comments closed

Boundary permission checks

By Peter Bryant | Published: December 8, 2010

I typically implement permission checks at interface ‘boundaries’.  e.g. asserting permissions at the start of a JSP page.  e.g. on REST requests I ensure all @Path parameters have them.  e.g. each DWR method starts with a permission check.  Even if a permission is not required to access a page/resource/function I’ll throw in a guest (no-op) permission check.  Just to be explicit about that fact.

I went against this pattern, just recently.  Implementing a permission check down in the bowels of some application object.  Since that seemed to be the place where we knew enough about the action (what user account we were modifying, what action was being performed). Read More »

Posted in All | Comments closed

Rethinking an old software pattern. Better user interfaces, more quickly

By Peter Bryant | Published: November 19, 2010

The MVC (model-view-controller) software pattern for user interfaces

A UI (user interface/interaction) isn’t necessarily an application’s window on your PC.  It can be a web page (or set of pages).  A command line application.  Or a REST-ful web interface.

A good UI should flow well.  It should make it easy for a user to achieve their goals.

The Model View Controller MVC pattern is a popular pattern that is used to implement user interfaces.

A question of coupling

Should the model, the view and the controller all be beautifully and cleanly decoupled from each other?  How much should the view know about the controller and vice versa?  How much should the view know about the model, and vice versa? Read More »

Posted in All | Comments closed

Resolving DWR “CSRF Security Error” popups

By Peter Bryant | Published: November 7, 2010

HTTPOnly is a setting on cookies that some browsers can implement by not making the cookie available to the HTML document dom or via javascript.

i.e. The cookie is only visible to the browser and the server but not to any code on the page itself.

This can help prevent a user injecting malicious code into a page that hijacks or exploits the content of the cookie (e.g. session/state information, or passwords or usernames, etc).

Tomcat 7 implements HTTP Only by default on session IDs.

DWR uses the session cookie to protect against cross site scripting attacks.  See also http://directwebremoting.org/dwr/security/script-tag-protection.html

With HTTPOnly set that does not work and DWR will start popping up “CSRF Security Error” dialogs.  Ugh.

Read More »

Posted in All | Comments closed

MySQL decimal scale and precision

By Peter Bryant | Published: August 5, 2010

Note to self about mysql scale, precisions and roundings:

mysql> select 123.1231 as traw, convert(“123.1231” , decimal(10,1)) as t10_1, convert(“123.1231” , decimal(2,1)) as t2_1, convert(“123.1231” , decimal(4,1)) as t4_1, convert(“123.1231” , decimal(4,0)) as t4_0;
+———-+——-+——+——-+——+
| traw     | t10_1 | t2_1 | t4_1  | t4_0 |
+———-+——-+——+——-+——+
| 123.1231 | 123.1 |  9.9 | 123.1 |  123 |
+———-+——-+——+——-+——+

Scale = number of significant digits to store.  Precision controls maximum number of decimals.

Posted in All | Comments closed

How Google docs is usurping basecamp as our bug tracker

By Peter Bryant | Published: May 13, 2010

I’m in a small half-dozen or so team of developers. We had been using http://basecamphq.com/ to add and track some development tasks.

It’s a pretty minimal UI. And easy enough to used. You create a todo item, typically a line or two. You can assign it to a person. And someone can ‘tick’ it as done. And you can have a discussion about the item.

As minimal as it was it still felt to me like too much overhead.

We had been also using google docs. Essentially a web-based word processor that multiple people can simultaneous read/edit. We were using for specifications and design discussions.

One day I was doing a walkthrough of our under-development help desk software and was jotting down (in google docs) a list of things that needed changing.

I was about to transfer most of these into basecamp, but decided it would be easier to just let the guys work directly from the google doc.

Each developer, when they start working on an item, pops their name at the start of the item/paragraph. Essentially ‘reserving’ that item for themselves. In some cases I’ll add an Ivan? Or Norbert? prefix to an item if I think it’d be something they would be familiar with.

When they are done, they just add any info about what they fixed and format the paragraph with ‘strikethrough’ to mark it as done. We will also add a date (when completed).

Every few weeks one of us will move all the strikethrough-ed paragraphs down to a ‘completed’ section of the doc. So the incomplete items end up floating to the top.

End result:

  • Easy to add new work items/bugs/tasks.  No more overhead than simply typing the issue.
  • Easy to track what needs doing.  What is not crossed out?
  • Track who is doing what.  By scanning the names/dates on struck-through items.  (There is some time/effort required to manually get this information).
  • You can see on one web page what needs doing.
  • It is an online document that can be shared by developers in the same office or remote from each other.
  • Low or no cost.
  • Google docs provides security and revision history where necessary.

The google docs task list is probably not appropriate for more involved bugs/issues.  Things that require discussion, screenshots.

Posted in redrata | Tagged , , , | Comments closed

Announcing Envelope: the email-centric help desk

By Peter Bryant | Published: May 5, 2010

At RimuHosting we do a lot of support. Thousands of emails a month. And we have a good sized crew of sysadmins handling those requests.

To help us better manage how we respond to our customer emails our software developers created a software application which we call Envelope. Envelope hooks up to our IMAP email server. And stores a copy of the email requests we receive and send. Our sysadmins then use the Envelope web pages to manage those emails. They can ‘grab’ them (meaning they will be working on them); add notes (e.g. to help other team members better respond) and edit attributes like due dates and urgencies. So that we can better triage and manage which emails to deal with in which order.

Envelope is basically a ticket system help desk for your emails (for people who don’t like ticket systems).

We think that Envelope is so key and helpful in the way we provide support to our customers that we want to make the application service available to others.

If you work in an organization that provides a good amount of customer support or sales via email, and you have 2-20 people providing support (i.e. its more than ‘just you’) then you may find that Envelope really helps the way you manage your emails.

Read on to see if Envelope, the email-based ticket-free help desk could help your organization better managed your support and sales emails.

Posted in All | Comments closed

Regexes for optional @Path parameters

By Peter Bryant | Published: April 13, 2010

Got a path param like this:
@Path(“person-{oid:[0-9]+}-{person_name}”)

e.g. to match /people/person-123-alfred-back

In this case we only really care about the oid and the person_name is to just make the url more readable.

I wanted to make that name more optional (so that /people/person-123- so work, for example).

I tried:
@Path(“person-{oid:[0-9]+}-{person_name:.*}”)

That certainly worked for /people/person-123-

But it also worked for /people/person-123-alfred-back/name (resulted in person_name being asdf/name, rather than alfred-back).

So I changed it to this, which works more as expected:
@Path(“person-{oid:[0-9]+}-{person_name:[^;/]*}”)

i.e. the person name will include everything up to the first semicolon or forward slash.

Posted in All | Comments closed

Clean build saves the day (again)

By Peter Bryant | Published: August 25, 2009

I got this error from Resteasy:

SEVERE: Exception sending context initialized event to listener instance of class org.jboss.resteasy.plugins.server.servlet.ResteasyBootstrap
org.jboss.resteasy.spi.LoggableFailure: You cannot have 2 locators for same path: export-{id:[0-9]+}

The fix for anyone who is interested was to clean out the old class files in the webapp (this error was a result of me renaming a JAX-RS class and having the old class left in there causing the error).

Posted in All | Comments closed

Homely web app in need of a makeover

By Peter Bryant | Published: August 6, 2009

So after developing for a few months we are beginning to have an application that is somewhat functional.

Only it looks ugly (or, I may possibly get away with saying it merely looks plain).

That is because we have focused on functionality, not on presentation, layout, colors and graphical elements.

But now we need to start adding a pretty face to our application.

So I am looking for a web designer.

Our ideal designer:

  • Creates clean, simple pages that look good.
  • Has worked on sites with that have forms and presents data (vs. a typical ‘content’/browsing site like a newspaper site, or blog).
  • Has a lot of input on application<->user interactions

We will likely want to implement everything using CSS, but given a design PSD/image/drawing we’re likely very capable of converting images to HTML/CSS ourselves.

Here are some examples of web interfaces that we ‘like’ to give an idea of the direction we wish to go:

(* means web designer)

Posted in All | Comments closed