Category: Websites

Just Enough JavaScript

just-enough-js-1

I got a last-minute opportunity to teach an introduction to game programing course for people with no programming experience. I decided to base it around an open source HTML5 framework*. When I started looking around for a crash course with which to build basic JavaScript programming skills, I found none that were appropriate. Hence, Just Enough Javascript was born.

I’m creating it as a just-in-time resource for the course. There a little bad-but-expedient practice in there, but it’s working quite well for the course so far. Each page is resource-complete in itself—meaning you can download just a single HTML document and later view it without a live Internet connection.

I would love to hear any feedback about it.

* I considered enchant.js, Phaser, and melonJS. There were pros and cons to each, but I ultimately went with enchant.js because I like it’s event-driven nature (better reflects how JS “should” work) and it has a smaller (and therefore less intimidating for beginners) API.

Mozilla Brick and Zepto.js

old-red-brick-wall

Raymond Camden wrote up an instructive example that shows how to use Mozilla’s Brick UI Components with vanilla Javascript. I decided to take that and modify it to use Zepto.js instead. I have no idea whether this is a good idea or not, but it’s done now so there’s no point in crying about it. Here it is:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!--
    From http://www.raymondcamden.com/index.cfm/2013/8/23/Brick-by-Mozilla
    Adapted to use Zepto.js by MFK.
    -->
    <title>Brick Card Demo</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="css/brick-1.0beta8.css"/>
    <script src="js/brick-1.0beta8.js"></script>
    <script src="js/zepto.min.js"></script>
    <style>
      html, body{
        height: 100%;
      }
    </style>
  </head>
  <body>

  <x-layout>
    <x-appbar>
      <div>
        <a href="" id="homeLink" title="Home">=</a>
      </div>
      <header>Brick Card Demo</header>
    </x-appbar>

    <section>
      <x-deck id="mainDeck">

        <x-card>
          <ul>
            <li>
              <a href="1" class="deckLink">Page 1</a>
            </li>
            <li>
              <a href="2" class="deckLink">Page 2</a>
            </li>
            <li>
              <a href="3" class="deckLink">Page 3</a>
            </li>
          </ul>
        </x-card>

        <x-card>
          <h1>Page 1</h1>
        </x-card>

        <x-card>
          <h1>Page 2</h1>
        </x-card>

        <x-card>
          <h1>Page 3</h1>
        </x-card>

      </x-deck>
    </section>

    <footer>
      Based on code
      copyright &copy;  2013 Raymond Camden
    </footer>
  </x-layout>

  <script>
    $(function() {
      console.log('domCom loaded (zepto.js!)');

      var deck = $('#mainDeck')[0];

      $('#homeLink').click(function(e) {
        e.preventDefault();
        deck.shuffleTo(0);
      });

      $('.deckLink').click(function(e) {
        e.preventDefault();
        var target = e.currentTarget.href.split("/").pop();
        deck.shuffleTo(target);
      });
    });
  </script>
</body>
</html>

FPAleksandr

FPAleksandr is a theme for FlatPress that I am porting from Mat Wiseman’s insanely awesome Aleksandr, originally made for Textpattern.

It’s available in my Bitbucket, and there’s also a FlatPress forum discussion.

I tried to remain as faithful as possible to the original, but some things were just not going to translate directly—the footers, for instance. The best solution I was able to arrive at for the footers takes away some of the elegance of the original, but given the limits of the platform I don’t think it’s all that bad.

There are still some bugs to squash and lipstick to be applied, but it’s basically usable as-is.