{"id":3017,"date":"2024-07-15T17:30:33","date_gmt":"2024-07-15T23:30:33","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3017"},"modified":"2024-07-15T17:30:34","modified_gmt":"2024-07-15T23:30:34","slug":"notes-on-microfeatures-i-love-in-blogs-and-personal-websites","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/notes-on-microfeatures-i-love-in-blogs-and-personal-websites\/","title":{"rendered":"Notes On “Microfeatures I Love in Blogs and Personal Websites”"},"content":{"rendered":"\n

I enjoyed Danila Fedorin’s post Microfeatures I Love in Blogs and Personal Websites<\/a>. Here’s some stuff I think it cool is a great style of post that I wish more people did, especially since I was just poking at that<\/a>. Maybe I’ll do my own one of these days, but I had so many thoughts while reading Danila’s, I figured I could turn that<\/em> into a post.<\/p>\n\n\n\n

I’m going to go through each feature with what goes through my brain. It is clearly noted “[these features] need not be applied indiscriminately<\/em>” which I agree and want to underscore. These are mostly just nice ideas when appropriate<\/em>.<\/p>\n\n\n\n

Sidenotes<\/h2>\n\n\n\n

Danila mentions examples like this<\/a>. <\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Love it. Very classy. My thinking is:<\/p>\n\n\n\n

    \n
  1. Start as semantic HTML footnotes. Put the footnotes at the bottom of the article, use numbered jump links down to them, then link back.<\/li>\n\n\n\n
  2. Progressively enhance to a popover, probably as a drawer<\/a>. <\/li>\n\n\n\n
  3. If on a large enough screen, enhance to Nuclear Anchored Sidenotes<\/a>. CSS’ upcoming anchor positioning API<\/a> is going to be a godsend for this.<\/li>\n<\/ol>\n\n\n\n

    Easily Linkable Headings<\/h2>\n\n\n\n

    The idea here is instead<\/em> of something like this:<\/p>\n\n\n

    <h2<\/span>><\/span>\n  <a<\/span> href<\/span>=\"#particular-header\"<\/span>><\/span>\n    #\n    <span<\/span> class<\/span>=\"visually-hidden\"<\/span>><\/span>Jump Link to Particular Header<\/a<\/span>><\/span>\n  <\/a<\/span>><\/span>\n  Particular Header\n<\/h2<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    You just make the header itself a link like:<\/p>\n\n\n
    <a<\/span> href<\/span>=\"#particular-header\"<\/span>><\/span>\n  <h2<\/span> id<\/span>=\"particular-header\"<\/span>><\/span>Particular Header<\/h2<\/span>><\/span>\n<\/a<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    To me, it’s more about an authoring experience that doesn’t make you think about it at all. All headers should be linkable, automatically. I’ve long been a fan of this itty bitty WordPress plugin<\/a> that does it. Whatever you use to produce HTML from written content, automate it!<\/p>\n\n\n\n
    \n
    \n
    \"\"
    GitHub does it like this, after the header.<\/figcaption><\/figure>\n<\/div>\n\n\n\n
    \n
    \"\"
    The current design of this site does it like this, before the header.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
    Table of Contents<\/h2>\n\n\n\n
    I actually moved “Easily Linkable Headlines” up a few spots so that it would come before this section. My thinking is that once you have all headers linked properly, producing a table of contents is “easy”.  Loop over the headers, display. The more complicated (but optional) thing could could do is nesting<\/em> the headers. Meaning h4’s are nested under the preceding h3, which is nested under the preceding h2, etc. <\/p>\n\n\n\n
    I would think any major CMS will have some automated way of producing these things. I hand-wrote the PHP on this site to create the ones you can see in our sidebar on all posts (that have headings). <\/p>\n\n\n
    \n
    \"\"
    This site’s current Table of Contents design, which is in the sidebar and has position: sticky<\/code> so it hangs around as you scroll down a longer article.<\/figcaption><\/figure>\n<\/div>\n\n\n
    Showing Page Progress<\/h2>\n\n\n\n
    I actually disagree on this one. I think those horizontal bars that fill up as you scroll down the page are cheezy, unnecessary, and unhelpful. They do make for a pretty good demo on using Scroll-Driven Animations<\/a> though! <\/p>\n\n\n\n
    But we just talked about Table of Contents and Danila mentions a Table of Contents that highlights where you are, and that is actually pretty rad<\/a>. Agreed on that one! Maybe I can implement that to our Table of Contents one day. <\/p>\n\n\n\n
    Grouping Series of Posts<\/h2>\n\n\n\n
    It’s actually silly to write a series<\/em> of posts and then not<\/em> clearly link them together. Definitely do that! As many ways as you kind. That’s just good wayfinding for users. Nobody is going to be mad at you for helping you find your way around. <\/p>\n\n\n\n
    I built this kind of widget here on Boost for that: <\/p>\n\n\n
    \n
    \"\"
    The Article Series block on this site’s design at the time of writing. <\/figcaption><\/figure>\n<\/div>\n\n\n
    As I mentioned, this is a WordPress site, so I used Advanced Custom Fields<\/a> (very broadly useful) and the Post Object<\/a> Field Type applied to a custom Block<\/a>, so I can plop one of these little “Article Series” blocks where ever I want. Then I make the block a “Pattern”, so that I can re-use the exact same version of the Block all over the series. Update one, they all update, which makes it easy as you’re publishing over time. I realize that’s pretty WordPress-specific, but it’s worth building out something for this if you publish series!<\/p>\n\n\n\n
    Dialogs<\/h2>\n\n\n\n
    Heck yeah! +1 to interesting post formats. We all use all sorts of messaging services, so having that available to use as a design element with posts is a great idea. We’ve done limited versions of it sort of replicating a Discord conversation<\/a> a few times, but it doesn’t yet have that back-and-forth conversational feel, it’s just a list of posts. <\/p>\n\n\n\n
    I’d probably make a “left” custom design and a “right” custom design so I could just pick and choose them however makes the conversation look best. Oh and it would be a great use-case for text-wrap: balance<\/code><\/a> so that the actual “text bubbles” would feel rather sized to their content nicely. <\/p>\n\n\n\n
    Generally: art direct those articles! Make them interesting! <\/p>\n\n\n\n
    Code Blocks with Origin<\/h2>\n\n\n\n
    The idea here is showing off the name<\/em> of the file that you’re showing off a code block of.<\/p>\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n\n\n
     I mean, sure. Why not. I could see that being an interesting bit of metadata you might want to have available sometimes. I’ve just written one zillion code blocks in posts in my life and have rarely wanted it. I usually don’t care what you<\/em> name your file, it’s just a concept. In Danila’s case, it was based on user feedback about a pretty complex series of posts about a very technical subject, so point taken. <\/p>\n\n\n\n
    Here’s my list for both authors and users of code blocks:<\/p>\n\n\n\n
      \n
    1. Syntax highlighting, server side. Subset of languages I care about.<\/li>\n\n\n\n
    2. I don’t want to have to escape special characters myself. <\/li>\n\n\n\n
    3. Nice design. Distinct but not distracting. <\/li>\n\n\n\n
    4. A copy and paste button. <\/li>\n\n\n\n
    5. Line numbers that I can turn on or off. <\/li>\n\n\n\n
    6. Ability to highlight any lines.<\/li>\n<\/ol>\n\n\n\n
      I do like the idea of allowing for clickable links within code blocks. This is a good one for the list because I think it would be extra tricky to pull off and quite a nice touch. You either have to give up on having the code auto-escaped (so the HTML within could stay actual HTML) or do something really<\/em> clever, like not escaping HTML within comments?? or something??<\/p>\n\n\n
      .el<\/span> {\n  \/* Try the <a href=\"https:\/\/scroll-driven-animations.style\/tools\/view-timeline\/ranges\/\">View Timeline Visualizer<\/a> *\/<\/span>\n  animation<\/span>: reveal linear both;\n  animation-timeline<\/span>: view<\/span>(block);\n  animation-range<\/span>: cover 0%<\/span> cover 100%<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
      Markers for External Links<\/h2>\n\n\n\n
      I get the idea. The little box-with-arrow icon sorta like [\u2934]. <\/p>\n\n\n\n
      I can’t get behind it though. I’d say it’s just personal preference (I don’t really care if a link is “internal” or “external”), but I’ve also never seen data on if users find it helpful or heard any particularly strong or compelling opinions about it over my years. I do like it when links that are weird\/surprising are indicated though, like:<\/p>\n\n\n\n
        \n
      1. Email links (e.g. mailto:<\/code>)<\/li>\n\n\n\n
      2. Links to PDFs<\/li>\n\n\n\n
      3. Links to Media files (e.g. .mp3<\/code>)<\/li>\n<\/ol>\n\n\n\n
        Those have way different behavior than just “go to new website” so a heads up is nice. And since they are all <a><\/code> links (probably), CSS can help:<\/p>\n\n\n
        a<\/span>[href$=\".pdf\"<\/span>]<\/span>::after<\/span> {\n  content<\/span>: \" (PDF)\"<\/span>;\n}\na<\/span>[href^=\"mailto\"<\/span>]<\/span>::after<\/span> {\n  content<\/span>: \" (Email)\"<\/span>;\n}\n\/* etc. *\/<\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
        Danila’s idea of different markers for different destinations, while I’m personally not that<\/em> into it, can be pulled off in CSS with a little indie web service<\/a>. <\/p>\n\n\n
        \n
        \"\"<\/figure>\n<\/div>\n\n\n
        Link Preview<\/h2>\n\n\n\n
        I’d have a real light touch with this! It’s kind of unexpected behavior if you do something like make it a hover effect for a link. <\/p>\n\n\n\n
        Remember when posted about Standalone Web Components<\/a>, I linked up David Darnes’ <link-peak><\/code> component<\/a> which could help with this. <\/p>\n\n\n\n
    Huh! I just never thought to do it that way because it feels like… I dunno they aren’t really<\/em> links so it feels weird linking the whole thing. But the more I think about it the more I don’t hate it. Danila is doing it and even tosses in a little yellow fade technique<\/a> for good measure I see.<\/p>\n\n\n\n