Posts tagged: blog Archive

💭 More Details Than You Probably Wanted to Know About Recent Upd...

2026-03-23T12:26:22Z

More Details Than You Probably Wanted to Know About Recent Updates to My Notes Site

Writing about the big beautiful mess that is making things for the world wide web.

I love the level of thought that Jim has put into these changes and making sure that urls don’t change. I’ve got a big change in flight to my main site and this is one of the reasons that I’ve been sitting on it so long. I want to make sure urls arent broken, redirects work as they should, and there are no 404’s from existing urls. Currently the new version only exists on a separate deployement https://go.waylonwalker.com/

I also added the ability to “shuffle” between posts. This is mostly for myself. I like to randomly jump through notes I’ve published in the past for reoccurring inspiration

Love this idea and have it on my new site already as well, and have really enjoyed using it by pressing it a dozen or so times over the course of a few sessions. It highlights that I have too many posts like stars and thoughts and I should do some weighting to main posts. mine is at https://go.waylonwalker.com/random/

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 The web is bearable with RSS

2026-03-09T09:00:55Z

Pluralistic: The web is bearable with RSS (07 Mar 2026) – Pluralistic: Daily links from Cory Doctorow

pluralistic.net

It’s wild how much of a hit Google took from killing reader, almost any time I hear about killedbygoogle, reader is the top of the list. Its the thing that we all remember being really good and the incumbants just did not match up. Somehow we are here 13 years later still bitching about it, despite it only having a 6 year run. You should probably get an rss reader, and follow some incredible people that make feeds. Most sites that produce content have the ability to subscribe over rss. Unlike @pluralistic.net, I dont read in my reader. My reader is just a list of links out to the web and I typically read it how the author intended on their site. I nod a long to Cory’s enshitified internet just as much as the next guy, I love text based interfaces, I despise the bloat that js has brought on. But I don’t believe all js is bad, I don’t turn it off, even though he has me questioning this now. News sites kinda suck, we can agree there, but its rare that a small indie web creator has fully enshitified their site with js. I don’t buy that. Sub to the feeds.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 I need a new blog to subscribe to. Know… | justin․searls․co

2026-03-09T08:31:53Z

Justin Searls @searls

I need a new blog to subscribe to. Know any you think I'd like? E-mail me: justin@searls.co

justin․searls․co · justin.searls.co

Sent Justin my list https://go.waylonwalker.com/blogroll, will soon be on the main site, but right now its only on the go subdomain. I’ve long had reader.waylonwalker.com, but thats soon going to be wrapped into the main site as well at /reader.

I’m interested to see what good stuff Justin gets and if you have any good ones to share reply.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Reflections on 13 years and 1,000 posts of writing on my blog

2026-01-13T03:15:54Z

Reflections on 13 years and 1,000 posts of writing on my blog - HAMY

hamy.xyz

The answer is I do it habitually. If there’s a big enough idea I’ve had floating around in my head and I think others might find it useful / interesting then I usually think it’s worth logging it somewhere. If I don’t, I’ll likely just keep thinking about it so might as well get it out of my head and on the internet where people can find it.

hammy

This is how you do it. If you want to do something, you need to make it a habit. Something you crave, something you need. I need to write my ideas down in this blog, it helps me index ideas for later, but more importantly it helps me flesh them out and think through real things.

Congrats on 1k, your site is awesome Hammy

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

Rune Admonition

2026-01-07T18:18:52Z

!!! Rune

ᚨᛚᛚᚨᛁ ᛗᚨᚾᚾᚨ ᚠᚱᛖᛁ

!!! Rune

hi hello

Tip

Here’s a tip

💭 Photoshop for text — Steph Ango

2026-01-06T02:48:34Z

Photoshop for text

In the near future, transforming text over an entire document will become as commonplace as filtering images.

Steph Ango · stephango.com

While the non deterministic nature of llms scare the heck out of me in the sense of just cutting it loose on my writing. letting it go through all of my files and just edit them. I do like the idea of mundane tools like “desaturate”, “Gaussian blur”, evolving out of it for text. I don’t yet see this with the tools we have now, but it will be interesting to see them evolve.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 File over app — Steph Ango

2026-01-05T18:54:06Z

File over app

If you want to create digital artifacts that last, they must be files you can control, in formats that are easy to retrieve and read. Use tools that give you...

Steph Ango · stephango.com

file over app is a fantastic philosophy laid out well and concisely documented very well in this post. The idea is that tools will change, we will want to use different tools, different editors, different computers over time. What’s likely to outlast everything is plain text files that we can interact with a wide variety of tools. Not encrypted in dedicated formats that die with our tools, but in plain text where a computer from 2160 is likey as capable of reading the file as one from 1960 would be.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 You Might Also Like: My Notes Blog - Jim Nielsen’s Blog

2025-12-19T16:11:31Z

💭 “You should never build a CMS” | Sanity

2025-12-17T15:21:41Z

“You should never build a CMS” | Sanity

Lee Robinson migrated cursor.com off Sanity. He made good points. Here's what he missed.

Sanity.io · sanity.io

Such a good breakdown of the leerob article, that is hitting everywhere right now. Feels like sanity was just a bit late to getting things right and it would have just worked for them how leerob was trying to use it, but MCP sucked so he jumped.

Reading their loose descriptions of a CMS, its an interesting realization to realize I’m rolling my own cms. I kinda feel like theres a few inspiration features to take from here, but I have no regrets. As a developer I like being able to build my own tools, I like being able to search and edit from nvim, and not have to write GROQ queries, and transforms. There were some really good points here that as I get more and more content on my personal site, I do kinda feel it. I’m surprised there is not more tooling that does some of these things for piles of markdown.

pinning this to re-read later, feels like a lot of good tidbits here.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

Ping 11

2025-12-16T08:11:43Z

Naming things is hard, pings will now be numbered.

og

2025-12-09T12:49:21Z

OG is short for open graph, a set of standard meta tags that are used for social media sharing. This is what tells other websites how to describe and display your site when shared on social media, text messages, or discord.

💭 Deleting Code for Performance – David Bushell – Web Dev (UK)

2025-12-04T16:12:19Z

Deleting Code for Performance

The one where I clean up an asynchronous mess

dbushell.com · dbushell.com

I did not realize that David’s site was built on a homegrown Static Site Generator. As someone who also does this myself I appreciate the effort. I build my site on markata. It started as a project to learn a set of tools and has become a project that I depend on everywhere and cant put down. It’s a great tool, but you probably shouldn’t use it. Anyways, I feel this really shows on David’s site. His site is filled with custom features that make it very unique, one off, and always a pleasure to read.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Malicious Traffic and Static Sites - Jim Nielsen’s Blog

2025-12-01T21:41:03Z

Malicious Traffic and Static Sites

Writing about the big beautiful mess that is making things for the world wide web.

blog.jim-nielsen.com

These look like fun endpoints to add anti-maliciously, give good stuff for the sleezy things to read.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

A More Human Internet

2025-08-21T14:36:00Z

An idea for a post that may never happen

💭 Glossary Web Component – David Bushell – Web Dev (UK)

2025-07-25T02:11:58Z

Glossary Web Component

The one where I put the hypercard in the hyperlink

dbushell.com · dbushell.com

I really enjoy David’s Glossary, he has absolutely nailed it. I’m working on one for myself that feels close but not quite. I want to have a list of words that auto glossary to terms for me, maybe this is too much automation and I should just lean on wikilinks, i.e. sick wikilink hover, they only take wrapping in brackets. But like David mentions here its a lot of work to make sure they are right on all the older posts. I think it needs to be done with js on my setup, I don’t have no fancy wroker to modify html on the way out, I’m fully static right now, so i would need to do full rebuilds any time the glossary changes, i’m trying to cut down on the number of features that require full site rebuilds and potential cache issues.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Notes – 09:32 Thu 19 Jun 2025 – David Bushell – Web Dev (UK)

2025-06-19T13:18:20Z

Notes – 09:32 Thu 19 Jun 2025

dbushell.com · dbushell.com

David’s design on his blog is fantastic likely from years of small improvements like this converting ugly quotes to pretty quotes and optimizing fonts.

It’s common for markdown libraries to convert the first to the second like my build script does.

This is new to me, I had no idea that markdown libraries did this, I’m now interested if markdown-it does it.

For subsetting I use the fontTools library but I’ve no idea how to setup Python environments. I got it working once and failed to document the process.

David, David, David, I’m sorry python has done you this dirty. I should do a post on making python environments in the age of Posts tagged: uv. You got options to run in docker/podman, a whole ass vm, uv venv, uvx, uv run, uv script, python -m venv, virtualenv, poetry, hatch, and too many more. The ones that matter are containers or uv.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Visualizing My Blog’s Internal Links - Jim Nielsen’s Blog

2025-06-16T00:48:19Z

Visualizing My Blog’s Internal Links

Writing about the big beautiful mess that is making things for the world wide web.

blog.jim-nielsen.com

I like Jim’s visualizations on his site, reminds me a lot of obsidian. I’ve tried to do the same on my analytics page in the past, but it didn’t come out right. I’m going to have to give this another go.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Queso Notes

2025-06-06T15:50:43Z

Queso Notes | Nic Payne

It occured to me that this is my blog... I can write about whatever the heck I want! May 2025 Made 2 quesos very similar - they consisted of: 1.5 lbs ground bee

pype.dev

Taking this as inspiration to do more non-tech on my blog, I’ve branched out into Posts tagged: gaming, but need take it to the next step. excited to watch pype.dev evolve as well.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 The ethics of README ads – Will McGugan – Will McGugan's essays

2025-06-05T14:49:09Z

The ethics of README ads

I’ve been considering accepting sponsorship again for my projects.

Will McGugan · willmcgugan.github.io

I’ve long avoided running ads on my blog for the same reason. For a few months I ran an ad above the fold. It was a “Your Ad Here” kind of thing, and in the messaging I was looking for content relevant to my content, not google driven ads. This resulted in nothing, no hits, not a one. I’m kinda with Will on this one beer money is not worth degrading the project for. I seriously thought some of the big projects with a moderate level of success got a good cut for these sponsorships. Some of the companies are big companies, like how do they even go through meetings and decide who gets beer money without spending more than that in decision making resources. Maybe they have a guy with more autonomy than I would expect.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 feat: add hackernews hits on home page · jimniels/blog@b1a250b

2025-05-31T01:56:00Z

feat: add hackernews hits on home page · jimniels/blog@b1a250b

Contribute to jimniels/blog development by creating an account on GitHub.

GitHub · github.com

Jim Nielsen fetches his hacker news ranked articles for his home page.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Hackernews query by url

2025-05-31T01:54:59Z

External Link

hn.algolia.com

this post by Jim Nielsen, lead me to this commit where I found that he was including posts of his that wound up on hackernews. I really like this idea and might take it, even though i have very few HN linked posts.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 External Links - Jim Nielsen’s Blog

2025-05-31T01:51:13Z

External Links - Jim Nielsen’s Blog

Writing about the big beautiful mess that is making things for the world wide web.

blog.jim-nielsen.com

I really like the idea of Jim’s Eternal Links, and really want to take it for myself. To expand here I want to be able to look for common places for rss feeds, and be able to scrape out rss feeds for sites that I tend to link to often. Also if they have something like a /blogroll it might be a good place to find new great people to follow.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 wants | maya.land

2025-05-28T02:00:31Z

wants

Personal website. Webby personsite. Amateur hour round the clock.

maya.land · maya.land

Allen Carr1 on quitting smoking: [Carr] recommends working to really notice and internalise that disconnect [between what we want and what we enjoy]. He tells smokers to pay attention to their next cigarette. It’s like mindfulness but for noticing the unpleasantness.

I can appreciate the restraint here, theres something about the mindfulness behind it all.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 661: Working Vacations, Ripping Out JavaScript, and Non-US Clo...

2025-05-01T14:00:47Z

661: Working Vacations, Ripping Out JavaScript, and Non-US Cloud Service Options

What are the non-US cloud services options, falling off the blogging train and trying to get back on, working on vacation, Chris recaps the Alaskan Folk Festival experience, how often do you go bac…

ShopTalk · shoptalkshow.com

Chris hit me where it feels about 10 minutes in. He said he has not been writing on his site as much lately and how hard it is to get back in. He mentions having a baby idea of a post, but then having the thought do you really want to come back from a long break with this!

Momentum is a b**** when you got it you cant stop, and when you don’t you can’t stop.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Characters - Xe Iaso

2025-04-12T20:02:35Z

Characters

Xe Iaso

xeiaso.net

xeiaso, has the coolest characters on her blog. Definitely something I’d like to replicate. I really appreciate how each one has its own sprite sheet, and they have conversations with each other.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 There are many Style Guides but this is Mine—zachleat.com

2025-02-18T01:56:24Z

There are many Style Guides but this is Mine—zachleat.com

A post by Zach Leatherman (zachleat)

Zach Leatherman · zachleat.com

Zach’s site looks sick colors are all on point, the fonts are so good. I really like the idea of a style-guide. I think I might be renaming my Sample post to style-guide now.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 fix double slash in url · WaylonWalker/waylonwalker.com@93ca7da

2025-02-17T22:32:04Z

fix double slash in url · WaylonWalker/waylonwalker.com@93ca7da

Latest version of waylonwalker.com - dev.waylonwalker.com - fix double slash in url · WaylonWalker/waylonwalker.com@93ca7da

GitHub · github.com

fixing more ahrefs issues on the road to fixing all major issues within my control I found a ton of urls pointed to an url with a double slash, turns out I wasn’t properly referencing slug with post.slug.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 fix json schema · WaylonWalker/waylonwalker.com@deebd40

2025-02-17T22:26:01Z

fix json schema · WaylonWalker/waylonwalker.com@deebd40

Latest version of waylonwalker.com - dev.waylonwalker.com - fix json schema · WaylonWalker/waylonwalker.com@deebd40

GitHub · github.com

I found that I had Structured data has schema.org validation error on essentially every single page on my blog, turns out I had made some changes and have never tried to validate it. Damn json and its hatred towards trailing commas.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Weblogging: Part 1 – David Bushell – Web Dev (UK)

2025-02-17T21:01:00Z

Weblogging: Part 1

The one where I blog about blogging (part 1)

dbushell.com · dbushell.com

Long live RSS! Rss is not dead David, you are right there. I really agree with David that learning a topic well enough to form thoughts and write about it really help learning. You don’t need to be an expert, but forming your own thoughts, putting ideas in words takes a lot more than surface level knowledge. When you try to write or speak about something you quickly realize where your holes in understanding are.

Blogging helps me learn. When I commit knowledge to writing it reinforces what I know and shines a spotlight on what I don’t. Most topics require additional research. Even then, I occasionally get things wrong, or miss different ways of thinking, and I welcome corrections. I’ll often update and enrich my posts based on feedback. Without my blog I’d miss other points of view.

As they say, the best way to get an answer on the internet is not to pose a question, but to assert the wrong solution! Most feedback I get is constructive. Sometimes it’s blunt but I try not to read into unspoken sentiment. Some people are more direct. If the end result is positive learning, I can take a hit or two.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 fix: Open Graph URL not matching canonical · WaylonWalker/wayl...

2025-02-17T20:53:22Z

fix: Open Graph URL not matching canonical · WaylonWalker/waylonwalker.com@0fd994b

Latest version of waylonwalker.com - dev.waylonwalker.com - fix: Open Graph URL not matching canonical · WaylonWalker/waylonwalker.com@0fd994b

GitHub · github.com

In fixing a bunch of meta tags, I introduced Open Graph URL not matching canonical on every page by having trailing / on canonical and not on the og:url.

This commit will fix the error.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Cotton Coder – David Bushell – Web Dev (UK)

2025-02-17T03:05:12Z

Cotton Coder

The one where I launch a new blog

dbushell.com · dbushell.com

I like Davids idea for cotton coder here, reminds me a lot of Thoughts, which turns out to be mroe commonly called a linkblog. I can relate to David heavily on gathering too many side projects and soem collecting more digital dust than you would really like them to. I use thoughts for quick publishing, very similar to David’s notes. I have tags and titles, but the titles are a reflection of the post I’m taking a note on. They are short and sweet, I put just enough thought into them without overthinking them. They live as a separate server hosted website, but the data gets pulled into my blog at build time, so they end up in the same place eventually.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

fragmention

2025-02-15T09:32:43Z

This post is still WIP. …..

https://indieweb.org/fragmention##Challenges

I’ve been digging through David Bushell’s blog over the past day, he has some really good ideas about blogging and webdev. One really interesting post I came accross is url-fragment-text-directives. I’ve long had id’s linked on my headings, though sometimes broken, or now showing the link, I’ve done my best to include them. Fragmentions extend this to allow any text to be linkable like this.

fragmentioner ui: https://github.com/kartikprabhu/fragmentioner/tree/master?tab=readme-ov-file fragmentioner js: https://github.com/chapmanu/fragmentions

Examples #

https://resilientwebdesign.com/#This%20is%20a%20web%20book

💭 Chris Coyier

2025-02-14T19:40:19Z

I’m going to leave the title off this post and see what happens. Titles are a lot of pressure! I think there is a reason that the big text-based social networking sites (Mastodon, X, Facebook…

Chris Coyier · chriscoyier.net

Interesting thoughts here on blog post titles, do we need them? They are so ingrained into everything.

It makes me think about markata.dev. I don’t require you to add any meta data to your post, you don’t need a title at all, but you do have to name a markdown file, and this does end up being your title if you don’t set one.

Titles are a lot of pressure! I think there is a reason that the big text-based social networking sites (Mastodon, X, Facebook, Threads, LinkedIn, Bluesky, etc.) don’t have titles. Especially for short posts, the title just isn’t necessary. Just say the thing.

Interesting observation what rss readers do without one.

My own favorite[rss reader], Feedbin, shows the author of the post as the title if it’s missing. Eh, not great not horrible.

Hilariously he puts a title on the OG image for the post. I was interested in seeing what would happen in signal, it appears to be showing the author name as well.

Confirmed the page has no title

or does it?

It makes me wonder where Signal gets this title is it from the title block or the site_name meta data

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

ahrefs-cleanup-2024

2025-02-12T12:56:40Z

This post is a big work in progress, expect it to keep getting better.

Initial Score #

404 Not Found, generate a page for each tag #

Title too long #

404 Not Found, comma separated tags #

Another hit on 404’s caused by tags, was tag parsing from thoughts into posts, this cause links to the full comma separated list of tags rather than one per tag.

You can see on the website the whole dang set of tags was being treated as a single tag.

Broken images #

I’m not fully sure what happened to all of these gifs in my old host and why they didn’t show up, but I moved them all and they are solid now.

I burned all of my January Credits #

So I had an issue with my self hosted shots not making them fast enough for ahrefs, and essentially ddosing myself on one of their runs. The long wait times for images burnt all of my credits.

Here was the next successful run with a HUGE improvement in overall score.

The trend for errors is looking quite good.

md files were Missing #

I had several links out to the raw source of some pages generally hosted at {slug}.md, but I had turned it off due to it causing builds to fail.

Taking another look at the error it was obvious what was going on, thoughts never had a file extension and Pathlib was throwing isADirecotryError because the path was already a directory for the index.html, adding a .md to the path for the thoughts plugin fixed it.

I made this fix in commit e0bbc on my site repo.

Broken links to tags #

I wrote a cli plugin to automatically generate feeds for my tags, but I have not ran it in awhile so I had a number of posts trying to link tags to feeds that did not exist. I fixed this in commit [5d2e22](https://github.com/WaylonWalker/waylonwalker.com/commit/5d2e227a03acb1104e4214507872c61ae2a47d64].

fix: Open Graph URL not matching canonical #

[[ thoughts-565 ]] fixes an error introduced while fixing og tags.

markdown split panel

2025-02-03T13:21:23Z

Today I was playing with markdown split panels. I want to be able to compare and constrast occasionually, today the inspiration hit to do this using admonitions.

Mobile Users 🔄

You will need to rotate your device to see the side by side feature.

The Markdown #

This is what I am going for, one admonition that is easy to remember, that nests inside of itself , and I can put as much markdown on the inside that I want.

!!! vsplit I Have two opinions

    !!! vsplit Left Opinion

        supporting arguments

        * lorem ipsum
        * ipsum dolor

        - [x] lorem ipsum
        - [ ] ipsum dolor

    !!! vsplit Right Opinion

        supporting arguments

        * lorem ipsum
        * ipsum dolor

        - [ ] lorem ipsum
        - [x] ipsum dolor

Here is the result of that markdown.

I Have two opinions

Left Opinion

supporting arguments

lorem ipsum
ipsum dolor

lorem ipsum
ipsum dolor

Right Opinion

supporting arguments

lorem ipsum
ipsum dolor

lorem ipsum
ipsum dolor

Vsplit

Hello World

Here is a hello world application written in the typer cli framework for cli.

Vsplit

    ``` python

#!/usr/bin/env -S uv run –quiet –script

///

requires-python = “>=3.12”

dependencies = [

“typer”,

]

///

import typer

app = typer.Typer()

@app.command() def hello(name: str = “World”): “““Prints a greeting message.””” typer.echo(f"Hello, {name}!")

if name == “main”: app()

markdown it attrs with slashes dont work

2025-02-01T11:21:10Z

Attrs does not like ‘/’ characters in its classes, so to use some tailwind classes with custom values we must make new classes in our tailwind input css.

.cinematic {
  @apply aspect-[2.39/1];
}

Given the following markdown with attrs added to the image and to the paragraph block.

![screenshot-2025-01-31T14-50-00-094Z.png](https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png){.aspect-[2.39/1]}

![screenshot-2025-01-31T14-50-00-094Z.png](https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png){.cinematic}

{.cinematic}
![screenshot-2025-01-31T14-50-00-094Z.png](https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png)

We get the following output with only the middle one working correctly.

{.aspect-[2.39/1]}

Note

The inline version of `.cinematic` works, but `.aspect-[2.39/1]` does not,

it turns into text after the image. The block version with the class before the image applies to the paragraph, not the image.

pesos

2025-01-25T17:20:55Z

Pesos is the act of Publish Elsewhere Syncicate to Own Site. It is an indieweb concept that I recently started applying to my own site.

here does it skip again

Note

See <https://indieweb.org/PESOS> for more information, they have a ton of

information about the indieweb

In short it is the concept of pulling data from other sites that you use and republishing it to your own site. This gives a single source of information for you, and protection against sites and apis changing or rug pulling. Other people might have a lot more use cases for this, but I already begin a lot of my data right on my site.

GitHub stars #

I am using the github api to get a list of my stars and then create posts in the github repo for my blog. This allows me to keep track of things I star on GitHub in my own way, and share them out with my rss feeds.

💭 Why I Write

2025-01-13T02:28:21Z

Why I Write

Staff Software Engineer at GitHub specializing in developer productivity, AI-assisted development, and accessibility. Creator of The Balanced Engineer newsletter and co-host of the Overcommitted po...

Brittany Ellich · brittanyellich.com

It’s interesting how many people in tech maintain a blog. I think part of this brings us back to web 1.0 days when so many individual websites owned the web it was a free for all unindexed land and you got to own a small piece of it.

I agree with most of Brittany’s points here I write a lot to keep my skills sharp, and to refer back to. Brittany mentions keeping all her old posts, even the cringy ones. I’m all with you here, I’m just wodering how you look back at anything you wrote in the past and not get a bit of that feel, maybe its just me, but I see cringe and mistakes gallore, but it all makes me better moving forward.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 bic | Static blog generator, in bash

2025-01-09T14:22:47Z

bic

Static blog generator, in bash

bic · bic.sh

Intereresting someone built a blog generator in bash. it comes with normal markdown to html, static content, robots.txt, sitemap, rss, and tags. It uses pandoc to take markdown to html and mustache for page templates.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Realign – Chris Coyier

2025-01-04T14:25:02Z

Realign

I just popped out a realign of the ol’ personal website. I only say realign as I didn’t rethink every single detail of the thing. I’d say probably 40% of the original HTML and CSS…

Chris Coyier · chriscoyier.net

Chris Coyier had a small re-align on his site, some good nuggets in here.

I like the idea of having a photo of myself prominently on the site, so you know who you’re dealing with here.

I really like this after thinking about it and I think I am going to make sure I get my face back on my posts. I do have my 8bit style pixel art image of me that I use on social media, but no real picture.

I feel like a lot of people redesign their entire website when it’s time to update to the latest list of social networks and I’m no different. Once you touch it you gotta keep going.

I can totally relate to this, once you open the thing, you get the build tools greased up, and your confidence high that re-deploying isn’t going to mess something up, I tend to start digging in to other things.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Changelog • Robb Knight

2025-01-02T18:16:10Z

Changelog

Maker of web things, sticker merchant, viral toot-based business man, blogger, podcaster, and pizzaiolo. Human dad.

rknight.me

Well done changelog with some really good inspirational nuggets. Many slash pages I want to check out and an 11ty contribution graph.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 slash pages

2025-01-02T16:17:51Z

slash pages

A guide to common pages you can add to your website

slashpages.net

A nice list of slashpages you might want to consider including / aliasing / 301ing. These feel like nice things to setup and keep in the back pocket for obsidian style wiki link to easily. I get kinda bad at wiki-linking as much as I would like to, mostly because it does require some amount of work to make the page, and keep it up to date over time, then remember that you even have it.

Some are serious, some very common, some quite useful.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

/colophon

2025-01-02T10:21:23Z

Colophon a page that describes how the site is made, with what tools, supporting what technologies

Author #

All posts on this site are written by Waylon Walker, the typical content has changed and evolved over time. I go back and make a few corrections, but for the most part things stay pretty much as they were published originally.

see more in Waylon Walker

tech #

This site is a static site build with my own static site generator markata, Thoughts or as Simon Willison calls it a link blog posts are pulled in as a regular posts, all is hosted on cloudflare pages.

markata
Thoughts
cloudflare pages

see more about these components in about this site

Analytics #

I do not track users, I respect the privacy of my readers and do not track their information. I do track analytics on my own writing a post rate. Its more of an interesting history of the site.

meta #

Some evergreen pages that are more about me or this site from the Posts tagged: meta feed.

💭 My approach to running a link blog

2024-12-23T01:47:47Z

My approach to running a link blog

I started running a basic link blog on this domain back in November 2003—publishing links (which I called “blogmarks”) with a title, URL, short snippet of commentary and a “via” …

Simon Willison’s Weblog · simonwillison.net

I still cannot believe I thought I had such a unique idea with thoughts only to find out shortly thereafter that Simon beat me to the punch by about 20 years!

Simon put a lot of work into this [post](https://simonwillison.net/2024/Dec/22/link-blog/#thoughts.waylonwalker.com) please check it out. Its not only filled with tons of little nuggets about blogging, it has just a ton of links to other posts I’m itching to read now.

https://simonwillison.net/2024/Dec/22/link-blog/#thoughts.waylonwalker.com

a linkblog proves that you read #

Simon mentions it in the post as well, but one thing about having a link blog does is that it proves that you actually read articles that you share. This is really more about proving to myself, and reminding myself that anyone else, it’s a good feeling.

Trying to add soemthing extra #

include names of people, and add tags for common people
something extra - the whole point is to bring something to the post without stealing thunder, but rather linkbuilding for the author that put the hard work in.
copious amounts of quotes
It should bring the author up not put them down

A post a day #

well .98 posts per day

Simon mentions starting in Nov 2003, which puts that at 7722 days since then. That is so close to a post a day for 21 years, even though they are often as short as one sentence that is impressive to keep up over time.

So far I’ve published 7,607 link blog posts and counting.

What’s my rate #

I just check and I am at 513 days in with 413 posts (0.8 posts/day). Not quite up to Simon, but close enough to be proud of. My only grief is that I didn’t start sooner.

My stack #

I have a full post explaining more about how I do mine and the stack behind it here.

https://waylonwalker.com/thoughts/

See Images are hard! #

This is one of the main reasons that I built dropper for myself, and plan to include it in fokais as a product to help others with their blog. This is definite evidence that I am not the only one with this issue!

I’ve made images easy form myself #

I’ve tried half a dozen or so easy techniques from obsidian to various github repos and none have really hit me with inspiration to really add screenshots like I do with dropper. I write all of my thoughts posts in a chrome extension drop down local first style and when i hit paste it uploads and gives me a markdown image link, it cannot be easier for me.

When I store them I compress them and convert them to webp. I serve them by streaming them out of an s3 bucket with fastapi and some very generous cloudflare cache headers, so I should only get a request for that image about once a year.

Warning, I built dropper for me, no guarantees that it works forever, foakis will be for more users.

Bluesky does not penalize for links #

I am loving bluesky more and more, learning this just gave it another level up.

Series #

I just noticed that Simon has Series on his blog in a very elegant way. One I need to get back to blogging more, I did not do so good in 2024, and two this is awesome and I want it.

test

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 How I use Obsidian Templater

2024-12-22T16:53:28Z

How I use Obsidian Templater

One of my favorite Obsidian plugins is Templater, which lets you create reusable templates in your notes vault!

cassidoo.co

I really like this idea of keeping a set up contacts in a markdown repo, and being able to wikilink them to different tickets / meetings and what not. I’m imagining the graph you can build, it feels quite interesting. Even more relevant as we see things like teams rolling out retention limits to messages.

Here is Cassidy’s format, I like it but I’m probably not going to track the birthday of most people I work with, thats just not the relationship I tend to have with work friends. It might be a midwest or non tech thing, but I am not even aware if any of my co-workers have social media, and I assume that if they did it would not include anything work related but more football and other sports.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Damn, I love dropper already

2024-12-18T00:42:07Z

I love me some styled rss, it&#39;s how the OG internet was made to be.  You choose what you want to read and when.  There is no middleman aggregator infl...

thoughts.waylonwalker.com

💭 How to make your RSS feed pretty

2024-12-18T00:38:24Z

How to make your RSS feed pretty

Life is too short for ugly XML.

cassidoo.co

I love me some styled rss, it’s how the OG internet was made to be. You choose what you want to read and when. There is no middleman aggregator inflating the reach of things they want you to see or suffocating things against them. It’s just you and your internet friends.

Cassidy’s Styled rss #

Cassidy has a quite lovely and easy to read rss feed, with an open source style sheet, that is part of her open source blog template for astro blahg, love that name by the way!

Dave Rupert’s Feed #

I first learned of styled rss feeds from shoptalkshow.com, specifically from Dave Rupert.

Dave uses a pretty bog standard styled rss feed with pretty-feed-v3. This repo is probably the best place to start if you are looking to style your rss feed.

https://github.com/genmon/aboutfeeds/blob/main/tools/pretty-feed-v3.xsl

My RSS Feed #

My feed comes from my static site generator markata, a plugins all the way down static site generator written in python, made for customizing, lacking just about any and all docs so you are on your own.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 Dropper

2024-12-16T22:26:59Z

Dropper

Dropper is a simple file sharing service.

Dropper · dropper.wayl.one

Dropper is a place for me to drop files for quick posts like this.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

💭 statically makes OG images easy

2024-11-17T21:48:04Z

External Link

cdn.statically.io

Staically makes creating OG images so easy, you can just pop this in your section with some og tags.

    <meta name="og:image" name="og:image"
        content="https://cdn.statically.io/og/{{post.title}}" />
    <meta name="twitter:image" name="twitter:image"
        content="https://cdn.statically.io/og/{{post.title}}" />
    <meta name="og:image:height" content="640" />
    <meta name="og:image:width" content="1280" />

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

blogging in 2024

2024-08-05T10:02:09Z

Over the past years couple of years blog traffic has been tanking, for some time I thought it might have just been me, but then i heard it from Dave Rupert on Shop Talk show, and it made sense. LLMs and AI is slowly killing the internet as we know it.

My metrics #

I dug into my emails from the google search console team and found two results nearly one year apart. Impressions are only 60% of its value a year ago while clicks are only 35% of where they were a year ago. I’m getting less impressions and even less clicks.

May 2023

June 2024

Suspicions #

What I think is happening is a large portion of users are getting their answers from ChatGPT, Copilot, and llms like this. A lot of my posts have been filling gaps in the internet, notes for myself when I struggle to integrate x in y because there was a gap of how to do so in the docs and stack overflow. Some small fraction of users have moved on to duck duck go and other non global warming search engines with AI in their results.

Clicks are down even further, than impressions. I can’t tell for sure but my gut feeling is that people are using the AI generated results. I know I use them quite often, but listening to Justin and Autumn at the end of the latest ship it podcast https://changelog.com/shipit/115, they both claim that they get no benefits from it and don’t know anyone who does. In fact Justin has taken the most ethical approach to move to duck duck go since it doesn’t kill the earth with each search by injecting AI results. Personally I do find it quite helpful, sometimes the answer is there, or an idea that triggers me to think of the idea.

Ok blogging is dead why keep going #

Just as always blogging has been for me. It’s a great place to write down your thoughts for later reference, and to help cement them into your brain. Beyond getting famous and clicks blogging is useful to you first and foremost, that should be the number one reason.

How do we keep the internet of old #

RSS feed readers is a great way to keep creators that you like and want to support in your feed regardless of what the higher powers of search and social media think of them. This year I built my own [[reader]], and I use it every single day to read articles out of my own custom curated feed.

I have also created Thoughts to help share and lift up creators that make good posts. I have a crome extension that allows me to create a blog post tied to a link right within chrome. I use this several times per day to save some pages for later with a small note.

Trying Obsidian

2024-07-31T00:00:00Z

I am giving obsidian a try, this is a test post to learn the flow. Something that has been really hard for me for a long time is images, I don’t include a lot of images just because it takes so much longer just to get the post out. I store them in a separate repo, I need to resize and compress them for the web so they aren’t so big.

Images are easy #

This is my current wallpaper.

I took he screenshot and just pasted it in.

I have more about my process in this post about Obsidian Image Converter.

It’s still just markdown #

I don’t know why it took me so long to understand this but obsidian is just markdown files. I pretty much just plugged in my existing blog and it picked up all the tags and was ready to run. I now get some nice visualizations to help me identify posts that were not ever tagged or maybe left unfinished.

It leans hard on wikilinks #

I just finished moving my backend over to md-it-python, which comes with some good wiliklink support. I even make a sick wikilink hover feature that previews wikilinks on hover.

Inside of obsidian when you start a wikilink it starts searching for posts to link. I get this feature in using the marksman lsp, and it’s nice to see that it works pretty similarly, but with much less setup and configuration.

creating new files #

The same keybinding that will take you to a new fill will create a Obsidian-new-file in the root directory of your project. This is very handy to create a bunch of new links and files quickly. This feature does not work the greatest for my blog currently as it does not create them from a template, and I use templates to start all of my posts. see Obsidian Using Templater Like Copier. I am now seeing why these plugins push so much automation into the templating system by directory.

New keybindings #

Until I really got myself in and working I didn’t realize all of the vim features that I would really need, Obsidian-go-to-definition was one of the very first ones. Obsidian has a feature to take you to the note under the cursor by pressing alt+enter, but that was not obvious at first.

Renaming posts #

Obsidian makes it so easy to rename a post, and it renames the file for you without leaving the editor, needing to close the file or anything. You can just go to the top of the file and change the name without needing to find it in a file tree or anything. Its a very nice and clean feature.

I miss my gqap #

There are still some vim features like Vim-gq that I use constantly to reflow long lines into readable paragraphs no matter where I open them that I cannot find a way to do in obsidian, and I miss it. ## Recent Posts.

Note

ok, so vim mode inside of obsidian really does work, and it does this, its

just less obvious because of obsidians softwraps in the editor. And I don’t think it works on indented lines like these, in this note.

missing seemless publish #

I run pre-commit on my posts to clean up the whitespace and line endings. Generally this does not do much, but aparantly obsidian is clashing with my setup, and not running pre-commit correctly so I need to leave my editor to publish a post.

With neovim I have a hotkey to commit verbosely with fugitive, gic, and to push gpp, and I use this all the time as I am writing.

Obsidian Image Converter

2024-07-30T21:09:35Z

I’m giving obsidian a go as an editor for my blog and one of the main things I want to fix in my workflow is the ability to quickly drop in images. on first look through the community plugins I found Image Converter. I set it up to convert to webp and drop them in a git submodule. I may make it something other than a git repo in the future, but I’ve learned that adding images to my blog repo quickly makes it heavy and hard to clone on other machines.

Once the images are there they are pushed and deployed as their own site to cloudflare pages. I made a quick edit to my sick wikilink hover plugin for my blog. if it sees a wikilink ending in webp, convert the domain over to obsidian-assets.waylonwalker.com, and clean up the remaining "! " that the python md-it library leaves behind.

Note

after first try I needed to increase the width from 600 to 1400, the image in this post was unreadable.

This is part of me getting set up and Trying Obsidian

💭 he's back again

2024-07-25T23:09:50Z

yooooooooo its me...

thoughts.waylonwalker.com

💭 Note-taking with Zettelkasten - An Introduction - YouTube

2024-07-25T23:06:28Z

Niklas Luhmann created the Zettelkasten method of notetaking, He was the Da Vinci of writing, holding a high standard that we can take inspiration from even today in this digital era.

As many times as I have seem the Zettelkasten covered, I never knew that it roughly translated to little cards in a box.

Four Principles #

Mischa lays out four principles of Zettelkasten.

Atomic - each card conains one idea
Link - cards are linked together
Structure - comes from the links
Own Words - You write the note in your own words

My blog, tils, and thoughts make up my own zettelkasten. I am not going to say that mine is a perfect representation of his method, but the components are here. rather than building books, my thoughts and tils build up to blog posts. The rate of blog posts I write definitely changes with the seasons of life, as seasons change it becomes a bigger or smaller part of the season.

I really like Mischa’s most important note to Write in your own words, this is what really promotes learning, and proves to yourself that you can form a thought around the topic. Up until recently I’ve wrote everything, but lately I’ve taken to copy pasting some quotes into my thoughts posts, but I think this is fine, because generally its used to build on the narrative and give me a place to talk about the linked post.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

Thoughts

2024-04-01T16:14:47Z

These are generally my thoughts on a web page or some sort of url, except a rare few don’t have a link. These are dual published off of my thoughts.waylonwalker.com site. It’s a fully dynamically rendered site 2000’s style. Posts are stored in a database and instantly available. Almost all of the posts were written in a small <textarea> field within a chrome extension that I built for it.

These posts are intended to in two ways. One, link building for the author. I hope that I give the people helping me out along the way just a little bit of a boost. Two, they serve as a permanant commented bookmark for me to search, and come back to later when I have forgotten where I have seen something.

All thoughts posts cross posted to my site are prefixed with a thought balloon 💭.

The tech #

Since this blog is mostly a tech blog about software development, and my journey as I learn, lets talk tech.

python
fastapi
htmx
sqlite
docker
https://fly.io

fastapi #

The core of the site is a python web server running fastapi. Most of the endpoints return html via jinja templates to the browser and json to anything else. So you go to the list of posts at [https://thoughts.waylonwalker.com/posts/waylonwalker/?page_size=9999999999 in](https://thoughts.waylonwalker.com/posts/waylonwalker/?page_size=9999999999 in){.hoverlink} a web browser it will be a rendered feed, but from curl you will get json.

htmx #

The main page is an infite scrolling feed of the posts. All loaded in with htmx. Which just works so beautifully for this. I really like python its my jam, I can make endpoints that return things out of a database very effectively with it, but it takes me some time to do the js side, htmx just makes these common patterns available right in html.

sqlite #

The data storage is a sqlite database using the sqlmodel orm. This was my very first time using sqlmodel, which is an ORM built on top of pydantic. It works really well with fastapi. The only thing that it lacks is the same history, community, and stack overflow posts that sqlalchemy has.

docker #

Docker is my go to way for containerizing web applications. I know it really well and makes it easy to build and deploy on a number of platforms.

https://fly.io #

I have this running on https://fly.io. Its my first real production application running on https://fly.io, and its been great for me. It runs my container for me, gives me tools to scale, and ssh right into the running container. It’s still free for the time being, but goes up quick for my cheap taste if I were to scale it up much.

Id highly recomend it if you have a server that you want to get running on the public internet, and you don’t want to manage any of your own infrastructure.

💭 searching my thoughts locally

2024-03-07T23:42:00Z

![[None]]

First I need to fetch my thoughts from the api, and put it in a local sqlite database using sqlite-utils.

fthoughts () {
    # fetch thoughts
    curl 'https://thoughts.waylonwalker.com/posts/waylonwalker/?page_size=9999999999' | sqlite-utils insert ~/.config/thoughts/database2.db post --pk=id --alter --ignore -
}

Now that I have my posts in a local sqlite database I can use sqlite-utils to enable full text search and populate the full text search on the post table using the title message and tags columns as search.

sthoughts () {
    # search thoughts
    # sqlite-utils enable-fts ~/.config/thoughts/database2.db post title message tags
    # sqlite-utils populate-fts ~/.config/thoughts/database2.db post title message tags
    sqlite-utils search ~/.config/thoughts/database2.db post "$*" | ~/git/thoughts/format_thought.py | bat --style=plain --color=always --language=markdown
}

alias st=sthoughts

Now I am ready to search my thoughts, which is a tiny blog format that I created mostly for leaving my own personal comment on web pages, so most of them have a link to some other online content, and their title is based on the authors title.

Note

This post is a thought. It’s a short note that I make about someone else’s content online #thoughts

Converting markdown to pdf with pandoc on linux

2022-01-12T03:25:36Z

Converting markdown posts to pdf on ubuntu takes a few packages from the standard repos. I had to go through a few stack overflow posts, and nothing seemed to have all the fonts and packages that I needed to convert markdown, but this is what ended up working for me.

Installing all the packages #

sudo apt install \
  pandoc \
  texlive-latex-base \
  texlive-fonts-recommended \
  texlive-extra-utils \
  texlive-latex-extra \
  texlive-xetex

Using pandoc to convert markdown to a pdf #

# older versions of pandoc, I needed this one on ubuntu 18.04
pandoc pages/til/convert-markdown-pdf-linux.md -o convert-markdown-pdf.pdf --latex-engine=xelatex
# newer versions of pandoc, I needed this one on ubuntu 21.04
pandoc pages/til/convert-markdown-pdf-linux.md -o convert-markdown-pdf.pdf --pdf-engine=xelatex

Here is an image of what converting this article over to a pdf looks like. The raw markdown is here.

How I deploy my blog in 2022

2021-10-29T00:00:00Z

How I Continuously Deliver Content to my Blog with Markdown, GitHub, Python, and netlify #

Content at the speed of thought.

well, as fast as I can type

Me #

Mechanical Engineering
Data Engineering
Terminal Junkie

Ask Questions in slido #

Please ask questions in slido # 983 911 | App Dev 1 Track

Slido Poll #

Do you have a personal blog / notes / website?

Yes - Static, built with python

Yes - I manage a server running python

Yes - Not python

No

we will circle back around in a few minutes

I’ll give away my answer #

Yes - Static, built with python

Slack Channel: #track-1-appdev #

If you are in the slack give me a 🔥🔥🔥🔥🔥🔥🔥

Let’s light up slack 🔥🔥🔥🔥🔥🔥🔥

4 parts #

Why
My workflow
Under the hood
Open Source

Part 1 WHY #

2016 #

I want to own my content #

Twitter is a great networking tool, but it’s rare to see anything more than a few hours old.

I want to own my content #

No one can take my domain or shut down the platform that my content is on.

Some of my Stats #

48 Google top 10 ranking pages
6500 monthly clicks on google
12k page monthly views

from ahrefs and google search console

Learn In Public #

I’m creating learning exhaust.

Inspired by swyx https://www.swyx.io/learn-in-public/

from swyx #

Whatever your thing is, make the thing you wish you had found when you were learning. Don’t judge your results by “claps” or retweets or stars or upvotes - just talk to yourself from 3 months ago. I keep an almost-daily dev blog written for no one else but me.

Focus on content #

I could not do any of this if I was focused on Building rather than writing.

Focus on content #

No one needs elastic search navigate your first 50 posts.

when you are starting

Focus on content #

No one is going to make comments.

when you are starting

Write for yourself #

You are your biggest audience out of the gate.

If you continue writing others like you will find you

Don’t worry about the Trolls #

No one is going to take your python keys away.

Slido Check #

Please ask questions in slack/slido

Part 2 Workflow and tools #

To the meat of the talk

Let’s start by making a post
then show how it works under the hood

If you take away anything #

Focus on content that you want to consume.

My Flow #

   ┌───────┐
   │  TIL  │
   └─┬─────┘
     │
     │  ┌─────────────┐
     │  │             │
     └─►│    Posts    │
        │             │
        └─┬───────────┘
          │
          │   ┌────────────────┐
          └──►│    YouTube     │
          │   └────────────────┘
          │   ┌────────────────┐
          └──►│    Conference  │
              │    Talks       │
              └────────────────┘

Let’s start with a Til #

the process

shoutout to @jbrancha #

Check out his amazing til repo

If you ask google very many questions about git, you will end up finding him on the top

Copier #

I use copier for single file templates.

Copier give me a new page #

How I Present from the terminal with lookatme lookatme-slides

copier copy ~/.copier-templates/`ls ~/.copier-templates |\
    fzf --header $(pwd) --preview='tree ~/.copier-templates/{} |\
    lolcat'` . \

nvim open my file #

!TIP Once it starts getting uncomfortable to find posts, its nice to have good shortcuts to get around.

I have about 700 files on my blog to sift through

nvim open my file #

markata list --map path --filter 'templateKey=="til"' --sort date --reverse

nnoremap geil <cmd>Telescope find_files find_command=markata,list,--map,path,--filter,templateKey=='til',--sort,date,--reverse<cr>

Paste in a snippet #

Often times I am working away on some sort of project, and I just need to save a snippet for a later post.

Write the content #

Later I come back and fill in the content.

git push #

I have a vim hotkey gic to commit my current file, and gpp to push it.

It’s nearly live #

It will be live within a few minutes.

Cross Post #

I’ve tried to cross post to more, but it really gets overwhelming.

Twitter
dev.to

Cross Post #

I have a plugin to convert my markdown to a more dev.to friendly format.

Slido Check #

Let’g grab a question from slack/slido

Part 3 How it’s deployed #

In March of 2021 I made the big switch from a javascript based framework to my own ssg.

I thought it would be easy #

There are a bunch of open source libraries that do all the things I need an ssg to do.

Moving to python #

One of the biggest selling points to moving back to python was that I use it every day and know the ecosystem much better.

ipython
pyinstrument
breakpoint

Part 3 How it’s deployed #

word of caution

This part might be a lot of code coming quick.

Show how it comes together
Link to the slides

Everything is markdown #

pymdown-extensions
python-frontmatter

frontmatter #

All the metadata is defined in yaml frontmatter and read in with the python-frontmatter library.

---
templateKey: blog-post
tags: ['webdev', 'meta' ]
title: How I deploy my blog in 2022
date: 2021-10-29
published: false

---

setting up extensions #

markata supports pymdown-extensions

DEFAULT_MD_EXTENSIONS = [
    "markdown.extensions.toc",
    "markdown.extensions.admonition",
    "markdown.extensions.tables",
    "markdown.extensions.md_in_html",
    "pymdownx.magiclink",
    "pymdownx.betterem",
    "pymdownx.tilde",
    "pymdownx.emoji",
    "pymdownx.tasklist",
    "pymdownx.superfences",
    "pymdownx.highlight",
    "pymdownx.inlinehilite",
    "pymdownx.keys",
    "pymdownx.saneheaders",
    "codehilite",
]

setting the markdown object #

self.markdown_extensions = [
    *DEFAULT_MD_EXTENSIONS,
    *markdown_extensions
]
self.md = markdown.Markdown(
    extensions=self.markdown_extensions
)

Pluggy #

comes from pytest
allows users to easily modify the framework to their liking

one of the biggest reasons I started down this path is that I wanted to build my own plugins all the way down framework.

Pluggy #

Pluggy is what I use to implement my lifecycle.

configure
glob
load
pre_render
render
post_render
save

Pluggy #

Pluggy allows the framework to crate a hook_spec and plugin authors to implement hooks with the hook_impl.

"""Define hook specs."""
import pluggy


# the framework's definition
hook_spec = pluggy.HookspecMarker("markata")

# the plugin author's implementation
hook_impl = pluggy.HookimplMarker("markata")

creating the hookspec #

It’s an empty class.

class MarkataSpecs:
    """
    Namespace that defines all specifications for Load hooks.

    glob -> load -> render -> save
    """

    @hook_spec
    def glob(self, markata: "Markata") -> None:
        """Glob for files to load."""
        pass

    @hook_spec
    def load(self, markata: "Markata") -> None:
        """Load list of files."""
        pass

    @hook_spec
    def pre_render(self, markata: "Markata") -> None:
        """Pre render content from loaded data."""
        pass

    @hook_spec
    def render(self, markata: "Markata") -> None:
        """Render content from loaded data."""
        pass

    @hook_spec
    def post_render(self, markata: "Markata") -> None:
        """Post render content from loaded data."""
        pass

    @hook_spec
    def save(self, markata: "Markata") -> None:
        """Save content from data."""
        pass

creating the plugin manager #

pm = pluggy.PluginManager("markata")
pm.add_hookspecs(hookspec.MarkataSpecs)

# register hooks
for hook in config.hooks:
    plugin = importlib.import_module(hook)
    pm.register(plugin)

Diskcache #

Diskcache allows you to setup a persistent cache layer.

cache = FanoutCache(self.MARKATA_CACHE_DIR, statistics=True)

make a key #

To set soemthing to cache we need a unique identifier.

def make_hash(self, *keys: str) -> str:
    str_keys = [str(key) for key in keys]
    return hashlib.md5("".join(str_keys).encode("utf-8")).hexdigest()

make a key #

From my plugins I cache anything that the function I run touches.

plugin code
article content
article frontmatter

from pathlib import Path

key = make_hash(Path(__file__).read_text(), article.content, article.metadata['title'])

accessing the cache #

Now that we have a cache and a key we can ask the cache for values.

html_from_cache = cache.get(key)

if it’s not yet been set #

If the content is not yet set or has expired, you will get None back and need to create the value.

html_from_cache = cache.get(key)
if html_from_cache is None:
    html = markata.md.convert(article.content)
    cache.set(key, html, expire=15 * 24 * 60)
else:
    html = html_from_cache

Configuration #

anyconfig is a great tool to pull your config from generic config files.

markta.toml
markta.yaml
markta.ini
pyproject.toml

Configuration #

Anyconfig needs a path, parser, and keys. The key is your tools prefix

import anyconfig

anyconfig.load(
            path_specs= (Path() / f"markata.toml"),
            ac_parser= "toml",
            keys= ['markata'],
        )

Configuration #

Each key in the config files used with anyconfig must be prefixed with the tool’s name.

# markata.toml
[markata]
default_cache_expire = 1209600

[markata.auto_description.description]
len=160

Markata was born #

A plugins all the way doen static site generator written in python.

6 lifecycle methods
21 pre-defined plugins
cache store
toml based configuration

GitHub Actions #

Rendering the site inside of github actions with the cache is pretty straightforward with these four steps. Keying off of the configuration will bust the cache every time we change the configuration. You can hack a full rebuild by changing anything inside of the configuration file.

GitHub Actions #


- name: Cache
uses: actions/cache@v2
with:
    path: .markata.cache
    key: ${{ runner.os }}-${{ hashfiles('markata.toml') }}-markata

- name: Set up Python 3.8
uses: actions/setup-python@v1
with:
    python-version: 3.8

- name: install markata
run: pip install git+https://github.com/WaylonWalker/markata.git@develop python-twitter background # checksumdir

- name: run markata
run: markata --no-rich

GitHub Actions #

- name: install markata
run: pip install git+https://github.com/WaylonWalker/markata.git@develop python-twitter background # checksumdir

Note: I run bleeding edge, don’t do that

Netlify #

I use deploy to netlify but any static site host would work.

Netlify -> Cloudflare Pages #

Since Making the title I’ve moved to Cloudflare pages.

Netlify is great, but I’m cheap and wanted analytics

Results #

markata.dev

Markdown to site, with seo, cover images, full works.

seo/og tags
cover images
frontmatter cleansing
feeds
rss
cli
sitemap
heading links
build profiler

Markata.dev #

In early 2022 I packaged up my blog’s backend as a package for others to use.

Markata.dev #

I now have several users running their site with what I have built

My buddy has a near clone of mine with 15 posts
Techdestructive

Markata.dev #

plugins all the way down
use the parts you want
modify to your liking

Markata.dev #

It lets you get started quick, write content early, and grow into your own platform

Markata.dev #

⚠ I’ts still very much beta

Open Source #

# install it for your application
pip install markata

# try it out
pipx run markata build

quickstart #

mkdir pages
echo '# My First Post' > first-post.md
echo '# Hello World' > hello-world.md

# or if pipx is your thing
pix run markata build

You can do it too #

Don’t worry about having the perfect post, just make something that is useful to you, and others who will find it.

Connect #

Links #

How I deploy my blog in 2021

2021-10-29T00:00:00Z

How I Continuously Deliver Content to my Blog with Markdown, GitHub, Python, and netlify #

Content at the speed of thought.

well, as fast as I can type

Me #

Mechanical Engineering
Data Engineering
Terminal Junkie

Ask Questions in slido #

Please ask questions in slido # 983 911 | App Dev 1 Track

Slido Poll #

Do you have a personal blog / notes / website?

Yes - Static, built with python

Yes - I manage a server running python

Yes - Not python

No

we will circle back around in a few minutes

I’ll give away my answer #

Yes - Static, built with python

Slack Channel: #track-1-appdev #

If you are in the slack give me a 🔥🔥🔥🔥🔥🔥🔥

Let’s light up slack 🔥🔥🔥🔥🔥🔥🔥

4 parts #

Why
My workflow
Under the hood
Open Source

Part 1 WHY #

2016 #

I want to own my content #

Twitter is a great networking tool, but it’s rare to see anything more than a few hours old.

I want to own my content #

No one can take my domain or shut down the platform that my content is on.

Some of my Stats #

48 Google top 10 ranking pages
6500 monthly clicks on google
12k page monthly views

from ahrefs and google search console

Learn In Public #

I’m creating learning exhaust.

Inspired by swyx https://www.swyx.io/learn-in-public/

from swyx #

Whatever your thing is, make the thing you wish you had found when you were learning. Don’t judge your results by “claps” or retweets or stars or upvotes - just talk to yourself from 3 months ago. I keep an almost-daily dev blog written for no one else but me.

Focus on content #

I could not do any of this if I was focused on Building rather than writing.

Focus on content #

No one needs elastic search navigate your first 50 posts.

when you are starting

Focus on content #

No one is going to make comments.

when you are starting

Write for yourself #

You are your biggest audience out of the gate.

If you continue writing others like you will find you

Don’t worry about the Trolls #

No one is going to take your python keys away.

Slido Check #

Please ask questions in slack/slido

Part 2 Workflow and tools #

To the meat of the talk

Let’s start by making a post
then show how it works under the hood

If you take away anything #

Focus on content that you want to consume.

My Flow #

   ┌───────┐
   │  TIL  │
   └─┬─────┘
     │
     │  ┌─────────────┐
     │  │             │
     └─►│    Posts    │
        │             │
        └─┬───────────┘
          │
          │   ┌────────────────┐
          └──►│    YouTube     │
          │   └────────────────┘
          │   ┌────────────────┐
          └──►│    Conference  │
              │    Talks       │
              └────────────────┘

Let’s start with a Til #

the process

shoutout to @jbrancha #

Check out his amazing til repo

If you ask google very many questions about git, you will end up finding him on the top

Copier #

I use copier for single file templates.

Copier give me a new page #

How I Present from the terminal with lookatme lookatme-slides

copier copy ~/.copier-templates/`ls ~/.copier-templates |\
    fzf --header $(pwd) --preview='tree ~/.copier-templates/{} |\
    lolcat'` . \

nvim open my file #

!TIP Once it starts getting uncomfortable to find posts, its nice to have good shortcuts to get around.

I have about 700 files on my blog to sift through

nvim open my file #

markata list --map path --filter 'templateKey=="til"' --sort date --reverse

nnoremap geil <cmd>Telescope find_files find_command=markata,list,--map,path,--filter,templateKey=='til',--sort,date,--reverse<cr>

Paste in a snippet #

Often times I am working away on some sort of project, and I just need to save a snippet for a later post.

Write the content #

Later I come back and fill in the content.

git push #

I have a vim hotkey gic to commit my current file, and gpp to push it.

It’s nearly live #

It will be live within a few minutes.

Cross Post #

I’ve tried to cross post to more, but it really gets overwhelming.

Twitter
dev.to

Cross Post #

I have a plugin to convert my markdown to a more dev.to friendly format.

Slido Check #

Let’g grab a question from slack/slido

Part 3 How it’s deployed #

In March of 2021 I made the big switch from a javascript based framework to my own ssg.

I thought it would be easy #

There are a bunch of open source libraries that do all the things I need an ssg to do.

Moving to python #

One of the biggest selling points to moving back to python was that I use it every day and know the ecosystem much better.

ipython
pyinstrument
breakpoint

Part 3 How it’s deployed #

word of caution

This part might be a lot of code coming quick.

Show how it comes together
Link to the slides

Everything is markdown #

pymdown-extensions
python-frontmatter

frontmatter #

All the metadata is defined in yaml frontmatter and read in with the python-frontmatter library.

---
templateKey: blog-post
tags: ['webdev', 'meta' ]
title: How I deploy my blog in 2022
date: 2021-10-29
published: false

---

setting up extensions #

markata supports pymdown-extensions

DEFAULT_MD_EXTENSIONS = [
    "markdown.extensions.toc",
    "markdown.extensions.admonition",
    "markdown.extensions.tables",
    "markdown.extensions.md_in_html",
    "pymdownx.magiclink",
    "pymdownx.betterem",
    "pymdownx.tilde",
    "pymdownx.emoji",
    "pymdownx.tasklist",
    "pymdownx.superfences",
    "pymdownx.highlight",
    "pymdownx.inlinehilite",
    "pymdownx.keys",
    "pymdownx.saneheaders",
    "codehilite",
]

setting the markdown object #

self.markdown_extensions = [
    *DEFAULT_MD_EXTENSIONS,
    *markdown_extensions
]
self.md = markdown.Markdown(
    extensions=self.markdown_extensions
)

Pluggy #

comes from pytest
allows users to easily modify the framework to their liking

one of the biggest reasons I started down this path is that I wanted to build my own plugins all the way down framework.

Pluggy #

Pluggy is what I use to implement my lifecycle.

configure
glob
load
pre_render
render
post_render
save

Pluggy #

Pluggy allows the framework to crate a hook_spec and plugin authors to implement hooks with the hook_impl.

"""Define hook specs."""
import pluggy


# the framework's definition
hook_spec = pluggy.HookspecMarker("markata")

# the plugin author's implementation
hook_impl = pluggy.HookimplMarker("markata")

creating the hookspec #

It’s an empty class.

class MarkataSpecs:
    """
    Namespace that defines all specifications for Load hooks.

    glob -> load -> render -> save
    """

    @hook_spec
    def glob(self, markata: "Markata") -> None:
        """Glob for files to load."""
        pass

    @hook_spec
    def load(self, markata: "Markata") -> None:
        """Load list of files."""
        pass

    @hook_spec
    def pre_render(self, markata: "Markata") -> None:
        """Pre render content from loaded data."""
        pass

    @hook_spec
    def render(self, markata: "Markata") -> None:
        """Render content from loaded data."""
        pass

    @hook_spec
    def post_render(self, markata: "Markata") -> None:
        """Post render content from loaded data."""
        pass

    @hook_spec
    def save(self, markata: "Markata") -> None:
        """Save content from data."""
        pass

creating the plugin manager #

pm = pluggy.PluginManager("markata")
pm.add_hookspecs(hookspec.MarkataSpecs)

# register hooks
for hook in config.hooks:
    plugin = importlib.import_module(hook)
    pm.register(plugin)

Diskcache #

Diskcache allows you to setup a persistent cache layer.

cache = FanoutCache(self.MARKATA_CACHE_DIR, statistics=True)

make a key #

To set soemthing to cache we need a unique identifier.

def make_hash(self, *keys: str) -> str:
    str_keys = [str(key) for key in keys]
    return hashlib.md5("".join(str_keys).encode("utf-8")).hexdigest()

make a key #

From my plugins I cache anything that the function I run touches.

plugin code
article content
article frontmatter

from pathlib import Path

key = make_hash(Path(__file__).read_text(), article.content, article.metadata['title'])

accessing the cache #

Now that we have a cache and a key we can ask the cache for values.

html_from_cache = cache.get(key)

if it’s not yet been set #

If the content is not yet set or has expired, you will get None back and need to create the value.

html_from_cache = cache.get(key)
if html_from_cache is None:
    html = markata.md.convert(article.content)
    cache.set(key, html, expire=15 * 24 * 60)
else:
    html = html_from_cache

Configuration #

anyconfig is a great tool to pull your config from generic config files.

markta.toml
markta.yaml
markta.ini
pyproject.toml

Configuration #

Anyconfig needs a path, parser, and keys. The key is your tools prefix

import anyconfig

anyconfig.load(
            path_specs= (Path() / f"markata.toml"),
            ac_parser= "toml",
            keys= ['markata'],
        )

Configuration #

Each key in the config files used with anyconfig must be prefixed with the tool’s name.

# markata.toml
[markata]
default_cache_expire = 1209600

[markata.auto_description.description]
len=160

Markata was born #

A plugins all the way doen static site generator written in python.

6 lifecycle methods
21 pre-defined plugins
cache store
toml based configuration

GitHub Actions #


- name: Cache
uses: actions/cache@v2
with:
    path: .markata.cache
    key: ${{ runner.os }}-${{ hashfiles('markata.toml') }}-markata

- name: Set up Python 3.8
uses: actions/setup-python@v1
with:
    python-version: 3.8

- name: install markata
run: pip install git+https://github.com/WaylonWalker/markata.git@develop python-twitter background # checksumdir

- name: run markata
run: markata --no-rich

GitHub Actions #

- name: install markata
run: pip install git+https://github.com/WaylonWalker/markata.git@develop python-twitter background # checksumdir

Note: I run bleeding edge, don’t do that

Netlify #

I use deploy to netlify but any static site host would work.

Netlify -> Cloudflare Pages #

Since Making the title I’ve moved to Cloudflare pages.

Netlify is great, but I’m cheap and wanted analytics

Results #

markata.dev

Markdown to site, with seo, cover images, full works.

seo/og tags
cover images
frontmatter cleansing
feeds
rss
cli
sitemap
heading links
build profiler

Markata.dev #

In early 2022 I packaged up my blog’s backend as a package for others to use.

Markata.dev #

I now have several users running their site with what I have built

My buddy has a near clone of mine with 15 posts
Techdestructive

Markata.dev #

plugins all the way down
use the parts you want
modify to your liking

Markata.dev #

It lets you get started quick, write content early, and grow into your own platform

Markata.dev #

⚠ I’ts still very much beta

Open Source #

# install it for your application
pip install markata

# try it out
pipx run markata build

quickstart #

mkdir pages
echo '# My First Post' > first-post.md
echo '# Hello World' > hello-world.md

# or if pipx is your thing
pix run markata build

You can do it too #

Don’t worry about having the perfect post, just make something that is useful to you, and others who will find it.

Connect #

Links #

I Started Streaming on Twitch

2021-06-12T10:11:00Z

I recently started streaming on twitch.tv/waylonwalker and it’s been a blast so far.

python
kedro
Data Science
Data Engineering
webdev
digital gardening

Kedro Spaceflights #

It all started with kedro/issues/606, Yetu called out for users of kedro to record themselves doing a walk through of their tutorials. I wanted to do this, but was really stuck at the fact that recording or editing somewhat polished vide is quite time consuming for me.

Inspiration #

My introduction to twitch came from twitch.tv/theprimeagen. I watched him on YouTube, and then decided to drop into a stream. It was so fun to watch him live that I started following others in the science and tech category.

twitch.tv/teej_dv Brilliant neovim core dev, I learn a bunch about nvim every time I watch.
twitch.tv/cmgriffing Super Chill and engaging chat.
twitch.tv/cassidoo Fantastic discussion/chat.
twitch.tv/anthonywritescode Building the python ecosystem.
twitch.tv/kierisi Exploring data in r-studio, taking xgboost to Sliced.

Streaming What I Do #

After taking a jump in with the spaceflights tutorial I realized that it really was not that hard to do, and I can stream things that I am doing anyways. I will be streaming while I build open source kedro plugins, pipelines, and while I work on my website.

YouTube #

I started storing all the replay, and some clips on YouTube. If that is more of your thing be sure to check it out. To be completely honest the editing/ clips will likely come at a minimum, as they take me a lot more time to edit. I would greatly appreciate anyone who subscribes to help me get to the 100 subscriber baseline to get my custom url.

Come join me while I try to figure out what I am doing.

Deploying a kedro dataset to netlify

Here is a small clip from my latest

Upcoming Stream

2021-06-08T20:27:53Z

I'm no longer streaming

As much as I would really love to make streaming work, its really hard for

my family situation to make large blocks of time work for me.

https://stackoverflow.com/questions/16720541/python-string-replace-regular-expression

I am starting to stream 3 days per week, before I start work in the morning. These streams will likely be me just talking through things I am already doing.

Making DAGs do 🔮Magical Things | Open Source 🐍Python | kedro plugins | #

Science & Technology | Every Monday • 7:00 AM - 9:00 AM CDT

On Monday’s I am going to be working on open source packages/plugins for kedro.

kedro-diff
test kedro-diff on piplines with history
setup deploy pipeline
deply to pypi

🌱 Digital Gardening | Blogging with 🐍Python | Building 🔮Markata a static site generator in python for waylonwalker.com #

Science & Technology | Every Wednesday • 7:00 AM - 9:00 AM CDT

On Wednesday morning I will be working on my personal website and the static site generator that I built for it, Markata.

Features #

DONE ~~one_line_gif~~
DONE automate mp4’s
Fix big images
Fix Amp issues
speed up build times
measure plugin performance
speed up images.waylonwalker builds
build footer

Error Correction #

redirect detector
detect multiple H1
title too short (50-70 characters)
missing alt text

Building DAGS with 🐍 Python | 🛢 Writing data pipelines wih Kedro #

Science & Technology | Every Friday • 7:00 AM - 9:00 AM CDT

Friday will be all about building DAG’s or data related things in python. I might reach for something like tidy tuesday, makeover monday, or just do my own thing. I have a few ideas of things to do on my own first.

open pypi package names

Blogging For Me

2021-01-21T00:00:00Z

I create this blog with one person in mind, me.

There are others like me #

This is not completely selfish, as there are likely many others out there that think similarly to me. Everyone comes from different backgrounds and varying levels of experience. In no way do you need to be an expert to create content others will benefit from.

Accurate #

I am as accurate as possible. I don’t know everything, and If I waited for that to happen I would never post, or write at such a high level no one else (including me) would ever want to read.

Generally I know that I am directionally accurate for most of the article. In fact there is often a part of the article that I don’t feel the best about. It may have been some code that could have been better. I try to point these things out. Often when I am and point out where I know there is improvement to be had I get the most welcoming comments, “that was just fine how you did that”, or “I tried that myself and saw a better abstraction.

Create the articles I want to read #

Generally the articles I want to read are directly relatable to things I am currently working on and vary over time. Over the last year its been leaning a bit more towards automation with bash, python, kedro tools.

On Brand #

I try to stay on brand to who I am. I remember writing my first articles. I was trying to be whitty, and include funny memes. Thats not me. I am not a commedian, and generally memes go right over my head. I can remember back in High School, I was the one that didn’t understand a lot of pop culture and was kinda treated as if I was always living under a rock. I knew it was true and I owned it, so no one ever got too mean about it.

Honest, never fake #

I will not try to pretend that I know everything. You may read my blog on occasion and think I know a lot, also possible that you think “wow what an idiot”. I welcome you to share your thoughts and techniques in a positive way. I often cringe at some of my old posts and think about how differently I would approach something not that long after posting. I honest, never fake know what I need to know and don’t pretend to know anything outside of my wheelhouse.

Markdown Cli

2021-01-20T00:00:00Z

This is a post that may be a work in progress for awhile, Its a collections of thoughts on managing my blog, but could be translated into anythiung that is just a collection of markdown.

Listing things #

posts
tags
draft posts

data #

frontmatter
filepath
content
template
html

render content #

Markdown.Markdown
support extentsions

frontmatter cleaning. #

provide ways to hook in or clean up the frontmatter

Markata.Markata methods #

load
render
save

Markata.Post methods #

load
render
save

Markata plugins #

before_load
before_post_load
after_load
after_post_load
before_save
before_post_save
after_save
after_post_save

Markata plugins #

cleanse_frontmatter
html_feed
json_feed
rss_feed
save_posts

CLI #

$ markata list tags

python
data

$ markata

[
  {
    "title": "post title",
    "description": "this is a post",
    "filepath": "path_to.md",
    "content": "the content of the post",
    "html": "<p>the content of the post</p>"
    },
    ...
]

My Content Strategy For 2021

2021-01-19T00:00:00Z

I am making another push in 2021 to get my content out in the world and meeting users where they are. See how I plan to execute.

Platforms #

waylonwalker.com
Twitter
DEV
hashnode
Medium
LinkedIn
Anchor

Markdown #

My content is written in markdown, all markdown. I find that markdown does a really great job at getting out of the way and letting ideas flow onto the page. I am never fussing with fonts and formatting while physically writing posts. Not that I don’t spend way more time than I need to tweak these things on my own personal site where everything gets posted.

Articles #

Much of what I create is inside of short articles that get posted to my personal site waylonwalker.com. These will get cross-posted to DEV, hashnode, Medium.

I have made cross-posting a bit easier for myself by posting the markdown for each article next to the post on my personal site. Add .md to any post and there is the source.

Should I be giving my articles to Medium?? Personally, I am not a fan of the bait and switch that they did with adding a paywall years after launch. From what I can tell authors are not getting paid much from it, users are discouraged when they are blocked, and they really only promote articles that are behind the paywall.

In the end, I am a fan of meeting users where they are, if they like Medium I don’t want them to miss my content.

More Catalytic #

soft skills

My articles are very code-heavy, I do want to transition over to some more evergreen type of posts that are long-lasting. I want to create some more content around how to be a good developer, data scientist, engineer, whatever you call yourself.

Personally, this is some of the content I enjoy consuming, but for some reason is not something I tend to create.

Slides #

I am really enjoying the slide output of my articles on LinkedIn. It makes for something that is unique and easy to digest. I have a pandoc script that takes in the markdown from my posts and kicks out a set of slides, so it’s quick and easy to do. Not every post works well this way by many have so far.

Threads #

With less success (shares, views, likes) I have been converting articles over to Twitter threads as they are released, again not every article works well this way, but many do.

https://twitter.com/_WaylonWalker/status/1349716127887347717

Simplicity #

just write markdown

In the end, everything needs to be simple and build off of the original markdown post. Automation should be in a place where it makes sense. I am no longer manually creating cover art or article descriptions, those are scripted out of the article itself.

I have come cli tooling in place to simplify my process. Expect more of that to come.

Audio #

I have set up a podcast where I read out my posts, but the time that I have available to read them is very constraining to the process. It may be something that I figure out how to work out or something that I drop. It’s something that I think would be really nice, but still trying to figure out how to do it.

https://waylonwalker.com/audio-for-blog/

I personally really like this as I often find a cool blog article that I want to read, but it’s time to cook dinner or drive somewhere. Articles with audio make it super convenient to consume while doing a task requiring eye contact.

TLDR #

Meet Users Where They are.

Blog Data With Python

2021-01-18T00:00:00Z

Generating an api for a blog is much simpler than one might expect with python.

Markdown #

Frontmatter #

Fill in the blanks #

fix missing data

Fast #

Automating my Post Starter

2020-12-11T09:08:00Z

One thing we all dread is mundane work of getting started, and all the hoops it takes to get going. This year I want to post more often and I am taking some steps towards making it easier for myself to just get started.

When I start a new post I need to cd into my blog directory, start neovim in a markdown file with a clever name, copy some frontmatter boilerplate, update the post date, add tags, a description, and a cover.

Todo List for starting a post #

frontmatter template
Title
slug
tags
date
cover
description
create markdown file
open in neovim

Lets Automate this #

This aint no proper cli #

hot and fast

As with many thing running behind the scenes on this site, I am the one and only user, I have limited time, so this is going to be a bit hot and fast. Let’s create a file called new-post.

start the script new-post

#!python
# new-post

👆 Works on my machine

If this were something that had more users than me I would probably use something like click, but for this I want to get it done quick and avoid any need to manage dependencies. Be careful if you were to share something with a #!python as it requries the end user to have the right version of python ready to go.

Title #

The title can’t really be automated this is the core idea coming out of my 🧠, but it will be captured through the cli and put into proper position. For this I’m going super simple and just pulling it out of sys.argv

set the title

import sys

title = sys.argv[1].title()

! sys.argv is a list of each argument passed into the script split by spaces.

slug #

The slug is what I am calling the route and can simply come out of the title automatically, if I want to shorten it later by hand that will be simple enough to do manually. All that needs to be done is to lowercase and replace a few characters with -.

set the slug

slug = title.lower)(.replace(" ", "-".replace()"_", -"")""))

tags #

For tags I decided I wanted the parser to be as simple as possible and didn’t want to dance around any flags. I am simply just going to look at every argument passed into the command and see if any of them contain one of my common tags.

parse the tags

args = ''.join(sys.argv[1:])
tags = []

if 'py' in args:
    tags.append('python')

if 'web' in args:
    tags.append('webdev')

if 'blog' in args:
    tags.append('blog')

if 'data' in args:
    tags.append('data')

🤷‍♂️ antipattern?? The above section does an initialize then modify. I generally try to avoid this pattern with something like a list comprehension, but didn’t see an obvious solution so I just went with it.

Frontmatter Template #

Now we have enough information going to assemble the frontmatter I use for my posts. I am going to just insert the values I need into an f-string. Since python 3.6 was released f-strings are my go to templating tool.

create the markdown

import datetime

frontmatter = f"""---
templateKey: blog-post
tags: {tags}
title: {title}
date: {datetime.date.today().strftime('%Y-%m-%dT%H:%M:%S')}
published: false
description: ''
cover: "/static/{slug}.png"

---

"""

create markdown file #

Now its time to get down to business and make the post. First I want to throw an error if the post already exists, I definitely dont want to blow away an existing post if a certain slug is already taken. I am a big fan of custom error messages and I am going to go ahead and make one here, even though this is just a quick script.

custom error

class PostExistsError(FileExistsError):
    pass

I am a pathlib superfan. It’s going to make setting up these paths super simple. Note I am going to anchor my directory down with the __file__ variable. I do this all the time to get paths relative to the module that is currently running.

setup paths

directory = pathlib.Path(__file__).parent
path = pathlib.Path(f"{directory}/src/pages/blog/{slug}.md")

if path.exists():
    raise PostExistsError(f"Post Already exists at {path}")

file is a string that represents the path to the running module

Finally just write the file. Here we open the file with a context manager so that we don’t have to worry about closing it when we are done. Note that we open it with the w+ flag for write and creation.

write the file

with open(path, "w+") as f:
    f.write(frontmatter)

git-add">git add #

I am not quite ready to pull the trigger on doing an auto commit, but this may happen in a future version. For now I want this file easily picked up by vims :GFiles since I have that is one of my most used hot keys. To do this the file at least needs added. I’m sure there is a better way to do this with a Git library, but I am used to the command line so I am going to just run a subprocess.

I am using the subprocess.Popen command since its what I am used to, note that it will run the task in the background so be sure that you wait on it. The Popen is great if you have several task that are not dependent on each other.

git add

gadd = subprocess.Popen(
    f'cd {directory} && git add {str(path).replace(str(directory) + "/", "")} ',
    shell=True,
)
gadd.wait()

open in neovim #

Last step of the script is to start writing, I want to be open in my blogs directory (hence the cd), with the file open, to the right line (+11), and in insert mode (+star).

open post in neovim

nvim = subprocess.Popen(
    f'cd {directory} && nvim +12 +star {str(path).replace(str(directory) + "/", "")} ',
    shell=True,
)
nvim.wait()

Alias #

Now I want this script to be available everywhere. I am going to simply add the following entry to shorten the script and eliminate the need to use the full path. I added this to my ~/.alias, for you it may be ~/.bashrc, or ~/.zshrc.

alias np=~/git/waylonwalkerv2/new-post

Starting a new post #

Lets start a new post about automating my posts in python.

np "automating my posts" python

This is my workflow #

Ad hoc scripts like this can be a bit of a hot mess, partly due to the just get it done nature, but also due to the fact that I am just riffing off the top of my head and utilizing docs as least as possible.

While writing the script I would run it after each section or so and print some results to make sure they were looking good. If I ever needed access to a live variable I would pop open ipython and run %run new-post "my-new-post" and inspecting it.

Final Script #

final script

#!python
# new-post

import sys
import datetime
import pathlib
import subprocess


title = sys.argv[1].titlecase()
args = "".join(sys.argv[1:])
tags = []

if "py" in args:
    tags.append("python")

if "web" in args:
    tags.append("webdev")

if "blog" in args:
    tags.append("blog")

if "data" in args:
    tags.append("data")

slug = title.lower().replace(" ", "-").replace("_", "-")
frontmatter = f"""---
templateKey: blog-post
tags: {tags}
title: {title}
date: {datetime.date.today().strftime('%Y-%m-%dT%H:%M:%S')}
published: false
description: ''
cover: "/static/{slug}.png"

---


"""


class PostExistsError(FileExistsError):
    pass


directory = pathlib.Path(__file__).parent
path = pathlib.Path(f"{directory}/src/pages/blog/{slug}.md")

if path.exists():
    raise PostExistsError(f"Post Already exists at {path}")

with open(path, "w+") as f:
    f.write(frontmatter)

gadd = subprocess.Popen(
    f'cd {directory} && git add {str(path).replace(str(directory) + "/", "")} ',
    shell=True,
)
gadd.wait()

nvim = subprocess.Popen(
    f'cd {directory} && nvim +12 +star {str(path).replace(str(directory) + "/", "")} ',
    shell=True,
)
nvim.wait()

https://waylonwalker.com/quickly-edit-posts/

check out the next article in this series where I setup a bash function to quickly edit these posts

Adding Audio to my blog posts

2020-11-25T20:52:22Z

This is episode 1 of the Waylon Walker Audio experience, posts from waylonwalker.com{.hoverlink} in audio form.

So I have had this idea for awhile to add audio to my blog posts. The idea partly comes from the aws blog, if you have ever been on their blog you will have noticed that they have a voiced by amazon polly section.

What to Expect #

Honestly I don’t know this is all new to me and I dont have much to go off of. For now its a test that may or may not work out.

I will say that the time that I have available for clean audio is a bit limited so expect these to come out in batches as I get time to go back and record.

What Not to Expect #

One thing that makes the aws blog really hard to listen to is the robotic voice, I definitely don’t want that. This will be voiced by a real human, Me. At the same time written text doesn’t translate directly to audio well so don’t necessarily expect the audio to be word for word.

Code blocks #

There are a lot of code blocks in my blog, which don’t translate directly into I will do my best to read short one liners or describe larger blocks, but don’t expect a boring three minute read of large code blocks.

Updates #

Expect to see these at the top of finished posts once I consider them done. I will not likely come back to edit the audio if there is an edit to the post unless its major. I will do my best to highlight changes in a note next to the embeded audio on the post.

Lets do this #

If you like this idea give the posts a listen, share them with your friends, give me a shout out on twitter @_waylonwalker{.hoverlink}.

How to crush amazing posts on DEV

If you enjoyed this post you may enjoy another “meta” post

Expand One Line Links

2020-11-18T05:00:00Z

I wanted a super simple way to cross-link blog posts that require as little effort as possible, yet still looks good in vanilla markdown in GitHub. I have been using a snippet that puts HTML into the markdown. While this works, it’s more manual/difficult for me does not look the best, and does not read well as

Goals for new card #

The new card should be fully automated to expand with title, description, and cover image. Bonus if I am able to attach a comment behind it.

fully automated
card expansion
Title
description
cover image

Old Card #

If you can call it a card 🤣. This card was just an image wrapped in an anchor tag and a paragraph tag. I found this was the most consistent way to get an image narrower and centered in both GitHub and dev.to.

<p style='text-align: center'>
  <a href='https://waylonwalker.com/notes/eight-years-cat/'>
    <img
    style='width:500px; max-width:80%; margin: auto;'
    src="https://images.waylonwalker.com/eight-years-cat.png"
    alt="My first eight years as a working professional article"
    />
  </a>
</p>

The key here is that I have to put the HTML into the markdown. It looks a bit dirty while editing and quite frankly it’s a pain to deal with.

New Card #


<a class="onelinelink" href="https://waylonwalker.com/eight-years-cat/">
<img style="float: right;" align='right' src="https://images.waylonwalker.com/29cdf6fcfb17d7fd766fc438144fb3e4/630fb/eight-years-cat-xmas2020.png" alt="article cover for My first eight years as a working professional.">
<div class="right">
    <h2>My first eight years as a working professional.</h2>
    <p class="description">
    This day 8 years ago I started my first day as a Mechanical Engineer. I am so grateful for this journey that I have been able to have. There is no way that I could have planned this journey from the beginning.
    </p>
    <p class="url">
    <span class="read-more">read more</span>  waylonwalker.com
    </p>
</div>
</a>

My first eight years as a working professional.

First step #

My first attempt was to make my own transformer for gatsby-remark-embedder. I previously set this up on my site for Twitter and YouTube. I tried to get some custom transformers going, to do what I wanted for my own website, but failed. I really struggled to understand what data was coming in and out of the transformer. My lack of js/node debugging skills was really showing.

gatsby-remark-embedder

using gatsby-remark-embedder to expand Twitter/YouTube

Redirects #

It also works with redirects. I have a redirect to my “latest” post. It’s something that I don’t do the best job at keeping up to date, but when I feel really proud of a post I make it the latest.

latest

this post is a redirect to my “latest post”

Client Side #

I started out by running this card expansion client side. This was the strategy that I used to find the list of elements that should be transformed.

get all anchors
get all paragraphs
filter paragraphs where the content is one of the links
filter paragraphs where there is only one element in the paragraph
filter to paragraphs with links that shouldTransform
These elements should have the oneLineLinkCard applied.

const oneLineLinks = () => {
  const linkText = [...document.querySelectorAll('.post-body p a')].map(
    (p) => p.innerText
  )
  const paragraphs = document.querySelectorAll('.post-body p') //

  const regex = /^https?:\/\/waylonwalker\.com\//
  const shouldTransform = (url) => regex.test(url)

  const anchorOnly = [...paragraphs].filter(
    (p) => linkText.includes(p.innerText) && p.childElementCount === 1
  )

  anchorOnly
    .filter((p) => shouldTransform(p.firstElementChild.href))
    .map(
      async (p) =>
        (p.outerHTML = await oneLineLinkCard(p.firstElementChild.href))
    )
}

Styles #

CSS is not my strong suit, but I can generally hammer something into a shape that I am happy with. For this one, I did struggle a bit with how it looked on various screens, particularly because I was holding the cover image size to a hard 300px. I ended up with more media queries than I needed, but it works.

.onelinelink + blockquote {
  position: relative;
  left: 2rem;
  background: rgba(0, 0, 0, .2);
  margin: -6rem auto 1rem;
  padding-top: 3rem;
  border: 1px solid goldenrod;
  border-top: 2px solid goldenrod;

  max-width: 300px;
  @media (max-width: 350px) {
  left: 0rem;
  margin-left: .4rem;
  margin-right: .4rem;
  }
  @media (min-width: 800px) {
    max-width: 600px;
  }
  @media (min-width: 900px) {
    max-width: 700px;
  }
  @media (min-width: 1000px) {
    max-width: 800px;
  }
  border-radius: 15px/45px;
  display: block;
  }

}

.onelinelink {
  position: relative;
  z-index: 2;
  margin: 4rem;
  overflow: hidden;
  display: flex;
  border: 2px solid rgba(255, 50, 50, .1);
  background: rgba(255, 50, 50, .015);
  background: #262236;
  text-decoration: none;
  border-radius: 8px;
  max-height: 126px;

  @media (max-width: 800px) {
    flex-direction: column;
    max-height: 800px;
    max-width: 300px;
    margin: 4rem auto;

  }

  h2 {
    top: -1.2rem;
    postition: relative;
    margin: 0;
    padding: 0;
    font-size: .8rem;
    font-weight: 400;

  }

  .right {
  width: 100%;
    padding: 5px 15px;
  }
  .description {
    font-size: 1rem;
    line-height: 1.2rem;
    height: calc(100% - 31px - 1rem);
    padding: 0;
    padding-bottom: 1rem;
    padding-top: .1rem;
    margin: 0;
  }
  .url {
    padding-right: 30px;
    color: rgba(255, 255, 255, .1);
    text-align: right;
    position: relative;
    z-index: 2;
    background: #262236;
  }

  img {
    max-width: 300px;
    max-height: 126px;
    padding: 0;
    margin: 0;
    border-radius: 8px 0 0 8px;
  }
  .read-more {
    font-size: .6rem;
    color: rgba(255, 255, 255, .08);
  }
}

Final Look #

On mobile, it renders vertically.

On desktop, it renders horizontally.

Expansion #

I’m sure that all of this can be better, my js skills are still forming. It’s quite humbling to see how hard it is to think in an unfamiliar language. The following oneLineLineCard renders a string template literal from a paragraph with a single anchor to a card that contains some of that pages meta information. The getDescription` function uses a fetch to get the metadata right from the content of the page.

const getDescription = (url) =>
  fetch(url)
    .then((r) => r.text())
    .then((html) => {
      let parser = new DOMParser()
      let doc = parser.parseFromString(html, 'text/html')
      let meta = doc.querySelectorAll('meta')
      const description = [...meta].filter(
        (m) => m.name === 'og:description'
      )[0].content
      const image = [...meta].filter((m) => m.name === 'og:image')[0]?.content
      const sm_image = [...meta].filter((m) => m.name === 'og:sm_image')[0]
        ?.content
      const url = [...meta].filter((m) => m.name === 'og:url')[0]?.content
      const title = [...meta].filter((m) => m.name === 'title')[0]?.content
      return { description, image, url, title, sm_image }
    })

const oneLineLinkCard = (url) => {
  return getDescription(url).then(
    (meta) =>
      `<a class="onelinelink" href=${meta.url}>
  <img src='${meta.sm_image ? meta.sm_image : meta.image ? meta.image : ''}' alt='cover image for ${meta.title ? meta.title : ''}>
  <div class="right">
    <h2>${meta.title ? meta.title : ''}</h2>
    <p class='description'>
      ${meta.description ? meta.description : ''}
    </p>
    <p class="url">
       <span class='read-more'>read more</span>  waylonwalker.com
    </p>
  </div>

</a>
  `
  )
}

It works #

And it works. Whenever I reference my own blog with just a single link on a line in markdown I get a nice card link out to the other post, with a small image sized for the card, the title, and the description of the post.

But #

too much client-side
does not work well with cross-posting

For every link I do this with the client will pull the full page just to get a bit of metadata. I am already doing a bit more than I want to do client-side for a blog, so I would prefer to do it ahead of time.

Additionally, since it is done client-side it does not translate well when I copy my markdown to various other blogging platforms. If it were rendered right into the markdown cross-posting would be much easier.

Future State #

actually already implemented at this point

The direction I am going to try is to use python to load each post, look for lines that contain only a link, then render this same markup right in the markdown. For this I am going to use a language I am more familiar with, python, and do this inside of GitHub actions just before build time so that the markdown I write stays the same, the cards will only be rendered in prod.

Why Python 🐍 #

Python is my every day what I know, I work much more efficiently and cleanly with it. Also the more I blog the more abstractions I am seeing and the lazier I am getting. Things like description, SEO, cover images are all getting automated. Gatsby really doesn’t like to run when some of those things are missing, probably due to my lack of JS error handling skills. I find it much easier to load up all the pages and patch up the frontmatter in python before build time.

I am kinda curious if eventually, I can re-create everything I need in python because I am honestly not using react for much more than a glorified templating system, besides search. If I can pre-render everything in python

What do you think?? #

Do they look good? Could they be better?

Kedro Factory

2020-11-16T06:00:00Z

Dynamically generate kedro pipelines with yaml or script

Inspiration

dag-factory

rebrand

2020-11-14T06:00:00Z

simple landing page
- https://swyx.io
- joel on software
  - recent
  - reading lists
More from waylon just above footer
- 4x2 grid
link strategy
- latest post
- next/prev
- similar tags
search in nav
tag stickers
simple cards?
bookmarks?
nav style stinks
single post template
flat routes no need to /blog /notes
post types
- 🌳 full
- 🌱 budding
- 🖊 Note
- 💻 hot tip
usage of tags
MDX
- stories
- slides
- ⚠
- ❌
- ✔
- kedro viz
- charts
- inlink component
- https://joshwcomeau.com/
- auto-card oneline links
meta posts
- about
- uses
- how site is built
- how to search
stories

TODO #

review package.json
update package.json

Done #

ahrefs
- fix canonical urls
- fix broken inlinks
convert to one post template

How to crush amazing posts on DEV

2020-08-07T05:00:00Z

This post was inspired by a comment I left on @dsteenman’s post.

{% post dsteenman/how-long-should-a-blogpost-be-2k6n %}

Most of the time I prefer short as I am more likely to read the whole thing. If its setup as a series I am more likely to work my way through the whole series in a matter of a few sessions. Just my preference

I will say though there are certain articles that fit well to the long format. They are articles that folks tend to come back to often as a reference again and again.

Sections #

layout is key #

Either way, you go layout is key. You are not Steven King, no matter how great of a writer you are, you are unlikely to hold attention like he can. Most folks reading blogs scan articles first. I often scan, then read. If the article is really good or pertains well to me I will read everything, otherwise, I go back and read only the sections of interest. If there are no discernable sections you lost me.

For this reason, you need to break up your post, into sections and treat the heading for each one like you would a title of a full post.

TOC #

Table of Contents

A lot of folks responded to Danny’s post suggesting a table of contents. For some reason I have never included a TOC in my posts. It’s something I am now considering. I am really good at changing layout right before, or after, shipping a brand new post.

semi-auto TOC

As I am highly allergic to unnecessary rework and potential mistakes I put together this snippet that generates the TOCautomatically, just paste this into your console, and paste the results in your article.

// pres F12
// paste this in the console
// get your auto generated DEV TOC
console.log(
  [...document.querySelectorAll('.anchor')]
  .map(a =>
    `1. [${a.parentElement.innerText}](#${a.href.split('#')[1]})`
  )
  .join('\n')
)

Break it up #

Use headings, images, and blockquotes to break your article up and make it scannable. I treat each heading as an article title. It should be engaging and pull the reader in, but not be clickbaity and irritate them when they didn’t get what they expected.

make it scannable! … treat each heading as an article title

Markdown #

Get Familiar with Markdown. Check out this cheatsheet or the reference right in the DEV editor. This is not an article about markdown, but here are the most common tags you need to break up your article.


# H1
## H2
### H3
... up to H6

* unordered
* list
* of
* things

1. ordered
1. list
1. of
1. things

![Alt text of image](put-link-to-image-here)

**bold**
_italics_
~~strikethrough~~

👇 Horizontal rules are great a making a hard break between sections

---

DEV also supports these HTML elements for additional flair, use wisely. Some can make for some really jarring style that really pulls the readers eye to and is hard to focus on the rest. I’m talking about you <mark>.

<small>small text</small>
<sup>superscript text</sup>
<sub>subscript text</sub>
<mark>highlighted text</mark>
<abbr title="Table of Contents">TOC</abbr>

Liquid Tags #

When Editing a post click the Liquid Tag reference to the right, for a list of everything. The post tag is the retweet of DEV.


{% post helenanders26/sql-series-from-a-to-z-2pk9 %}

{% user helenanders26 %}

{% github forem/forem %}

{% github forem/forem no-readme %}

Article types #

As I can see there are several article types on DEV

superpost #

I think this is what @dsteenman is eluding to with the (+3000) word post. This is the hardest to pull off in my opinion, but if done right it will land you at the top of the search for a long time, in the top 7, and potentially the top 1 for a given tag.

I used to think that every post needed to be a super post that everyone would rave over. I have found personally that attempting to do this makes it so I rarely post and way overthink them. I need to at least make a cutoff time that the post is going to ship.

This can also be the most frustrating, you have put all of your eggs in one basket. If you don’t title it right, post at the right time, share it at the right time, it might not take off like you had hoped.

{% post helenanders26/sql-series-from-a-to-z-2pk9 %}

@helenanders26 takes the 👑 as the queen of the superpost. She is the first person who comes to mind when I think of this post type

single post #

Your average post. There are a lot of great techniques to making the average post great (some added above). Sometimes they find traction, sometimes they don’t. I don’t sweat if they don’t. I like posting shorter content as its achievable for me and my lifestyle. I can always crosslink them and generate more views/discussion across them.

{% post taillogs/how-to-write-a-good-blog-post-2eom %}

@taillogs has a good article on his process to writing a good post.

For those struggling to find what to write about, this is a great article from @swyx learn-in-public-hack

series #

Using the series tag you can break super posts into smaller ones. This puts fewer of your eggs in the same basket. I typically start a series when I know that I am going to post about a single topic often, but don’t have it all laid out. I’ve been told for these to be really successful it needs a bit more pre-thought.

I do notice that I get a bit of engagement back to older posts every time a new one is posted. so this does help drive engagement by continuously pulling readers in. I am not sure if its quite as good as a link, or liquid embed. Keep in mind when doing this the series component will show the first 2 and the last two without clicking. Make sure that the first two really count, they will likely get the most traffic benefit from the series.

{% post waylonwalker/what-are-github-actions-1lhh %}

I personally put a lot of my content into a series. I don’t think through the full series ahead of time very much. I do it because it helps me organize and retrieve my thoughts. I find it easier to get back to the post I want to reference if I can find the series it was part of. I think of it as a tag that no one else can post to.

discussion #

Posts just like this one, where the author leads the discussion with an intriguing question or comment but holds back on their opinion. The key here is that the author should engage in the discussion, keep the discussion moving, and provide their thoughts here.

Selfishly this is one of my favorite types of posts to make as I learn the most from them.

{% post ben/how-do-you-identify-over-engineering-1oad %}

@ben is the king of the #discuss post. He is able to get just the right titles that pull people in and generate quite large discussions.

Post what you want to read #

At the end of the day YOU are the most important component. Post what you like to read, post what you are able to write. If you struggle to wrap your head around concepts in small posts and have a talent at making rockstar super posts do that. Do YOU

Edit On GitHub

2020-07-18T05:00:00Z

I recently added a button to my blog, and subsequently my posts on DEV.to. It’s the best thing that I have done for it in a while. It makes it so easy to do quick edits.

finding errors #

I refer back to my old posts quite a bit, sometimes I find errors in them. Honestly most of the time its too much effort to load up my editor make the change and git add and git commit. It’s not much, but when I am referring to my own post generally I am just trying to get something done and don’t have time for that.

The slug #

The slug that I am getting from gatsby is formatted as /blog/this-post/. Note the trailing slash and missing file extension, thats where the ${slug.slice(0, -1)}.md comes in.

The Full Link #

GitHub makes it super easy to form a URL that puts you right into edit mode on the exact post you are looking for. This is format for the URL… you can always figure it out easily by clicking edit on one.

https://github.com/<user>/<repo>/edit/<branch>/<filepath>

The Final Result #

Wrapping that URL up in a short snippet gave me the following result.

<p style={{ display: 'flex', justify: 'center', textAlign: 'center', margin: '3rem auto' }}>
  <span role='img' aria-label=''>👀</span>
  see an issue, edit this post on
  <a
    href={`https://github.com/WaylonWalker/waylonwalkerv2/edit/main/src/pages${slug.slice(0, -1)}.md`}
    alt='edit post url'
    title='edit this post'
   >
  <FiGithub />
  GitHub
  </a>
</p>

I know better than hard coding the GitHub url in, but I did it anyway, my personal site gets to be a bit of a rats nest of hotfixes over time.

This was a super quick change that brought me a lot of value without much effort. I will probably change up the styling/layout of it in the future. For now I have something that functions, and I can get back to creating content.

🙋‍♂️ Can Anyone Explain Twitter Cards to me?

2020-07-11T03:00:00Z

Can someone explain how or why twitter cards render differently from device to device? I do understand that twitter cards a built from meta tags, the full list can be found in their docs

Rendered on Mobile #

Mobile Looks fine.

Not Rendered on Desktop #

On Desktop it is not picking up the image.

Twitter Card Validator #

The Validator renders the card correctly. I tried the official twitter card validator, as well as heymeta.com, and metatags.io. All look good.

Can Cards be updated? #

even with a redirect?

I tried seting up a pinned tweet that uses a netlify redirect to always keep my latest post up to date. Again this one looks good in the validator, doesnt render the image on desktop, does render the image on mobile, but does not update. I have heard that you need to hit the card validator to update cards? I am not sure if this is true, but for me this is not even upating the card.

👋 Hello,

―――――― I'm Waylon Walker ――――――

I work with data using 🐍 #python and utilize #webdev to 〽visualize it.

――――――

I write about things on my 🌱 digital gardenhttps://t.co/rAvD9iw05g

👨‍💻Some are cross-posted to https://t.co/oRWk7MgUD5

――――――
💌https://t.co/PilOTWQ9ub
— 𝚆𝚊𝚢𝚕𝚘𝚗 𝚆𝚊𝚕𝚔𝚎𝚛 (@_WaylonWalker) July 11, 2020

Refactoring your blog urls

2020-06-11T05:00:00Z

I just did a quick refactoring of my JAMStack blog urls. Some didn’t fit with my style, some had _ that I wanted to switch to -, and others were ridiculously long. I’ve been using forestry as my CMS, I write many of my posts there, and sometimes it picks some crazy file names (based on my titles). It was time to refactor.

Large Refactor At The Command Line

When refactorings similar to this get really big I often need to do some project wide find an replace, I usually do this right from the command line.

🖊 Rename posts change the filename #

My post urls are based on the file name of my markdown file, so I can simply go through my filesystem and rename anything I want. From here its probably best to only commit the addition of the new file name, until the redirects clear, but these are all low traffic posts for me so I just commited both at once.

Safely redirect without breaking links

_redirects ⤴ /redirects #

I am hosted on netlify, which automatically puts very ⚡ performant redirects on the edge based on a /_redirects route on your site. So I added a redirect from the old route to the new route there.

rename long posts #

/blog/i-finally-fixed-my-styled-components-in-gatsby-js
/blog/fix-styled-components-in-gatsby
/blog/interrogate-is-a-pretty-awesome-brand-new-cli-for-python-packages
/blog/interrogate

pedantic 🤔 probably #

This is probably being a bit pedantic. Realistically my urls were probably ok. These posts probably aren’t going to be topping the google search charts anyways, but I wanted to do it without killing off any links that I may have happened to post somewhere.

Blog consistently

2020-06-07T02:12:24Z

Blog consistently

Even if you think a topic has been blogged to death

There is one thing they are all missing….

Your unique perspective

How to get Dev Comments from an article Url

2020-05-20T10:00:00Z

I want to incorporate some of the wonderful comments, \U0001F495, \U0001F984, and \U0001F516’s that I have been getting on dev.to on my website. I have dabbled once or twice with no avail this time I am taking notes on my journey, so follow along and let’s get there together. By the end of this post, I will have a way to get comments from posts on the client-side thanks to the wonderfully open dev.to API.

I want to incorporate some of the wonderful comments, 💕, 🦄, and 🔖’s that I have been getting on dev.to on my website. I have dabbled once or twice with no avail this time I am taking notes on my journey, so follow along and let’s get there together. By the end of this post, I will have a way to get comments from posts on the client-side thanks to the wonderfully open dev.to API.

The API #

dev.to has an open API that allows us to easily get comments as HTML. They have their API hosted at https://docs.forem.com/api/#tag/comments, let’s take a look at it.

Here we can see that going to https://dev.to/api/comments?a_id=270180 returns us some json, that contains an array of comments.

[
  {body_html: '<the comment rendered as html>',
   user: {<an array with quite a bit of information about the commenting user>},
   children: [<an array of child comment objects>]
   <other stuff we don't care about>
  },
  <more comments>
  ]

What the heck is that a_id #

That is an article_id. Though a bit of searching I found that it occurs in at least four places on every page as a data attribute. Using chrome dev tools I found a good place to “query” it from.

With this knowledge, we can fetch the contents of an article and pull the articleId from it.

    async function getDevToAId(url) {
        // Gets the articleId of a dev.to article
        const root = 'https://dev.to/'
        if (!url.includes(root)) {
            url = root + url
        }
        let domparser = new DOMParser()
        const html = await fetch(url).then(r => r.text())
        const doc = domparser.parseFromString(html, 'text/html')
        const articleId = doc.querySelector('#article-body').dataset.articleId
        return articleId
    }

note I do check to see if a full URL or slug was given, if it was just the slug I tack on https://dev.to/ before fetching.

Now the comments #

The main event is here, what you all have waited for, and it’s by far the easiest part.

    async function getDevToComments(url) {
        const articleId = await getDevToAId(url)
        const response = await fetch(`https://dev.to/api/comments?a_id=${articleId}`)
        const comments = await response.json()
        return comments
    }

The hardest part of this was figuring out what the a_id was and how I was going to get it from some more commonly known information about my articles, the URL, or the slug

Try it out #

F12 pop open your console right in dev tools of this post and try it out.

I finally fixed my Styled-Components in gatsby.js

2020-02-08T15:07:00Z

I finally fixed my Styled-Components in gatsby.js. I am starting a redesign of my website. I have started cross posting to dev.to more regularly. With that I have been making more detailed cover images at the recommended 1000x420. These images get cut off on my own site, which is a bit ridiculous to have my own content not look right on my own site. But before we start a heavy redesign I have a small issue that has plagued the site for at least a year!

I have a small issue that has plagued the site for at least a year!

I have been using styled components in my gatsby.js site for about a year now. And it has been plagued by styled-components not being in the ssr causing some jank in the styles being loaded. You can see it in the lighthouse performance report below. It generally loads super quick, and is only caused on first load. Anything using the gatsby <Link/> component typically is fine and unaffected by the issue.

The fix #

The fix was so simple it was only 2 lines total. One to install gatsby-plugin-styled-components and one to use it.

npm i gatsby-plugin-styled-components

plugins: [
   'gatsby-plugin-styled-components',
]

Before #

After #

Why did it take so long to Fix? #

The real issue here was that I really didn’t understand the problem as I described it above until I found the fix. It really did seem random that at odd times the styles would seem to vanish. Sometimes never fully rehydrating at all. Well actually I had fixed some production sites at work with it, but had no idea why it worked and therefore could not remember how I had fixed it, and google searched yielded no help.

After re-watching Wes Bos’s Advanced react course where he describes how to fix this issue for next.js sites it became clear that the problem was not random at all. It was that they do not get statically rendered and are only on the page after react is re-hydrated. The moment I realized the true problem I knew how to google it and quickly found there was a plugin for this.

Personal URL shortener with Netlify Redirects

2020-01-29T06:00:00Z

I love using URL shorteners to easily share links without hitting character limits, but they loose their meaning. Services like bit.ly will save my links for me so that I can find them, but I would rather them to be easy to remember. https://bit.ly/2ruLwQz does not roll of the tongue so well.

301 🤸‍♀️ #

I recently discovered a really cool feature of netlify that I have always looked past, _redirects. It is so simple cool and powerful, every netlify site should do this!

But how 🤷‍♀️ #

simply add a _redirects file to the root of your your published site with the following format. The trick I found with my gatsby site was that it needed to be in my static directory /static/_redirects, not root. Next you just put space separated links on separate lines. #’s can be used for comments.

# netlify redirects
# from_url to_url

# Short-Blog

/blog/scli         /blog/simple-click/
/blog/cmdt         /blog/cmd-exe-tips/
.
.
.


# splats

/b*             /blog/:splat
/n*             /notes/:splat


# External

/twitter        https://twitter.com/_WaylonWalker
/github         https://github.com/WaylonWalker
/devto          https://dev.to/waylonwalker/

Now with shorter links we have more space for our content without needing to use a service like bit.ly that makes our links unreadable.

![url shortener](https://images.waylonwalker.com/URL shortener.png)