Weekly Round-up #4 - Redesigning a website, and Gundam

Weekly Round-up #4 - Redesigning a website, and Gundam

Dev

Redesigning a Website Part 1 - Starting from a blank slate

The current Brimir system

At work we use this open-source support ticketing system called Brimir. It is pretty small, focused, and now no longer supported by the company who created it, Ivaldi. Unfortunately, they no longer officially support it. So things like patches need to be done internally and pushed publicly to GitHub, which various people at my workplace have been doing for almost the last 18 months.

This is fine, however we often don't get time to actually update the app beyond gem security patches. It runs on Rails 5.1, which at this point is no longer getting security or feature updates. Some of the gems are several years out of date as well, so if its going to continue to be used, then some updates need to happen.

So I decided to spend some of my personal time, and some of my spare time in work on the support queue to work on fully modernising the app. From the backend stuff, to the frontend.

I figured it should probably take a step by step approach:

  • Update all of the gems and dependencies to their latest versions. This will break the app considerably for now, but its what needs to be done so having that be a starting point seems to make sense.
  • Strip the UI right back. This works as the starting blank slate for the UI, but also a valuable learning experience to how the app works. I think if I want to update the app properly, then I should become knowledgable in how it works.
  • Gather feedback from people who use the system frequently for things they would want in the system. This could be minor changes to new features. Of course adding a few things I would want in there as well.
  • Design a new UI, in my case using Adobe XD. Use this to gather some more feedback from people to let them decide on the style the app should take.
  • Next is implementation, where the task can fork. Part of the stripping back of the UI I wanted to re-implement the most basic version of the UI in base Bootstrap 4, stripping out anything specific from the UI where possible. So I see two posibilities here: continue with the Bootstrap 4 implementation, and polish it, or pivot it to being a SPA using React (which I love writing). It's a matter of do I do what is quickest, or what I enjoy. I think both are fine for maintenance from our companies point of view.
  • Re-testing. This will happen con-currently with the implementation, but the test suite currently is a port of the original minitest suite to rspec, with nothing added. It could do with some love as plenty of features are not covered in the test suite.
  • Feedback cycle; then its the usual feedback cycle for any big update on this stuff.

Some anyway that's the idea. Since around Christmas I have been going through the first 3-4 points.

Here are some before and afters of stripping the UI back. Part of this process as well was moving from the Rubygems version of Bootstrap, and then moving all the assets from Asset Pipeline to Webpacker:

And all of the other pages as well. This work hasn't so far touched any of the functionality of the backend Rails beyond updating for any gem API changes. But all of the views have been trimmed down to only what is needed, to ensure that the functionality can continue to work with only Bootstrap. Overall, beyond just taking quite a bit of time, I think this provides a nice blank slate to start a redesign. Even if we decide to not use the Rails MVC style and refactor to use Rails API with React front-end, it's massively helpful for getting feedback.

There weren't too many hurdles with doing these first steps technically, but it made me wonder how big business decides to do refactoring on a system, if they even do at all. This is something small, but if you have a legacy app with 10 years of thousands/millions of customers, what do you do?

I sent it out to my workplace Slack after putting it out on Heroku (Heroku still feels like magic), and got some new feature suggestions and ideas from them.

Now I'm on the designing phase, and I think the thing I want to do here more than anything is take this down the route of "slick generic". I really enjoy using apps like Clickup. They feel really easy to navigate, see whats important and the route that a ticketing app should probably also take. They both describe work which needs to be done, at least in our situation.

Big business look

Some things I would also like to add are more personalised views as well. Currently there is only this list of tickets you can filter, but having something more Kanban board like, or just a personalised dashboard which can highlight the things which need actioning in its own areas.

There's a lot to do. I'm thinking right now to go down the React route, as we could do a lot of really cool things. Through all of this though I would like to maintain a lot of the amazing work contributors did, like the UI translations in loads of languages. I'd also like an upgrade path to be easy, just in case anyone else besides us is still using the system and wants an update.

But most importantly, keeping it fun :~)

Models

First Gundam

I call him DepthOfFieldBot

A friend of mine who is into Warhammer and other models got me a real grade Gundam. I've never been into any kind of anime, but Gundam is definitely the thing that interests me the most (bit robot suits fighting, sure why not).

I was determined to get it done this weekend, so I started Friday evening and got the bulk of the building done. The way it snaps together is honestly ingenious. Every piece in the whole assembly uses no glue, and despite the instructions being in Japanese, the diagrams are so well laid out I had no issue following along. Using strong ABS plastic for the poseable (!!!) inner skeleton of the Robot as well was awesome, with slightly more brittle but I assume easier/cheaper to manufacture plastic for the armour and detailing.

Saturday I spent finishing off the model, mainly the weapons and the backpack. The aim of the model is clearly for it act like a action figure, hence its posability and such, but the snap and go aspect of it does fall short when it comes to attaching the gun and shield. Even after practicing putting the gun in the right hand (which has two areas of articulation, honestly the manufacturing is nuts here), it frequently feels loose and is a pain to put on. The shield is the exact same, and can feel limited.

Once the model was finished, it got to adding details with decals. Me, being a complete newbie at this, thought this would take no time at all. It turns out, this is by far the hardest bit. The stickers are obscenely small, but after starting it became clear they were really vital for making the model itself pop. There are now something like 100+ stickers on this little 10cm tall model. Here's a before and after:

Before - After

The stickers really do go all over the model, every little bit has something. Each foot alone has 4 stickers, the back of the shield has like 12. Each arm is covered, and the inside part of the elbow has some neat bronze stickers to make it look a bit more "robot" like. Amazing stuff.

The last step was getting a stand for it. I am incredibly lucky to own a 3D printer, so I could head to Thingiverse and find one someone had made. I just want to shoutout this one here, by soozefone. It's adjustable for different heights of Gundam, really quick and simple to print and also looks pretty good. Only issue was it wasn't made for this type of Gundam, so I had to hot glue the adapter to the the stand, which wasn't an issue. 3D printing makes a lot of this kind of thing so much more flexible, in future I might try and use it more for display purposes.

In the past I have done a few airplane models and some Warhammer, but I think this is the most true fun I have had with building a model ever. Unsure if I will do it again, if I get some time I don't see why not. And I think the best bit about them is they are not hugely expensive. You can grab one on Amazon with the tools for like £35-40, which for something this detailed and engaging is a steal.