As Twitter's well publicised and painful move into grown up profitability gathers pace, a number of competitors to them (and Facebook) have sprung up.

Two in particular deserve more than a cursory glance:

App.net

App.net - inspired by the interest in founder Dalton Caldwell's blog post 'What Twitter could have been' - released to a flurry of interest. Not least because of it's initially 'high' membership cost of $50, but also the founders pretty abrasive relationship with Facebook.

Despite the fact that it guaranteed a lack of advertising, many took issue with App.net's membership price and implied ‘reverse gentrification’.

Regardless, it's membership has grown to 20,000+ members and it easily hit it's $500,000 crowd-funding target.

Tent

Personally I'm more interested by the fully decentralised Tent service, which takes a different approach and aims to not just replace Twitter, but become the protocol for social networking.

Tent Image

Most exciting (for a fully paid up geek like me at least!) is the fact that the Tent protocol - expanding on remix culture - can be extended to your own niche needs. Want to include streaming video and maps in your 1024 character status post? No problem, just expand the API and release on your server.

It's also entirely possible to run a Tent server as a hidden service, making it even harder for oppressive regimes to silence critics online.

Tent is a protocol - anyone can run a server, and so run a service. It could be ad-supported or not, the possibilities are up to the individual developers. As Tent puts it: "Tent needs you, not your money."

My profile is available via the one-click Tent hosting service Tent.is - but it's pretty empty - hinting at some initial problems both services will face.

Whoaa there…

Whilst the average punter is increasingly net-savvy, most don't have the time, or inclination, to make a bet on a third social network. Also, cross posting via services such as ifttt.com, is ironically made much more difficult by Twitter's hardened policies.

Facebook & Twitter aren't going to disappear overnight. Neither indeed, is the elephant in the room, Google+ and do you remember the equally hyped, now struggling Diaspora? Thought not.

However, it's interesting to see how quickly developer (and eventually public) opinion can shift against seemingly permanently entrenched market leaders.


Update

As of February 25, 2013, App.net now offers free accounts (with restrictions). The always insightful Marco Arment has an interesting take on the about-face.

Oct 10, 2012

SASS - Dynamic CSS finally arrives

"Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin." - Via Sass-lang.com

We've recently been using Sass in Drupal 7 via the base theme Sasson.

Sasson deserves a blog post of it's own - it's got many useful, non Sass features to speak of. Most importantly though, it does just enough, without getting in your way, or isolating too many settings to the admin interface. The project maintainers in particular, are refreshingly open and responsive.

But, what's so great about Sass, particularly in a real-world agency environment? I'm not going to cover everything - refer to SASS's great documentation for that but let's dive into some examples of it's major features, from a real world, recently completed project:

Variables

$background: #fff;
$body-text: #000;
$standard-padding: 30px;
$standard-line-width: 2px;
$block-width: 980px;

By far the quickest and most obvious time savers are variables. Most large websites will end up duplicating certain standard brand colours, text sizes and padding widths etc. across the site.

Not only is it tiresome to re-write these every single time (to the point where I dream about the hex codes for projects built 6 years ago), it's also prone to human error when the inevitable re-brand takes place and you have to search and replace each value.

Having these variables in a single, easy to read file, also has the knock on effect of making sure you Don't Repeat Yourself, as you'll very quickly pick up on duplications or unnecessary variations.

Moreover, once these variables are defined, it's incredibly easy to rebrand cookie cutter sites, by just swapping in new variable library files.

Even better, Sasson can provide variables defined via it's Drupal admin page. This is particularly useful for responsive grid layouts.

.views-row-odd{
    padding: [gutter-width] 0 [gutter-width] [gutter-width];
}
.views-row-even{
    padding: [gutter-width] [gutter-width] [gutter-width] 0;
}

Operations on variables

But what about variations on those standards? Sass allows for that, and more. You can perform mathematic operations on previously defined variables:

padding: $small-padding/2;

Even better, you can combine variables and operations. In the example below, I'm automagically catering for the extra space the padding will add to the width of the box

width: $block-width-$small-padding*2;

Mixins

Mixins are similar to variables, but with multiple lines.

This is a commonly used font-face mixin of mine:

@mixin font-gothic {
    letter-spacing: 0.015em;
    font-family: "alternate-gothic-no-2-d", sans-serif;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
}

Rather than repeat these 5 lines every time I want to include the custom font, I now just include the line as follows:

h3 {
    font-size: 24px;
    @include font-gothic;
}

The time saving potential of Mixins are endless. They're particularly great at condensing multi-line CSS3 vendor prefixes down to one line.

Mixins & Arguments

One of my favourite features of Mixin's is the ability to add arguments. Again, multi-line CSS3 effects, or cross browser fixes can easily be condensed to one liners. Consider the min-width hack.

@mixin minimum-width($min-width)  {
    min-height:$min-width;
    height:auto !important;
    height:$min-width;
}

In your scss file you can now just supply a pixel value and all the work is done for you:

#navbar { 
    @include minimum-width(980px); 
}

Nesting

Once you've used it, you'll find it hard to look back from nesting. Traditional CSS just seems so bloated in comparison.

Two of my favourite time savers:

Nested lists

ul li {
    list-style-type: circle;
    ul {
            padding-left: 1em;
        li {
                list-style-type: square;
            }
    }
}

Link and hover states

a {
    &:link,
    &:visited {
            color: $body-link;
            text-decoration: none;
    }
}

a {
    &:focus,
    &:hover,
    &:active {
        color: $body-text;
            text-decoration: underline;
    }
}

Conclusion

As the examples above should make clear, not only does Sass make CSS quicker, easier and dare I say it, more fun to create, especially in large CMS contexts; it also drags CSS kicking and screaming into the 21st century, finally adding the dynamic functions we've been afforded in every other language.

Indeed, The W3C has taken note and a working draft for 'CSS Hierarchies' (think nesting) is gaining steam - well, W3C steam at least, at the usual rate of change it will probably be ratified in 2064!

What about LESS?

LESS CSS (not the LESS Framework) was influenced by Sass - in fact, Sass's newer SCSS syntax was in turn added as a response to LESS 's cleaner, reusable syntax.

We tried LESS on another project, before settling on Sass. To be honest, there's not a lot to choose between them. We just found the Sass compiler slightly easier to work with and the brilliant Drupal integration offered by Sasson was the final nail in the coffin.

Apr 27, 2012

Interaction Conference 2012, Dublin

I attended the IxDA's annual conference, IxD12, for the first time at the beginning of February 2012.

The IxDA is a global network dedicated to the professional practice of Interaction Design. It encompasses, among others, UX, IA, graphic design and programming.

I've been to many conferences in the past, including dConstruct, various Carsonified FOWA's & FOWD's (usually of varying quality) and quite a few geekier offerings (PloneCon, DrupalCon and the brilliant Yahoo! HackDay).

IxD12 was head and shoulders above any conference I've attended in the past, both in organisation and content. I found the variety of theoretical and practical advice on offer to be perfect.

The only downside was that I've visited Dublin many times before, but that's a minor quibble1.

Top 3 talks

Over the coming weeks I hope to write up my extensive notes online, but my top 3 highlights of the many great talks were:

Trending Topics

The recurring themes over the 3 days I attended seemed to be:

  • Mobile is here and has been for a while. In fact, we should all be thinking cross-channel now.

  • We are all Cyborgs. Cyborg Anthropology - the study of human use of technology - is an increasingly important field.

  • Get ideas out of your head and into prototype as fast as possible. Their application will follow.

  • Exchange skills. All UX professionals should be able to code at some level.

  • Don't test in labs, test in the real world.


  1. Won't someone please send me to New Orleans for IA Summit 2012. :D 

Feb 17, 2012

Drafts/ideas

Future blog post ideas

iOS apps and games, thats my hobby now after all.

Crap iPad magazines. Why. Good magazines. Just look at ratings. Screenshot.

Review flash mirror with before and after pics.

Fitocracy review. Ticks all the boxes (social, runkeeper). But not impressed. Poor design. Fiddly.

Clean up and post some of my long build notes for servers

iTunes affilate scheme: http://www.apple.com/itunes/affiliates/resources/documentation/itunes-app-store-affiliate-program.html <-- Go back and add links when approved

Best to avoid formulas, but if stuck:

  1. Lists People love lists, and just about any kind of list is bound to attract traffic. Top 10 lists, 5 things not to do, 3 reasons I love something, etc. Start with a number then take it from there.

  2. How-to People love to find easy-to-follow instructions to help them accomplish a task. Whether you want to teach your readers how to throw the perfect curve ball or how to avoid getting bitten by a mosquito, the choice is yours.

  3. Reviews You can write a review of just about anything on your blog. Take a look at the following suggestions:

Products Websites Books Movies Music Restaurants Hotels The possibilities are nearly endless. Just think of something you've tried and write about your experience and thoughts.

  1. Photos Post a photo (or photos) related to your blog topic.

  2. Link Roundup Write a post that includes a list of links to other blog posts that published great posts or to websites you like.

  3. Current Events What's going on in the world? Write a post about an interesting bit of news.

  4. Tips Write a post to share tips to help your readers accomplish something in an easier, faster or cheaper way.

  5. Recommendations Share recommendations for your favorite books, websites, movies or other "favorites" related to your blog topic.

  6. Interviews Interview a prominent figure or expert in your blog topic then publish a blog post about it.

  7. Polls Register for an account with a site like PollDaddy.com then publish a poll related to your blog topic in one of your blog posts.

Jan 8, 2012

Drafts/markdown-cheatsheet

Markdown Cheat Sheet

via http://warpedvisions.org/projects/markdown-cheat-sheet/

Header 1

Header 2

Header 3 ### (Hashes on right are optional)

Header 4

Header 5

Markdown plus h2 with a custom ID

Link back to H2

This is a paragraph, which is text surrounded by whitespace. Paragraphs can be on one line (or many), and can drone on for hours.

Here is a Markdown link to Warped, and a literal . Now some SimpleLinks, like one to [google] (automagically links to are-you- feeling-lucky), a [wiki: test] link to a Wikipedia page, and a link to [foldoc: CPU]s at foldoc.

Now some inline markup like italics, bold, and code(). Note that underscores in words are ignored in Markdown Extra.

picture alt

Blockquotes are like quoted text in email replies

And, they can be nested

  • Bullet lists are easy too
  • Another one
  • Another one
  1. A numbered list
  2. Which is numbered
  3. With periods and a space

And now some code:

// Code is just text indented a bit
which(is_easy) to_remember();

// Markdown extra adds un-indented code blocks too if (this_is_more_code == true && !indented) { // tild wrapped code blocks, also not indented }

Text with
two trailing spaces
(on the right)
can be used
for things like poems

Horizontal rules


****

This is a div wrapping some Markdown plus. Without the DIV attribute, it ignores the block.

Markdown plus tables

Header Header Right
Cell Cell $10
Cell Cell $20
  • Outer pipes on tables are optional
  • Colon used for alignment (right versus left)

Markdown plus definition lists

Bottled water
$ 1.25
$ 1.55 (Large)
Milk
Pop
$ 1.75
  • Multiple definitions and terms are possible
  • Definitions can include multiple paragraphs too
Jan 6, 2012

The Beauty of Digital: New technologies, old aesthetics and where the two meet

"There's no either/or anymore - digital is part of our creative lives, creating new possibilities and opportunities. But does that mean pre-digital knowledge, expertise and aesthetics are redundant, or is something much more interesting happening as old and new come together in the mix?"

I attended this brilliant panel at the Pervasive Media Studio, The Watershed, Bristol (here's a great supporting blog post).

Much of my enjoyment came from the wide variety of expertise on offer from the speakers:

Jonathan Waring - Self confessed type nerd

Jonathan, Creative Director, 3Sixty, came from a pre-digital, traditional publishing background, to the extent that the punishment of his first employer in Germany was to force him to painstakingly lay-out, on a letterpress, a poster for a local company - a task that took 4 days.

His central point was based around this experience - perhaps, with the technology currently at our disposal, we are far too quick to dive into creating, without properly considering our approach and taking time.

I didn't buy into this completely, a bad designer is a bad designer whatever their method. But it did ring true with Ben Bodien's article for 24 ways, suggesting that Web Development is becoming a craft and we should build and hone our tools and techniques over time.

David McGoran, Roboticist, Puppeteer & Dancer

David's talk (he's from Rusty Squid a Bristol based collective) was my favourite of the panel, if only because the (frustratingly quick) flash of his Heart Robot tugged at my heart strings - as I'm sure he intended.

David's argument, passionately put, was that we are base, emotional animals and that technology developers would do well to remember this. Although, how to do this, with emotionless computer screens is a challenge. The Gamificaiton approach is a blunt tool to harness our dopamine rush. But he still made me want to get my Arduino out and make something real.

His talk included illustrations of dancers and performers from the 17-1900's, many of whom developed neutral masks or covers for their faces and expressed all of their emotions through their body and pose. Many robotics engineers, would do well to look back at the library of images these early pioneers created, detailing each and every approach for expressing meaning or emotion.

Another great tangent he explored, was how the technology of Greek Theater was often decades ahead of the military technology of the time. Yet now, performance technology is little more than high definition 3D displays.

One centrally agreed point of the night, from David's talk, is that much of the non-digital technology that is dying, is actually not as old as we think.

Do we really care about the death of newspapers? After all Martin Luther was an avid tweeter 500 years ago.

Baldur Bjarnason - PhD subject: eBooks and interactivity

I learned a lot from Baldur, including the real origin of the phrase "You can't tell a book from it's cover".

In fact books never had designed covers before mass production, for the unwashed masses, came along. Before that, rich society types had their books binded individually and decorated to their tastes.

Baldur also expressed his dislike of the ever popular grid systems and it's modern day equivalent - the Windows Phone 7 Metro design language. Both systems that have taken the emotion and fun out of design, whilst trying to keep a standard blank playing field for all users.

His argument was that Apple products were so loved, because they chose to embrace emotion in design - people enjoy them (Although, personally I find their recent skeuomorphism trend slightly jarring).

Finally, he mentioned many interesting developments in the eBooks arena, the subject of his PhD thesis. Many sounded very useful - standardised hash tags for each page of a book for example - but it couldn't help but remind me of of Nicholas Carr's key arguments in 'The Shallows': we are meant to be reading and consuming information in considered isolation, not skimming the surface and exploring tangents on Wikipedia every 2 minutes.

Simon Johnson - Game Designer

I'm a big fan of Simon Johnson, Slingshot and Igfest's work - the success of their now multi city Zombie Apocalypse game speaks for itself.

I was less aware of their work with the Tweeture Bot and 'The Hat Game'. Both great adaptations of existing social media, which both produced some brilliant off-line results.

Another talk that made me want to get the hardware out again.

A final point of the evening, regarding the over-prevalence of Victorianism in recent retro 'designs' was amusingly undermined by Simon and David's rather dashing flat caps.


A great night. Many thanks to hosts by Chris Sharratt , Editor of creative industries website creativetimes.co.uk, and Clare Reddington, Director, iShed and Pervasive Media Studio

Jan 6, 2012