Comments None

Shannon Ware Professional Avatar

Things you should know about Shannon Ware:

  • I made a website
  • I wrote a kanji
  • I caught a fish
  • I ate a whale
  • I made a game
  • I debugged a program
  • I wrote an article
  • I designed a character
  • I signed a petition
  • I voted

Since graduating university in 1996 I have mostly worked as a Japanese technical translation contractor, occasionally in one company or another either as a Japanese language specialist or as a technical specialist, and even more occasionally as a web development contractor. While I continue to accept “Japanese translation assignments“http://www.proz.com/translator/1187818, it has become pretty clear that translation will provide me neither a secure retirement, or the level of creativity required to not mind an insecure retirement.

I have taken the decision to develop my webment career, with the intention of feeding the kids, having something to show for all my work, being ready for the next big thing, and perchance even contributing to the next big thing.

Skill to pay the Bills

Here are the technologies I am actively involved in:

Categories ,

Comments None

So to summarize, since around 2012 a couple of really important things have happened on the Internet.

First, new standards for HTML and CSS have been released. These new standards have a ton of great features in-and-of-themselves, but perhaps more importantly, they allow the power that already exists within JavaScript and its descendant jQuery to be more fully exploited.

Second, these new standards HTML5 and CSS3 have been more or less fully and correctly implemented by the major browser vendors: Mozilla, Apple, Microsoft, Google, Opera. In the past, some features were implemented by most browsers, but almost no feature was implemented by every browser, and if it was, it was not implemented in the same way. (The CSS mother ship refers to this as ‘browser compatibility’) This meant that websites for the general public were necessarily full of ‘hacks’ — workarounds to get the thing to behave the way intended. Now, with these new standards, and their almost universal adoption, fewer hacks are required to make real-world web sites, even when visitors to a site are not using the most up-to-date browser.

Estelle Weyl summarizes the way these new standards have impacted real-world web development in her lecture on HTML5 Web Forms . She repeatedly states how and where hacks that were required to achieve a certain features in the past are no longer required, because the features are now apart of the standard.


The latest standard for CSS is completely off the hook. Never mind reading the official standard; look at what people are doing with it.

I suppose if I had to explain to someone off the top of my head what is so great — or even useful — about CSS3, I would say rounded corners on boxes. ‘Rounded corners on boxes? Big deal.’ Well, it was a big deal. Under HTML4/CSS2.1, boxes with rounded corners usually involved a 9 cell table, with very thin top, bottom and sides, very tiny corners, and JPEG or PNG images to fill those 8 outer table cells with the appearance of a rectangle with rounded corners. Now, it only takes one line in your stylesheet. (Technically, two, because Mozilla browsers need a unique syntax, but let’s not sweat the small stuff.)

CSS Shapes

Here is a list of about 41 shapes drawn entirely in CSS. Think of it as a new-fangled way to lay a foundation that allows you to build buildings ten miles high.


You will see examples of how to draw the infinity symbol, a magnifying glass, a pac man, all my manipulating a DIV border with CSS. As well, an important feature of HTML5 demonstrated on this page is that the ‘example’ CSS code is editable, and the shape draw updates immediately (you cannot add new attributes, but you can change the values of the existing attributes). The example code displayed to the page visitor is the same code that the page uses to render itself. How nifty does it get?

Along these lines is also the example page from Chris Pattle, where some of the major Simpsons characters are drawn entirely with CSS. (My daughter Zoe says, ‘this guy must have a lot of free time.’ To which I responded, ‘Yes, well…’)


Navicon Transformicons

“…and the battle to save the Internet…”

Sara Soueidan Navicon Transformicons

Sara Soueidan is a wizard in the MIT sense of the word. Are your icons not programmatically drawn and animated. Well let’s hope this heralds the end of your incessant mansplaining. Sit back and watch these icons rock.



I had been waiting for programmable CSS for years. It snuck up on me and was wearing a disguise, called SASS. Everything you need to get started with SASS is right here, including how to modularize your CSS for reusability.


(LESS is the other major CSS pre-processor that I have run across.)

Sass requires Ruby, but there are many applications available which encapsulate Ruby for you. Now at the end of the day Sass is compiled to properly formatted CSS3, which means that it is a nice-to-have rather than a requirement. Still, this emphasizes the fact that the standard is good; new tools help you get to the goal defined by the standard faster; they do not lead you to a different goal.


Comments None

I am presenting this information — not because you can’t do the Google search yourself — but as a reminder of the Google search which I did.

Wander World Web Animation

I have been getting back into web development. Great. There have been a couple of big surprises along the way. 1) The technologies which were in the bag seat when I first started web development some 14 years ago are now in the drivers seat, 2) For the purpose of enriching animations, Flash seems to have been relegated to streaming video players like YouTube and Vimeo. 3) With regard to number 1 above, the ecological niche previously occupied by Flash has been filled by the fierce and friendly battle royalé of HTML5, CSS3, and jQuery/JavaScript.

“Flash died in 2007, and everyone’s been catching up since then. It’d long since been the worst part of the web” [1]

Todays Big Players

That open technologies would prevail on the web is mainly thanks to the support for open standards by Google (Android), Apple (iOS) and others. It is also do to the ascendancy of the mobile market place: if it doesn’t run on a mobile device, it is not mainstream (anymore).

Industry Best Practices

The AWWWARDS for Animated Websites showcases some of the best work available on the web today. I will particularly recommend the WanderWorld example. Scrolling down drives the animation. Another thing that comes out here is the pre-eminence of ‘flat’ animation these days.


In looking for a tool to help me produce web animations for the game that I am working on, I have been looking for actual animations which run on my Android phone. Sadly, I have found many more screenshots of development tool environments than actual finished products deployed on the web. This is especially true for Apple’s Hype 2

So what has caught my eye, and now has my attention, is Mixeek “Free css3 and html5 [online] animation tool”.

[1] “(external) http://mac.appstorm.net/reviews/web-dev-review/hype-2-the-simplest-way-to-make-web-animation/“http://mac.appstorm.net/reviews/web-dev-review/hype-2-the-simplest-way-to-make-web-animation/


Comments None

About This Game

In the distant future, air is sometimes free. SpaceTrader is a simple strategy game based on trading. To win, you simply buy low, and sell high. Retire early by making 1m credits.

If anything shoots at you, you are welcome to shoot back at it. Because you gatta do what you gatta do.

SpaceTrader is a chill-out strategy game based on the trading of commodities in a fictional universe. Navigate your space ship between space ports, avoid the dangers of space, and generally get rich quick.

Web Demo (12MB)

You can play the free version of this game in your web browser. Installation of the Unity3D plugin is required, which is free and easy to install. Click on this link to play the game.

Download Demo (22MB)

You can download the free version of this game to play on your PC. No plugin is required.

For comments and suggestions, please email Shannon Ware


Comments None

About This Game

Kokorozashi is a memory game.

Turn wooden tiles over one at a time to reveal the pattern on the other side.

Match all of the pairs of tiles to win.

Web Demo (2MB)

You can play the free version of this game in your web browser. Installation of the Unity3D plugin is required, which is free and easy to install. Click on this link to play the game.

Download Demo (9MB)

You can download the free version of this game to play on your PC. No plugin is required.

For comments and suggestions, please email Shannon Ware


← Older Newer →