Tuesday, October 17, 2023

Tried Obsidian. Formatted dates. Discussed CSS minimalism. Formatted navigation footer.

Today's Plan

Obsidian

I am trying out Obsidian today. It is a markdown editor that seems to specialize in easily linking notes together. It has that trendy modern IDE/Editor feel like Atom and VSCode. I hope there isn't too much latency.

I found a nice distraction-free theme that hides away all of the UI elements. I haven't tried the VI keys option yet, but it's good that it's there.

Obsidian has a built-in daily notes plugin, which I really like the looks of. You can just press a button and immediately it'll either open your existing daily note or create a new one from a template you've previously specified. It seems very in-line with what I'm doing on this site with my Daily Log. If I don't continue to use Obsidian, I'll definitely want to write a little script to do this kind of functionality myself.

Adding weekdays to dates

Wow, that was really straightforward! I found the formatting documentation for Luxon, which is what 11ty.rocks's tutorial led me to use. I found Luxon's formatting presets table and identified DATE_HUGE (output like Friday, October 14, 1983) or DATE_MED_WITH_WEEKDAY (output like Fri, Oct 14, 1983) as the two options I'd consider. I'm going with the huge option for now, because I really don't like how the medium abbreviates (for example) Tuesday as Tue when it really should be Tues!

I'm very pleased with having access to the day of the week at all. I might tinker more later, but this was a nice victory for today.

Minimal CSS and Accessibility

I've started working on my CSS and my CSS Breakdown project page. I'm prioritizing readability and inclusivity fixes. I am leaning heavily on Seirdy's wonderful article Best practices for inclusive textual websites. It is generally stricter than WCAG AAA, and focuses on concrete technical implementation. It goes over topics like backwards compatibility, layout and typography for readability, performance for slow internet connections, screen-reader compatibility, privacy, and unusual screen dimensions. It's 23 thousand words, but it has a very good table of contents.

I've done a lot of my own research on web accessibility, as it was one of my obsessions when I was first building my first website. I still have a lot to learn of course, especially as a beginner hobbyist who hasn't had the funding or connections to do user studies, but I've started to feel confident enough to form cited, well-read opinions and justify them to others.

The reason why I love Seirdy's article is that it's willing to make shininess sacrifices for inclusivity. I love that it explains their reasoning for each guideline, so that I can make an informed decision about which ones are right for my site. I like that it's maintained as a living document.

I don't want a shiny website. I want a welcoming, respectful website. By default. I want people to want to stay here a while.

Anyways. Passionate rant over. I think that my minimal CSS changes today are making this place feel a bit more like home. It is so, so helpful to have Seirdy's opinionated and implementation-specific advice.

Format Daily Log navigation

I'm generally very happy with what I threw together to format the daily log navigation at the bottom of each log entry.

Styling

I have added these styles:

footer {    
  margin-top: 2rem;    
}    
    
nav.sequenceNav ol {    
  padding: 0;    
  list-style: none;    
  display: flex;    
  justify-content: space-between;    
  flex-wrap: wrap;    
  gap: 2ch;    
}

I removed the list styling, turned the ol tag into a flex container, and adjusted the flex settings.

The footer margin is to add some extra breathing room. Because I have no other visual cues to distinguish regions of my pages (like horizontal lines or background color changes), I want a little more whitespace to clarify.

I'm pretty happy with it! If I were making a shiny website, I would probably switch to symbols instead of writing out next, previous, etc. But I'm not, this time. I don't think it's necessary, and I think it has the potential to introduce confusion. This way is less likely to break.

HTML

I had to adjust the HTML a little. I found that listing the full page titles made things difficult to parse, so I moved to simply stating first, previous, index, next, and latest.

When there is no previous or next entry to link to, it now says "no previous" or "no next". I'm not completely satisfied with this, but I think it's less ambiguous than just saying nothing.

I gave this nav a class of sequenceNav so that I can reuse the styles in other parts of the site. I still need to refactor it into a partial template in Eleventy.

Task Ideas