via PanoJS3 – pure JavaScript viewer for huge images.

Storified by Dave Kinsella

Tue, Jan 10 2012 15:56:37 ·
55 views

• 1

Storify releases WordPress plugin

like

0

• Share

• Email

• Embed

The first time I tried Storify, my first thought was that it would be a perfect way to write Blog Posts, I just wished that I could access it from within WordPress. Well now I can with the release of the Storify WordPress Plugin.

1. Share
   

   

   WordPress

   Tue, Jan 10 2012 15:13:54

Show moreOther stories by techn0tic on 
storify.com ➜

From

To

Send

Embed code

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.

These will only work in browsers which support CSS3 animations; currently Apple Safari, Google Chrome, and Mozilla Firefox. Microsoft have also promised support for Internet Explorer 10, and support has been announced for Opera 12. For backward compatibility you could use something like Modernizr to provide fallbacks for the browsers that don’t support CSS animations such as using Javascript animations instead.

Check the video below to see some of these effects in action.

Click here to view the embedded video.

via Animate.css – a bunch of plug-and-play CSS animations.

batman.js is a full-stack microframework extracted from real use and designed to maximize developer and designer happiness. It favors convention over configuration, template-less views, and high performance by simply not doing very much. It all adds up to blazingly fast web apps with a great development process; it’s batman.js.

Look at the examples, it’s quite an accomplishment. The framework provides a full MVC architecture with simple data binding and pure HTML views. Working applications can be built with suspiciously little code. The following code is enough to build a working to-do app for instance:

<!--<span class="hiddenSpellError" pre=""-->DOCTYPE html>
<html>
<head>
    <title>Alfred: Batman's Todos</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="resources/alfred.css" type="text/css">

<script type="text/<span class=">// <![CDATA[
javascript</span>" src="../lib/es5-shim.js">
// ]]></script>
<script type="text/<span class=">// <![CDATA[
javascript</span>" src="../lib/batman.js">
// ]]></script>
<script type="text/<span class=">// <![CDATA[
javascript</span>" src="../lib/batman.solo.js">
// ]]></script>
<script type="text/<span class=">// <![CDATA[
javascript</span>" src="../lib/coffee-script.js">
// ]]></script>
</head>

<body>
    <div id="container">
        <h1>Alfred</h1>
        <form data-formfor-todo="controllers.todos.emptyTodo" data-event-submit="controllers.todos.create">
          <input class="new-item" placeholder="add a todo item" data-bind="todo.body" />
        </form>

        <ul id="items">
            <li data-foreach-todo="Todo.all" data-mixin="animation">
                <input type="checkbox" data-bind="todo.isDone" data-event-change="todo.save" />
                <label data-bind="todo.body" data-addclass-done="todo.<span class=">isDone" data-mixin="editable"></label>
                <a data-event-click="todo.destroy">delete</a>
            </li>
            <li><span data-bind="Todo.all.length"></span> <span data-bind="'item' | pluralize Todo.all.length"></span></li>
        </ul>
    </div>

    <script type="text/coffeescript">
    # Create our application and namespace.
    class Alfred extends Batman.App
      @global yes

      # setup our root route. When the app starts up, it will automatically call TodosController::index
      @root 'todos#index'

    # Define the principal Todo model with `body` and `isDone` attributes, and tell it to persist itself using Local Storage.
    class Alfred.Todo extends Batman.Model
      # @global exposes this class on the global object, so you can access `Todo` directly.
      @global yes

      # @persist tells a model which storage mechanism it should use to load and save. Batman.LocalStorage is the simplest, simply persisting your records to the browser storage.
      @persist Batman.LocalStorage

      # @encode tells the persistence mechanism which fields to archive. You can also setup specific encoder and decoder functions to handle specific types of data.
      @encode 'body', 'isDone'

      # just some defaults, but these are optional
      body: ''
      isDone: false

    class Alfred.TodosController extends Batman.Controller
      emptyTodo: null

      index: ->
        @set 'emptyTodo', new Todo

        # add some example todos to show off.
        Todo.load (error, todos) ->
          # you always want to make sure you handle errors (more elegantly than this) when writing connection code
          throw error if error
          unless todos and todos.length
            callback = (error) -> throw error if error
            new Todo(body: 'joker escaped arkham again', isDone: true).save(callback)
            new Todo(body: 'riddler sent riemann hypothesis').save(callback)
            new Todo(body: 'bane wants to meet, not worried').save(callback)

        # prevent the implicit render of views/todos/index.html
        @render false

      create: =>
        @emptyTodo.save (error, record) =>
          throw error if error

          # we use set so that our form will automatically update with the new Todo instance
          @set 'emptyTodo', new Todo

        # since this isn't actually a route action, nothing will be rendered here.

    # Start the app. This will start up the dispatcher and a number of other mechanisms.
    Alfred.run()
    </script>
</body>
</html>

Which looks like this.

The one thing stopping me from diving into this straight away is that it’s yet another platform to learn. The fact that it’s JavaScript is good and I love coffeescript’s syntax but I’m slightly daunted by getting over than first hurdle of familiarising myself with everything.

Have you used batman.js? Is it worth trying out?

7 Disruptive Innovations That Turned Their Markets Upside Down [INFOGRAPHIC].

You don’t need to have a merchant account or payment gateway to sign up with Recurly, they can help you to apply for a suitable account with one of the many gateways that Recurly support. You can work on your account configuration and website integration whilst waiting for approval. Depending on the gateway chosen and the complexity of the integration, you could be accepting payments within 24 hours of starting.

For developers, there are a number of Recurly software components available; for .Net, PHP, Ruby, Python, Java and perhaps most impressively, a JavaScript library. Recurly JS makes seamless integration into any website easy, just take a look:

Click here to view the embedded video.

Recurly JS – Secure Transaction Checkout Forms from deekomalley on Vimeo.