{"id":3317,"date":"2019-11-29T18:02:43","date_gmt":"2019-11-29T16:02:43","guid":{"rendered":"https:\/\/blog.tomayac.com\/2019\/09\/29\/the-redesigned-blogccasion-is-live\/"},"modified":"2019-11-29T18:02:43","modified_gmt":"2019-11-29T16:02:43","slug":"the-redesigned-blogccasion-is-live","status":"publish","type":"post","link":"https:\/\/tomayac.com\/wordpress\/2019\/11\/29\/the-redesigned-blogccasion-is-live\/","title":{"rendered":"The redesigned Blogccasion is live"},"content":{"rendered":"\n\t\t\t<p>I started to blog way back in <a href=\"https:\/\/blog.tomayac.com\/2005\/10\/23\/why-i-started-to-blog-010629\/\">2005<\/a>,\nand while I was skeptical whether it would work out and was worth my time,\nI just tried it and danced \ud83d\udc83 and wrote like no one was watching\n(which definitely was the case for a while).\nMany of these early posts are slightly embarrassing from today's point of view,\nbut nevertheless I decided to keep them around, since they are a part of me.\nRemember, this was before social networks became a thing.\nActually, social networks almost killed my blogging, in both\n<a href=\"https:\/\/blog.tomayac.com\/2016\/04\/22\/world-wide-web-conference-www2016-trip-report-004735\/\">2016<\/a>\nand <a href=\"https:\/\/blog.tomayac.com\/2017\/02\/20\/service-worker-detector-chrome-extension-released-221400\/\">2017<\/a>\nrespectively I only wrote one post, but plenty of <a href=\"https:\/\/tomayac.com\/tweets\/\">tweets<\/a>\nand Facebook posts.\nHere's a screenshot of the\n<a href=\"https:\/\/web.archive.org\/web\/20060214094329\/http:\/\/blog.tomayac.de\/index.php?date=2005-10-23&amp;time=01:06:29&amp;perma=Why+I+started+to+blo.html&amp;\">old blog<\/a>:<\/p>\n<p><img src=\"https:\/\/user-images.githubusercontent.com\/145676\/69877570-e1d4da80-12c2-11ea-8a5b-34615919751f.png\" alt=\"The old Blogccasion\"><\/p>\n<p>One of the reasons why I blogged less was also my hand-rolled stack that the blog was built upon:\nA classic LAMP stack, consisting of Linux, Apache, MySQL, and handwritten PHP\u00a05.\nSince I had (and still have) no clue of MySQL character encoding configuration,\nI couldn't store emoji \ud83e\udd14 in my database, but hey <code>\u00af\\_(\u30c4)_\/\u00af<\/code>.\nThe switch to HTTPS then killed my login system (that before on HTTP anyone could have sniffed,\ndid I mention I was clueless?).\nIn the end I had to log into phpMyAdmin to enter a new blog post into the database by hand.\nIt was clearly time for a change.<\/p>\n<p>Luckily this was the time when static site builders became more and more popular.\nI had heard good things of <a href=\"https:\/\/www.zachleat.com\/\">Zach Leatherman<\/a>'s\n<a href=\"https:\/\/github.com\/11ty\/eleventy\">Eleventy<\/a>, so I went for it.\nIt was super helpful to have the\n<a href=\"https:\/\/github.com\/11ty\/eleventy-base-blog\">eleventy-base-blog<\/a>\nrepository that shows how to get started with Eleventy.\nI took extra care to make sure all my old URLs still worked,\nand learned more than I wanted about\n<a href=\"https:\/\/github.com\/tomayac\/blogccasion\/blob\/master\/htaccess.njk\"><code>.htaccess<\/code><\/a> files\nand <a href=\"https:\/\/github.com\/tomayac\/blogccasion\/blob\/master\/htaccess_rewritemap.njk\"><code>.htaccess<\/code> rewrite maps<\/a>,\nsince we all know that <a href=\"https:\/\/www.w3.org\/Provider\/Style\/URI\">cool URIs don't change<\/a>.\nThere I was with a modern stack, and a 2005 design.<\/p>\n<p>Now, I've finally also updated the design, and, while I'm not a designer, I still quite like it.\nObviously it supports\n<a href=\"https:\/\/web.dev\/prefers-color-scheme\/\"><code>prefers-color-scheme<\/code>, aka. Dark Mode<\/a>\nand also uses the <a href=\"https:\/\/github.com\/GoogleChromeLabs\/dark-mode-toggle\"><code>&lt;dark-mode-toggle&gt;<\/code><\/a>\ncustom element, but I've also decided to go for a responsive &quot;holy grail&quot; layout\nthat is based on <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Grid_Layout\">CSS Grid<\/a>.<\/p>\n<p>Here're the resources that helped me build the new Blogccasion:<\/p>\n<ul>\n<li>The circuit board SVG background is from <a href=\"https:\/\/twitter.com\/steveschoger\">Steve Schoger<\/a>'s\nsite <a href=\"https:\/\/www.heropatterns.com\/\">Hero Patterns<\/a>.<\/li>\n<li>The core of my CSS Grid code is from Alligator's article\n<a href=\"https:\/\/alligator.io\/css\/css-grid-holy-grail-layout\/\">CSS Grid: Holy Grail Layout<\/a>.\nI learned about the particularities of Grid's minimum size of an <code>fr<\/code> unit, which is <code>auto<\/code>\nand which caused a Grid blowout described in <a href=\"https:\/\/twitter.com\/chriscoyier\">Chris Coyier<\/a>'s\naptly named article\n<a href=\"https:\/\/css-tricks.com\/preventing-a-grid-blowout\/\">Preventing a Grid Blowout<\/a>.<\/li>\n<li>The Webmentions integration is from <a href=\"https:\/\/sia.codes\/\">Sia Karamalego<\/a>'s article\n<a href=\"https:\/\/sia.codes\/posts\/webmentions-eleventy-in-depth\/\">An In-Depth Tutorial of Webmentions + Eleventy<\/a>.<\/li>\n<li>Some of the typography is inspired by <a href=\"https:\/\/twitter.com\/matejlatin\">Matej Latin<\/a>'s article\n<a href=\"https:\/\/betterwebtype.com\/articles\/2019\/06\/16\/5-keys-to-accessible-web-typography\/\">5 Keys to Accessible Web Typography<\/a>\nand the <a href=\"https:\/\/github.com\/edwardtufte\/tufte-css\">Tufte CSS<\/a> code.<\/li>\n<li>The SVG icons are from the <a href=\"https:\/\/github.com\/edent\/SuperTinyIcons\">SuperTinyIcons<\/a> project.<\/li>\n<li>Some of the CSS is based on Mozilla's <a href=\"https:\/\/github.com\/mozdevs\/cssremedy\">CSS Remedy<\/a> project.<\/li>\n<li>Last not least, the <em>Valid HTML5<\/em> badge is inspired by <a href=\"https:\/\/bradleytaunt.com\/\">Bradley Taunt<\/a>'s\narticle <a href=\"https:\/\/bradleytaunt.com\/html5-validator-badge\/\">Using HTML Validator Badges Again<\/a>.<\/li>\n<li>The <em>Synthwave '84<\/em> code theme for Visual Studio Code originally is from <a href=\"https:\/\/twitter.com\/Robb0wen\">Robb Owen<\/a>.\nI'm using the port for <a href=\"https:\/\/prismjs.com\/\">PrismJS<\/a> by <a href=\"https:\/\/twitter.com\/_marcba\">Marc Backes<\/a>.<\/li>\n<\/ul>\n<p>\ud83d\ude4f Thanks everyone for letting me stand on your shoulders!<\/p>\n<p>There're still some rough edges, so if you encounter a problem, please report an\n<a href=\"https:\/\/github.com\/tomayac\/blogccasion\/issues\">issue<\/a>.\nIt's well-known that there're a lot of encoding errors in the older posts.\nAt some point I broke my database in an attempt to convert it to UTF-8 \ud83e\udd26\u200d\u2642\ufe0f\u2026\nIf you care, you can also propose an edit straightaway,\nthe <em>edit this page on GitHub<\/em> link is \ud83d\udc47 at the bottom of each post.\nThanks, and welcome to the new <a href=\"https:\/\/blog.tomayac.com\/\">Blogccasion<\/a>.<\/p>\n\n\t\t\t<p>\n\t\t\t\t<img alt=\"Thomas Steiner\" width=\"32\" height=\"32\" src=\"https:\/\/blog.tomayac.com\/feed.php?dl=https%3A%2F%2Fblog.tomayac.com%2F2019%2F09%2F29%2Fthe-redesigned-blogccasion-is-live%2F&dp=%2F2019%2F09%2F29%2Fthe-redesigned-blogccasion-is-live%2F&dt=The%20redesigned%20Blogccasion%20is%20live\" alt=\"\">\n\t\t\t\t<br\/>This post appeared first on <a href=\"https:\/\/blog.tomayac.com\/2019\/09\/29\/the-redesigned-blogccasion-is-live\/\">https:\/\/blog.tomayac.com\/2019\/09\/29\/the-redesigned-blogccasion-is-live\/<\/a>.\n\t\t\t<\/p>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\t\t\tI started to blog way back in 2005,<br \/>\nand while I was skeptical whether it would work out and was worth my time,<br \/>\nI just tried it and danced \ud83d\udc83 and wrote like no one was watching<br \/>\n(which definitely was the case for a while).<br \/>\nMany of these early posts ar&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"intlwemo_wallet_address":"","footnotes":""},"categories":[],"tags":[],"class_list":["post-3317","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3317","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/comments?post=3317"}],"version-history":[{"count":1,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3317\/revisions"}],"predecessor-version":[{"id":3318,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3317\/revisions\/3318"}],"wp:attachment":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/media?parent=3317"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/categories?post=3317"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/tags?post=3317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}