From d0a681c92779d7c8ab010a14d7f06cd77450c6d2 Mon Sep 17 00:00:00 2001 From: Lewis Dale Date: Tue, 14 Feb 2023 17:00:01 +0000 Subject: [PATCH] More work on getting blog looking good --- config/plugins/markdown.js | 2 + package.json | 2 +- src/_data/metadata.json | 3 +- src/_includes/post.njk | 6 +- src/blog/index.html | 33 ++++++---- src/blog/posts/microblogging-with-eleventy.md | 61 +++++++++++++++++++ src/blog/posts/new-blog.md | 32 ++++++++++ .../posts/soliving-2048-with-a*-search.md | 48 +++++++++++++++ src/blog/posts/the-web-is-exhausting.md | 15 +++++ src/blog/posts/thinking-about-the-web.md | 13 ++++ src/css/compositions/row.css | 4 ++ src/css/exceptions/blog-nav.css | 4 ++ src/css/exceptions/home.css | 4 ++ src/css/globals.css | 4 +- src/index.html | 2 +- 15 files changed, 214 insertions(+), 19 deletions(-) create mode 100644 src/blog/posts/microblogging-with-eleventy.md create mode 100644 src/blog/posts/new-blog.md create mode 100644 src/blog/posts/soliving-2048-with-a*-search.md create mode 100644 src/blog/posts/the-web-is-exhausting.md create mode 100644 src/blog/posts/thinking-about-the-web.md create mode 100644 src/css/exceptions/blog-nav.css diff --git a/config/plugins/markdown.js b/config/plugins/markdown.js index 64dfae9..44b1842 100644 --- a/config/plugins/markdown.js +++ b/config/plugins/markdown.js @@ -12,6 +12,7 @@ const markdownitAbbr = require('markdown-it-abbr'); const markdownItEleventyImg = require('markdown-it-eleventy-img'); const icons = require('./icons.json'); const { slugifyString } = require('../utils'); + const markdownLib = markdownIt({ html: true, breaks: true, @@ -70,5 +71,6 @@ const markdownLib = markdownIt({ }; module.exports = function(eleventyConfig) { + eleventyConfig.addFilter('md', content => content ? markdownLib.render(content) : ""); eleventyConfig.setLibrary('md', markdownLib); }; \ No newline at end of file diff --git a/package.json b/package.json index 2b44f08..6c733a8 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "serve": "run-p \"serve:*\"", "serve:props": "node scripts/custom-props.js", "serve:css": "postcss src/css/styles.css --base src --dir _site/assets -w", - "serve:eleventy": "eleventy --serve", + "serve:eleventy": "eleventy --serve --incremental", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", diff --git a/src/_data/metadata.json b/src/_data/metadata.json index 6a11cd4..989e745 100644 --- a/src/_data/metadata.json +++ b/src/_data/metadata.json @@ -1,6 +1,7 @@ { "author": { - "name": "Lewis Dale" + "name": "Lewis Dale", + "avatar": "src/images/me.jpg" }, "site": { "name": "LewisDale.dev", diff --git a/src/_includes/post.njk b/src/_includes/post.njk index 4063b1d..93953ee 100644 --- a/src/_includes/post.njk +++ b/src/_includes/post.njk @@ -5,4 +5,8 @@ layout: base.njk

{{ title }}

{{ content | safe }} -
\ No newline at end of file + + + + {% image metadata.author.avatar, "My face", "box circle", "150px", [150] %} + \ No newline at end of file diff --git a/src/blog/index.html b/src/blog/index.html index 532e904..2eed6e3 100644 --- a/src/blog/index.html +++ b/src/blog/index.html @@ -3,21 +3,28 @@ title: Blog layout: base.njk pagination: data: collections.posts - size: 10 + size: 5 reverse: true ---
-

Blog posts

+

Blog posts

-
    - {% for item in pagination.items %} -
  1. -

    {{ item.data.title }}

    -

    - {% set excerpt = item.page.excerpt %} - {% renderFile "./src/_includes/components/excerpt.md", item.page %} -

    -
    2. - {% endfor %} -
+
    + {% for item in pagination.items %} +
  1. +

    {{ item.data.title }}

    + + {{ item.page.excerpt | md | safe }} + Read more +
    2. + {% endfor %} +
+
\ No newline at end of file diff --git a/src/blog/posts/microblogging-with-eleventy.md b/src/blog/posts/microblogging-with-eleventy.md new file mode 100644 index 0000000..16b9731 --- /dev/null +++ b/src/blog/posts/microblogging-with-eleventy.md @@ -0,0 +1,61 @@ +--- +layout: post +title: Microblogging with Eleventy +date: 2022-12-30T21:24:54.088Z +tags: + - posts + - eleventy +--- +Given the drive to move all of my content into one place and syndicate it to other networks, I decided that I'd also try out doing microblog-style posts with Eleventy. Before I could do that, I needed to add a CMS (there's no way I'm manually adding Markdown files everytime I want to post a status). + +--- + +Once that was done, I added a new collection for Microblog posts, which are just text fields with a posting datetime - no title, or any of the other frontmatter data that I'd normally add to a full blog post. + + +I also modified Netlify CMS to enable a max length on textarea fields - Mastodon Toots are 500 characters, so that's where I drew the line. + +Finally, I created a new [RSS feed](https://lewisdale.dev/micro/feed.xml) for my microblog posts - this will also be important later when I want to publish to other platforms. + +## Syndicating + +I've already added [Webmentions](https://indieweb.org/Webmention) to my website, which allow me to send and receive certain types of interactions from other websites. These map pretty nicely to certain social media interactions, like replies, reblogs, and likes. + +To start with, I need to be able to send out Webmentions when they're included. To do this, I use [Webmention.io](https://webmention.io), which provides me a webhook I can call. Then, I use [IFTTT](https://ifttt.com) to trigger the webhook when it detects a new RSS feed item. + +The final step is to use [Bridgy](https://brid.gy) to handle cross-posting. This is done by including the webmention syndication URL in the post body as an invisible anchor. For cross-posting to work, I need to markup my post using [Microformats](https://indieweb.org/microformats) + +For blog posts, this means adding `h-entry` with `e-content` and `p-name` tags. Bridgy will detect these, determine that it's an article, and cross-post just the article title and a link. + +```twig +
+

{{ title }}

+
+ {{ content | safe }} +
+ +
+``` + +For microblog posts, this is slightly different. Bridgy assumes that a post is an article if it contains a `p-name` tag, so I omit that. In it's place I include the timestamp, which is slightly more important for these: + +{% raw %} +```twig +
+ +
+ {{ content | safe }} +
+ +
+``` +{% endraw %} +## Next steps + +This works reasonably well - there's a fairly large delay between publishing on my site and syndicating across to different platforms. That's mostly because there are several different intermediaries that have to be triggered in turn (IFTTT -> Webhooks -> Webmention -> Brid.gy -> Mastodon). In fairly short order I'd like to replace at least some of this with my own code. I already use post-deploy Netlify functions to send ActivityPub messages, so I may as well use it for other syndication too. + +I also want to improve some of the markup on my microblog posts, and add a proper feed to my home page. But that'll also come with a bit of a site redesign, because I'm getting bored of this one. diff --git a/src/blog/posts/new-blog.md b/src/blog/posts/new-blog.md new file mode 100644 index 0000000..6017e55 --- /dev/null +++ b/src/blog/posts/new-blog.md @@ -0,0 +1,32 @@ +--- +title: A new blog +description: I've just finished redesigning a new blog, after not having one for a long time +date: 2021-12-17 +--- + +It's been a long time since I've had an actively-maintained personal website/blog, but I got a spurt of inspiration after seeing a few other recently-revamped blogs. What better way to celebrate the end of the year than with... a blog? + +My intention is to try and write a post on here relatively frequently, but we'll see how that goes as I'm quite out of practice. + +## Tech stack + +I wanted this website to achieve three things: be of my own design, be easy to update, and be accessible. To that end, I chose a relatively simple tech stack: + +- [Eleventy](https://11ty.dev) +- HTML +- CSS + +And that's... just about it. Eleventy gives me more than enough functionality to write simple blog posts in Markdown, convert them to HTML, and display them on a page. + +I did start out using [Tailwind](https://tailwindcss.com), but after a little while and seeing some of the recent discourse around it, I decided I wanted to write all the styles myself from scratch. It was pretty easy to remove Tailwind from the stack, as I hadn't done too much work on it to begin with. Plus, it meant that I could get rid of PostCSS, which was giving me a headache when trying to serve both PostCSS and Eleventy at the same time. + +I deployed the site using [Netlify](https://netlify.app). It was my first time using it, and to be honest I'm pretty impressed by how quickly I was able to get things up and running. It took maybe 3 minutes from signing up to getting a version of the site deployed (pointing the domain took longer thanks to pesky DNS propagation times). + +## Accessibility and Performance + +I wanted some assurance that my website would be accessible, so I regularly tested my pages with [axe DevTools](https://www.deque.com/axe/devtools/) and Lighthouse in Chrome. + +At the time of writing, there are no accessibility issues reported by Axe or Lighthouse, so that's a win! + + +If anybody reading this does in fact spot or experience an accessibility issue, [please send me a DM or tweet on Twitter](https://twitter.com/LewisDaleUK). \ No newline at end of file diff --git a/src/blog/posts/soliving-2048-with-a*-search.md b/src/blog/posts/soliving-2048-with-a*-search.md new file mode 100644 index 0000000..aa2c1ee --- /dev/null +++ b/src/blog/posts/soliving-2048-with-a*-search.md @@ -0,0 +1,48 @@ +--- +title: Solving 2048 Using A* Search +description: One of my recent project has been to attempt to solve the game 2048 using A* Search +date: 2014-05-23 +tags: + - algorithms + - archive +--- + +One of my recent projects has been to attempt to solve the game 2048 using A* Search - it all started from a bet with my girlfriend about who could get the highest score, and I decided I’d “cheat” and just get my computer to do it for me. It didn’t work, she still managed to get to the 2048 tile first. + +To start with, I wrote a command-line version of the 2048 game in Java - it was fairly simple, if a little unncessary, and worked well - I even had a little play of it before implementing the A* algorithm, and it was fairly fun to play. There were no real issues here, just a small amount of confusion about how to implement the “gravity” style of tile movement, but a little thought sorted that one out. + +Then it came to actually writing the A* Search. I was lucky, in that I had a template from a previous University assignment to work from. All there really was to do was swap a few classes and methods, and change the heuristics. + +## The Heuristic + +The heuristic I am using at the minute is a less-than-optimal one, but it was the first one I tried. I was actually quite surprised at how effective it was. + +``` +(0 - sum of tiles) + solution depth +``` + +Like I say, this is not optimal, and certainly does not provide the highest-scoring solutions. But it does give fairly high scores, and certainly finds the 2048 tile - and even the 4096 tile. + +Oher possible heuristics include: +* (0 - score) + solution depth +* Difference between largest tile and 2048 tile +* Mean value of tiles + +There are a lot of options, and I have seen some impressive implementations. I look forward to improving this further. + +## The Pseudocode +Here’s a snippet of pseudocode for the A* algorithm: + +``` +While queue is not empty + if game is solved + print current state + end running + else + get next state from queue + add children of current state to queue +endwhile +``` + +## Screenshots + diff --git a/src/blog/posts/the-web-is-exhausting.md b/src/blog/posts/the-web-is-exhausting.md new file mode 100644 index 0000000..d7fcefd --- /dev/null +++ b/src/blog/posts/the-web-is-exhausting.md @@ -0,0 +1,15 @@ +--- +title: The web is exhausting +description: Some thoughts about using - and developing for - the web +date: 2022-08-31 +tags: + - meta +--- + +I've been using the web in some form for over 20 years - granted, the early parts of that were heavily monitored because I was about 5 years old when we got dialup. But, a large part of my formative years were spent online, and it was such a different place compared to how it is today. + +I remember spending hours on different websites, which were mostly forums dedicated to a single topic, speaking with a variety of people (although the same few names were usually present). The web felt _huge_ back then, a vast array of small communities. It feels like the total commercialisation of the web has taken that from us, though. I now visit maybe 3 websites regularly, and just endlessly, mindlessly doomscroll. I can honestly say that using the web these days is so much less exciting and fun compared to what it used to be. + +It's not just become exhausting as a consumer, though. A lot of the modern tooling available to web developers is overwhelmingly complicated. This post came about because I considered building a small web app using WebGL and Javascript - I decided I wanted a bit of type safety, and to use one library, (Three.js). Then I looked at the number of steps required just to get Typescript working nicely with ThreeJS and gave up. It shouldn't be this hard to build web applications, I shouldn't have a development directory that regularly exceeds 1gb per project because there are thousands of dependencies. + +It's not all doom and gloom, thankfully. There are tons of people making interesting, fun, and exciting content for the web. They're just harder to find these days. And there _are_ simple tools for building web applications (this blog is built using one), and I don't _need_ the libraries or Typescript to build apps, they're just nice to have. \ No newline at end of file diff --git a/src/blog/posts/thinking-about-the-web.md b/src/blog/posts/thinking-about-the-web.md new file mode 100644 index 0000000..113b5cf --- /dev/null +++ b/src/blog/posts/thinking-about-the-web.md @@ -0,0 +1,13 @@ +--- +title: Thinking about the web +description: Mulling over how best to use this website +date: 2022-12-28 +tags: + - personal +--- + +I've been seeing some good posts recently, like these ones from [Andy Bell](https://andy-bell.co.uk/bring-back-blogging/), [Chris Coyier](https://chriscoyier.net/2022/12/26/bring-back-blogging/), and [Sophie Koonin](https://localghost.dev/blog/building-a-website-like-it-s-1999-in-2022/), about using a blog as a real "base" for your place on the web, and then following the [POSSE principle](https://indieweb.org/POSSE) for everywhere else. + +I like that idea - this is the one part of the web I have the most control over. It's already partially-federated (with some improvements coming this way in the near future). I just need to set up some more syndication tools using IFTTT, and then I think I'll be good to go. + +I'd like to add a second post format too, for shorter-form posts that I'd normally have written for Twitter - as well as making it a bit easier to publish content. But that means getting a CMS of some description, so might take me a little while. \ No newline at end of file diff --git a/src/css/compositions/row.css b/src/css/compositions/row.css index b0f11db..d8e7d36 100644 --- a/src/css/compositions/row.css +++ b/src/css/compositions/row.css @@ -4,3 +4,7 @@ gap: var(--vertical-spacing, 1rem); flex-wrap: wrap; } + +.row[data-spacing="between"] { + justify-content: space-between; +} \ No newline at end of file diff --git a/src/css/exceptions/blog-nav.css b/src/css/exceptions/blog-nav.css new file mode 100644 index 0000000..c665713 --- /dev/null +++ b/src/css/exceptions/blog-nav.css @@ -0,0 +1,4 @@ +.blog-nav { + border-top: 1px solid var(--color-neutral-200); + padding-top: var(--space-size-2xs); +} \ No newline at end of file diff --git a/src/css/exceptions/home.css b/src/css/exceptions/home.css index 85915c8..33aa120 100644 --- a/src/css/exceptions/home.css +++ b/src/css/exceptions/home.css @@ -28,4 +28,8 @@ font-style: italic; font-weight: 300; } + + p { + max-width: 50ch; + } } diff --git a/src/css/globals.css b/src/css/globals.css index e437d68..bd32c67 100644 --- a/src/css/globals.css +++ b/src/css/globals.css @@ -19,7 +19,7 @@ h5 { h1 { font-size: var(--text-size-xl); word-wrap: normal; - text-underline-offset: var(--space-size-2xs); + text-underline-offset: var(--space-size-3xs); } h2 { @@ -61,7 +61,7 @@ header { p { line-height: 1.6; - max-width: 50ch; + max-width: 60ch; } footer { diff --git a/src/index.html b/src/index.html index d505daf..6c2af1b 100644 --- a/src/index.html +++ b/src/index.html @@ -10,7 +10,7 @@ layout: base.njk I'm a software engineer who loves building things for the web. I consider myself a generalist, but on a given day I'll probably be working with Typescript, HTML and CSS, and on occasion a touch of .NET. I work for Triptease as a Senior Software Engineer, and on the side I'm learning Rust by building a Sinclair BASIC Interpreter.

- {% image "src/images/me.jpg", "My face", "box circle", "300px", [300] %} + {% image metadata.author.avatar, "My face", "box circle", "300px", [300] %}

When I'm not working I love cycling, reading fiction (mostly sci-fi and ghost stories), and spending time with my family & our border collie.