21 votes

Can you critique my blog?

The blog is daviramos.com

It is more like a 2000s blog than whatever blog means today. Just things I wanna write sometimes. It is not commercial, no ads. I like fast things. Images are heavily optimized, not mandatory, and always inside posts.

Bearblog is reliable and minimal without being barebones. I wrote about it before, so there's no need to go over it again here.

I really want to know if the way I’ve organized my blog makes any sense. Please keep in mind that I’m not a developer, programmer, or anything like that. I chose Bearblog partly because I already liked the default theme and didn’t need to change much. I appreciate minimalism, understand Markdown, a little HTML, and can "decode" simple CSS using a mix of intuition, Google, and ChatGPT. I only changed stuff that was not very deep and would not be hard to maintain.

css style (my changes are in the end)
:root {
    --width: 720px;
    --font-main: Verdana, sans-serif;
    --font-secondary: Verdana, sans-serif;
    --font-scale: 1em;
    --background-color: #fff;
    --heading-color: #222;
    --text-color: #444;
    --link-color: #3273dc;
    --visited-color:  #8b6fcb;
    --code-background-color: #f2f2f2;
    --code-color: #222;
    --blockquote-color: #222;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #01242e;
        --heading-color: #eee;
        --text-color: #ddd;
        --link-color: #8cc2dd;
        --visited-color:  #8b6fcb;
        --code-background-color: #000;
        --code-color: #ddd;
        --blockquote-color: #ccc;
    }
}

body {
    font-family: var(--font-secondary);
    font-size: var(--font-scale);
    margin: auto;
    padding: 20px;
    max-width: var(--width);
    text-align: left;
    background-color: var(--background-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
    color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-main);
    color: var(--heading-color);
}

a {
    color: var(--link-color);
    cursor: pointer;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

nav a {
    margin-right: 8px;
}

strong, b {
    color: var(--heading-color);
}

button {
    margin: 0;
    cursor: pointer;
}

time {
    font-family: monospace;
    font-style: normal;
    font-size: 15px;
}

main {
    line-height: 1.6;
}

table {
    width: 100%;
}

hr {
    border: 0;
    border-top: 1px dashed;
}

img {
    max-width: 100%;
}

code {
    font-family: monospace;
    padding: 2px;
    background-color: var(--code-background-color);
    color: var(--code-color);
    border-radius: 3px;
}

blockquote {
    border-left: 1px solid #999;
    color: var(--code-color);
    padding-left: 20px;
    font-style: italic;
}

footer {
    padding: 25px 0;
    text-align: center;
}

.title:hover {
    text-decoration: none;
}

.title h1 {
    font-size: 1.5em;
}

.inline {
    width: auto !important;
}

.highlight, .code {
    padding: 1px 15px;
    background-color: var(--code-background-color);
    color: var(--code-color);
    border-radius: 3px;
    margin-block-start: 1em;
    margin-block-end: 1em;
    overflow-x: auto;
}

/* blog post list */
ul.blog-posts {
    list-style-type: none;
    padding: unset;
}

ul.blog-posts li {
    display: flex;
}

ul.blog-posts li span {
    flex: 0 0 130px;
}

ul.blog-posts li a:visited {
    color: var(--visited-color);
}

/* MY CHANGES */

/* That is an entirely new class for text */
/* that goes below an image as a subtitle */
.subtitle {
    text-align: center;
    font-style: italic;
    font-size: small;
    font-weight: bold;
}

.upvote-button {
    display: none !important; /* Hides button, overrides other settings */ 
        pointer-events: none; /* Disable mouseif it visible */
}

.title h1 {
    font-size: 1.2em;
}

nav a {
    font-size: 0.95em;
}

footer {
	font-size: 0.95em;  
}

.spaced-line {
	margin: 100px 0;
	text-align: center;
}

/* Keep images centered */
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

For comparison, see Herman's blog to see something closer to the default. He’s the creator of Bearblog.

Here’s what I’ve changed: the font size for the blog’s name, the navbar, and the footer that says Powered by Bear ʕ•ᴥ•ʔ is slightly smaller (0.95em instead of 1em). I added a guestbook and links to the English and Portuguese pages in the navbar. I also changed the favicon and the site's meta-image to different-sized images of Humphrey Bogart.

The English and Portuguese pages are in their respective languages and only list posts in those languages. I don’t know if it’s possible to customize the navbar further. EDIT: bearblog has a builtin voting feature which I removed with CSS. All pages and posts are configured with their appropriate language via Bearblog, which I assume browsers and search engines can detect. Does it make sense to make my blog bilingual this way?

Maybe this is a new feature, but Bearblog lets you organize posts into subfolders/subdomains. So I placed all Brazilian Portuguese posts under /br/, which feels logical and predictable. I haven’t shared them anywhere yet, so there’s no risk of broken links. On the other hand, I already have several English posts that have been shared elsewhere. If I move all English posts under /en/, I’d love to find a way to let the older links keep working gracefully. Is that possible somehow? Maybe that’s a question for Herman, but I have a follow-up: Other than my obsession with tiny details, is there any value in separating my posts under either /br/ or /en/? Titles and URLs are unlikely to conflict between languages, and if they do, I can always add a -pt or -en suffix like in example-post-pt.

Other than that, I’d welcome any advice on how to improve my blog—whether in big ways or subtle ones.

Thanks!

23 comments

  1. [11]
    aphoenix
    Link
    From a technical point of view, I have almost no critique for you. It scales well, everything works, and there is great beauty in simplicity. I'm not quite sure what you are want to use...

    From a technical point of view, I have almost no critique for you. It scales well, everything works, and there is great beauty in simplicity. I'm not quite sure what you are want to use .spaced-line for, but if you want to keep it in line with the other sizing usages, you can convert px to em by dividing by 16 (in this specific case, because the default is 1em is 16px - it is not a general rule that 1em = 16px). So you could make it like this:

    .spaced-line {
      margin: 6.25em 0;
      text-align: center;
    }
    

    Then .spaced-line will scale at the same rate as everything else if you do CTRL + or CTRL -.

    That's a huge nitpick, but is the only thing I could really think of.

    You write very well, I have no critique there. Making it bilingual is great.

    I signed your guestbook. Lovely site!

    6 votes
    1. [9]
      lou
      (edited )
      Link Parent
      Thanks! That's awesome of you to give some attention to my little blog! I asked GPT to create that class for me because I didn't want to write <br><br><br><br> ====================...

      Thanks! That's awesome of you to give some attention to my little blog!

      I asked GPT to create that class for me because I didn't want to write

      <br><br><br><br>
      
      ====================
      
      <br><br><br><br>
      

      At the end of every post. So now I can write this instead:

      <p class="spaced-line">====================</p>
      

      I was experimenting with how to end my posts and that was one idea that I had. I wanted something a little cleaner with more separation between the text and the messages I usually put below them. I didn't want to use an image so I just typed 20 =. You can see how it looks by going to the bottom of this post: https://daviramos.com/meditate-wrong/.

      I don't know if that is the right way to do things, I just wanted to avoid typing a bunch of ugly <br> all the time :P

      Maybe I can convert it to em, I'll follow your instructions, thanks!

      3 votes
      1. [8]
        aphoenix
        Link Parent
        Ah gotcha! It may not be worthwhile at this point, but here is something you could do that might save you a bit more = typing. Here is the CSS that I suggest: .spaced-line::after { display: block;...

        Ah gotcha! It may not be worthwhile at this point, but here is something you could do that might save you a bit more = typing.

        Here is the CSS that I suggest:

        .spaced-line::after {
          display: block;
          margin:6rem 0px;
          text-align: center;
          content: '====================';
        }
        

        Then the usage would look like this:

        <div class="spaced-line"></div>

        Then you don't have to type the === every time, and if you decide that you want to change what it looks like down the line, you can change that in just one place.

        That said, this is really down to personal preference either way.

        6 votes
        1. [5]
          Wes
          Link Parent
          To take it a bit further, you could use an <hr> for semantic reasons, and to prevent the text from reflowing to a second line on mobile. To do that, you can use dashed borders to get a similar...

          To take it a bit further, you could use an <hr> for semantic reasons, and to prevent the text from reflowing to a second line on mobile. To do that, you can use dashed borders to get a similar effect to the above. So to use this with <hr class="spaced-line">, you'd apply:

          hr.spaced-line {
          	width: calc(100% - 20px);
          	max-width: 255px;
          	margin: 8rem auto;
          	height: 2px;
          	border: none;
          	border-top: 2px dashed var(--text-color);
          	border-bottom: 2px dashed var(--text-color);
          }
          

          That's a simple, clean way of doing it. However, it does look a little visually distinct from the current style. The dashes are more dense. If you want to more closely match the existing text, you can use some background trickery instead.

          hr.spaced-line {
          	width: calc(100% - 20px);
          	max-width: 255px;
          	margin: 8rem auto;
          	height: 2px;
          	border: none;
          	border-top: 2px solid;
          	border-bottom: 2px solid;
          	border-image: repeating-linear-gradient(to right, var(--text-color) 0 10px, transparent 10px 15px);
          	border-image-slice: 1;
          }
          

          The only catch to this approach is that the last dash may be of a different length when it cuts off. But it's pretty seamless overall.

          If we're really picking this nit, we could also reduce the vertical spacing for mobile, since an 8rem gap begins to feel pretty large at that scale. You could do it with vw units, but I like to use container queries these days. They do technically change the math on how container size is calculated though; elements no longer "shrink wrap" to their contents or use margin collapse. It shouldn't be a problem here, but I wanted to mention it just in case.

          So first we define a container at the article-level:

          main {
          	container-name: article;
          	container-type: inline-size;
          }
          

          Then we read in the width of that element using container width units, clamping it for some nice upper and lower bounds:

          hr.spaced-line {
          	margin: clamp(4rem, 18cqw, 8rem) auto;
          }
          

          That should make it very responsive. You can then use container units elsewhere when they're relevant. Shoring up margins, tweaking font sizes, and generally making things more fluid.

          One final side tangent here. Semantically, it's probably best to have an <article> tag inside <main>. So the hierarchy is something like:

          • <main>
            • <h1>
            • <time>
            • <article>

          Not a huge deal, but I thought I'd point it out.

          Love the minimalistic design, @lou. Great job on the blog.

          10 votes
          1. [4]
            lou
            Link Parent
            Awesome! I can and will test all the CSS suggestions on a hidden test post to see exactly what they look like. When it comes to HTML tags such as <article> that is all done by bearblog. I only...

            Awesome!

            I can and will test all the CSS suggestions on a hidden test post to see exactly what they look like.

            When it comes to HTML tags such as <article> that is all done by bearblog. I only write markdown, which allows HTML but I don't know to what extent. I am not sure if I have access to that part of the markup, or how I would override these defaults if needed. I just assume Herman knows what he is doing on that end. But perhaps there is something I can do to improve the HTML as well. I'll check with him!

            You gave me a lot. Thank you so much for the wonderful and thoughtful suggestions and code!

            1 vote
            1. [3]
              fxgn
              Link Parent
              If you style the hr tag directly (without using any other classes), you can write it directly in Markdown: text --- text after the line

              If you style the hr tag directly (without using any other classes), you can write it directly in Markdown:

              text
              
              ---
              
              text after the line
              
              1. lou
                Link Parent
                Cool! I do have access to all the css so I can do that. Thanks!

                Cool! I do have access to all the css so I can do that. Thanks!

                1 vote
              2. Wes
                Link Parent
                That's true, though note that there's other <hr> tags on the page already that will also be affected by this. Unfortunately both sit at the same depth in the DOM, so one or the other will need to...

                That's true, though note that there's other <hr> tags on the page already that will also be affected by this. Unfortunately both sit at the same depth in the DOM, so one or the other will need to use classes to be disambiguated.

                Though if an <article> were wrapped around the post as suggested above, that could be used to target the post <hr>s without additional classes.

                1 vote
        2. lou
          Link Parent
          Oh yeah that is much better. I will be using that thanks!

          Oh yeah that is much better. I will be using that thanks!

          3 votes
        3. rodrigo
          Link Parent
          Or, instead of an empty div, you could wrap the bottom post content inside the div and style it without using ::after nor content: . I think it's more elegant and semantically better.

          Or, instead of an empty div, you could wrap the bottom post content inside the div and style it without using ::after nor content: . I think it's more elegant and semantically better.

          3 votes
    2. Timwi
      Link Parent
      Measurements in px also scale at the same rate as everything else if you do CTRL + or CTRL -.

      Measurements in px also scale at the same rate as everything else if you do CTRL + or CTRL -.

      1 vote
  2. rodrigo
    Link
    Recently I added an English version to my WordPress-powered, 11+ years old blog, using a plugin called Polylang (the free version). It's quite nice! In the back-end, it's as if I had another blog,...

    Recently I added an English version to my WordPress-powered, 11+ years old blog, using a plugin called Polylang (the free version). It's quite nice! In the back-end, it's as if I had another blog, but sharing resources — layout, plugins, even assets like images used in posts —, all translatable and yet with minimal overhead.

    It's way more complex than your solution, if anything else because it involves a self-manage CMS, but if you're serious about your blog, may worth the investment (of time, resources, and a little money).

    5 votes
  3. KakariBlue
    Link
    I appreciate the speed of loading in the days of some web packager for every site (the jank, content shifts and, on storefronts, moving of a cursor in a search box make me wish for simpler sites)....

    I appreciate the speed of loading in the days of some web packager for every site (the jank, content shifts and, on storefronts, moving of a cursor in a search box make me wish for simpler sites).

    The images are used well in the posts I checked and Noirvember was a fun read!

    4 votes
  4. lou
    Link
    Thank you so much for all the great suggestions! Does anyone have additional input on this part?

    Thank you so much for all the great suggestions!

    Does anyone have additional input on this part?

    Maybe this is a new feature, but Bearblog lets you organize posts into subfolders/subdomains. (...) Other than my obsession with tiny details, is there any value in separating my posts under either /br/ or /en/?

    4 votes
  5. [2]
    Zorind
    Link
    Nice blog! I’m a big fan of Bear, and might try setting one up at some point. I think I like the separation via folders into the folders /br and /en. I like it better than appending the language...

    Nice blog! I’m a big fan of Bear, and might try setting one up at some point.

    I think I like the separation via folders into the folders /br and /en. I like it better than appending the language at the end option.

    There may be a way to setup redirects where you could link the old non-foldered English posts to the new ones under the /en folder, but I’m not sure how you’d set that up with Bear. I’m also not sure it’s really needed (other than for consistency), since you have the navbar set up to allow for filtering to just the English and Portuguese post lists.

    I would just have new posts going forward sorted into the folders, and not worry about the old posts - to prevent breaking old links.

    3 votes
    1. lou
      Link Parent
      Thanks! I wouldn't do that, though. Only if two URLs where the same and that is unlikely since I can change the URLs myself ;)

      I think I like the separation via folders into the folders /br and /en. I like it better than appending the language at the end option.

      Thanks! I wouldn't do that, though. Only if two URLs where the same and that is unlikely since I can change the URLs myself ;)

      3 votes
  6. [7]
    daychilde
    Link
    In regard to redirecting existing URLs, this is a good idea. You can add redirects to your .htaccess if you're using apache (if you don'tknow what you're using, it's probably apache). This is a...

    In regard to redirecting existing URLs, this is a good idea. You can add redirects to your .htaccess if you're using apache (if you don'tknow what you're using, it's probably apache). This is a decent article on it: https://www.semrush.com/blog/301-redirect-htaccess/

    And chatgpt will understand how to write the specific rules so you see how that works. That, to me, is one of the excellent usecases for AI. :)

    The blog itself: Incredibly simplistic. But those designs stand the test of time. Your goal is communication, and this design supports that. I support your design.

    You may want to consider:

    1. When users finish an article, they are at the bottom of your page, so you might wish to duplicate the navigation, or at least some elements of it, at the bottom. Or at least have a link back to the top of the page.
    2. You may wish to link together articles where it makes sense to do so. Perhaps previoous/next links, or in specific cases if you write a series of articles, linking to the next/previous in that series (this would be done manually, of course)
    3. A popular feature many blog softwares have would be some sort of "related posts" - to encourage people to find more blogs posts and make it easier for them to find them. There is a little bit of inertia that will prevent some from going back to the list of posts and choosing another.

    But it's all about what makes sense to you, imho.

    I have other preferences, but they are preferences - design choices - and you have made them and I think they are good. (For example, I prefer justified text, but there are arguments for and against it)

    3 votes
    1. [6]
      lou
      (edited )
      Link Parent
      Thanks! That is mostly the default bearblog template. I like it a lot, it reminds me of how Tildes was designed. The one additional change I wanna do is to disable the night mode. At night it will...

      Thanks!

      The blog itself: Incredibly simplistic.

      That is mostly the default bearblog template. I like it a lot, it reminds me of how Tildes was designed. The one additional change I wanna do is to disable the night mode. At night it will show in night mode on some devices. I don't like the idea of my blog having two different looks depending on time of day.


      As far as I know, Bearblog doesn't give me access to the server. But Herman, the owner of bearblog, always answers my emails. Maybe he can help.

      The posts are grouped by the tags. On bearblog tags can be used to create custom lists of posts very easily, and I can customize how they are shown. Once I have enough posts I may create special pages for different kinds of content. I currently only have 13 posts, 8 in English and 5 in Portuguese. It will take a long time for me to have a lot of content, as this is not a commercial project and I will only write when I feel like it.

      I think related posts are a great idea but right now I don't have much to relate. Lots of posts are the only of that kind.

      That said, I really like the minimalistic aspect and I may even remove some stuff. Like the guest book which has been up for four months and only got phishing messages in Russian. Other than my dear friend @aphoenix, of course ;)

      I am also a little doubtful that anyone will go from my blog to Tildes or Beehaw, only the other way around. So I may remove that mention altogether.

      I really am a minimalist, it seems.

      Thank you for the awesome suggestions!

      5 votes
      1. [5]
        Zorind
        Link Parent
        Please keep night mode! I have my phone set up so that it requests night mode at night so I don’t get blinded in bed by bright white screens. I much prefer dark mode in general, but on my phone I...

        The one additional change I wanna do is to disable the night mode.

        Please keep night mode! I have my phone set up so that it requests night mode at night so I don’t get blinded in bed by bright white screens. I much prefer dark mode in general, but on my phone I have it in light mode during the day. But dark mode at night is so much nicer.

        3 votes
        1. [4]
          lou
          Link Parent
          I get you and will keep the night mode. It made me a little uncomfortable because I did the blog and was never warned that it would look completely different for some people at night. I don't like...

          I get you and will keep the night mode. It made me a little uncomfortable because I did the blog and was never warned that it would look completely different for some people at night. I don't like how it looks at night at all. I wish the user could choose their preferred mode, the website covertly going into night mode did bother me. I don't believe I have the ability to create a night mode switch, but I should be able to change the night mode into something I like. Perhaps I'll just look for a well-known color scheme and adapt it to my blog. I'll try to do that, but it'll take some time.

          Thanks!

          1 vote
          1. [3]
            Zorind
            (edited )
            Link Parent
            I can see why that would be surprising / annoying. I do tend to like sites that respect the “user preference” for light/dark mode - which is often a browser setting or device-level setting that...

            I can see why that would be surprising / annoying. I do tend to like sites that respect the “user preference” for light/dark mode - which is often a browser setting or device-level setting that the website picks up on via browser cookies.

            Some do have toggles, though I’m not sure if I’ve seen any Bear blogs that have a toggle implemented.

            You could see if any of the dark themes on Tildes have colors you like.

            Personally I have it set to “Dracula.”

            Edit: I'm also a big fan of the Catpuccin themes, but haven't gotten around to trying to style tildes with it yet.

            1 vote
            1. [2]
              lou
              Link Parent
              A bit of a random question but do you know if there's a way for me to trigger the dark mode on Firefox? Maybe something accessible through the developer tools? To change it I have to see how it...

              A bit of a random question but do you know if there's a way for me to trigger the dark mode on Firefox? Maybe something accessible through the developer tools? To change it I have to see how it looks on command.

              1. Zorind
                Link Parent
                Yes! If you open up the "Inspect" window, in the main inspector tab in the top of the middle pane (that has the CSS), there should be a sun and moon icon that will toggle between light and dark...

                Yes! If you open up the "Inspect" window, in the main inspector tab in the top of the middle pane (that has the CSS), there should be a sun and moon icon that will toggle between light and dark mode respectively.

                Stack Overflow post with image

                1 vote