Category Archives: Fun

Tic-Tac-Toe Game Recreated as a HTML5 Web Component

Last night I finished my latest experiment in recreating the classic Tic-Tac-Toe game as a HTML5 Web Component. Here’s the result and a few details:

  • Two players take turns on the same computer. The next version will support one player vs. the computer.
  • Game lobby for selecting player names.
  • No images or JavaScript animations, CSS3 stuff only.
  • Small API.
  • Custom events, allowing the game to exchange data on the network or notify/interact by/with other components/controls on the page.
  • Localizable via inline JSON (check the code listing below).
  • Support for 3 board sizes.
  • Allowing multiple instances.

tic.tac.toe

The Markup

<acidjs-xticatactoe x="Martin" o="James"></acidjs-xticatactoe>
<acidjs-xticatactoe debug="true" size="large"></acidjs-xticatactoe>
<acidjs-xticatactoe size="small"></acidjs-xticatactoe>
<acidjs-xticatactoe debug="true">
    <code hidden>
    {
        "yourTurn": "du bist dran!",
        "startNewGame": "Neues Spiel starten",
        "start": "Start!",
        "playerXName": "Spieler X Name",
        "playerOName": "Spieler O Name",
        "choosePlayerXName": "Wählen Sie Name für Spieler X",
        "choosePlayerOName": "Wählen Sie Name für Spieler O",
        "youWin": "Sie gewinnen!",
        "draw": "Unentschieden :("
    }
    </code>
</acidjs-xticatactoe>

HTML Attributes

Apart from the standard HTML attributes (style, class, id, etc.), the tag also supports the following component-specific attributes:

  • x – Optional name for the “x” player. Default: "Tic".
  • o – Optional name for the “o” player. Default: "Tac".
  • debug – Optional. If set to true, the component will output console messages. Default Default: "false".
  • size – Optional size of the board. Default: "medium". Other possible values are "small" and "large".

JavaScript API

All standard JavaScript methods are supported, plus the component-specific:

  • init() – Initialize the game.
  • restart() – Restart the game (an alias of the init() method).
  • destroy() – Destroy the game and remove the board.

Events

The component publishes the following custom events, returning event and game-specific data. The distribution, which could be downloaded from this link contains these event bindings, so you can use your browser’s console to see what data is returned upon firing those events.

  • ttt:ready – Fired when game is ready to play.
  • ttt:win – Fired when game is a win.
  • ttt:draw – Fired when game is a draw.
  • ttt:playing – Fired upon user action.

Enjoy the weekend! If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

A Dev Epic

Remembering:

The glorious times of yore, when giant Java applets walked Devearth trampling down IE – the only browser known to Devkind.
The unforgettable past, when JavaScript believers were shunned, mocked and decried as non-developers.
The dark ages, when CSS sorcerers were called designers.

The romance of the hardest decision to take – to depend or not on the helping magical hand of the mysterious brothers Quirks Mode and Xml Prolog.

When listening to the call of the Async was considered heresy.
When XHTML was unthinkable…
When Web 2.0 was just an obscure idea (and remained such).

It’s gone now.

My New Home Studio in Malta

I recently left Germany relocating to the island of Malta, and a couple of weeks later I was finally able to deploy my new home studio with a new addition – an amazing custom-made 2 x 12 guitar cabinet with Celestion V30 speakers, custom built for me by Paul Gough of Zilla Cabs (cheers, Paul – for all the hard work, patience and killer quality).

Here are a few photos of the studio. Hopefully I find more time for playing the guitar in the teeth of my main job as a front-end developer. In case you are interested, here’s a detailed rundown of my rig, and on this page you’ll find a lot more photos and specs of my guitars and gear.

IMG_0487 IMG_0488 IMG_0489 IMG_0491 IMG_0492 IMG_0495 IMG_0498 IMG_0500 IMG_0501 IMG_0507 IMG_0511 IMG_0513 IMG_0514 IMG_0516 IMG_0517

Finally – thanks for reading this and greetings from sunny Malta!

Animated CSS3 Only Horizontal Accordion

This animated horizontal accordion was achieved without a single line of JavaScript, but only with CSS and minimalistic markup:

animated-css3-only-horizontal-accordion

The widget utilizes a form with a list of hidden radio buttons, CSS3 transitions, transforms and sibling selectors, and works with all modern browsers, including IE9 (excluding the slide animation).

Have fun and use for free, but do not forget to check the actual CSS and HTML, because they are pretty cool!

Related Posts and Links

Funny, but True Facts About Novice Developers

The blog post for today is my ramblings about common mistakes that novice web-developers make during their first steps in programming.

Just for fun. They:

  • Use W3Schools as a primary source for programming knowledge and do not question a single line of code they find there. (“W3C is a mystery world which I should learn to comply to“).
  • Scorn unobtrusive JavaScript.
  • The first book on web-development they ever read is a mid-90’s apocryphal issue claiming that JavaScript is not a programming language. A claim they embrace and use as an excuse not to learn JavaScript.
  • Find it amazing to overuse animated gifs that poorly anti-alias with the background of the page.
  • Extensively use frames and iframes without any obvious reason or for positioning purposes.
  • Play with the DOCTYPE of the page (“What will happen if I use XHTML3.1 for my website?“) or simply dismiss it.
  • Add an XML prologue before the DOCTYPE just because they saw someone else doing it.
  • Rely heavily on the miracle of the absolute positioning, and in a month realize the gritty truth that their work looks different and in most cases unrecognizably broken on different screen resolutions.
  • Put a 25 megabytes of a lousy <bgsound />, that is blocking the entire website while being downloaded.
  • Don’t pay even the slightest attention to the word “cascading” in CSS.
  • Overload the website with tons of crappy ready-made JavaScript found over the Internet (title bar and status bar scrollers, marquees, etc).
  • Use JavaScript in order to achieve effects that are usually achievable with CSS.
  • Put a greeting message in a JavaScript alert(“”) on page load, which scares even them each time the page is loaded.
  • Wonder why their PHP code is not executed when the page is open from the local file system. Later they find that they can run their very own web-server.
  • Use 10+ different fonts (5 of which are totally exotic and only they and other 10 guys are the only persons in the world who have them installed) and a color-scheme that is causing nausea and nosebleed to visitors.
  • Don’t test with other browsers except their default one and are sincerely surprised that their new website looks crappy in Opera.
  • Use vendor proprietary JavaScript or CSS without providing solution for other browsers.
  • Use <br /> and &nbsp; for layout purposes.
  • Use inline styles.
  • Force certain style rules with !important instead of making use of the cascade in their styles.
  • Implement feedback forms without a server processing script and wonder why they don’t work. Do you remember action=”mailto:john@johndoe.com”?
  • Consider semantics, usability, accessibility and valid code useless stuff that they shouldn’t care of.
  • Use deprecated tags like <center />.
  • Start learning PHP or other server-side language before HTML.
  • Hard-code everything that should not be hard-coded.
  • Don’t care about encoding.

Do these facts sound familiar? Do you remember making at least 5 of these mistakes as a novice programmer?