Through a creative newsletter I am subscribed to, I was recently informed of a composable css/scss based animation/transition framework. Currently it can be used via css, scss, vue.js and the react.js implementation is soon to be released.

AnimXYZ website screen shot

It just so happened I was starting to work on transitions for the project I’m currently building, so was perfect timing. Essentially it abstracts away from key-frames in css and saves a load of time. Using predefined attributes and values you quickly attach animations to elements and can nest them to work alongside a parent element’s animation. Furthermore, they have made each part of an animation customisable, allowing you to create your own specification. This is done via AnimXYZ css values attached to a custom css rule.

I am loving it, especially as it’s saving me a load of time and making more complex animations so much more accessible. It is for sure worth a go, I believe I will use it from now on!

React / Redux, ‘would you rather’


Straight after finishing the first React project I got on with the next section of the Udacity course. This part was all about including Redux and creating a single source of truth. I.E. holding data in a single place to avoid duplication or unintended changes which could create hard to solve bugs.

The project for this section asked me to create an app based around the game ‘would you rather‘. Using Redux, I would store user details and questions. The data also stored who had answered which questions and who created them. The user was also ranked based on the number of questions created and answered.

Creating this app proved to be a sound way to get my head around: reducers, actions and the implementation of basic UI transitions. After submission, I passed all the requirements and was given some great suggestions which I immediately refactored into the project, especially as I wanted to know the best ways of doing things. For example, separating concerns by not accessing a DOM element outside a component’s render function. I also found the way React updates the correct elements when the store state changes to be really interesting and a much more efficient way of doing things.

I managed to put all the required functionality in place well within the required / suggested time so went about adding extra features. For example, a sign up landing page where the user can log in to a previously created profile or create a new one. The signup form also had validation to make sure a new profile didn’t already exist. Ultimately, I learnt a lot from this project and it has given me more confidence to try new things moving forward.