AjaxML is a javascript library which allows you to define all sorts of AJAX interactions in your markup.

At first I wasn’t sure that this was such a great idea, the thought of mixing up what I would normally do in javascript with the HTML markup of the site seemed like a bad idea. However after some thought I realised that the Markup defines the interface and the interactions are part and parcel of that interface.

Simple Example

for instance, this simple example from the AjaxML site:

  <a href="say_hello.html" into="target">
    Say Hello
  </a>
  <div id="target"></div>

loads the contents of say_hello.html into the target div.

Advanced Functionality

There’s no need to write functions to handle the click on the link, just specify the interaction in the markup.

The library also includes a good range of advanced features such as:

• The ability to attach event handlers e.g. error handling
• Validation – you can specify conditions which must be met before the Ajax call is enabled
• Specifying the request method – handy for REST API calls
• Sending request parameters including getting values from form inputs
• Browser history manipulation – let the user use their back and forward buttons without breaking your page.
• Ajax upload of files
• Composite requests – triggering more than one Ajax request from a single user interaction

Why it’s a good idea

This style of coding has the potential to make huge time savings when building interactive web pages. Single page sites which pull in data based on user interactions can be prototyped or (if the functionality was satisfactory) built, very quickly and can be altered much more easily due to the lack of any JavaScript changes if the markup is changed.

I also realised that in certain circumstances, the library can open up new possibilities. Take for instance a CMS-driven site, if the AjaxML library is included by default, content authors can create clever, responsive, compelling content without the need to write and maintain scripts for each page that included Ajax functionality.

Commenters: What’s your opinion? Does specifying the interactions in the markup make sense or do you see it as a maintenance headache? Does it create too much reliance on a third-party script library?

turn.js is a plugin for jQuery that creates a very realistic page turn effect using HTML5, it’s a lovely effect and the plugin has been written in such a way that implementing and configuring it is simple and undemanding.

It’s time to start creating that alternative interior design magazine that you’ve always dreamed of running.

Features

• Uses Hardware acceleration
• Works on tablets and smartphones
• Easy to manipulate
• Lightweight, only 15K

via turn.js – The page flip effect for HTML5.

The application also claims to be able to learn about your interests in order to present you with the most relevant content.

Personally, I’m still enjoying Sprout Social but if you are looking for an application to help you to monitor and manage your Social Media networks then Bottlenose may be worth a look.

via PanoJS3 – pure JavaScript viewer for huge images.

It’s not perfect yet, there’s still a disconnection between the Storify “Story” and the WordPress “Post” with the former being embedded in the latter as above. The advantage is that it is a great way to compile a post from multiple sources with the ability to search social networks and other sources and then drag snippets straight into the story.

Please uncheck the box if you don’t want us to exclude your contact details from our mailing list opt-out. We won’t pass your contact details on to selected partners if you haven’t left the opt-out check box unchecked.

It takes a fair bit of unravelling to understand the implications of checking, or un-checking the box. The site owner is counting on you not taking the time to read it thoroughly and hopefully tricking you into signing up for regular emails both from the site and from anybody they sell their mailing list to (“selected partners” – usually selected by the criteria of having paid for the list).

This is what is called a dark pattern, it’s a design pattern which is motivated by the intention to trick or trap the user, and not to help them in any way. A collection of these patterns, along with specific examples can be found over at the Dark Patterns wiki. The site is not intended to be a reference for evil web designers, quite the opposite in fact. In their own words:

The purpose of this pattern library is to “name and shame” Dark Patterns and the companies that use them.

• For consumers, forewarned is fore-armed.
• For brand-owners, the bad-press associated with being named as an offender should discourage usage.
• For designers, this site provides ammunition to refuse unethical requests by our clients / bosses. (e.g. “I won’t implement opt-out defaults for the insurance upsells because that practice is considered unethical and it will get you unwanted bad press.”)

The following presentation gives a few examples and some evidence about why these tricks are a bad idea – something I think should be given more prominence in the wiki.

What are your thoughts on dark patterns? Have you ever been forced to implement something that seemed unethical? (I know I have). If you’ve spotted any dark patterns yourself, let me know or add them to the wiki and help in the fight against the dark-side.

Dark Patterns.

In the spirit of discovery, I’ve created a Google+ page for this website, so far there’s not much difference between a Personal Profile and a Business Page though who knows what’s lurking in the Google+ Labs with the anti-Zuckerberg security measures.

The Business pages, like Facebook pages have a nice “getting started” section when you first create them. This guides you through the early stages of getting up and running and Google have also provided a downloadable guide to getting started.

It will be interesting to see the social analytics for Google+ pages when they are available and the gradual release of various new APIs allows us to speculate what will be possible over the coming months. It’s going to be an interesting time filled with exciting new ideas and tired re-hashing of stuff that’s been seen hundreds of times before; but that describes pretty-much any point in the last ten years of the web.

People are always quick to judge whether new social media platforms will live or die. I think that we need to keep an open mind on Google+ for business. Google can afford not to rush things and the last thing they’ll want to do is disrupt the loyal user base for any of their other products, but those google fans are exactly the sort of people who will be best served by Google+ as the products that they already use are gradually integrated into the platform.

Scale refers to the relative sizes used for elements such as headings of various levels. The scaling of headings and other elements creates a visual hierarchy, allowing the reader to find out the relative importance of  various text elements in the page before reading the content. Do you ever skim through a page, looking at just the headings to find the part that you’re interested in? (rhetorical question, you know you do).

Gridlover is an online tool to help you with generating CSS rules for typographic rhythm and scale. You use simple sliders to set base font size and line height and a scaling factor for headings. You can adjust the scaling factor for each individual heading level and alter top and bottom margins for elements.

Gridlover generates all the CSS for you to copy and paste into your own stylesheets and supports px, rem and em measurement units so that the rules are useful in even the most fluid and flexible web layouts.