For my latest project I wanted to look at the recent..ish full-stack technologies that I haven’t had the opportunity to use in my full time job. Next.js 13.4+ with its new router app pattern, Tailwind, and Vercel’s new storage API. I needed a project that would engage me and I figured a 3D animation editor would be ideal. I studied animation at university but haven’t been able to stretch that muscle for quite a while. Would it be possible to build a 3D animation tool in the browser that’s comparable to the early animation tools I used just over twenty years ago… Where did the time go!!!
The go to library here was Three.js and the trick would be to use a nested object approach, so when for example a shoulder moves the upper arm the forearm and the hand all move too. It’s a huge time saver when animating. I’d seen the react-flow library and figured that would be a good UI solution for describing the animation hierarchy. A bit of customisation and I had a convenient way to create nodes and enter positional and rotational info. Once an animation was added I could then save that to a postgres database.
Ok there was a lot more to it but essentially that’s the big picture. Here’s a screenshot of the editor.
Have started work on a new app for building simple 3D animations. This is the first result. It proves the concept so i’m planning to clean it up and make it into a fully working editor.
I’ve just completed a new personal project. A “Choose your own adventure” style game. I’ve built adventure games before, but this time I wanted more control over the story, guiding the player through a narrative as opposed to a more sandboxed world. From experience I know that editing these type of games is a lot harder and more time consuming than writing a player, so to improve the workflow I decided to build a fully featured editor. I settled on using NextJS connected to a mongoDB database. Hosted by vercel the editor builds automatically when I push to github.
The story point editor looks like this.
And the story can be tested online in preview mode.
Once I’m happy with the game I need a way to distribute. I chose to build the player using Dart and Flutter. I can embed any game json in the app and publish as a native app to IOS, Android, Windows, MacOS and Linux. Web support is also available via the flutter beta channel and has been helpful for sharing the game and gaining feedback from play testers.
I recently came across a talk by Joel Califa called Full Stack Anxiety, its a fairly familiar feeling for anyone who works as a Developer or a Designer or both!
Here’s some of what you need to know if you want to be a Web Unicorn :
Add to all that the pace of change where skill stacks need to be refreshed at least every three years and you soon get to a point where your knowledge is becoming outdated as fast as you can learn the next new thing.
Remember this article from 2016? Already it feels dated!
But if it’s only the last three years of experience that are relevant we would all be juniors forever!
Luckily not everything changes so fast, Graphic and UI principles evolve slowly, the science of software architecture builds slowly. UX is always going to be about research, these are the core skills that matter. These are the skills that take you to middle-weight then senior.
Often when looking for a job I see an overwhelming list of requirements. There’s a small chance this company is using all the same tools, languages, frameworks and processes as you’re currently using but it’s unlikely. I believe the question they should be asking is “What have you learned so far?”
If you’ve learned to use React then you can learn Angular, if you’ve learned CSS you can learn styles in Flutter, if you’ve learned OO then you can learn functional style. It’s a shame that so many hiring managers use a shopping list instead of looking deeper.
Companies that I want to work for are the ones who recognise transferable skills, are the ones who are willing to invest in you and have the patience to get you through those first few weeks when you’re learning their design system, languages, frameworks, code styles, source control, TDD, CI/CD and project management processes.
Once you accept there will always be “The new thing” and you can’t know everything up-front and that everyone is in the same boat, and that the specifics don’t really matter, once you understand that it’s the transferable skills that matter then the anxiety may just start to disappear. If you try to keep up with everything then you risk burn-out because you can’t possibly do that!, there will be no time for getting outdoors, spending time with family and friends and just being.
Find the balance, learn strategically and it will work out, you may then just be able to cope with the new Job where all you have to learn is the legacy 100,000 lines, 200 class, 15 levels of inheritance codebase that’s undocumented and by-the-way the person that wrote it just left last week.
I began with teaching the ML Kit the difference between Chickens and Squirrels, it turned out to be very simple, just as my previous version using React and Clarifai had been, however at the moment AutoML is very new and doesn’t yet have Flutter extensions ( could change any day now ), so I changed tack and tried out one of their standard libraries instead.
Firebase ML will create an on-device API for you, it was a surprise to me, you just grab a package from your Firebase project and just import that into your App.
This is a big improvement on the clarifai app in that being local it happily works offline, there’s no usage cap to worry about, just install it on your phone and it will work anywhere anytime.
The initial Squirrel Chicken testing.
And a screenshot from the App. Pretty tricky for the AI this one, the generalised version can’t tell that it’s a Red Panda, I can forgive that, many people wouldn’t know. But I think it’s hedging its bets a bit by saying 82% dog and 64% cat – obviously can’t be both, probably it’s saying it has 82% dog characteristics and 64% cat characteristics. Think I would discard any results with less than 90% certainty but I need to test that.
Back in 2013, I thought Dart would get traction on the web, Google had added a VM to chrome and I was looking to make the move from Flex and ActionScript 3, I experimented and created a couple of small projects, the first was a ball bouncing demo and the second was a simple Slot reels demo.
I preferred type-checked OOP and at the time JavaScript seemed like a step backwards. ( We were still several years away from Babel and even further from TypeScript, neither were on the radar at that time), Dart seemed like an exciting new option for me.
The flaw in Google’s plan and subsequently mine was that Chrome only had about 30% browser share and it soon became apparent that the other browser vendors had no intention of integrating the Dart VM into their products and that was enough to kill it, sometime later Google dropped the VM and it seemed Dart was dead.
Skip forward to 2019 and I’m fully in on React and TypeScript, although I now develop in a more functional way, I have a component architecture again and TypeScript and Babel have given me a great programming language.
In the meantime I had developed a couple of Apps using React Native but the developer experience wasn’t great, I’m used to hot-reloading and React Native and Expo felt slow and clunky (This was back in late 2017, since then there’s been several improvements including Fast Refresh – so I will take a fresh look soon ), and there were stories of development teams who had tried and abandoned their efforts and returned to native languages.
Flutter uses Dart as its language and has a component architecture.
In many ways, Flutter feels like Apache Flex circa 2005 but this time you don’t need a plugin! Turns out I’m not alone and was very happy to see one of my old flash heroes Grant Skinner take the stage and present some great UX work.
It even has tools which remind me of Flash for example Rive.
Not only can you write once for Android and iOS but now there is beta support for web and alpha support for mac, with the ambition of deployment to any OS! including Fuschia OS.
The write once run anywhere idea is not new, but the idea of compiling everything to native and not using some sort of bridge/wrapper/plugin is ( ignoring game engines such as Unity – license fees might be payable ).
Google is calling this Ambient Computing and if it works then the future may mean that it doesn’t really matter what OS you use, you can use any Flutter app.
I’ve just started my first project, to rebuild Bug Bounce, it’s probably not the best way to make a game ( I’d choose Unity for a serious project ), but it is a great way to learn a new language and framework, data, graphics, UI etc.
[Update 25/September/2019] Refactored everything to Functional Components and made Hook based. Have added Jest Testing, and optimised with lighthouse.
[Update 16/March/2019] Crossed my mind that the game engine might be more interesting if it could add some random elements. Maybe take it in a direction where it could run games similar to those from the series of Fighting Fantasy adventure books . I’m not sure if it will but I have added a dice roll to the game engine and also dealt with 10 months of technical debt so I’ve bumped up to the latest react version, migrated from CSS to styled-components and moved from JavaScript to TypeScript.
I decided to rebuild the Interactive Fiction Player using React and Redux. It still uses the same data structure so the same games can be played in the Angular version.
Just a quick version of Boiled Spots, first did this with Flash, then Dart with Canvas, now it’s browser safe to do this with SVG and requestAnimationFrame and React. This uses React Fiber so should be smooth everywhere.
I’ve just started looking for a new Job and after a few calls from the Agencies, there’s one question which I’m finding hard to answer.
How many years of JavaScript experience do you have?
I think the question should really be.
How long have you been using EcmaScript and which versions?
So whilst I have been using JavaScript for 17 years and I could just say that, in reality it’s changed a lot in that time and then for much of that time it wasn’t something I was using full time.
For years I was using Actionscript 3, you might know that it’s an ES4 language, which counter-intuitively has much more in common with ES6 aka ES2015 aka Harmony, Typescript and Google Dart than it does with ES5!
But how could ES4 have those features if they weren’t in ES5? Well ES4 was ambitious it added Classes and more to JavaScript and it got bogged down politically. In 2007 it was abandoned and the standards committee went for a less radical update, however, Adobe had the freedom to add whatever they liked to their own VM in the Flash Player and they went ahead, it’s only relatively recently that it’s features are appearing in the browsers thanks to ES6 and Babel.
And then just to confuse the agencies, even more, there’s TypeScript, which some refer to as ES2016+ or ES+! But try explaining that to a recruiter and most would just glaze over.
Brendan Eich’s feelings about the abandonment of ES4, worth reading the comments if you’re curious about why it happened, but a lot of suspicion around it being a political move by Microsoft to hold the web back. https://brendaneich.com/2007/11/es4-news-and-opinion/
Ever wondered if you look more like a Chicken or are you a little more Squirrely? Can’t say I had until I came across Clarifai whilst thinking about a new ReactJS project.
Turns out it was incredibly easy to build an App to do this. Clarifai has a super simple dashboard where you can train it to identify almost anything. In fact I just had to show it three pictures of Chickens and three of Squirrels and it was pretty much there. I grabbed my free API which gives me a limited number of requests, created a single page React app, added some Progressive Web powers so I can run it App like on my phone and I was there.
I’m sorry this isn’t public as I can’t afford the unlimited request licence but here are the results.
Pretty definitively it knows that’s a Squirrel.
And clearly it knows that’s a Chicken…. but what happens if you give it a bigger challenge , say a ferret!
Seems about right to me. And of course the inevitable and something I’ve been trying out on any of my friends who are curious.
This all got me thinking that creating my own Text based Adventure game would be an excellent project for learning Angular 2+ and Typescript, so I started work on “The Shivers”. It’s a short game, but has enough in it to encompass several core Angular / Typescript concepts, manipulating dom, data and incorporating Dependency Injection, Services, Components and Directives. The game is entirely driven from a model so multiple games can be built without needing to touch the code. At the core of this is what I’ve started to call a decision engine, here’s a snippet.
{
"action":"Insert mouthpiece into the horn",
"conditions":{"areCarrying":["HUNTING_HORN","MUSICAL_MOUTH_PIECE"]},
"results":{"message":"You now have a playable hunting horn.","take":["PLAYABLE_HORN"],"destroys":["MUSICAL_MOUTH_PIECE","HUNTING_HORN"]}
}
Actions are the commands available to the user as i didn’t want the annoying verb noun guessing of some adventure games.
There are several condition types, such as are carrying, room contains, location and have talors( Money ).
The results will always have a message and will perform a number of result actions:
message, change score, change location, destroy object, take object, drop object, change room description, add talors, remove talors, create exit and close exit.
These options are enough to build very complex combinations of puzzles to solve and its easy to add more should they crop up.
[Update 25/3/17]
Angular 4 was released a couple of days ago, have just updated the game from 2.3.1, nothing too painful a few dependency updates and some small code changes, but nothing horrible. Angular library looks like its almost halved in size from 800k to 450k, but that includes a lot of packages so cant see it getting much bigger even for a huge application. Game code has increased from 27k to 45k but I guess thats the trade off. Seems to be running faster as well 🙂
Built in Flex exported as an Adobe Air application for Android.
[Update 20/Jan/2020]
Bug Bounce was a physics based puzzle game built with Adobe Air and Flash, the player could guide the bug through several levels by tilting their device and bouncing on the mushrooms.
This originally went up on the Play Store in March 2011, in order to maintain it i’d need to run Adobe Flex, but I no longer have an interest in the technology so I’ve decided to retire the game. I may rebuild a version using Flutter or Unity in the future.
A very simple game with usability tailored for very small children, a sticky one click select and one click drop. Honestly its all about the sound and graphics, but it was great to work on such a high profile brand. I also worked on a comic creator app for Blue Peter around the same time, sadly no longer online.
[Update Feb 2020] The BBC have now retired most or all of its flash content including this game. If you ended up here because you were googling for Charlie and Lola games then you might like this which has nothing to do with me, but is in the same spirit.
I was the lead developer for the Time Tunnel section of the website. This was built in 2001 and was cutting edge at the time, and it’s still going strong. It won the Bafta for best online learning site and has earned many more awards since.
