Project link: shecodes.dev
This project is a complete overhaul of my personal website, previously built in Wordpress. There were lots of features not being used, a CMS is definitely overkill for what I need and I was tired of chasing updates to keep the site locked down and secure.
2020 was spent on learning about accessibility (thanks to W3C and EdX), web performance (courtesy of smashing magazine and Harry Roberts), and eleventy (thanks Andy Bell!), setting out with basic or zero knowledge on each subject beforehand.
I've taken those learnings and put them into a brand new shiny Eleventy site to improve security, up my accessibility game and start thinking about performance, tooling and testing.
No doubt I will break, pull apart and put this site back together many times to come.
This project requires Node (^12.13.0).
To install the project dependencies:
yarn install
To launch the server:
yarn start
Go to http://localhost:8080
To launch the server using the production build:
yarn run production
cd dist && npx serve
Go to http://localhost:5000
Content creation guidelines coming soon.
This project uses custom font subsets with a limited set of glyphs to keep file sizes small. Each font has a demo.html file inside the font-documentation folder which can be viewed in the browser. The glyphs & languages tab lists each available glyph with its unicode.
Images are handled by the eleventy image plugin. The plugin performs build-time image transformations for both vector and raster images.
I've decided to run with Andy Bell's CUBE CSS to understand it more, drawn by its statement of being orientated towards simplicity, pragmatism and consistency.
CUBE CSS works together with Gorko, a Sass tool that generates utility functions based on a _config.scss_ file.
This project uses modern-css-reset. More information on the reset can be found here.
Pipeline automation tasks are handled by gulp.
Preprocessed Sass is split out into compressed, merged and minified CSS creating a single critical CSS file and standard CSS files.
site.scss
The site.scss file is inlined into the <head> and applied to every page. It includes the CSS reset, design tokens and global styles.
Page critical CSS
Any CSS that is required for above-the-fold elements should be considered 'page critical'. These critical styles are broken up into individual CSS files that relate to a corresponding page. This keeps the amount of critical CSS inlined into the head minimal which is better for performance. To add critical CSS to a page:
- add a
<mypage>.scssfile to thescssrepo - include this file in the array of
siteCriticalStyleslocated in:- gulp-tasks > sass.js
- set the
pageCriticalStylesvariable on the corresponding page layout:{% set pageCriticalStyles = ['css/mypage.css'] %}
{% set pageStylesheets = ['/css/tester.css'] %}
Any non-critical CSS files are included using a link element. To add non-critical CSS to a page:
- add a
<mypage-non-critical>.scssfile to thescssrepo - set the
pageCriticalStylesvariable on the corresponding page layout:{% set pageCriticalStyles = ['/css/mypage-non-critical.css'] %}
NOTE The path to the file begins with a / so that the url is relative to the root of the project.
Formatting is managed by Prettier.
Code-quality is managed by ESLint and Stylelint.
Github action workflow pa11y.yml is triggered on each new PR. It runs CI accessibility tests against urls taken from an auto generated sitemap.xml managed by pa11y.
Automated accessibility testing does not catch all errors. Manual testing is required also.
Typescript to be implemented.
Testing framework to be implemented.
To be implemented
The site is hosted on netlify. Production build is updated each time a pull request is merged into the main branch.