The 13th version of my website is online!

Introduction

Ten years have passed since when I started designing the very first edition of Gianluca Costa's Creations: back then, I just sketched out an elementary layout consisting of a handful of HTML pages, which referenced a few lines of CSS 2 declarations.

Version after version, I have constantly rethought the website - and, even better, it has become a sort of playground to discover web technologies: from raw HTML 4 to PHP, then Python and jQuery, later moving on to Jekyll, scripted SVG and, very recently, CSS 3 (especially Flexbox, gradients and shadows) and Bootstrap.

Online courses

The heart of this new edition is the page dedicated to the interactive drill-down charts analyzing all the public online courses I've taken: it is provided by OmniCourse - my very first React component.

The charts are rendered by the Google Charts library and its wrapper for React, with a thin user interface coordinating the navigation process and displaying partial results.

Finally, the hierarchy of courses is published as a JSON service, available for custom processing.

A new technological stack

This 13th edition is a paramount milestone, focused on a wide variety of JavaScript-based, very modern technologies:

  • Gatsby, replacing Jekyll, leverages the power of NodeJS APIs - to statically generate the website and its services (the raw JSON of my completed courses, the experimental JSON news feed) - and to provide simple and elegant resource management
  • React, the minimalist library to create component-based user interfaces - including its most recent features like useState() and useEffect(), as well as common libraries - e.g., classnames
  • GraphQL, providing a simple and elegant unified data source aggregating a variety of JSON and Markdown files from all over the website source directory tree
  • NPM (Node Package Manager) - both a vault of JavaScript libraries and a tool to easily handle dependencies and build phases
  • NVM (Node Version Manager) - ensures deterministic executions, which is paramount in a hyper-dynamic ecosystem such as JavaScript

Enhanced user interface

Apart from introducing the drill-down analytical engine for online courses, I have decided to postpone major changes to the perceived user interface, so as to be sure that the new stack works as expected.

However, I have enhanced the styling of different areas of the website (especially the carousel of featured projects and the menus) - in addition to introducing CSS modules for scoped styling and further media queries for a more natural experience on different devices.

While keeping the existing Bootstrap UI, I have managed to replace CDN references with Webpack imports, for a more elegant and deterministic bundling approach; furthermore, I have managed to integrate the React version of Font Awesome's icons.

As a cute symbol of both creativity and inclusion, I have slightly redesigned the jumbotron in the home page - painting a rainbow gradient based on ideas derived from Color Theory.

Elegance always matters

It was paramount to have a new, JavaScript-based stack, widely relying on React, so as to to enter the world of flexibility provided by ES6 and key solutions like NPM.

To streamline the deployment, CI/CD integration with Travis CI, recently explored with Arcadia, is another asset of this edition.

Last but not least, while creating OmniCourse, I have explored in detail how transpilation and polyfills work, especially via Babel: I have applied it to Gatsby itself, in order to write ES6 modules all over the project, but future versions of the website might be able to widely employ this interesting technology to foster browser compatibility.