The World Wide Web (Internet) has come a long way since its inception in 1990. It's time we took advantage.
For a long time I have been moving around the internet focusing on different areas to work in. Most of these have been on the bleeding edge of development using the latest language flavour of the month.
This has led to me messing around with multiple different generators that include, Next, Nuxt, Spike, Hugo, Middleman, and many more. It has only been recently though that I decided to consolidate my development stack and with that figure out where I want to position myself for future projects.
I have also needed to update my site for the longest time with some real effort to getting it right but everything was hidden behind smoke and mirrors and that never really sat well with me, think Webpack, Babel, Sass, Nuxt.JS, etc.
With my recent retirement from company employment in December I sat down and really started to think hard about what I wanted from both my website and my tech stack. More importantly I thought about what I didn't want.
The one thing I knew I needed above everything was simplicity so I decided to start from the ground up and make a list of what I did and didn't want and came up with the following requirements.
- I want a static site.
- I want to use modern HTML.
- I want to use modern CSS.
- I want an accessible site.
Each of these comes with its own cravat that can be expanded on further below.
Static Site Generator
Fairly recently I saw a post by Jh3y that mentioned this generator that I had heard a couple of times previously but never explored. The one thing that stood out from his work was how hands off the project is. Perfect time to jump right in and take a look.
11ty is quite simply everything I've been looking for and less. 11ty does a great job of staying out of your way when you want to make things. It doesn't care how you want to display your data or what you're going to use to style it. It simply provides a "Framework" that allows your to generate a static website (Another blog, another time) using one of a number of available template languages (HTML, Nunjucks, Markdown, etc) and compile these in to super fast, pre-compiled, HTML pages.
Using 11ty has allowed me to develop a base template that I can rapidly develop in to a starting template within a matter of hours instead of days. I've included only the things I need without anything I don't and the majority of it is using Markdown which is now my document language of choice.
It took some time to get used to just how much work I had to do myself over other "SSGs" (Static Site Generators) but I'm now all in with it. I will use it for the basis of all website development work. No matter how complex. From simple landing pages to front end template development that can be merged in to a more complex system like WordPress or Laravel as an example.
The benefits for taking this approach far outweigh anything else I've used. I can mock up a site in record time, know it is secure by default as it has no dynamic code that can be susceptible to bugs, has no back end that can be attacked by malicious actors and is blazingly fast because it has already been compiled and optimised before being viewed by the visitor.
- Rapid development
Who uses it.
Just to confirm that I'm not on a whim and I'm in good company with choosing this stack, below is a list of some great projects that also use 11ty.
- Chrome Developers
When HTML5 was introduced in 2008, it provided new elements to improve document semantics. These elements include:
- and more.
These help to organise your content which aids with code structure so its easier to understand your site when developing it but also it helps to make your site accessible to, web browsers, search engines and users with screen readers which all depend on semantic HTML to function correctly.
You can read more about this with the article over at medium called Modern HTML explained for dinosaurs
Along with HTML, CSS has come a long way in recent years. Providing many features that could only be found in languages like SASS or LESS. Now we have this extra functionality I think it is time to ditch the frameworks (Bootstrap, Tailwind, Foundation) and the dynamic pre-processor style sheet languages (SASS, LESS). Instead its time to concentrate of the modernisation of CSS and take advantage of its current and future features and use less boilerplate .
A lot of people use SASS, which was a mind-blowing concept when it first came out. A new language to write advanced CSS with but I simply don't use it enough to warrant really getting to know it.
The features that I used the most (class nesting, imports, variables) are all on the roadmap for CSS as various stages of discussion anyway and can be provided by the use of certain plugins. Based on the actual standards that will become default eventually, I don't have to think about various changes that turn me away from CSS.
An example of this is the SASS change to @import that now requires the @use rule instead. If at some point in the future I wished to move from SASS, I then have to change all my SASS files back to standard CSS and this can cause further breaks in my code.
So that is one less thing to think about while focusing on the core building block
From here on, my sole mission will be to make websites look great and function properly using the bare minimum technology to open up sites to as large an audience as possible.
From users who prefer-reduced-motion to the varying degrees of the visually impaired. Users should not be at a disadvantage because I'm too lazy to think about them when I'm building a website.
People forget that we are all curious at the day and information should be readily available to everyone as well as the opportunities to open up our business markets to more users and thus sales if that is the end goal.