Projects

Side projects I built during the last months

Super blog

First things first #

Why did I name it super-blog? Well, the answer is quite simple.

Like many others, I suffer from the impostor syndrome and I tend to not finish what I start, because I think it's not good enough. 🥺 I needed a name that would make the project interesting and push me to carry it on! Hence the idea of calling my most captivating side-projects with the prefix super- 😎

I started to write a post about all the super-apps – as I call them – I would like to develop in the near future! 💪🏻

But anyway, let's talk about how I made this simple blog.

The project #

This blog is built using 11ty static site generator.

Use Tech stack
Template engine Nunjucks
Build tool 11ty
Content Markdown
Repository Open source on GitLab

Project review, what I learned or improved #

11ty

This was the first time I used 11ty as static site generator and it was amazing! ✨

11ty supports Nunjucks as template engine, and desprite the Nunjucks documentation is not exaustive, I found everything I needed in forums, stackoverflow and so on. I also wrote some posts about what I discovered! 😏

Here is a list of really useful 11ty plugins I used in this blog:

Nunjucks

Unfortunately, UIengine (the framework I used to build my styleguide, read more about it in projects -> Super Styleguide) does not support Nunjucks as template engine, in fact I had to copy by hand all EJS templates in Nunjucks language. I searched for a node package to automatically convert components from EJS to Nunjucks, but I didn't find any.

Git submodules

For the first time, I worked with git submodules: one for the content repository and another for the stylegudie repository. At the beginning was quite hard to understand how to keep aligned (or voluntarily disaligned) all the pieces, but I understood how to use them over time... and now I am satisfied to use this repository structure.

Netlify

I never used Netlify before, and it was... wow! 😍 I never gone into something so quick to setup and I really love its great documentation. I set automatic deploy on merge requests and push on main branch, so now on I will have a new preview version of my blog for every feature or fix I will do, and it is stunning!

Next up 💪🏻 #

As they say (or at least, as I say) "A website has no end.". There are lot of features (and some tricky bugs 🐛) I'd like to update in this blog as soon as I understand how to do them!

Overall score #

Super styleguide

This project is the little design system I used to build this blog.
The DS has few components and less variants as possible, because I developed just what I needed to build a simple blog like this, KISS! (a.k.a. Keep It Simple Stupid!) 😇

Use Tech stack
Presentation Layer UIengine
Template engine EJS
Content Javascript
Documentation Markdown
Repository Open source on GitLab

Project review, what I learned or improved #

Design

I designed the pages on my own and the result is quite banal and impersonal. I reevaluated a lot designers job!

UIengine

I used UIengine before in a very big project, with lots of components and variants, and I loved it. Here — in this little project — I loved it even more!! 😍 UIengine is very fast and easy to use, well done Dennis! Bonus point: under the hood, the core is completely written in JS and the framework used is VueJS 🙌🏻 The only flaw I saw is that UIengine unfortunately does not support Twig or Nunjucks template engines, which I think are the more versatile template engines to use.

EJS

This was the first (and probably the last!) time I used EJS as template engine. It was confortable to use JavaScript functions into the template, but I hate its terrible syntax with <%=> delimiters and for loops using functions. 🤢

All things considered I liked build this mini design system!

Overall score #