A simple blog site where I post occasional help articles/notes/explainers about coding problems that don't readily have an answer on Google.

It's not much, but it's my attempt to contribute to the world of programming, sparing others the trouble of figuring out certain issues for themselves.

The frontend is made with Next and TypeScript. Articles are currently stored in Markdown format inside my repo and are being served and rendered using remark-rehype. There isn't really a backend. It's a pretty basic affair, with few images and special features; just good, old-fashioned text.

This site is deployed on Netlify and runs on a custom domain, a1v0.de. main is the production branch.

Development is done in dev. Articles, too, are written in dev, just to keep things simple. While an article is still in a draft state, it is kept in the draft-articles directory, the contents of which are not visible on the website.

Articles live within a category. Each article can have only one category.

The URL structure is /[category-name]/[article-name]. This matches the file structure of the articles folder, where each category has its own directory.

I'm modelling my design on simple UK government websites like GOV.UK and NHS.UK. This is in part because I find the designs beautiful in their simplicity and in part because I am not much of a designer myself.

The dark-mode brand colours are variations on the above. I tweaked them to meet WCAG standards and to create a softer effect.

The colours in my Highlight.JS theme were incredibly hard to pick well, so I ended up choosing colours almost at random. They're not worth putting into the above table because they don't really fit with the overall brand; they're chosen to ensure some level of accessibility (mostly WCAG AA).

1. Implement a dark-mode toggle button. I assume this'll need to use cookies or similar. https://blog.logrocket.com/dark-mode-react-in-depth-guide/#accessibility-dark-mode
2. Lighthouse improvements:
   • Refresh the below Lighthouse comments as they're fairly old
   • "Remove unused JavaScript"
   • Legacy JavaScript in use
     • Not sure if this can be fixed by anything other than upgrading packages frequently
3. <code> elements (`` in markdown) don't wrap, leading to overflow issues on page edges on mobile, e.g. https://a1v0.de/servicenow/disable-customer-registration-csm-portal-servicenow. Unclear how to solve this other than by moving away from Markdown and going to TSX.
4. Replace boring bullet list of articles in categories with some sort of tile layout.
   • This is a decent design for a card/tile: https://chakra-ui.com/docs/components/card
5. Make all URLs case insensitive
   • Currently, you can type a category or slug in any case you want and it renders the page.
   • The same is not true for static pages like disclaimer, where disclaiMer returns a 404.
   • https://www.linkedin.com/pulse/solving-case-sensitivity-issues-nextjs-routes-middleware-islam-cavic/
6. Add TOC to articles.
   • rehype-slug already creates IDs for all headings, which is a start.
   • GOV.UK has a nice TOC style. Not sure if that'll require a lot of re-structuring of the base page to achieve. This is a good example: <https://design-system.service.gov.uk/accessibility/accessibility-strategy/ >
7. See if there's a way to render <a> tags as <Link> components when rendering markdown. (It doesn't look like there is, unless I replace Markdown entirely with TSX. Don't know if that's a good idea.)
8. Skip link doesn't set your tab position. It only moves your viewport down a bit. To be rectified.
9. Fix word wrapping: https://a1v0.de/c-sharp/puppeteersharp-failed-to-launch-browser-could-not-load-xpcom
   • You need to add ­ to the title.
   • You might need to create a fake HTML element in the DOM, set the string as innerHTML and then return its innerText to display.
   • This is convoluted but might be the only way to get it done.
   • Check all articles to see if full HTML could be useful in their titles.
10. Remove article list pages (i.e. category pages) from Google, if possible.
    • The problem here is that so many pages aren't indexed by Google at the moment, so the index pages are in a way my only hope.
    • On the other hand, those index pages won't score well on conversions, I'd guess
11. Logo active-but-not-hover style is messy. Can we create specific exceptions for the logo so that the active style, whether hovering or not, looks a certain way?
12. Main menu: Add some sort of on-click state change to hide the menu. This is to prevent the menu remaining visible if a user clicks a link to a page they're already on (which is silly of them, but they're not to know).
13. Check articles for broken links. Add a note to the disclaimer page and/or anywhere else to explain that I may occasionally check for broken links.
14. Active (i.e. clicked) breadcrumbs are hard to read (definitely in dark mode, possibly also in light mode). Needs a fix.
15. Add share links to make blog look more professional
16. Look at https://www.reddit.com/r/TechSEO/comments/16vignb/understanding_the_cause_of_google_search_consoles/ for advice on improving Google score.
17. Change contact page, since LinkedIn is no more.