James Formica
UI Developer
& Creative Coder
So I joined a startup founded by two of my close friends. Going from 600 devs to 3 was actually quite exciting. I felt a bit of pressure early days to be a driving force behind the culture and having come from a team where the most anticipated part of the day was playing a highly modified version of paper, scissors, rock (Cowboy, Ninja, Bear) I figured I would follow suit.
So I built Build Off. A multiplayer game where you race to build your property as fast as you can while also gaining points. At the core of the game were cards. Some offensive and some defensive. Offensive cards would cause issues for other players such as causing a COVID outbreak on site or increasing material costs, whilst defensive cards would upgrade your tools or purchase insurance. But here's the kicker, it was a bit of a fail. The game wasn't balanced properly and there wasn't an obvious goal.
I learnt a lot and it was genuinely fun to build but if I were to do it again, I'd probably spend a bit more time fleshing out the story behind the game before diving in. Oh, and as for the culture at BuildPass, it's doing fine, we didn't need a game in the first place. At least, not yet...
I have been obsessed with the idea of using REA's data and APIs for something stupid for a while. Then I stumbled across the "number neighbour" trend where people would text the phone number one digit higher or lower than theirs for fun. 💡! Then it hit me, every property in Australia has an REA ID so I should be able to implement the same concept to help you find your property ID neighbours.
✅ is using REA's data and APIs
✅ is stupid
To make it a bit more fun, before showing your neighbours you first have to answer a quick quiz about them. E.g. what is their postcode/suburb/state/number of bedroom/bathrooms. There is even a little score counter with a maximum score of 1200. It all came together and is honestly one of the most polished apps I have built in a while. (its all internal so you may not be able to see it sorry)
The main goal of HacktoberFEST is to become familiar and contribute to open source projects with the promise of a cool t-shirt if you follow through! With the help of IRESS, the JuniorDev community hosted an even where we would teach participants how to use Git and get them involved in an open source project to help kick off their HacktoberFEST journey.
I created the base of this project that would allow anyone to add their own custom sub page and add whatever they wanted to it. Due to it being close to Halloween we decided to go with a spooky theme. Some of the participant's pages are absolutely incredible! In the end we had 67 submissions!
Another few months, another REAio.
This time I had quite a few things going on so I wasn't able to focus on getting one major project done. In between all the meetings I had, I went around asking developers a bunch of questions on guilds and their life at REA. As a fun closing activity, I also asked them to try and draw a bicycle from memory.
Sounds easy right? Most thought so, until they started actually drawing. It's funny to think that an object so prominent and easily identifiable in society can be so hard to draw. It's made up of only a few basic shapes too.
It was very funny and I appreciated everyone having an attempt so I built this site to commemorate their efforts.
What happens when you bring a laptop to a conference of approximately 800 people and tell people to add whatever they wanted to a website? Chaos. Absolute chaos. Although, not as much chaos as I expected...
I was at DDD Melbourne 2019 with the JuniorDev community and we had setup our booth in the community area. Anyone who came by was asked to add to the site. The rules were as follows:
- Keep it child friendly
- No Bitcoin mining
The result it pretty hideous but in a fantastic way. We only had to undo one change which hid the cursor on the whole site. Cheeky.
Apparently I just can't get enough of trying to create generative art...
The idea here was that you would write a narrative and it would create a bit of an artwork as you type. I was hoping it would encourage me to write but I'm not sure it will. It's completely generative so you will always get the same art if you type the same exact words cause that how I roll.
I even added a bit of @media print shenanigans so you could save it to a PDF or print it and it would look kinda nice. I feel this is going to be one of my least used apps, but it has one of the cleanest UIs I've made. So its got that going for it...
It started with a talk. A talk about React Hooks that a colleague and I were planning on giving at REA's TKO (tech kick off). So we had the talk idea, but how to make it fun? Well, what if we built a "game" using Hooks and then explain how we used them? Brilliant!
So we built "Hooked". The idea was that it would provide real-time feedback on how hooked you were on a talk that is being presented to you. Put simply: the more fishies on the screen, the more hooked the audience is. Each fish disappears after 10 or so seconds so the audience needs to keep the number up.
The talked ended up being really fun (should be somewhere on YouTube) and the app actually held up pretty well.
2019's first UI Guild challenge: Build something using CSS Grid!
I decided to build a tiny little city builder with tiles for roads, grass, sand, water and houses. All the graphics are generated using CSS. I took absolute advantage of the crazy box-shadow hacks to create the pixel art of the grass, sand and water. I had a crack at adding a little car that drove around the road but that was getting way too complicated so gave up on that quickly.
It was good fun and I look forward to the next challenge.
For the longest time I've wanted to build some sort of visualiser for Spotify. I knew I didn't want to build a typical crazy visual canvas app, and then it hit me. Let's go retro!
Building a CSS record player was actually quite fun, I could have spent countless more hours fine tuning it. Hooking up the Spotify API was brilliantly simple and then it was just a matter of some cool animations when the song changes. Really happy with how this turned out.
When driving the car a few weeks back, I made a joke to my finacé that she should learn to code by creating a website that told you if you survived Thanos' finger snap. She didn't care much for it, but I wanted to make it anyway.
I used this app as an excuse to play with React Hooks, and they are a game changer. It was such a fun experience to play with them. I ended up using almost all of them:
useState, useContext, useReducer, useEffect, useRef.
I then built the 'dust' animation for the screen on which you die using a quick canvas render.
Super fun project and I'll be wanting to use more of hooks now.
My first (non work related) project of 2019!
I hopped on the train in the morning and decided I was going to build this thing that I had kind of seen before but didn't really know much about or what it was used for. All I knew is that it was a bunch of connected circles where a line followed the outermost one. Turns out they are called Fourier circles or something similar.
I built this entire thing in a day's commute so the code is a solid D+ in quality.
It was fun and I'm considering doing a talk on building mini canvas apps.
O(n)Week+
websiteREA Group has one of the best Grad programs in Australia, so when the opportunity presented itself to build a website to assist the program, I was very quick to say yes. On boarding is a giant process for the new grads and consists of over 2 weeks of training, presentations, and even building real applications. It can be certainly overwhelming!
So I built a website with their entire schedule so they would always know where they needed to be and what was coming next. But this is me we are talking about, I can't just build a normal website. So I sprinkled a bit of 'James' over the site and built a canvas drawing competition, because why not? I also dropped quite a few easter eggs into the site which do the following:
- Completely flip the entire site around
- Spin some heads
- Quote a confused fictional character
- Make a rocketship fly
- Offer to buy a chocolate bar
It was super fun to build and I'm actually really happy with how the design of it all turned out considering I smashed out pretty much the entire thing in a couple afternoons.
YouTube
websiteSo I decided to start making CSS YouTube videos, who could have seen this coming?
I wanted to share how easy it is to create things with CSS and decided that recording myself was a good way to achieve it. Its been super fun and the videos are really easy to make.
So far I've created things like:
- Pokéball
- Chicken
- Trampoline
- Solar system
- Beer bottle
Hubly
Another year, another REA.io hack day project, although this time I decided to actually work on something useful! The theme for the event was MUDA which translates roughly to waste I believe.
The world of coworking collided with the world of waste, and the output was Hubly. Our goal was to show people how much Co2 and time they waste commuting all the way into the REA office instead of utilising a coworking space near their home. This is how it worked:
- Enter in your address (Google maps autocomplete assisted)
- Enter your mode of transport (Car, Train, Bike, etc...)
- We geolocate your address and pick the closes coworking space
- We calculate the journey from home to work
- We calculate the journey from home to the coworking space
- Present a fun infographic on the comparison
It turned out really great and most importantly did a great job of representing how much carbon dioxide is produced by comparing it to how many Silkie Chickens 🐓 have the same weight.
OneTeam
I've been working on a lot of silly project recently, and whilst they are fun, I missed creating something that solved an actual problem for someone.
Becomming a delivery lead has recently become my career path of choice. However, I was warned that I would still need to find a creative outlet, so I decided to create a web application that replicated the work of my current delivery lead.
This app keeps track of each sprint, the calendar of the team members, the retro sentiment and cards, and any other notes that seem important. It also syncs up with Jira to pull in data from it's sprint such as number of cards and what status they are in.
The backend was written in NodeJs with a GraphQL endpoint and a MongoDB database in the background. All of this was pretty new to me but super fun to play around with!
The theme for this work Hack Day: Rent! So there I sat, thinking to myself "what crazy web app can I build related to rent??" And then it dawned on me, I would create a 'vent about rent' diary app. And that's just what I did.
The idea is simple, I have a bunch of pre-defined diary entries, and a bunch of pre-defined emotions. The diary entries need an emotion to complete them, so where does the emotion come from? Well, the user's facial expression of course! This crazy app uses your facial expression to guess your emotion and complete a diary entry of a few sentences. Completely wild, completely hilarious!
NOTE: I was the first project to get disqualified for not using the internal UI component library to build it 😭
Following the trend with L-Systems, the visual representation of biological plants really caught my intention. I wanted to build my own Lindenmayer system that could generate plants in an aquarium environment. Spoiler alert: It was super fun to build and the result is quite therapeutic to watch.
The basic premise to any L-System is to have the following: an alphabet, an axiom, and some rules. The alphabet consisted of: F + - [ ]. The axiom was the starting character and the rules dictated string replacement operations. In the end you end up with a massive sentence of characters which when rendered produces beautiful art. There's a 'how it works' modal in the app that goes into specifics with examples.
A great talk at Web Directions CODE 2018 in Melbourne was about programming generative art revolving around L-systems and such.
I then spent the next 30 minutes of the afternoon tea break creating this random generative canvas app. It is absolutely crazy and isn't a proper L-system but it is super fun to watch and I love the colours!
This was a creation as a fun initiative at work to get those creative juices flowing. The brief was to create a CSS Car. I decided than an old style car was going to be my choice from a front-on perspective.
I wanted a day/night cycle and to even be able to control the car's steering purely in CSS. I'm really proud of how this one turned out. And also of all the other submissions from my colleagues.
Canvas has always been an important and fun part of my development careers. It's not really an area that you get to play with at work. I wanted to put together an interactive presentation that goes promotes canvas and showcases the things that can be done when you let your creativity flow.
I initially talk about why people struggle to develop canvas apps, then move on to demoing some of my own creations. Overally I am really happy with this presentation and can't wait to deliver it to the community!
Notable tech:
- revealjs
(🦒 + 🐐) + 🖼 + 🕹
I've been meaning to make a Llama game for a while now and this is my second attempt. I've always liked the idea of a game with a single control. Side-scroller games lend themselves really nicely to this idea!
I decided how all the collision was going to work and set about creating the game out of coloured squares. To bring it to life I got out my old watercolour painting set and went to town. 👨🏻🎨
Notable tech:
- react/redux
I downloaded a live wallpaper for my phone and it had this really cool particle effect where they would draw lines between the particles if they were close enough. I wanted to see if I could replicate this in a canvas and I totally did!
I added the ability for the particles to gravitate towards each other if they got close enough to draw a line between them.
And finally I added the options to control the background colour, the dot colour, the line colour, the dot size, and the gravity on the fly. Redux comes in really handy here!
Sketchly
websiteContinuing on from my 'canvas with interaction' projects I came up with this crazy idea for the upcoming hack day at work.
The idea: a draw-your-own-adventure using a canvas and a story engine surrounding it.
Well, we didn't win any awards, but the app turned out to be really really cool. We ended up utilising an API from the Google Quickdraw game which analysed the drawings on the canvas and guessed what it was.
The story we built around it was basically a JSON file which had 'chapters' that linked to each other based on different trigger words. This is a seriously fun app that I'm quite proud of.
Notable tech:
- Google Quickdraw API
I was sitting at my desk one day when this idea 💡 popped into my head. What if I utilised Azure's cognitive services to analyse what someone was saying, then start painting on the canvas based on the sentiment of what they had said.
And that's exactly what I did. The app listens to what you are saying, converts the speech into text, then analyses the text for the sentiment then starts painting. It turned out to be much cooler than I thought so please stop reading this and go play with it.
Notable tech:
A tech talk I put together exploring the wonders of the CSS Grids.
The syntax around CSS Grids is extremely flexible and quite powerful. If flexbox solved the problems of aligning elements in 1D, then CSSGrids solves the problems of aligning everything in 2D. Go check it out, its pretty awesome!
Our company hosted another "innovation day" which is essentially a 24 hour window to create/develop anything you like. This year we decided to leverage the fact that we had a 3D printer and created an Awesome Chocolate Engraver. We replaced the printer head with a Dremmel and wrote custom software to convert a HTML canvas into G-Code instuctions for the 3D printer.
It was a hilarious project and if you want to see some results of our efforts you can read about it in my blog post.
I've wanted to start a blog for a while now to talk about things that are on my mind and happening in my life. The posts are written in a markdown file then converted clientside before rendering. I've added support for Google Charts integration and support for tables was already available.
Come have a read if you want to learn about why the blog is called Odd Socks, or how my addiction to Rocket League got out of hand, or my general thoughts on getting married. It's definitely not a serious blog and has been known to contain Emoji, memes and sarcasm.
Splittr is built on top of my other creation SimplePaint. The idea of this project revolves around compound words. A compound word is a word made up of other words such as pancake (pan - cake).
Using my SimplePaint library, both parts of the compound word are drawn on a canvas and saved. The lovely drawings are then presented to the final player who must guess the compound word based off the two images alone.
Pretty simple. Pretty fun!
Imagine MS Paint on an Html Canvas but only with the most basic but awesome features... May i present SimplePaint. It's a tiny library that constructs a canvas and allows you to draw whatever your heart desires.
Using EaselJS under the hood to draw lines and ensure mobile compatibility it boosts amazing features such as the Erase tool, Fill tool (with a mediocre attempt at antialiasing) and a gorgeous palette of colours.
This one was honestly so much fun and even comes with a typescript definition file for the 0 people out there who will use this 😜
Notable tech:
Rock, Paper, Scissors (or whatever order you say it in) online tournament. This project came about as an attempt to teach my cousin about web development with a fun and silly app.
It's a bit buggy but it was a great opportunity to help my cousin see what development is like, from the crazy world of javascript to the dynamic world of Ruby. See if you can beat you friends!
This one is one of my favourites, easily. I had so much fun building this learning tool for a tech talk about CSS. Each screen has an area to enter CSS and see the result next to it. And it gets very silly, very quick.
There are four sections that start easy and get a bit harder to complete:
- Basic Shapes
- "Real World" Examples
- Animations (using @keyframes)
- Derpy Examples (the best)
Plus it has a cat, turtle and flamingo drawn in CSS, what more do you want???
EventTimeline
codeAs my house was being built I wanted to create a place where I could upload photos as an event and track them as a timeline.
The timeline UI was fun to work out and looks pretty good, but ultimately I never ended up using it. It's a bit of a shame really but the damn house was taking too long and the updates would have been pretty boring.
Oh well, onto the next one.
EatWeek
codeThis project was essentially paper vs. web in that the current implementation of this in our house was a chalk board that we would plan our weekly dinner meals on. I wanted to bring this idea to 2015.
Using the Food2Fork api you could search for recipes and add them to a day of the week. The search results are displayed in a manner similar to Pintrest's which is pretty neat. I event had a crack at Google OAuth login.
I think the overall style and UI of this app is it's best feature. I really enjoyed working on this one but you can probably guess what happened... The chalk board won :(
Notable tech:
CHOO CHOO!!!! My second favourite project, ever! As a child, I obsessed over Lego Loco and always wanted a version I could play with online.
What started out as one man's dream to turn an Html Canvas into a basic birdseye train simulator turned into an awesome team effort with my colleagues. There is so much to talk about with this project. From the amazing track joining logic to the hilarious train naming conventions and the spectaular 'lighting engine', this project became more than I ever thought was possible.
Seriously, stop reading this and GO PLAY THIS GAME, you won't regret it!
Oh boy... this one takes me back. The idea was simple: Ask a question to your friends - receive annonymous answers from your friends.
It quickly became clear that maybe this app wasn't such a good idea and could get people in trouble so I stopped.
I remember struggling with the UI and overall colour scheme with this project. It helped me learn what different styles were out there and which ones I personally liked. It's by no means my favourite project but it is an important one in terms of my development skills.