Month: November 2019

I started to blog way back in 2005, and while I was skeptical whether it would work out and was worth my time, I just tried it and danced 💃 and wrote like no one was watching (which definitely was the case for a while). Many of these early posts are slightly embarrassing from today's point of view, but nevertheless I decided to keep them around, since they are a part of me. Remember, this was before social networks became a thing. Actually, social networks almost killed my blogging, in both 2016 and 2017 respectively I only wrote one post, but plenty of tweets and Facebook posts. Here's a screenshot of the old blog:

One of the reasons why I blogged less was also my hand-rolled stack that the blog was built upon: A classic LAMP stack, consisting of Linux, Apache, MySQL, and handwritten PHP 5. Since I had (and still have) no clue of MySQL character encoding configuration, I couldn't store emoji 🤔 in my database, but hey ¯\_(ツ)_/¯. The switch to HTTPS then killed my login system (that before on HTTP anyone could have sniffed, did I mention I was clueless?). In the end I had to log into phpMyAdmin to enter a new blog post into the database by hand. It was clearly time for a change.

Luckily this was the time when static site builders became more and more popular. I had heard good things of Zach Leatherman's Eleventy, so I went for it. It was super helpful to have the eleventy-base-blog repository that shows how to get started with Eleventy. I took extra care to make sure all my old URLs still worked, and learned more than I wanted about .htaccess files and .htaccess rewrite maps, since we all know that cool URIs don't change. There I was with a modern stack, and a 2005 design.

Now, I've finally also updated the design, and, while I'm not a designer, I still quite like it. Obviously it supports prefers-color-scheme, aka. Dark Mode and also uses the <dark-mode-toggle> custom element, but I've also decided to go for a responsive "holy grail" layout that is based on CSS Grid.

Here're the resources that helped me build the new Blogccasion:

• The circuit board SVG background is from Steve Schoger's site Hero Patterns.
• The core of my CSS Grid code is from Alligator's article CSS Grid: Holy Grail Layout. I learned about the particularities of Grid's minimum size of an fr unit, which is auto and which caused a Grid blowout described in Chris Coyier's aptly named article Preventing a Grid Blowout.
• The Webmentions integration is from Sia Karamalego's article An In-Depth Tutorial of Webmentions + Eleventy.
• Some of the typography is inspired by Matej Latin's article 5 Keys to Accessible Web Typography and the Tufte CSS code.
• The SVG icons are from the SuperTinyIcons project.
• Some of the CSS is based on Mozilla's CSS Remedy project.
• Last not least, the Valid HTML5 badge is inspired by Bradley Taunt's article Using HTML Validator Badges Again.
• The Synthwave '84 code theme for Visual Studio Code originally is from Robb Owen. I'm using the port for PrismJS by Marc Backes.

🙏 Thanks everyone for letting me stand on your shoulders!

There're still some rough edges, so if you encounter a problem, please report an issue. It's well-known that there're a lot of encoding errors in the older posts. At some point I broke my database in an attempt to convert it to UTF-8 🤦‍♂️… If you care, you can also propose an edit straightaway, the edit this page on GitHub link is 👇 at the bottom of each post. Thanks, and welcome to the new Blogccasion.

This post appeared first on https://blog.tomayac.com/2019/09/29/the-redesigned-blogccasion-is-live/.

🎉 Chrome finally accepts SVG favicons now that crbug.com/294179, where this feature was demanded on September 18, 2013(!), was fixed. This means that you can style your icon with inline prefers-color-scheme and you'll get two icons for the price of one!

<!-- icon.svg -->
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <style>
    circle {
      fill: yellow;
      stroke: black;
      stroke-width: 3px;
    }
    @media (prefers-color-scheme: dark) {
      circle {
        fill: black;
        stroke: yellow;
      }
    }
  </style>
  <circle cx="50" cy="50" r="47"/>
</svg>

<!-- index.html -->
<link rel="icon" href="/icon.svg">

You can see a demo of this in action at 🌒 dark-mode-favicon.glitch.me ☀️. Until this feature will have landed in Chrome Stable/Beta/Dev/Canary, be sure to test it with the last Chromium build that you can download from François Beaufort's Chromium Downloader.

Full credits to Mathias Bynens, who independently has created almost the same demo as me that I didn't check, but whose link to Jake Archibald's post SVG & media queries I did follow. Mathias has now filed the follow-up bug crbug.com/1026539 that will improve the favicon update behavior (now you still need to reload the page after a color scheme change).

This post appeared first on https://blog.tomayac.com/2019/09/21/prefers-color-scheme-in-svg-favicons-for-dark-mode-icons/.