- - To record my learning journey by creating a technical blog
- - To make this resource the blog I would have loved to have found when I started this journey
UX Skills Practised:
- Creating a pattern library
- Information Architecture - blogging site
UI Skills Practised:
- SVG Illustration/Optimisation
- Web Typography
Developer Tools Practised:
- Jekyll CMS
- Liquid Templating
- Bootstrap Responsive Grids
- Creating a maintainable HTML/CSS Codebase
- Write terse prose on technical topics
- Deploying to a separate 'dev' site
- 1. If CSS styling doesn’t bring about changes you were expecting, check:
- - The Jekyll serve script for errors
- - That you are viewing the local host version of the site and not the deployed version 🤦🏻♀️
- 2. Jekyll serve allows you to check mobile rendering without having to deploy by checking the IP.
- 3. I believe I prefer using pure CSS Flexbox than bootstrap for responsive layouts. I’m willing to have this opinion changed however.
- 4. A bootstrap pattern library has a speed advantage over other projects I have completed before.
- 5. Nested hierarchies are not supported out of the box with Jekyll. This required me think laterally around how I used tags and categories to create the site structure I envisioned.
- 6. Styling blog posts about code using the highlight syntax with Jekyll/Liquid is far superior to HTML <pre> tags.
- 7. It is important to be careful to be consistent with the styling of the YAML front matter as inconsistentcy can interfere with Liquid loops.
What I'd do differently next time:
- - I would default to Adobe Illustrator rather than Sketch for drawing SVGs.
- - I would only use websafe fonts for text in SVGs.
- - It goes without saying I would never start a blog without a CMS again!
What I’m proud to share:
- - The pattern library
- - The use of names for images and scss colors to fit with the site's liquid logic.