Development Log

• Rewired the way that blogposts are being rendered; I misused the pagination feature of Eleventy, which is meant for paginated content. I now use a custom collection to render the blogposts.

• Added a new site "Work with me"
• Added a new Case Study for "bibianezimba.com"
• Added a new Timeline Entry for my current position at "Lean Coders"
• Made the "hire" page invisible, while it is not needed.

• Blog posts now have OG/Twitter-Card Images that are showing when a link to one of them is shared! I am using Stephanie Eckles eleventy-plugin-social-images.

• added a new blog post
• added Fathom Analytics. A big step for me. Hopefully this'll give me some insight into how the website is being received.
• changed the statement on the imprint accordingly
• drafted posts are now visibly highlighted for me, when I look at the site on local
• fixed a small visual bug that caused the main menu to be vertically misaligned

• Refactored the mobile menu interaction to be more accessible. While the initial :target was alright, it isn't a good solution because it doesn't provide enough information for the screenreader. Plus, it isn't WCAG compliant with the way that focus is managed.
• Refactored the submenu interaction to be more accessible. It is now also WCAG compliant in the way that focus is managed.

• Redesigned the overall layout. This was really important, because the way that the compound grid was layed out initially meant a overall decrease in available space for the main content. This meant a lot of nested orientation: landscape; mediaqueries and a lot of repetitive code. I decided to pull the plug and switched to a more centered layout on desktop. With this, I did some visual tweaks everywhere to tied it all together.

• Added "Case Studies", listing some projects that are intended to give more insight into the visual work that was done
• Changed Some Urls and softly redesigned the navigation, including a very it'll-do-type-of dropdown-menu (that leaves desire for improvement)

• New redesigned Work-Experience pages!

• add syntax-highlighting

• add interrupting sections of content to some timeline events, .intermezzo, as nunjucks macros
• add work-domain patterns to represent ux, design, frontend, backend & brand to be used in presentational "work-diagrams" (first as images, then as svg). They're accent-color-override sensitive!
• remove the arrow-icons from the main-navigation and place the main-navigation more accurately on the main grid
• add a fix for the .ico favicon file; Sometimes, the mime-type isn't correct
• Replace the websites main <h1> with "hello, yes." Instead of "Thomas M. Semmler". Need to test how this affects/works
• add some missing :hover styles.

• added the "work" page. This page displays a sort of timeline of my professional experiences.
• try preloading some fonts again, as lighthouse wanted me to do it lol. This is never gonna end, is it?
• all kinds of smaller color-contrast corrections to make the website more accessible
• add accent-color-override sensitive favicons

• improved font-loading, by utilising a service-worker sw.js, with help from Chris Ferdinandi.
• some files were renamed to be a bit more consistent and self-documenting.
• implement a page for listing the 10 most recent blog posts and an archive list, that lists all posts.
• add some new filters to eleventy: console in order to debug collections (as the dump filter seems to not work for this), dateReadable, to format the blog post dates to a readable date.
• tweak how the headlines' URL fragments are displayed.
• add the eleventy-plugin-nesting-toc by Jordan Shurmer plugin to automatically generate table of contents
• allow the table of contents to highlight whatever current headlined section is in view which... kinda works. This needs some tweaking in the future.
• add a new template for blog post single views.
• add some global meta data to make this easier accessible throughout the website.
• add an h-card.
• all kinds of minor and bigger changes to the CSS.

Here is a bit of a summary of the things that were important to me for the initial, first version of the site:

• All markdown-rendered headlines have anchor links. They are being generated by the markdown-it-anchor plugin - enhanced with code from Nicolas Hoizey, based on suggestions researched by Amber Wilson.
• I wanted to reduce JavaScript as much as possible use it only to progresively enhance. So the :target-selector in combination with url-fragments is being utilized to show the mobile flyout-menu and the color-settings on larger screens. I have not made this before - if you discover an issue, please let me know!
• Providing a skip-to-content link. While researching on what knowledgable people that I look up to have to say about this topic, I also remembered reading that one of the WCAG suggested techniques for the corresponding success criteria (2.4.1, Bypass Blocks) suggested adding links to multiple parts of the website. I never had the opportunity to implement that, so now was the time. I'm curious to find out if there is any response to this.
• Get it out as quickly as possible. I new that I didn't want to wait until I had all the content and design for everything done. I just wanted to be a little bit ahead with it, so that I could pick up development work whenever. But I also needed it to find a new job, so I decided that it needs to go live with the two pages most important for that (Hiring & About) and the imprint.