Game built with CSS and no JavaScript

Based on the previous carousel code I wrote, I had an idea on how a form could be used to drive the classic game of “Pick up Sticks”, so I spent a few hours seeing if it could be done:

CSS + HTML only carousel with keyboard controls

Had an idea on how to do a carousel without any JavaScript (I’m sure others have been here before). It was a fun challenge to use radio inputs and style the s*** out of the labels :)

Using Flexbox to dynamically resize columns

I’d been battling away trying to wrap my head around Flexbox, when I came across outdatedbrowser.com and thought, wow that UI could be done in a few lines of CSS. Here’s the quick mock up I made:

Animating a SVG image for the first time

Draw Inspiration logo

Last week I made the smallest website I’ve ever developed. Draw Inspiration is a single page website that allows users to print a random phrase for them draw. Phrases such as “icy pear”, “jealous butter” and “creepy popcorn”.

In making this website, part of the challenge was to keep it free of JavaScript but still make it more than a static page. One of the ways I wanted to do this was to animate the logo via CSS and SVG. It’s something Chris Wright covered at the recent CSSConf in Melbourne, so I gave myself 1 hour to get something up and running on this mini project.

This post covers a couple of the stumbling blocks I hit, and the (sometimes) dodgy solutions I took. There are many in depth videos and posts on this subject, by people much more knowledgable than me.

Creating the SVG image

Whilst I’d love to be able to write those path strings out, or create circles by hand, there’s no way I’m going to do that in real life. So I downloaded a copy of Inkscape. Inkscape is a bit like Freehand from 2001, and I love it! (I appologise if I’m doing Inkscape a disservice with that comparison, but I have fond memories of 2001 Freehand!).

Something to watch out for with Inkscape, by default the Inkscape SVG file includes a whole bunch of attributes that IE seems to get very grumpy about. I didn’t look too closely into this, but found that saving things out as a standard SVG made things run smoothly.

(Note: after writing this post I realised that Inkscape can often include transforms on the shapes you make. This can mess up your animations, especially if you’re relying on transforms. Whilst I’ve not been able to investigate this fully, I looked into why I didn’t have the problem with the Draw Inspiration logo and it was the grouping of the logo elements that removed the transforms.)

Embedding the SVG into the page

I wanted a workflow where I could save out the SVG file from Inkscape and have it automatically appear on the page, but I knew from Chris’ presentation that I’d need the SVG data embedded in the page (no background image or img tag). So I included it in my HTML file via PHP. Seemed like an easy solution, and got me through this project.

Resizing the SVG image with CSS

Secret ingredient to make the SVG image scale as you’d expect a standard img to is to include the “viewbox” attribute, without that your image will just sit in the corner taunting you.

Strange SVG height

I wanted to remove the SVG attributes for height and width, and hand that task over to the CSS. But I found problems with the height. It seemed as though the height was being defined by the view port of the browser. My work around for this was to use a parent element and position the SVG absolutely. Then pad the top of the container with a percentage that represented the aspect ratio I wanted. It’s a similar approach that’s quite popular with responsive video. I feel as though this was a bit of a cop out, and I overlooked something obvious. But again, it got me through.

Defining the animation

The CSS animation is defined as any CSS animation would be. For the logo I defined 2 animations; One moving the targeted element clockwise, and another moving it anti-clockwise. For easy assignment with the SVG I used Inkscape to create a group around “Draw” and “Inspiration” with a suitable ID on each, I then associated the IDs with the CSS.

When CSS animation isn’t available

The final stumbling block I had was with IE9. Whilst the CSS was associated with the SVG successfully, the animation didn’t work. My original setup with the CSS was to style the target elements with their initial state (e.g. make the opacity 0) then let the animation change those values.

There was a problem with this approach in IE9. IE9 understood the CSS but not the animation, and because of the initial state being set to 0 the logo vanished. If I set the CSS on the element to how I wanted the final state (opacity 1), then the element would flash for a split second as it waited for the animation to begin.

The solution to this was simple, define the element with how it should be displayed without any animation (opacity to 1) then set the “animation-fill-mode” to “both”. This allows the CSS properties of the animation to control the look of the element before and after the animation has played (e.g. animation starts at opacity 0 and finishes on opacity 1, so the element is set to opacity 0 before the animation begins).

A stand-alone example of the effect of animation-fill-mode

With the stars below, the desired effect here is to have a star that:

  • Delays the animation by half a second
  • Hides the star until the animation begins so it can fade in (no flash)
  • Leave the shape visible after the animation has finished

Animation keyframes

@keyframes fadeAndScale {
  0%   { 
    fill-opacity: 0;
    transform: scale(0.5);
  }
  66% {
    fill-opacity: 1;
    transform: scale(1.1);
  }
  100% {
    fill-opacity: 1;    
    transform: scale(0.5);    
  }
}

Star 1: Applying an animation with default settings

#star1 {
  animation: fadeAndScale 1s 0.5s 1;
}

This isn’t ideal as there’s a flash at the beginning of the animation. This is because we can see the non-animated CSS being applied before the animation begins.

Star 2: Specifying opacity as 0 on the CSS selector for the star

#star2 {
  animation: fadeAndScale 1s 0.5s 1;	
  fill-opacity: 0;
}

This isn’t ideal either, whilst there is no flash, the star disappears at the end so it doesn’t fulfil our requirements.

Star 3: Setting animation-fill-mode to both

#star3 {
  animation: fadeAndScale 1s 0.5s 1;
  animation-fill-mode: both;
}

Perfect, the star fades in then remains after the animation is finished. Be sure to put the animation-fill-mode after the animation though, some browsers will only obey the rule if it’s done in the correct order.

Ready to go

These steps got me through putting a SVG animation in place, with a graceful fallback to IE. Some of these steps I was happy with, others I feel were hacky work around from my lack of experience. I hope you can build on this and let me know of your approaches to make things even smoother.

CSS Keyframe animation example

An experiment using CSS keyframes, -webkit-mask and a little bit of easing on the keyframes.

The browser you’re using may affect what you see. For example, Firefox doesn’t support the masking effect that’s used.

Take a look at how it’s built for your self.

Setting up a CRM with a baby, a puppy and 48 hours

Illustration showing Deb working whilst concentrating on many thing.

I enjoy being a front-end developer, it exposes me to lots of other roles and gives me the chance to see what other people do from day to day. Eventually those roles start to rub off a bit and sometimes, given the right opportunity, I get to break away from being a front-end developer completely. Here is a story about how what started out as a small favour for the family ended up teaching me a lot about getting things done and MVP.

A growing business

My sister runs a fantastic small business hiring out VW Camper Vans (Kombi’s) for events, mainly weddings. She runs this business with her partner and between the two of them they touch every part of the business. This business is going from strength to strength, and with that comes teething troubles and processes that can’t cope with that growth. This is where an opportunity for me to contribute arose, and I was able to play the role of business analyst; overhauling the way the business collects leads and follows those leads through (ideally to becoming a satisfied paying customer).

The business is run in and around a very busy household; a puppy running around, kids coming and going with their friends in tow, plus a new born baby. Every minute spent on the business is precious, every minute must be focussed on making the business grow. For my sister, a lot of time goes in generating and chasing up leads.

Old processes that need updating

To begin with it was enough to have leads email the business with some key details then a quote could be created around that information, the email correspondence would be filed away and that was it. If people came back for more information, the old emails would be retrieved and followed up on. If someone became a paid customer, then the information would be cut and pasted into an excel document to allow for easier management later. This all worked well when their was only a few quotes a week. But by early 2014 this process was starting to feel the strain, there were more quotes needed, more Kombi’s to account for on the fleet, more people wanting more services. There were people wanting many Kombis, people cancelling and people waiting in the wings in case a Kombi became free. Juggling all this information was starting to overwhelm, and we decided to look into a better way.

The first email I received was “Can I get a database set up so I can keep track of all the quotes I’m being asked to do”. The initial idea was that we extend off the WordPress installation already in place and collect the data from the quote form. But after a few more emails between my sister and I, it was apparent that if we did that it would only get her through the next couple of months at best.

She wanted to use the information in more creative ways. Not simply respond to people, but to email them if there was late availability of a vehicle, to pull reporting on how many people had used a particular kombi, to automatically create run sheets for drivers so they know where and when to be. To try and create something like this would take a lot of time. So we stopped, and took a step back from it all, and I packed my bag and stayed for a few days to watch what was happening ‘ on the ground’.

As I was only a pretend business analyst (or PM or whatever it was) – we kind of winged it. I got her to explain what she wanted, sat with her as she went through her processes. Bcc’ing emails to keep records, cutting and pasting, filing emails into folders, saving excel documents into folders which related to the dates. After a while it was obvious that she wasn’t occupying one role, she was occupying many. And that as the business grows it’s entirely possible that those roles will be given to specific individuals. After observing the day to day processes, and watching the interruptions (babies, puppies and kids), how leads can come in (not just from the web but on the phone too) we defined what those roles were and created stories for those roles. eg “As a sales person I want to know how many people haven’t responded to me 2 weeks after I’ve sent them a quote.” This process was fun, and made it easier for us to measure our success later in the project, if all the roles and all the stories are fulfilled then we have been successful.

Choosing the right software

With all the information that we had gathered, we felt that the solution was to look into using a CRM. To cut a long story short we chose Zoho. Alternatives to Zoho were either too overpowered, too expensive or simply had a user interface that was overly complex.

Setting up

We wrestled for some time over how to use the features available in Zoho to reflect what was going on in the business. Should we use the “events” to represent a wedding? should we create “products” that represent Kombis? Eventually we settled on keeping it simple and using the software to just capture data via basic fields, this makes is very easy to query the data later. Each lead can be thought of as an event, and within each lead we store all the required data. e.g. when it starts, what vehicles are required, names of key people etc.

Choosing the right fields

There was already a form in place emailing information from the company website, this was a great starting point to put together the fields in Zoho. The original form was replicated in Zoho for the “leads”. But this information wasn’t sufficient to successfully organise a booking. As a follow up for people making an enquiry, they were emailed a series of additional questions to ensure the quote was accurate (eg whether there were additional venues to visit). The information requested via the email was converted into the fields used under the “contact”, on top of the fields already defined by the lead. This accumulation of data as a lead becomes a contact/customer was already working well under the old system and it complimented the Zoho set up well.

There were a few hiccups in setting up though, the data type for a form field is set once you create it, so you can’t set something up as a text field then later convert it to a “pick list”, and you can’t change a “pick list” to a “multiple pick list”. Whilst this is frustrating, you can see why, changing to different data types could lead to data being lost. When we found that we wanted to change some data types (eg changing the event date from date and time to just date), we created new fields and flagged the original as being phased out, then we moved all the data from the old field to the new one.

To ensure everything was working as we expected, we ran through a few scenarios using the forms available in the Zoho admin interface, and pretended to take bookings from people on the phone. The workflow seems to be working well, and this also gave us the opportunity to refine the views to better help my sister find data quickly.

Creating web forms and Integrating with WordPress

With the process in place we could finally look to integrate the system with the company’s WordPress website. There’s heaps of plugins available that allow you to make forms in WordPress, and some of them include Zoho integration, but in every case we found flaws with them. The main flaw running through all plugins was how frustrating it is to set up a web form in Zoho, only to have to replicate it in WordPress. We tried a few ways out to minimise double ups in workflow, but ultimately decided that anything to do with capturing leads should be handled in Zoho, and that includes setting up the web form.

In making this decision we had to compromise on a few things, Zoho’s form creator doesn’t give you much choice over the HTML field type you get. For example you may want to use radio inputs for the state because you only have 3, we ended up settling on what Zoho would give us in order to keep site updates as simple as possible. For the state example we ended up using a select input.

Even with this approach there were a few teething troubles such as: forms getting mangled in WordPress when trying to insert it directly into a page, or having many forms running on the site with differences in HTML code. Eventually we implemented the form via a shortcode that was easy to modify, this means the form is managed from one place in wordpress. This process continues to work well and makes the process of updating the form fairly brainless, just cut and paste the form code from Zoho to the shortcode in WordPress.

More time to use more powerful tools

Since the original 48 hour exercise we’ve refined a few areas of the setup, mainly around tweaking fields and creating views for the data, this can all be handled by my sister and she doesn’t have to wait for me to be available to make changes for her.

Everytime I see her she likes to say how much she loves the software, and how much it has changed her life. I don’t think I’ve ever seen a piece of software help someone as much as this, and it’s immensely rewarding to think that I was able to help her get up and running, and to know that the power of the software is completely in her control.

What makes good front-end code?

Recently I started teaching the Front-end Web Development course at General Assembly. It’s the first time I’ve turned my hand to teaching, and it’s hugely challenging and great fun.

Even though I’ve been making websites for 17 years, the students often ask me things that I’ve never thought about, or things which I take for granted. For example “Can the head tag be placed after the body tag?”.

Another great question was “what makes good front-end code?”. I think this question is critical for newcomers, especially those on a course as they want to know what I’m looking for when they hand in their homework.

Whilst the following criteria can be extended on, there’s certainly nothing less than these points to hit. If you remove one or two you can still make a website, but are you really making it as good as it could be?

  • Is the code validated?
  • Does it fulfil the design?
  • Does it look good in different browsers?
  • Is the HTML semantic?
  • Is the page accessible?
  • Will the design remain consistent if I move parts of the HTML to other parts of the page?
  • Does it work with many different inputs?
  • Does it work on many different screen sizes?
  • Is the code easily read by others?
  • Are you proud of what you’ve created?

(BTW I should say that I don’t always hit all these criteria myself, but don’t tell anyone).

The non-breaking space is your friend

Do you remember the non-breaking space? They’ve been trying to help you out, but you’ve been ignoring them. You owe them an apology.

I’m guilty of this just as much as you, and I’ll show you why.

This is my sentence that goes
over three lines this is the final
word.

How much does it suck that the final word is on a new line? Some of you will think “meh”, but your friends will see this and some of them will get angry. Others will think, right I’m going to put a <br> in there and make sure that word is never on it’s own.

Well that’s just great until
this is the
final word

Damn, I left a big hole in my paragraph.

With responsive layouts this can happen a lot as the text reflows within the flexible layout.

But there is a simple solution. You can use a non-breaking space (&nbsp;) between the two final words, and the final word will never be lonely.

Calm above the water, and paddling like hell underneath

This week I took another step in overcoming my greatest fear, by presenting at the Respond 2014 conference in Sydney. It was only 15 minutes, but those 15 minutes have taken decades to prepare for.

There are two moments in my life where I remember, with vivid clarity, not being able to speak in public. The first was a presentation about a musical instrument, any musical instrument, when I was around 12 years old. I was so panic stricken that on the big day I went and hid in the local park until it was over. I spent just under one hour watching the clock tick down whilst sheltering under a slide with rain pouring around me. The second time was much later in life, over 30 this time, and being asked to present about a project my team had just completed at work. I was desperate to get this right, I rehearsed and rehearsed but I couldn’t quite get it right. Then, when asking my girlfriend to help me practice (she knew very little of what I did in my job), she took one read through of my notes and delivered the presentation with timing and style that I could only dream of. I sent a message to the mate I was supposed to present with and told him I was out. I knew I wasn’t ready.

“According to most studies, people’s number one fear is public speaking, number 2 is death… now this means to the average person if you go to a funeral, you’re better off in the casket than giving the eulogy.” Jerry Seinfeld

In 2013 my new years resolution was to overcome my fear of public speaking, but given that I don’t know if I’m a straight up introvert or a shy extrovert this was going to be a challenge. But I felt that the alternative was less desirable, to continue to watch boring presentations about the subjects I love.

The exact moment I felt this is clear, it was at Web Directions South ‘09 in a presentation called “Engaging user interaction with jQuery” delivered by Earle Castledine. His presentation showed me that you could entertain an audience whilst educating them, having fun with the subject is equally as important as showing how to do things.

So where do you begin with conquering this fear? Lots of people recommended things like toast masters, to which I would nod my head to and say “that’s a great idea” but behind the scenes I’m thinking that sounds too scary to me (shy) plus I have an image in my mind of Homer Simpson at the stone cutters. I felt that it was important to figure this out for myself, as the fear was mine. So I started in the place that was most obvious, watching other people present, then asking them how they did it.

In the last five years I’ve watched A LOT of people present, and before this time I thought it was black and white: you either can or you can’t. But it turns out it’s a bit more complicated than that, there are those who can but shouldn’t, there are those that can and don’t know when to stop, and others who can’t but some how do. What all of these people will tell you (well apart from the can but shouldn’t crowd) is that the biggest secret is that the audience want you to do well.

It’s amazing how clear each of my memories is for each step taken towards presenting at Respond 2014. I can remember delivering my first presentation at News Digital Media about a project my team had delivered. I can close my eyes and take myself back there, waiting for Paul Colgan and David Penberthy to stop waffling on and hurry up and move to my part of the meeting, how with each second they spoke another bead of sweat rolled down my forehead. How there was a video camera pointing at me and I wasn’t sure whether it was on. How I didn’t even know if this audience cared what some nerd had to say. My time finally came, I made a joke about the video camera, the audience laughed and I was fine and they did care. Afterwards many people commented on how well I came across, who knew that Lewis was so funny?

I went on from this to deliver quite a few small presentations at News, I even went on to deliver one public presentation with Ben Buchanan about our work implementing and applying standards (my presenter notes failed but I still managed to do it). But eventually I left News, and those opportunities went away, I found that the fear I had was still there and it was stopping me once more. For 12 months I did very little in the way of public speaking, I worked at a small agency and I tried to put a little sparkle into a couple of meetings, but it just wasn’t happening. That job came and went.

The end of 2012 came and I moved to a job at Bigcommerce. Within the first couple of weeks they held their own meetup, I was really excited (I’d become a total meetup nerd by this point). I was going to see what my work mates were like when they got up and spoke about their subjects, I could have a field day with picking apart their presentations, then asking them how they did it. They were great, each and everyone of them. But, and I think I’m ok in saying this with any BC people reading, the night sucked big time! No MC, poor seating, no MC, bad location, no MC, bad promotion of the event, did I mention there was no MC? What, what? The next day I sent an email to say “do you need some help with the meetup?”. They did, and for the next 12 months it became one of the most rewarding parts of my role, it also forced me to stand up in front of everyone at Bigcommerce on a regular basis. One of the most surreal things about this whole period is that people think I’m a natural public speaker; that still blows my mind.

Now its 2013 and this is the year of the public speaking resolution. It was filled with good ones (being able to take the p*** out of every department at Bigcommerce and still get a round of applause) and bad ones (completely freezing in front of the crowd and having to stop). But if I were to single out one thing during this time as being an example of me fulfilling my new years resolution, it’s the creation of SydCSS with my good friend Fiona Chan.

Photo taken from the Feb SydCSS meet up

Fiona laughs at all my jokes

I could, and do, prattle on about how much I love that meetup, but in terms of conquering my speaking fears it has been the place I can draw on to give me confidence. Fiona and I place fun and a friendly atmosphere as the important things about what we do, and with that I can talk to the audience with barely any of those doubting voices creeping in (they are still there though, just very quiet).

Now on to Respond 2014, I think I did ok, my presentation was designed to highlight a few existing ideas and show people that it’s not as complex as they may think. But for me personally it was about whether I could deliver a message. As the clock ticked and the moment to present got closer many things raced through my mind: being that boy hiding in the park, having backed out of presenting before and letting a mate down, freezing in front of people. I wandered around the crowd as the day went on, people spoke to me and distracted me, asking me what I was talking about and told me it sounded interesting. Then the bad thoughts started to go away and I remembered how I felt when people laughed at my camera joke, how I managed to keep going when my presenter notes failed, and how people had said that they’d learned something from what I’d said.

It’s three minutes to go before presenting now, the MC John Allsopp is about to stand up and introduce me. He’s looking for me; I’m sitting in the audience. I shouldn’t be sitting in the audience; I move to the front of the room. The lights go down, my slide deck appears, 10 seconds now. My final thoughts as I take a sip of water is that Davina, my girl, enjoyed my presentation the night before if she liked it, it must be OK. And I deliver it.

How the HTML5 game “Ready to Roll” was built for iPhone

In mid February I successfully got my second game, Ready To Roll, into the App Store. The game is a little bit like a cross between a marble labyrinth game and a puzzle game, I think this blend makes it a little different to other games available.

r2r-2

In this post, I’ll show you what I used to create the game and how I managed to get an HTML5 game performing like a native one.

Choosing the right software*

With all other games I’ve made, I’ve followed a model that uses one level that gets progressively harder over time. This approach is great for producing game quickly, but with Ready to Roll I wanted to use levels to make the game more difficult, in the same way as games like Angry Birds does.

The design of the game is very minimalist, my aim being to keep it uncluttered so the player can concentrate on solving what to do. Keeping things to a minimum also helped with creating the levels quickly.

One problem with games that have levels is that making levels can be very time consuming. To allow me to dedicate more time to the idea behind each of the levels (rather than code) I used Construct 2 to build the game, giving me a great way to create levels and test them very quickly.

Screen shot of a level being edited in Construct 2

Construct 2 is a great piece of software, and I’d encourage you to give it a try if you’re interested in building HTML5 games. You can use it with no programming skills, or you can flex your developer muscles and write extensions for it using JavaScript.

It also gives you heaps of export options, such as Chrome Web Store, PhoneGap and Windows 8.

Screen shot of the export options available in Construct 2

* might not be right for you

Construct 2 on Mac

Unfortunately Construct 2 is only available on Windows, and I use a Macbook Air. That hasn’t stopped me from using it though, I’ve found that running Parallels with Windows 8 works really well, and I can use Construct 2 almost as if it’s an application running on OSX.

Screen shot of Construct 2 in the OSX dock

Game performance

The big problem with creating a game for the iPhone using HTML5, is performance. With iOS6 and the latest hardware, you can run your games straight off the web, which is fantastic. But for older phones, the performance struggles. On an iPhone 4 “Ready to Roll” was unplayable.

To get around this I decided to give CocoonJS a whirl. CocoonJS’s claim to fame is that it will boost the performance of Canvas by 1000% (yes that’s 3 zeros, not a typo). I’m not sure if this is true, but what I can say is that it works wonderfully, giving me at least 40 fps on iPhone 4, and a rock solid 60 fps on anything above. I also tried the game out on a low powered Android phone (Samsung Galaxy Ace), and the performance was on par with the iPhone 4.

Testing

I ended up using the following steps to test the game as I built it:

  • (Did this a lot) Preview in Chrome via Construct 2’s “Run Layout” feature
  • (Did this a bit) Preview the game on my tablet and phone by exporting the game running it from my local version of Apache (BTW Construct 2 also includes the ability to view the layout over wifi)
  • (Did this a bit) Export the game for “CocoonJS”, host the associated zip file on a web server, and use the CocoonJS launcher app to preview the final game using CocoonJS

Final release

Prepping the game for release was fairly straightforward, the CocoonJS cloud compiler allows you to upload the file exported from Construct 2; after a few minutes it will email you back to say that your project is ready. It gives you back an Xcode project which you will need to use to associate your distribution certificate from Apple, once you’ve done this you follow the typical steps to get your app to Apple for review.

One thing I didn’t realise when releasing the game was that Apple changed the rules on uploading screenshots for an App. When you start the process of putting your app in for review you can setup descriptions, screenshots etc. Whilst it’s in review you can edit these things, but once you’re approved you can no longer change the screenshots. To change the screenshots, you will need to resubmit your app. I have yet to do this, so my app only has one screenshot – whoops…

Final approval from Apple came through in under a week.

Now go and download it and have fun.

Links:
https://itunes.apple.com/au/app/ready-to-roll/id599403480?mt=8
https://cocoonjsservice.ludei.com/
https://www.scirra.com/
http://www.ludei.com/