New Divotion website 2020

by Dennis — 5 minutes

On the first of October we soft released our new website. On our new website we proudly present who we are and most importantly, what we do. One of the most important things for me as a developer are the tools I work with. So when working on a project with multiple developers, things can get a little heated. To cherry pick the best tools and ideas we regularly came together - corona proof - to work on a sprint session. This way we didn’t have endless discussion and created the website as fast as possible. I want to point out some of our achievements during this time as a team.

Screenshot of the home page

Our team

We at Divotion like to excel at our jobs and we do this with a great passion for front-end development. We want to deliver the best front-end experience for our customers. This shared passion was what made the process of creating the website unique and absolutely amazing.

Even though we wanted to finish the website as fast as possible we at Divotion only have a few hours to spare beside our regular assignments. This resulted in a development team of 7 and a total process of 6 months. Of course, this is not the ideal situation but it was the best way to keep the building process going. We had a weekly stand-up where we divided small tasks to the person who had some time left in his schedule. Again, not an ideal situation but it resulted in a really close cooperation with the team.

Everyone in the team knew what he or she had to do but also what the other person was doing. We helped each other when someone had a busy schedule and we changed roles every week. It was amazing to see how a large group of developers can adapt to different situations each week and how everyone still kept the same vision and priorities during this period.

As a team we wanted to show you our creativity and skills we have, but at the same time the website has to be related to us personally. With this mindset we created some great features in the website. Take for example the passion bubble on the divoted page.

Screenshot of the divoted page

The passion bubble gives the user two viewpoints of the team, one where people are portrayed as employees and a second showing a more personal side of the person. A perfect example of who we are at Divotion. There are more of these features throughout the website and there are even more to come!

Nuxt Content

For everyone that's not familiar with Nuxt, a quick introduction. Nuxt is based on the Vue framework and makes web development more powerful. You can compare Nuxt to Next.js, a development framework for React. Nuxt gives you a predefined set of tools like babel, eslint, webpack, Vuex, Vue router and server side rendering for your Vue application. Personally, I have been working with Nuxt for over two years now and I still admire the framework.

Nuxt Content is a plugin that allows you to manage and fetch content from your server. It serves Markdown, JSON, YAML, XML and CSV files through a MongoDB-like API, acting as a Git-based Headless CMS. This was a perfect solution for the new website as our previous blogs were all written in Asciidoc. So all we had to do was convert our Asciidoc files to Markdown and we could reuse all our articles again.

After we had access to all our previous content we could implement this with the new styling. The only problem we faced was that Nuxt Content had limited TypeScript support. The plugin had some types declared but it was very limited and we had to extend or rewrite most of the interfaces. As Nuxt Content is an open source plugin Niels and I worked on a huge pull request for a complete TypeScript support of Nuxt Content. The pull request not only contained the interfaces we needed but also internal parsers we could use in our project.

The pull request I submitted was already reviewed by the Divotion team even before the Nuxt community had time to respond. We all faced the same issues before I even submitted the request, and we wanted to solve this problem altogether. This again shows how we are all involved in this project. After some good feedback we now have a full TypeScript support for Nuxt Content!

What is next?

Like stated earlier we soft released the website. This also means we have plenty of new features we want to add. The first of October was a big milestone for the website and us, but over time we want to keep working on the website to really show you what it means to have a good front-end development team. We have some amazing ideas and we can’t wait to show you more in the future. Also at the first of October we started with blogtober. In which we want to write as many blogs as possible, so stay tuned!