Web Developer 2.0 » HTML http://webdeveloper2.com Resources for web creators Wed, 01 Feb 2012 13:46:24 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 A web app framework to save Gotham City? http://webdeveloper2.com/2011/10/batman-web-app-framework/ http://webdeveloper2.com/2011/10/batman-web-app-framework/#comments Thu, 20 Oct 2011 11:31:33 +0000 Dave http://webdeveloper2.com/?p=2994 If you’re interested in working with the very latest in web development platforms then you’ve probably already played with node.js. Personally, it’s still on my to-do list but I’m tempted to try it out along with batman.js – a web app framework for node.js by Nick Small, Shopify‘s resident JavaScript guy. I’ll let Nick explain:

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?

]]> http://webdeveloper2.com/2011/10/batman-web-app-framework/feed/ 0 Fluid Web Design Kit http://webdeveloper2.com/2011/10/fluid-web-design-kit/ http://webdeveloper2.com/2011/10/fluid-web-design-kit/#comments Wed, 05 Oct 2011 09:00:36 +0000 Dave http://webdeveloper2.com/?p=3469 The Fluid Baseline Grid System is (yet another) HTML5 & CSS3 development kit for fluid web design and responsive layouts.  This one’s main strength is its simplicity; the kit doesn’t try to include every possible optimisation so you can add what you need instead of removing the bits that aren’t relevant.

Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit

The main features are:

  • Fluid Grids – the default set up is a fluid three column layout though you can change this as you see fit.
  • Typography – attention has been paid to ensuring a sensible set of default font sizes and line heights.
  • Responsive Layouts – The framework is built on the mobile-first strategy of responsive layouts with pre-defined rules for adjusting layouts and typography to different display devices.

Fluid Baseline Grid – A sensible HTML5 and CSS3 development kit.

]]> http://webdeveloper2.com/2011/10/fluid-web-design-kit/feed/ 0 The story (so far) of a social game http://webdeveloper2.com/2011/09/the-story-of-a-social-game/ http://webdeveloper2.com/2011/09/the-story-of-a-social-game/#comments Mon, 26 Sep 2011 09:11:06 +0000 Dave http://webdeveloper2.com/?p=3431 A funny thing happened a couple of weeks ago; a picture of a simple social game popped into my head – just like magic. The premise was for a simple grid of blocks which could be captured or built upon up to a specified height. I don’t recall what I was doing at the time (possibly sitting on the toilet), but having thought about it for a few minutes I had an idea of how the game would play.

I quickly wrote down the basic rules as I had imagined them:

The Rules

  • Players can move north,south,west,east or up (creating a new block).
  • Players can only move on to an unoccupied block.
  • Neutral blocks can be captured from an adjacent block of equal or greater height.
  • Opposition blocks can be captured from an adjacent block of greater height.
  • The game ends when the cube is full.

Concept Testing

My first tests were done using a paint app, a just drew out the grid and then simulated the moves/block captures with coloured blobs. This appeared to make sense after 4 or 5 runs through so I moved into physical prototyping – Play Dough.

Testing with Play Dough came with a couple of unexpected discoveries:

  1. The game works well as a board-game, you could play this with Lego just as easily.
  2. Occasionally the game needs to be abandoned due to the dragon-making requirements of young children – this feature is unlikely to make it into the final game.

All in all I was quite happy with the way it worked so I decided to spend an evening building a quick browser-based prototype with a bit of jQuery.

Bringing it to the web

My first mockup was quick and dirty HTML, CSS and jQuery – an environment in which I can comfortably play around. I think that for a project like this where the early stages are just throwing ideas around, it’s important to work in a medium that you enjoy – if I’d needed to keep referring to documentation or search for answers, the fun would have been sucked out of it and there’s a good chance that I would have abandoned the whole thing.

When I say “quick and dirty” I mean that there was no real thought given to structuring the code, I just wanted a working prototype so things like using onclick attributes on HTML tags rather than binding events were fair game (and as I write this, the current demo still contains a fair bit of that stuff).

After 2-3 hours of tinkering I had a working browser based game to play with so I spent a good while playing with myself (and also testing the game), trying out different strategies, different sizes of grids and numbers of players. It seemed to hang together pretty well – then, like most side projects, it had to be put onto the back-burner whilst real-life responsibilities took over my time (curse you, real life!).

Back to work thanks to BarCamp

Like many back-burner projects, my little game may have ended up languishing forlornly along with the mountains of other web-experiments that I’ve accumulated over the years. Luckily it was saved by BarCamp MediaCityUK.

Headphone seats

These things are excellent

I’d never attended a BarCamp before but the experience came highly recommended so I snagged myself a ticket for BarCamp MediaCityUK over at the new BBC North HQ in Salford Quays. In the week running up to the event I was unsure what I might do for a presentation, I figured that I’d probably dust off something from my hoard of back-burner projects and the game was the most recent of those. After lunch I sat down in one of the super-comfortable “headphones” cubby holes and spent an hour tidying up my game prototype and creating a couple of accompanying HTML pages to use as presentation slides.

Later I presented my game concept to a small but interested group of BarCampers. The concept was favourably received and the ensuing discussion brought up some main points:

  • Simplicity is good – the game is easy to learn and understand, also easier to write robust code for.
  • Playtesting is vital – Katie Steckles suggested that I should try to get as many people as possible to play it and hopefully report any issues
  • Social gaming – I see the potential to run the game completely independently of any specific platform though allowing sign-in via social network authentication. This would allow somebody logged in via facebook on their laptop to play a game against somebody logged in via Twitter on their phone etc.

Next Steps

I’m currently working on parallel developments. I’m keeping the demo version up-to-date with tweaks based on feedback that I’ve received and I’m building a re-factored version that is entirely separated from the interface and allows different rules variation to be plugged in for testing out different ideas. I’ve also started work on a 3D WebGL interface using Mr.Doob’s excellent three.js library.

Please try the game out and let me know if you have any suggestions, ideas or criticisms.

]]> http://webdeveloper2.com/2011/09/the-story-of-a-social-game/feed/ 2 CSS3 Image Styles with graceful fallback http://webdeveloper2.com/2011/09/css3-image-styles-with-graceful-fallback/ http://webdeveloper2.com/2011/09/css3-image-styles-with-graceful-fallback/#comments Thu, 22 Sep 2011 17:01:04 +0000 Dave http://webdeveloper2.com/?p=3454 Web Designer Wall have published a nice demo of some CSS3 image effects that can be achieved by applying images as a background to an HTML element.

CSS3 Image Styles by Web Designer Wall

There’s also a neat little jQuery snippet to dynamically wrap images in a span element with the appropriate classes to get the best results from browsers which support CSS3.

CSS3 Image Styles by Web Designer Wall.

]]> http://webdeveloper2.com/2011/09/css3-image-styles-with-graceful-fallback/feed/ 0 The evolution of the web [infographic] http://webdeveloper2.com/2011/09/evolution-of-the-web-infographic/ http://webdeveloper2.com/2011/09/evolution-of-the-web-infographic/#comments Thu, 15 Sep 2011 16:15:37 +0000 Dave http://webdeveloper2.com/?p=3421 This super interactive infographic details the evolution of the web as a timeline showing browsers version releases and the introduction of key technologies – from HTTP right through to HTML5 and CSS3.

The evolution of the web - Infographic

This is interesting from a technical point of view, the main graphic is beautifully rendered as an SVG image via the Raphael.js library.

You can also preview screen grabs of the various versions of the browsers: Mosaic, Netscape Navigator, Opera, Internet Explorer, Safari, Firefox, Chrome and Chrome OS.

The evolution of the web-netscape4

Some of these were a real nostalgia trip for me, my first browser was Mosaic which came bundled with a Compuserve account.

What was the first browser that you used?

The evolution of the web.

]]> http://webdeveloper2.com/2011/09/evolution-of-the-web-infographic/feed/ 0 Patternizer – HTML5 Canvas Pattern Generator Tool http://webdeveloper2.com/2011/09/patternizer-html5-canvas-pattern-generator-tool/ http://webdeveloper2.com/2011/09/patternizer-html5-canvas-pattern-generator-tool/#comments Wed, 07 Sep 2011 16:38:05 +0000 Dave http://webdeveloper2.com/?p=3161 Patternizer is a small (< 2Kb) javascript to generate stripe-based patterns using HTML5′s canvas element.
This project by Matthew Lein and Dave Johnson also comes with a handy UI to generate patterns visually and then export the code needed to create them.

You can even save your patterns and showcase them on the site or look at patterns built by others to see how they’ve achieved different effects.

The script is available from https://github.com/matthewlein/patternizer.js.

Patternizer – Stripe Pattern Generator Tool.

]]> http://webdeveloper2.com/2011/09/patternizer-html5-canvas-pattern-generator-tool/feed/ 1 Bootstrap, from Twitter http://webdeveloper2.com/2011/08/bootstrap-from-twitter/ http://webdeveloper2.com/2011/08/bootstrap-from-twitter/#comments Sun, 28 Aug 2011 13:11:34 +0000 Dave http://webdeveloper2.com/?p=3000 Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

This is a really nice starting point for quickly getting an idea into production. It’s common for UI details to get pushed back to later in development in order to concentrate on core functionality, however it’s these details that make the biggest impact on users so having a lot of the nitty-gritty stuff done from the start is a real bonus.

via Bootstrap, from Twitter.

]]> http://webdeveloper2.com/2011/08/bootstrap-from-twitter/feed/ 0 HTML5 presentations: The Why, Wow and How http://webdeveloper2.com/2011/08/html5-presentations-the-why-wow-and-how/ http://webdeveloper2.com/2011/08/html5-presentations-the-why-wow-and-how/#comments Tue, 23 Aug 2011 18:43:43 +0000 Dave http://webdeveloper2.com/?p=2933 If you’ve attended any Web Design or Development conferences in the past couple of years, you may have noticed that HTML is being used on a fairly frequent basis as the platform (rather than just the subject) on which presenters are building their presentations.

This recent presentation: HTML5 Showcase for Web Developers: The Wow and the How is a superb example of an HTML5 slide deck.

The reasons for this are obvious in the case of presenting web technologies – the ability to embed demonstrations into the presentation and also the use familiar tools such as CSS for controlling the style of the slides. However for non-web technologists, there are some advantages too.

  • A presentation built in HTML is web-native so it’s easy enough to publish to the widest possible audience.
  • You can SEO optimise the slide deck in order to build search engine traffic.
  • By recording analytics data from the published deck, you can discover which parts of your presentation garner the most interest in order to help you to plan future presentations.

Thankfully you don’t need to build the slideshow mechnism from scratch. Deck.js provides a nice flexible framework within which you can build an HTML presentation using basic HTML skills. The library even comes with a few pre-made themes so you can get straight to work on the content.

If you’ve got a killer presentation, why not publish it as HTML and get even more out of it?

]]> http://webdeveloper2.com/2011/08/html5-presentations-the-why-wow-and-how/feed/ 1 Don’t Fear the Internet http://webdeveloper2.com/2011/08/don%e2%80%99t-fear-the-internet/ http://webdeveloper2.com/2011/08/don%e2%80%99t-fear-the-internet/#comments Mon, 22 Aug 2011 10:48:08 +0000 Dave http://webdeveloper2.com/?p=2922 Don’t fear the Internet is a website by Jessica Hische & Russ Maschmeyer dedicated to explaining the basics of web design for graphic artists, print designers or any other creative person who has little to no experience of building a website. The site states that they are not trying to train people up to professional web design standards, just to give them enough knowledge to express their personal style on the web.

The video tutorials have been created in very clear HD, so you aren’t squinting at the screen trying to read complex code and there are clear diagrams to explain core concepts.

If you are one of the many people who have creative ideas for the web and want to learn how to implement them for yourself then you may want to keep watching this site.

Don’t Fear the Internet.

]]> http://webdeveloper2.com/2011/08/don%e2%80%99t-fear-the-internet/feed/ 0 HTML5 Boilerplate 2.0 http://webdeveloper2.com/2011/08/html5-boilerplate-2-0/ http://webdeveloper2.com/2011/08/html5-boilerplate-2-0/#comments Thu, 18 Aug 2011 13:50:57 +0000 Dave http://webdeveloper2.com/?p=2921 HTML5 Boilerplate – one of the best starting points for building HTML5 websites has been updated to version 2.0. This coincides neatly with the projects’ first birthday.

Some of the main changes in this release are:

  • Now using normalize.css instead of the traditional CSS Reset stylesheet.
    normalize.css retains useful browser defaults and includes several common fixes to improve cross-browser (desktop and mobile) styling consistency.
  • Faster build script
    The build script will inline CSS @imports together. so you can keep separate files for authoring but deploy a combined production version.
    You can also autogenerate a cache manifest file to allow your site/app to work offline.
  • Chrome frame prompt for IE6
    The latest version of chrome frame does not require admin access to be installed. IE6 users can be prompted to install it for a better browsing experience.
  • respond.js added as part of a shift to a responsive approach. You can now use media queries anywhere and get full IE6-8 support.

HTML5 Boilerplate – A rock-solid default template for HTML5 awesome.

]]> http://webdeveloper2.com/2011/08/html5-boilerplate-2-0/feed/ 0