-
starlette head request
Starlette has a head request that works right along side your get requests. This morning I fiddled around with custom routes for and , but had to manually set some things about the file, and was still missing in the end. Turns out as a developer you can [[ just ]] add a route to your routes and starlette will strip the content for you, while preserving all of those good headers that fastapi created automatically for you. Here is an example of the response with curl.
-
Why Make a Website in 2025
Inspired by Jim and Dave It's Fun If it's not something that you enjoy, you might as well move on there are far better ways to spend your time in 2025. Only the weirdos read this shit anymore, the masses have long moved on to curated social media feeds, and on to chatting with llms. I enjoy spending some time in the digital garden every once in awhile tweaking templates, creating [[ markata ]] plugins to do interesting things. I enjoy expressing my thoughts, or at least shouting them into th
-
javascript b64
I'm currently [[replacing-google-search-apps-with-self-hosted-web-apps]] and decided to create a simple b64 encoder/decoder, just start typing to enter text, escape to deselect, then e/d to encode/decode. I'm trying to make these apps super simple, self hosted out of minio, static html, and javascript. It's been fun to get back to some simple interactive web development like this. No build just a website that does something. No broken builds, no containers to deploy, just push to minio. Here i
-
newlines in css before
I'm building in a [[ fragmentions ]] implementation into my blog, I wanted to add some text before the fragment to indidate that it was the highlighted fragment that someone may have intended to share with you. To get a newline in a I need to use and . Here is what it looks like on my not yet live implementation of fragmentions. screenshot-2025-02-15T15-43-06-372Z.png
-
fragmention
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://
-
markdown split panel
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. screenshot-2025-02-04T02-28-46-750Z.png {.more-cinematic} {.rounded-xl } !!! Note Mobile Users 🔄 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. Here is the result of that markdown. !!! vsplit I Have two opinions {
-
tailwind aspect
I've been back to putting some images on my blog lately and thinking about making them a bit thinner through the use of aspect ratio for simplicity. I'm leaning pretty heavy on tailwindcss these days due to some weird quirks of markdown-it-attrs I cannot have slashes in classes from markdown so I made a class to achieve this. Example screenshot-2025-01-31T14-50-00-094Z.png {.cinematic}
-
markdown it attrs with slashes dont work
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. Given the following markdown with attrs added to the image and to the paragraph block. We get the following output with only the middle one working correctly. screenshot-2025-01-31T14-50-00-094Z.png {.aspect-[2.39/1]} screenshot-2025-01-31T14-50-00-094Z.png {.cinematic} {.cinematic} screenshot-2025-01-31T14-50-00-094Z.png !!! Note The inline ve
-
pesos
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.
-
hover z-index and positioning
I broke my [[ sick-wikilink-hover ]] recently in a refactor, today I did some diving in to figure out what happened. Before As you can see in the screenshot below, the link is in a list of links, and when the hover image pops up it sits behind all of the other text. The z-index of the list-item is supposed to be raised above the others on hover. image Manually setting z-index to 20 in the inspector I noticed this message from devtools, "The position: static property prevents z-index from havin
-
/colophon
Colophon a page that describes how the site is made, with what tools, supporting what technologies Author Waylon Walker's Profile Picture 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 [[ about ]] tech This site is a static site build with my own static site generator [[ markata ]], [[ thoughts ]] or as
-
thoughts 0.0.4
This is such an improvement to the backend of my website it warrants a blog post of celebration. For far too long I've been dealing with a tiny ass edit form on thoughts. I tend to not edit them, and try to get them right in one go. This is kinda the point of a thought, its a quick post meant to be the size of a tweet, but sometimes I'm leaving thoughts on a video or long post and want to make sure I have a good save point, but I just keep the thing in draft and hope I don't loose if for far
-
Links rely on color to be distiniquishable
Today i got hit by this accessibility issue on my site. Low contrast links are not distiniquishable. I had not seen this error title before it was new to me, maybe I have bad memory or maybe it's new to me. screenshot-2024-12-18T02-25-53-014Z.png I ended up dropping the background color of the site down a notch as I didn't really care for the semi-dark brown anyways. I'm liking the near black much better now. screenshot-2024-12-18T02-45-53-807Z.png Now I got that 100 A11y score in lighthouse
-
Obsidian-new-file
Wikilinks are a core concept within obsidian to link to documents by [[slug]] wrapped in double square brackets. These are commonly used within wiki site generators. Obsidian gives you a keybinding to go to that file, but if it does not exist it will create the file for you in the root of the project. It's a nice way to quickly make new documents.
-
Slug
A slug is the part of the url that comes after the domain. Commonly matches the file name of a markdown file many blogging systems. These are typically human readable, unique identifiers for pages within the site.
-
Obsidian-go-to-definition
It was not obvious to me, but if you have a wikilink such as [[trying-obsidian]], you can jump to the file in obsidian, just like you can with lsp go to definition, the keybinding is alt + enter.
-
Obsidian Using Templater Like Copier
I've long used copier to create all of my posts for my blog, and it works really well for my workflow. I think of a title, call a template, and give it a title. out of the box obsidian did not seem to work this way. It seems like it wants me to right click a file tree and make a new file using the tree, this is not my jam. Here is what I came up with to replace my til template. is a return value, and it gets placed directly into the place it is in the file creates a tab-index point so I can
-
Obsidian Image Converter
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. obsidian-image-converter-20240731211310793
-
tailwind post template
Today I am playing around with tailwind, flexing the css muscle and learning how to build new and different layouts with it. I created a new post template that mimics a terminal look in css where I could inject the post title, description, and other frontmatter elements. I think this is a pretty cool layout, I could make a carbon.now.sh {.hoverlink} clone or more realistically I could make it into a template for blog pages and this could become og images. {.mx-auto .block .w-fit .mb-0} Check out
-
Tailwind Animations
I learned that tailwind animations are pretty easy to add only needing a few classes. For some reason though my brain broke, thinking that I could dynamically change the number and you can't cause there are only so many pre compiled classes without using an arbitrary value with brackets. Here are the classes that I used to transition my colors very slowly. And the entire square element.
-
tailwind arbitrary values
I learned not to fear the arbitrary size feature of tailwind. While building out reader.waylonwalker.com I kept getting content flowing off the screen, and struggling to keep it on the screen. I really felt that I should be able to do this with vanilla tailwind, but after some encouragement from Twitter I decided to lean on arbitrary values and it worked. Don't fear the arbitrary values. Learn more about using-arbitrary-values from their docs docs
-
fix npm global install needs sudo
Each time I go to set up npm I am frustrated by the errors saying that I don't have permission to , and it's frustrating. And I forget what I need to do to tell npm to install packages in a directory I own, and my shell to look there so that I can use the executables. For the fix to remain persistent you need to put these two lines in your shell profile like or .
-
darkmode scrollbars
If you are designing a website in dark mode the scrollbars can be finicky to match the theme. Here is a pretty sane default that looks nice without being obnoxiously contrast to the rest of the site. Want a rounded scrollbar thumb? add these styles. This makes a very nice looking default darkmode scrollbar.
-
jinja loop variable and htmx
jinja has a loop variable that is very handy to use with htmx. Whether you want to implement a click to load more or an infinite scroll this loop variable is very handy. Now for every chunk of contacts that we load we will trigger the infinite scroll by loading more once the last one has intersected the screen.
-
Hiding Form input During htmx Request
I am working on fokais.com's signup page, and I want to hide the form input during an htmx request. I was seeing some issues where I was able to prevent spamming the submit button, but was still able to get one extra hit on it. It also felt like nothing was happening while sending the email to the user for verification. Now I get the form to disappear and a spinner to show during the request. HTML Let's start off with the form. It uses htmx to submit a post request to the route. Note that there
-
Looking for a Heroku replacement, What I found was...
I've long hosted my personal blog as a static site on waylonwalker.com. It's all markdown, converted to html, and shipped as is. It's been great, I've moved it from GitHub Pages, to Netlify, tried Vercel for a minute, and have landed on Cloudflare Pages. Each migration has not really been that hard, it's just pointing ci to a different host after the site has built. What about server side Now the part that I have struggled with is how to cheaply host a server rendered application that can just l
-
Still Loving Tailwind
I've been using tailwind for a few months now and I can still say I'm loving it. I've been using it to create some rapid prototypes that may or may not ever become something, a document that is likely to go to print (a resume), and some quick dashboards. I started using Tailwind a few month back A few months back in september of 2023 I made a case for tailwindcss . And have been using it on quite a few projects since. values are well thought out it's really easy to use classes that make sense t
-
why-is-postgres-default
Serious question. No one ever got fired for choosing PostgreSQL But, why. It's the most loved db, right? Right? Maybe it's time to rethink it. Don't get me wrong, if I need a relational db as a service, PostgreSQL is going to be my first choice, but why do I need to run a separate application for it? Tutorials use sqlite Why is that? Because there is nothing else to stand up. Nothing else to maintain. And you probably already have it installed on just about anything that has a battery. SQLite ru
-
A Case For Tailwindcss
I was watching @theprimeagen recently and I think he sold me on using tailwindcss. The thing about tailwind is that it is not a big component library, it's a set of css classes mapped to a few (usually one) style. All css classes are shitty, so you might as well use someone else's shitty css classes on all your projects rather than thinking you're being smart with a new set of classes that you will hate in 6 months when you come back to the project. roughly quoted from memory of @theprimeagen I
-
Getting Started with Django REST framework
In my adventure to learn django, I want to be able to setup REST api's to feed into dynamic front end sites. Potentially sites running react under the hood. cell shaded full body shot of a cybernetic blue soldier with glowing eyes working ina lab, llustration, post grunge, pink glowing volumetric lighting, engulfed in smoke and fog, concept art by josan gonzales and wlop, by james jean, Victo ngai, David Rubín, Mike Mignola, Laurie Greasley, highly detailed, sharp focus,alien,Trending on Artstat
-
django create superuser
My next step into django made me realize that I do not have access to the admin panel, turns out that I need to create a cuper user first. "cybernetic soldier working on a rusting tape machine robot, cinematic lighting, detailed, cell shaded, 4 k, warm colours, concept art, by wlop, ilya kuvshinov, artgerm, krenz cushart, greg rutkowski, pixiv. cinematic dramatic atmosphere, sharp focus, volumetric lighting, cinematic lighting, studio quality" -s50 -W832 -H416 -C12.0 -Ak_lms -S3309980874 Run Mig
-
django disallowed host
I am continuing my journey into django, but today I am not at my workstation. I am ssh'd in remotely from a chromebook. I am fully outside of my network, so I can't access it by localhost, or it's ip. I do have cloudflared tunnel installed and dns setup to a . Settings I found this in and yolo, it worked first try. I am in from my remote location, and even have auth taken care of thanks to cloudflare. I am really hoping to learn how to setup my own auth with django as this is one of the t
-
Trying out django
I have no experience in django, and in my exploration to become a better python developer I am dipping my toe into one of the most polished and widely used web frameworks Django to so that I can better understand it and become a better python developer. If you found this at all helpful make sure you check out the django tutorial "An atronaut working in a lab, there is a long snake working along side, shallow depth of field beakers, test tubes, volumetric lighting, pink lighting, by victo ngai,
-
Building Rich a Dev Server
Draft Post I've really been digging @willmcgugan's rich library for creating TUI like interfaces in python. I've only recently started to take full advantage of it. Dev Server I am working on a project in which I want to have a dev server running continuously in the background. I really like dev servers theat automatically chooose an unused port and list out the running pid so that I can kill it if I need to. automatic port number auto-restart display ( port, pid, uptime ) finding the port I
-
Site Down During Build
Recently I noticed a new netlify site of mine was down while I was checking to see if new content was live. Later found out this was consistent after each and every push the site would go gown as soon as I hit push, and would not come back until the build finished. Is this normal? Do other Netlify sites go down during build??? Short Answer NO. All of my google fu lead me to believe I was alone and none of my other sites do this. Digging into my build My deploy script ends with the following. Aft
-
Adding Audio to my blog posts
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 th
-
gatsby-remark-embedder
Inspired by discourse's link expansion I am rolling out expansions for one line links on the blog waylonwalker . I was able to find a gatsby plugin gatsby-remark-embedder that expands one line links for social cards for popular platforms like twitter and YouTube through a repose from Kyle Mathews to my tweet. https://twitter.com/kylemathews/status/1329817928666005504 Use Cases This covers a couple of use cases I have with very little effort. Twitter YouTube install This was super quick and sim
-
Expand One Line Links
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 expa
-
Why use a cms
When first learning to code its very common to hard code everything right into the code. This happens with most folks in just about any language. Whether its HTML or markdown for front end content, or even hardcoding parameters in our backend languages like python, or node.js. 🤷♀️ What's wrong with hard coding everything? Hard coding everything right into your code makes it really hard for non-technical collaborators to join. It makes it nearly impossible to hand websites off to clients without
-
How I Built My GitHub Profile
I ran a discussion on dev that collected quite a list of examples in the comment section. So many great calls to action, animations, memes, and weird tricks. dev.to whats-on-your-github-profile My current profile Waylon Walkers GitHub profile social icons Upload all of your icons to the repo in a directory such as or , then link them with a attribute like below. I used html for mine, not sure if you can set the in markdown. note I did add a bit of (non-breaking-whitespace) between m
-
Refactoring your blog urls
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. [[ refactor-in-cli ]] 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. 🖊
-
How to get Dev Comments from an article Url
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 gett
-
Adding google fonts to a gatsbyjs site
stack overflow link
-
Explicit vs Implicit Returns in Javascript
Often when reading through javascript examples you will find some arrow functions use parentheses while others use braces . This key difference is that parentheses will implicitly return the last statement while braces require an explicit return statement. It is important to understand the difference between them because it is likely that you will find code examples of both and trying to edit code written differently than you're used to may have unintended consequences. Arrow functions Arro
-
Do You Hoist
I am working through Wes Bos's beginnerjavascript.com/ I just hit module 18 on hoisting. It's something that I always knew was there, Its not something I typically see used or use myself. Do you Hoist? Do you have any use cases that you use hoising? Why? It seems like a really cool feature in any language that uses it, but I dont really notice it in use. What is Hoising There are many articles that cover this in far more depth, but its the idea that variable declarations and functions are de
-
Custom Scrollbar Design
Getting a custom scrollbar on your site makes it stand out a bit compared to the very plain stock one that are on most sites. This is how I set mine up on my gatsby site. Inspired by Wes Bos's new uses.tech I wanted a custom scrollbar on my personal site. I had tried to do it in the past, but gave up after it was not working. Looking at the Source Since uses.tech is open source I jumped on github, searched for scroll and found this layout.js . Copy it to my own component My first step was
-
2020 waylonwalker.com rebrand
Moving into 2020 I have been really leaning on using purple as my theme color everywhere more and more. Its time for an update to my personal site, not just because it feels plain, not just because the cover art I am using for dev.to doesn't fit my current card layout, but because I feel inspired and I want to. Starting point  This is what we are working with. It has been my card design for
-
I just added react-headroom to my site
It was so easy to get a professional looking navbar with just 3 lines of code. This package seriously is so usable on mobile it is ridiculous. I found this package from day-4 of the 100 days of gatsby challenge. It is by the wonderful man who brought us gatsbyjs Kyle Mathews, so you know its gotta be good. install react-headroom installation is easy Import Headroom There was no instructions for es6 style imports that are common with gatsbyjs sites like mine, but it was intuitive to figure out.
-
Serverless things to investigate
Social Automation Zappier Free only one step is free can take rss to social Automate.io Form submission https://getform.io Free to get started https://formkeep.com/?#pricing Free 7 day trial $4.99 cheapest after
-
I finally fixed my Styled-Components in gatsby.js
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 . 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 si
-
Should I switch to Zeit Now
Netlify I have happily had my personal site waylonwalker.com hosted on netlify for nearly 2 years now. In fact I have hosted about a dozen different toy projects to play with on there, 4 of which have gone far enough to get a custom domain name. They are fast to deploy and consistently do so on every to main. Zeit I have recently started playing with zeit again. I really like their cli tool, its dead simple and makes sense. I tried the netlify one early on and dont think I really gave it
-
Personal URL shortener with Netlify Redirects
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, . It is so simple cool and powerful, every netlify site should do this! But how 🤷♀️ simply add a file to
-
Forestry.io
Testing out forestry.io Sorry Netlify CMS I still ♥️ your product dont be forestry is simple I have been playing with the netlify cms for a while now, and it has been a decent experience, but I really struggle configuring it. Forestry is so simple to setup. My favorite part is that I can code up my gatsby.js site, storing all editable text in markdown, and come back later and add the CMS based on existing documents. Configuration is Simple Forestry.io has this amazing feature to create cre
-
D3 Day 5
select rowid, key, raw, store_time, expire_time, access_time, access_count, tag, size, mode, filename from Cache where key='e3cd37c97980ab2c'; 'e3cd37c97980ab2c' 'e3cd37c97980ab2c' select rowid, key, raw, store_time, expire_time, access_time, access_count, tag, size, mode, filename from Cache where key='c14050404a107d5e'; Learn D3 in 5 days For what we are creating in these posts d3 is way overkill and very verbose, but I need to start somewhere! These are just stepping stones into real custom
-
D3 Day 4
Learn D3 in 5 days For what we are creating in these posts d3 is way overkill and very verbose, but I need to start somewhere! These are just stepping stones into real custom visualizations that cannot be done in any other tool today. I still cannot explain how excited I am to say "I created that in d3!!!" Todays Result Today I will be learning about d3 scales, and adding them to the bar chart that we created yesterday. Follow along as I try to create something interesting. today's_result R
-
D3 Day 3
Learn D3 in 5 days I recently subscribed to Ben Clinkinbeard's learn D3.js in 5 days, and am currently on day 3. I read through the first 2 days, and felt fairly comfortable with selecting elements, so I did not follow along on the first two days. I probably should have, but there are only so many hours in the day. Why Learn D3 D3 is the ubiquitous dynamic visualization library for building custom interactive visualizations on the web. It is a bit low level, and more verbose than many other libr
-
FlexBox
Flexbox-zombies I recently finished up the flexbox-zombies course to learn more about flexbox, and to become proficient with it. I can truly say that this course has changed the way that I create layouts. Flexbox is very intuitive now. What this course does really well at is explaining the concepts and hitting you with a ton of examples that you can work through really quickly. flexbox-zombies A clip from the final round against Dave Basic Setup Flexbox requires a wrapper container to work I