Xavier Wendling website development

My portfolio website

Technology & Development

In addition to providing great user experience and engaging content, it is always a top priority for me to establish a sound and modern technology stack and a development workflow that maximizes my productivity and piece of mind. It’s all about developing faster, ensuring reliable deployments and increasing security and reliability in production.

My personal website is a natural playground to try and embrace new solutions, and techniques and refine my methodologies as I am always on the lookout for opportunities to streamline and automate my process further.

Evolution

How my technology stack has evolved over time

A long run with WordPress

2010-2017

For several years, the xavierwendling.com website was developed using the WordPress server-side content management system, PHP and MySQL. Having built a significant experience and expertise with WordPress for various other projects. the popular CMS had been an solid fit for this use case, providing me with great development power and flexibility.

Over the years, my workflow had matured into a solution that included:

  • A custom developed theme, tailored to my specific vision and needs.
  • State-of-the-art WordPress configuration and structuring with Bedrock.
  • PHP dependency management with Composer.
  • Build automation with Gulp.
  • Automated server provisioning & deployment to staging and production with Trellis and Ansible.

Embracing the JAMstack with Hugo

2017-2019

In early 2017, I decided to move away from WordPress for this website and re-architecture it as a statically generated website based on Hugo. Embracing a JAMstack approach was primarily driven by a desire to boost website performance and make it less vulnerable to attacks. Ease of deployment was also a prominent selling point for me.

My current workflow features:

  • Content managed in markdown.
  • Custom asset pipeline based on Gulp, Webpack, SASS, postCSS and Babel.
  • Automated builds.
  • Automated dockerized deployment.

From Hugo to Gatsby

Since 2019

For the last two and a half years, Hugo has been great, allowing me to fully enjoy the benefits of the JAMstack. The open-source framework is fast, robust, already very mature and has been bringing refinements and new features at a nice pace. It is well documented and backed by a solid team of contributors.

Despite all the praise I have been keeping an eye on other solutions. Driven by a growing desire to make the most of my time and stay relevant as a developer, I have been pursuing the ideal of a single streamlined development ecosystem that would not only be modern, elegant, future proof, performance and feature packed, but would also be the basis for all my web and app development projects, regardless of their typology.

Embracing Gatsby for this website and other similar web projects validates React as the center piece of my development stack.

Speed Optimizations

Web pages that load and render fast is a key ingredient to an enjoyable user experience. Even more so with mobile now the dominant way of consuming web contents. Search engines are now factoring website performance to a much higher degree when crawling and assessing contents quality, so making sure that a website is fast ultimately serves your SEO efforts.

With that always in mind, I like to regularly assess the performance of my websites, looking for opportunities to further optimise web pages and assets and serve them in a better way. As a perfect testbed for experimentation, my own website scores high against speed benchmarks, despite being media-rich, thanks to an array of optimisation techniques.