UI: My current state of play

I have been working in UI design and development proximately for ten years. I have been involved in large scale outsourced projects for the Home office, Met police, large retailers, and charities. When I first started in UI development, javascript, CSS, and HTML were the main technologies I used for web development. Then I progressed to using frameworks namely jQuery, Backbone,YUI,React.js, and now Vue.js. Oh, I also have worked with all the horrible back end technologies (Java, PHP, .NET). Nowadays I am comfortable working in a DevOps workflow together with all the full-stack technologies (mongoDb,Node.js, Webpack, react.js,graphQl, etc). This site will give an account of things that I am interested in at the moment, mainly in the implementation of current design trends using react.js, Vue.js, D3.js, CSS3, HTML5, and SVG. The example apps that I have shared on this site are proof of concepts to demonstrate what is achievable with the current set of technologies out there. You can contact me on Linkedin.

TDD approach – An asynchronus product listing app – React,Jest and Enzyme with data mocking

See the code on Github

Testing in react.js is tricky due to its lifecycle hook implementation. In this project, I have implemented a product listing app using the TDD approach. I have used Jest, Enzyme, and its many features to tackle the tricky areas around react.js testing. Read more…

GraphQL ToDo app (Full stack with Mysql backend database)

See the code on GitHub
This project implements a full stack graphQl version of a ToDo app. The project has an api and a client layer. The backend is using react.js, sequelize.js, express, and apollo server. The GraphQl layer is served by a Mysql database.

Be warned this is a full-stack project and you will need to be comfortable with the above mentioned technologies to install and run this. Read more…

A workflow for coding prototypes: Same design of To-Do app implemented in React, Vue.js, React native, and AngularJs.

Over the years I have followed these steps when designing widgets, plugins, and features. In this example, I will outline the steps to code a To-Do app in react.js, vue.js, React native, and Angular. Read more…

Vue.js and D3.js line chart

See the code on CodeSandbox

Vue.js  is a relatively new front end framework. As I have experience  in creating charts with react.js and D3.js, I thought I will Implement a relatively simple line chart using Vue.js and D3.js. My initial research had found that theres not that much examples on the web on the subject of using Vue.js and D3.js together. These are the takeaway points that you need to consider.
Read more…

Redux and React.js infographic chart

See the code on CodeSandbox


Redux and react make a perfect combination if you want to build large apps that have complex state driven rendering. When apps get larger the state management becomes complicated and that’s where redox comes in. The chart in this example was built with the d3. I first hand crafted an svg of a UK map in illustrator. Then marked and give ids to the regions which becomes your hot spots. After saving the svg in illustrator, Read more…

How to jazz up d3 charts with clipped image and animation in react.js


I wrote this post to show the versatility of react when it comes to displaying d3 charts. Also wanted to show that d3.js can be used more creatively by using its advanced svg features. For this chart I am using the bars from the bar chart as a stencil to cut out a collage from a graphical image. As a bonus the whole thing is responsive. Read more…

Temperature dial meter built with React.js and D3.js.

See the code on CodeSandbox

In this example I am rotating and animating the temperature needle. The animation is done via D3.js just after the needle container is mounted. D3.js has some hooks that can be utilised to indicate when the animation starts , ends and gets interrupted. These hooks are perfect if you want to change state within react so that it is in synch with D3 animation. Read more…