Posts tagged: webdev Archive

Convert a video from dark mode to light mode with FFmpeg!

Damn this one is getting some reach, I’ve seen it from Simon Willison and Justin Searls and t3.gg. I feel for Adam, He has built a fantastic product that the world is running with, something we all needed. Something that everyone laughs at turns their nose up “ppft I don’t need that” the first time they see it, but once they try people get it, and a lot of them like it and keep it. But its something that no one really wants to pay for, no matter how big of products get built on it. As we see more and more features coming to css, its not stopping, the work will always be there. I really hope to see something happen to tailwind to keep it afloat. massive growth and revenue down 80% does not help.

Note

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

light mode screen recording css

2026-01-02T10:29:10Z

Yesterday I wrote about a way to do light mode screen recording to convert to light mode from dark mode with ffmpeg. I was wondering if it could be done entirely on the front end for web applications. Turns out you can. I’m sure there are limited wikis and site builders that don’t allow adding style like this, but it works if you can.

<video
    src="https://dropper.waylonwalker.com/file/1c53dbcb-4b84-4e94-9f04-a42986ab3fa1.mp4?width=800"
    controls
    style="filter: invert(1) hue-rotate(180deg) contrast(1.2) saturate(1.1);"
    >
</video>

0 deg hue rotate

90 deg hue rotate

180 deg hue rotate

270 deg hue rotate

💭 Convert a video from dark mode to light mode with FFmpeg!

2026-01-01T18:00:56Z

Here

cassidoo.co

Converting video from dark mode to light mode after the fact is a pretty great idea, I’m surprised at how well it does. Its definitely not perfect, but looks really good.

Note

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

web snow fall

2025-12-09T10:21:17Z

I found snow-fall component from zachleat, and its beautiful… to me. I like the way it looks, its simple and whimsical.

Install #

There is an npm package @zachleat/snow-fall if that’s your thing. I like vendoring in small things like this.

curl -o static/snow-fall.js https://raw.githubusercontent.com/zachleat/snow-fall/refs/heads/main/snow-fall.js

I generally save it in my justfile so that I remember how I got it and how to update…. yaya I could use npm, but I don’t for no build sites.

get-snowfall:
    curl -o static/snow-fall.js https://raw.githubusercontent.com/zachleat/snow-fall/refs/heads/main/snow-fall.js

Usage #

Now add the component to your page.

<!-- This belongs somewhere inside <head> -->
<script type="module" src="snow-fall.js"></script> <!-- Adjust the src to your path -->

<!-- This belongs somewhere inside <body> -->
<!-- Anything before will be below the snow. -->
<snow-fall></snow-fall>
<!-- Anything after will show above the snow. -->

💭 snow-fall Web Component—zachleat.com

2025-12-06T15:25:11Z

snow-fall Web Component—zachleat.com

A post by Zach Leatherman (zachleat)

Zach Leatherman · zachleat.com

This is a very fun way to add some whimsy to your site, added it to mine immediately when I saw it. This is what digital gardens are for, Fun, entertainment, and self-exxpression.

Note

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

starlette head request

2025-10-22T09:11:31Z

FastAPI.">Starlette has a head request that works right along side your get requests. This morning I fiddled around with custom routes for GET and HEAD, but had to manually set some things about the file, and was still missing e-tag in the end. Turns out as a developer you can just add a head route to your get routes and starlette will strip the content for you, while preserving all of those good headers that fastapi FileResponse created automatically for you.

from fastapi import APIRouter
from fastapi.response import FileResponse
from fastapi import Request
from pathlib import Path

router = APIRouter()

@router.get("/file/{filename}")
@router.head("/file/{filename}")
async def get_file(filename: str, request: Request,):
    headers = {
      "Cache-Control": "no-cache, no-store, must-revalidate",
    }
    from pathlib import Path
    filename = Path(f"data/{filename}")
    if not filename.exists():
        raise HTTPException(status_code=404, detail="File not found")
    return FileResponse(filename, headers=headers)

Here is an example of the response with curl.

❯ curl -I -L "http://localhost:8100/api/file/e5523925-1565-454c-bab3-c70c4deabc83.webp?width=250"
HTTP/1.1 200 OK
date: Wed, 22 Oct 2025 14:16:03 GMT
server: uvicorn
cache-control: no-cache, no-store, must-revalidate
content-type: image/webp
content-length: 17206
last-modified: Tue, 23 Sep 2025 14:03:20 GMT
etag: f891660c1543feb1af7564f08abdd511

❯ curl -I -L "http://localhost:8100/api/file/unknown-file.webp?width=250"
HTTP/1.1 404 Not Found
date: Wed, 22 Oct 2025 14:16:11 GMT
server: uvicorn
content-length: 27
content-type: application/json

💭 This Web Server Is 100% Solar Powered - YouTube

2025-10-11T22:21:38Z

This is super cool, thanks to Brodie for reading me this content as I do household chores. lowtech magazine is a website ran completely on solar power with only enough battery backup to cover most days. Adding enough to cover all days would increase its carbon footprint and negate the carbon offset of the solar panels it runs on.

It’s fascinating to see a web server running completely off grid in a close power system. These interesting websites are fascinating keep em coming Brodie.

Note

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

💭 Litewind

2025-10-05T01:12:20Z

Litewind

Litewind is Tailwind without the build step

litewindcss.com

This is a sick no-build version of tailwind. I have a couple of projects that the build step of tailwind is cumbersome on, mostly because they are for non-js devs. Some are for backend python devs, some are for folks that mostly want markdown with some styles. This is a perfect no-build tailwind alternative.

Note

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

Why Make a Website in 2025

2025-09-16T19:37:23Z

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 the ether.

I’ll be the first to admit that I often go to an llm for first pass at many things that I could look up in a guide or 😲 the docs.

I enjoy reading others #

This year I have made extra effort to add more and more people into my [[reader]]. I enjoy reading content from people I chose to follow and can remove whenever I want. I enjoy reading actual human thoughts and not ai generated content all day.

I even will create Thoughts based on these posts that I find interesting, and want to further share to others. I want to give these people that took time to make something a little boost.

Not Perfection #

The last thing we need in 2025 is perfection. We have enough ai generated slop that is far from perfectly accurate that sits behind a veil of mostly clean look, semi consistent feel, and a narrow set of tone. I see it in gen z there is something about the imperfect that is coming out. Not perfectly cut video or audio. I just heard Gary Vee mention this morning that a siren going off in the background of NYC has a somewhat natural human feel to it now.

Ownership #

Dave points out that the first thought for most people trying to make a business or pop off as an influencer is TikTok, then a few similar apps. If you are trying to reach a large audience and swim in the big pond with the big fish thats where you need to go.

But you don’t own that content anymore. Some posts will pop, some will be lost to the algorithm for nothing more that the first few eyes that got it swiped past too fast. The whole platform can go, or choose to not show your content, its their platform. You don’t pay them for anything. They are allowed to do what they want.

If you want some ownership to keep your content alive, curate a small, focused, core audience, also put that on a website.

Not for the faint of heart #

It’s not easy to manage hundreds of posts, images, builds, servers. Theres probably a hundred ways to make it easier, but if you really want full control, full DIY, it takes time to do.

Learn a skill #

This can go a few different ways, One is that you can make a blog or site about a topic, deep dive into this topic. Create blogs, videos, images, about this topic. Create real content that real people find interesting.

OR a bit meta, you can learn more about tech. This site is built with markata, its a static site generator that I built myself mostly to make this site. I’ve learned a ton about markdown, html, ast, python, plugin architecture in doing so. I build this site in kubernetes, another skill that I wanted to develop, and owning my own services that I have real skin in the game for is a great way to do so.

Just Build Websites #

As the opening to shoptalkshow says, just make websites. Who the fuck cares why or how. The important thing is that you built something, maybe it is for an audience of one or one million, doesn’t matter, keep the internet alive and just build something.

💭 Why everyone is quitting social media - YouTube

2025-08-25T01:36:35Z

Damn, social media is at an all time low. I’ve felt all of these issues and when I got a new phone I started fresh, I didn’t install one social media app. Luckily Youtube has remained solid for me. Yes shorts are a bit less what I came for and more addicting content they had to do in order to keep up. There are some legit good commedians, a bit of good knowledge and a bunch of trash that is hard to look away from on shorts. I still find myself able to find content I enjoy and signed up for on YouTube. I feel like I get a one way relationship with someone similar to a TV show or news anchor of old media.

Social Media has morphed from follows likes and similar, to viral posts by creators I don’t recognize. posting and immediately getting like by two hot women with accounts created this week. The rest of the real creators left on there are stuck trying to keep up, echo viral trends, trying to keep up the content treadmill. A few come through, but most feel somewhat forced. A lot of it is ai generated, and whats not mostly doesn’t feel that human anyways.

The people on here seem to really tie the internet to social media and are ready to quit the internet. I think there is more to the internet, we can find each other, but setting up rss feeds, following others, and scrolling their own website lacks that dopamine hit social media has right now.

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

💭 OverType - The Markdown Editor That's a Textarea

2025-08-21T00:50:01Z

The most under hyped, under engineered text editor overtype. Going to be popping this into some places like Thoughts, and maybe more, looks small and easy to use. Gives just a bit of nice features over a text editor.

Note

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

💭 Digitized Signatures

2025-08-17T15:47:05Z

Digitized Signatures

signature.cnrad.dev

seriously cool dumb app that no one asked for but is really creative and unique.

Note

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

💭 Blog @ tonsky.me

2025-08-06T20:35:25Z

Blog

tonsky.me · tonsky.me

Niki has one of the coolest yet simple personal sites that I have seen in a long time. We need more of this on the internet! hover over his face, try dark mode, submit personal data, there are so many really cool Easter eggs to discover!

Note

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

💭 Colors • Pico CSS

2025-08-04T14:58:33Z

Colors • Pico CSS

Pico comes with 380 manually crafted colors to help you personalize your brand design system.

Pico CSS · picocss.com

A great alternative to tailwind colors that has everything defined in one colors file for only 0.3kb. it feels well worth the weight if you are trying to skip a build step or avoid npm/node. It has even more colors than tailwind. I appreciate that there is a grey palette that is fully desaturated.

Note

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

💭 rushter/selectolax: Python binding to Modest and Lexbor engine...

2025-08-04T13:52:15Z

GitHub - rushter/selectolax: Python binding to Modest and Lexbor engines. Fast HTML5 parser with CSS selectors for Python.

Python binding to Modest and Lexbor engines. Fast HTML5 parser with CSS selectors for Python. - rushter/selectolax

Selectolax you have my attention! I will be giving this a try for markata which often suffers from slow beautifulsoup. It appears to have everything I need for my simple use cases.

Note

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

💭 Transparent Textures

2025-07-22T01:14:59Z

Transparent Textures

transparenttextures.com

Fantastic resource of background textures, I will be using this for some projects.

Note

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

💭 omarchy/install/webapps.sh at master · basecamp/omarchy

2025-07-08T18:02:18Z

I’m digging these web2app’s from DHH’s omarchy for setting up an opinionated archlinux hyprland. This gives a way to quickly open a web app as an app either with a hotkey or run launcher in its own dedicated window that you can put on it’s own workspace. I really like a workflow of keeping one window per workspace on one monitor and I can quickly navigate between apps with a single hotkey. This gives you the power to switch through things like chat, terminal, browser, steam game with blazing speed from the keybaord, no clicking no searching, just going directly to it.

Note

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

💭 tailwind hover

2025-07-06T02:05:52Z

Your Framework is Showing

I need to give this a try for markata glossary

Note

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

💭 Your Framework is Showing 😳 – David Bushell – Web Dev (UK)

2025-06-15T00:02:28Z

The one where I’ve had enough of the same Next.js error

dbushell.com · dbushell.com

Great breakdown of nextjs. I was highly unaware of its performance optimizations before reading this. The smell of vendor lock in from next/vercel has been there from the start, this is the first real claim I’ve seen.

I’m out on modern js front ends, complex builds that change every 6 months, design patterns are out of date just as fast. Its hard to keep up, especially when you don’t have the use case for highly interactive apps. Libraries like htmx or plain ol js gets the job done on the majority of sites and everything I tend to work on.

Note

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

💭 Next.js 15.1+ is unusable outside of Vercel | Omar Abid - Pers...

2025-06-14T18:10:58Z

Next.js 15.1+ is unusable outside of Vercel

TBD

Omar Abid - Personal Blog · omarabid.com

Vendor lock in disguised as performance. Nextjs aparantly now streams all of your metadata on the fly with js. This would obviously kill all seo right, well not if you’re on vercel they automatically detect search crawlers and serve the metadata. Why the f do they need to do this and not just serve everyone the metadata. The Web is this beautiful place where anyone can create and build amazing things with a relatively low skill. Js is meant to be enhancement, not degrade the experience of its users.

Note

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

💭 PocketCal Build Log

2025-06-08T00:29:14Z

PocketCal Build Log

I made a date-sharing app called PocketCal. Here

cassidoo.co

I love this idea of tiny useful apps for yourself. In fact I’m working on a project to built out tinyapps for myself to replace my common needs. I absolutely love that all of the state is stored in the url bar, nothing is stored server side. As much as I love to hate js, I really appreciate that things like this can be built to just live on the web, be accessible from anywhere, and live practically forever as they require such little hosting demand.

Note

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

💭 Chris Coyier

2025-05-01T12:48:04Z

P. Martin Ortiz: Web apps can easily adapt to whatever device you’re on. A single responsive website can run on your desktop, phone, tablet, or even a VR headset. What’s even more, they can be ...

Chris Coyier · chriscoyier.net

The web is everywhere, its the one true write once and run anywhere platform. Millions sunk into browser performance and things like the v8 engine allow us to run our shitty websites anywhere and it still runs good…. most of the time

Note

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

💭 Build UIs that don't suck - YouTube

2025-04-15T13:50:53Z

How to make an entire clickable without presenting the entire content of the card as the link title. These videos are great, I’ve ran into these types of problems so many times, and definitely did not know about things like isolate to keep the z-index scoped to one element.

isolate - scope z-index inside this element so that it does not leak out.
[.relative [.absolute, inset-0, z-10]] - the inset zero is a modern shorthand for zeroing all sides, top-0, right-0, bottom-0, left-0.

Note

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

💭 World's easiest Live dashboard with htmx - YouTube

2025-03-29T15:04:45Z

YouTube

Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.

youtube.com

Damn he makes this easy. I did not know about hx-select. yes there is waste in requesting the entire thing every 5s, but damn that was easy to get life reload. I’ve only done very specific backend endpoints, built pages up from partials, made endpoints for partials. keeping this one in my back pocket.

I’m just kind of amazed that he could do this all in html without touching the backend or js, typically things like this require one or the other. Yes js is running, but no other js library I’m aware of lets you do this.

Note

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

💭 CSS Battle - Re-create an Image with CSS in the Fewest Charact...

2025-03-01T16:22:07Z

Watching Wes fiddle through this with what a sane person would write in a normal day application and not applying the tricks for this kind of battle is how I feel when trying to do leetcode.

Note

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

💭 hype cp | Hypermedia Copy & Paste

2025-02-15T15:31:52Z

hype cp | Hypermedia Copy & Paste

hypecp.com

This is a super cool reference for htmx snippets. I really like how he has a couple of errors on the page as examples with examples that fix these common errors.

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

newlines in css before

2025-02-15T09:28:48Z

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 :before I need to use \A and white-space: pre-line.

body :target::before,
body [fragmention]::before {
    content: "Highlighted Fragment:\A";
    white-space: pre-line;
    @apply font-bold text-yellow-600;
}

Here is what it looks like on my not yet live implementation of fragmentions.

💭 Colors - Core concepts - Tailwind CSS

2025-02-09T21:32:57Z

Colors - Core concepts

Using and customizing the color palette in Tailwind CSS projects.

tailwindcss.com

Tailwind has the best color system, very well done. Even if you don’t use it, it serves as a great color picker.

Note

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

💭 Jhey ʕ·ᴥ·　ʔ: "breakin' down classics CSS background-image + ba...

2025-02-07T01:59:07Z

Jhey ʕ·ᴥ·　ʔ (@jhey.dev)

breakin' down classics

CSS background-image + background-blend-mode + custom properties = holo-like effects with parallax ✨

Bluesky Social · bsky.app

Jhey has the coolest webdev demos!

Note

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

tailwind aspect

2025-02-02T14:35:02Z

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 .cinematic class to achieve this.

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

Example

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.

hover z-index and positioning

2025-01-23T15:54:07Z

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.

Manually setting z-index to 20 in the inspector I noticed this message from devtools, “The position: static property prevents z-index from having an effect. Try setting position to something other than static.”, looking back at some of my refactoring I had relative in an old template and it was lost.

After #

After properly setting position to relative on the list-item, the hover image is raised above the others.

💭 The Future of HTMX - YouTube

2025-01-13T02:45:27Z

HTMX" playlabel="Play: The Future of HTMX">

I like the charts that Theo brings to to these videos. Shout out for a positive k8s reference and not shitting on it.

Htmx brings html/css just a bit further down the complexity graph with little to no extra effort, while react allows us to go all the way full complexity at the cost of build and dev complexity to go from zero to 100 as soon as its introduced.

htmx brings us back to the ease of jquery ajax without any complex swapping or json parsing, all of the object parsing and html templating is done in the backend, the front end just tracks where to put it. HTMX couples the frontend and backend much tigher, since all of the front end html is generated in the backend, done correctly it is not possible for the front end to get out of sync and try to do things that the back end does not know how to handle, vice versa.

Note

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

💭 Animate to height: auto; (and other intrinsic sizing keywords)...

2025-01-09T14:20:25Z

Animate to height: auto; (and other intrinsic sizing keywords) in CSS | CSS and UI | Chrome for Developers

Animate to and from intrinsic sizing keywords with `interpolate-size` and `calc-size()`

Chrome for Developers · developer.chrome.com

Css is getting so good, new things like interpolate-size are making things that use to require some deep expertise and hacks intuitive and easy.

/* Opt-in the whole page to interpolate sizes to/from keywords */
:root {
    interpolate-size: allow-keywords; /* 👈 */
}

Note

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

💭 Owning It · Matthias Ott

2025-01-06T13:23:23Z

Owning It · Matthias Ott

Owning your content and platform means true independence on the web. Why it matters more than ever for creators.

Matthias Ott – Web Design Engineer · matthiasott.com

I can say I had the same kind of feelings when I first saw something called “Own Your Web” being run in Buttondown. I totally get it. It takes time and effort to build your own stuff, email sending is hard, not done right ends you in the spam folder. There is something about the name though that I think needs to set an example and self host as much as it possibly can.

The changelog has covered this several times, do they need to go to the crazy lengths they do to run their site, no probably not, but it keeps them in the loop. They are using the tech they talk about in a very real and production critical way to run the show.

Cant wait to see more from ownyourweb.site

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

💭 About Me – Harry Roberts – Web Performance Consultant

2025-01-04T04:14:00Z

About Harry Roberts – Award-Winning Web Performance Consultant – CSS Wizardry

csswizardry.com

I’ve only recently learned what colophon means, and I really like to read through site that use it. If you don’t know its about how the site is built. I’ve always liked peeking under the hood of things to understand how they work, it’s what turned me towards an engineering degree.

I love how he mentions that he chose the name when he was 17 and he is stuck with it. I particularly like the name, it has something special to it. Hats off to you for doing something that has lasted so long for you. I fully understand though, I have projects that I made a year ago that I think why did I name it that. At the same time when I try to think of a name I end up with the I don’t have anything good and I’d rather build the thing so fuck it, its going to be what it is.

Note

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

💭 Own Your Web • Buttondown

2025-01-03T16:43:26Z

Own Your Web

Own Your Web is a newsletter by Matthias Ott about designing, building, creating, and publishing for and on the Web. Every other week, I send out an exclusive email full of actionable insights, bes...

buttondown.com

I’m a sucker for good own your own shit on the web blogs, and Matthias Ott has a top notch one here. The archive has been a great read so far, I’ve discovered things like slashpages.net.

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.

💭 We need to have a talk... - YouTube

2025-01-02T03:04:14Z

Theo does a fantastic history of serverless here.

Kubernetes shit #

Theo can’t have an infra video without shitting on k8s. Specifically people who have never touched k8s pushing fear of k8s to large audiences of people who have never touched k8s. If you are a webdev who solely lives in webdev space and never touches as much as a dockerfile listen to him. If you touch infra at all try it before you take his opinion at face value.

Serverless shines in high variance #

If you plan on having traffic spikes 10x your regular traffic for something like black friday, serverless might be right for your use case.

stateless programming #

He argues that targeting a stateless deployment of serverless leads to better code. I’d like to see more examples here. Maybe most of the code bases I work on already do this. I’ve never targeted a serverless deployment, but I’ve targeted horizontally scaled deployments many times and they feel like they have the same targets. For instance if I spin up 8 pods for my application or uvicorn with 3 workers I have to target statelessness, all of the state must live in the database and cannot live in memory. Even if I target 1 instance in a containerized environment I have to be ready for restarts at any point in time.

I might be missing something here, but I don’t see how this point applies to serverless.

Scale to Zero Services #

https://www.youtube.com/watch?v=_VQl_HTk9PM&t=2607s

Companies that can run on scale to zero can allow your shitty side projects that have no users run for free indefinitely because it costs them nothing. He compares planetscale running mysql vs Turso running SQLite stored in s3.

Everything he covers is really cloud to cloud #

He compares early deployments of LAMP and MEAN stack running on one server then jumps to serverless. It feels like he is missing the angle of owning your own hardware. This might just be the experience difference between theo and DHH. DHH works on one focused company, Theo is jumping around between startups.

Ok I get some of it #

At the end he covers a dumb side project that has branch deploys. It had a 100s of deploy still running, some very old, some never even touched, vercel can do this because it costs them nothing if its not running. What I didn’t think about right away is that there is probably a backend component to this.

In my python backends I often have deploy environments, but since they don’t scale to zero they have at least some cost even if its small, with this I cannot just keep hundreds of them running because that cost would add up.

I would argue that this is hardly useful, because you can checkout any old version and run it locally, and you rarely are going to need to poke through these old branch deploys. But in that case that you need to quickly do this serverless is definitely superior.

Note

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

💭 Why Your Backend Shouldn't Serve Files - YouTube

2024-12-31T16:24:28Z

Lane from boot.dev madde this fantastic video about serving files on the internet. It has me wondering if I need to rethink a few of my things that I have built. I have a few things I am serving media from, but I have very aggressive cloudflare cache rules on them, so each file should only be uploaded about once per year.

My problem going straight out of minio right now is how do i set headers for cache control on it. If I can’t set the cache control and everything is coming out of minio this does not solve my problems.

I went back and played with presigned urls and you can in fact control and set response headers, this is definitely the way and I have been wrong.

Note

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

💭 The beautiful sentence that is the web

2024-12-30T21:25:08Z

The beautiful sentence that is the web

A metaphor for the building blocks of web development.

cassidoo.co

Nicely worded Cassidy! Javascript can be too much, it can bog down low powered devices, we can ship so much that its untenable on poor connections. It can be argued that its a bad language and putting it on the server is a mistake, but it brings sites to life. It makes it possible to extend the static nature of html/css with just a little special spice only your site needs.

I’d add to the argument that a lot of js should go away over time. Over time libraries such as jquery have fallen out of use, not because they are bad, or have been replaced by new libraries, but because the browser has adopted most of the functionality that jquery brought.

As a primarily python dev I’d really like to see htmx die a very similar graceful death. There have been several iterations on this idea, and the crux of it is very similar, give the ability to use HTTP verbs right inside html with some instruction of when to apply them and what to apply them to.

No js should not go away, it never will, we will always find new patterns that the browser should take, sites will always need a small bit of spice to bring them to life.

Note

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

💭 How to configure base url for all requests using HTMX? - Stack...

2024-12-30T16:25:49Z

Addy Osmani (@addyosmani.bsky.social)

Today I learned how to configure the baseurl for htmx using the tag. This is pretty handy to be able to configure different baseurls.

  <base href="<scheme>://<netloc>/api/v1/">
  <button hx-post="clicked"
       hx-trigger="click"
       hx-target="#parent-div"
       hx-swap="outerHTML">
    Click Me!
  </button>

Note

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

💭 Addy Osmani: "Tip: Chrome DevTools can override the content of...

2024-12-30T02:48:43Z

Tip: Chrome DevTools can override the content of Fetch/XHR requests! Useful for mocking APIs without waiting on backend changes.

Bluesky Social · bsky.app

WTF, you can just change a server response from devtools and update a vuejs app? Just tried with htmx, and my GET requests are not showing up in the sources tab. I’ll keep this in my back pocket for next time I’m supporting a vuejs app though.

Note

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

💭 4 Tips for Building a Production-Ready FastAPI Backend - YouTube

2024-12-26T02:42:17Z

FastAPI Backends for Production" playlabel="Play: How I Actually Build FastAPI Backends for Production">

Great list of 4 tips for running fastapi applications.

Keep routes small #

Fat routers with all of the logic built in makes them hard to test, hard to refactor, causes lots of duplication, and makes it hard to reuse the business logic code later in something like a cli application.

Deploy Early #

I really like this advice! He reccommends deploying as early as you can get a healthcheck live in your application. I’ve found too many times developers build something that is really hard, or impossible to deploy, when if they had tried to deploy early they would have spotted some easy to fix issues. This is less important if you are building out of a template that your team commonly deploys from, but very important with new patterns.

https://youtu.be/XlnmN4BfCxw?si=ks1wvmgDyoQLgrv2&t=1093

Note

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

thoughts 0.0.4

2024-12-18T19:04:27Z

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 too long.

Results #

Let’s see this change in action!!

before #

This is the tiny ass form nested deeply in the flow of the feed. When I made it I naively just swapped out the post itself with the edit form, and swapped the post back in after edit.

thoughts is built with HTMX btw so all html is rendered in the backend and swapped by htmx client side.

after #

Now the edit is a full page modal with a nice blurry backdrop effect to the rest of the content. This feels pretty similar to making a new post on twitter.

How #

How did I do this with htmx? I had to break out of the mindset my brain was in with swapping in place and letting the edit form take over the entire screen.

First the empty #modal-container was added to the top of every page.

<div id="modal-container"></div>

Then each post that gets added to the page already had an edit button, but now the target is set to #modal-container, and the swap is set to innerHTML so that we keep the #modal-container in place.

<button class="h-8 w-8 p-1 text-center" hx-get="{{ config.root }}/edit-thought/{{ post.id }}"
        hx-target="#modal-container" hx-swap="innerHTML" title="Edit">
    {% include 'edit.svg' %}
</button>

Now the edit post that is returned from the server is turned into a full height and width modal with a nice backgrop blur over the content.


<div id="modal-container">
    <div class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <!-- Background backdrop -->
        <div class="fixed inset-0 bg-black/30 backdrop-blur-sm"></div>

        <!-- Modal panel -->
        <div class="flex min-h-screen items-center justify-center p-4">
            <div class="relative w-full max-w-4xl transform rounded-xl bg-zinc-900 p-6 shadow-2xl transition-all">
... similar to the original edit form in here
            </div>
        </div>
    </div>
</div>

One notable change to the original edit form is clearing the modal container on submit. It is done with an hx-on::after-request event and one line of js.

<form id="websiteForm"
      hx-patch="{{ config.root }}/post/html/"
      method="POST"
      name="newPost"
      hx-target="#post-{{ post.id }}"
      hx-swap="outerHTML"
      hx-on::after-request="document.getElementById('modal-container').innerHTML = ''">
    ```

Similarly on the Cancel button.

``` html
<button class="rounded-lg border border-black bg-zinc-950 px-6 py-3 text-lg hover:bg-zinc-900"
        type="button"
        onclick="document.getElementById('modal-container').innerHTML = ''">
    Cancel
</button>

Hotkeys #

Now I struggled to get this right with htmx, and it seemed like things were getting more complicated by trying to get the buttons to trigger using htmx triggered keyboard events, I ended up just using javascript. Its still in the same file, so locality of behavior is barely an issue on this one anyways, and the js was just working.

<script>
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        document.getElementById('modal-container').innerHTML = '';
    }
    if (e.key === 'Enter' && e.ctrlKey) {
        e.preventDefault();
        htmx.trigger('#websiteForm', 'submit');
    }
});
</script>

Other small change #

When the server is returns an empty list of posts the post container would change size and cause a layout shift. Now the empty posts element, while not great does not cause layout shift.

<ul id="posts" class="min-h-screen"><li>No posts</li></ul>

💭 Styling better custom inputs with Dave Rupert - YouTube

2024-12-18T02:15:14Z

Reminder to tune in later, can’t watch now, but saw a link on Dave’s blog.

Note

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

Links rely on color to be distiniquishable

2024-12-17T20:25:12Z

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.

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 bg-zinc-950 much better now.

Now I got that 100 A11y score in lighthouse.

💭 Hurl - Run and Test HTTP Requests

2024-12-14T16:41:38Z

Hurl - Run and Test HTTP Requests

Hurl, run and test HTTP requests with plain text and curl. Hurl can run fast automated integration tests.

hurl.dev

Hurl was mentioned by @gerhard on the latest changelog and Friends. Looks like a feature rich easy to use testing tool that is tested via what looks like a config file.

Hurl is a command line tool that runs HTTP requests defined in a simple plain text format. It can chain requests, capture values and evaluate queries on headers and body response. Hurl is very versatile: it can be used for both fetching data and testing HTTP sessions. Hurl makes it easy to work with HTML content, REST / SOAP / GraphQL APIs, or any other XML / JSON based APIs.

Note

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

💭 Alternatives to Using Pure Black (#000000) for Text and Backgr...

2024-09-13T15:47:25Z

uxplanet.org

A nice set of blacks to use in web design. Subtle variants off of black or white like this can really make your design look nice and modern.

Note

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

💭 Wes Bos on X: "Are you using position: absolute; to overlap el...

2024-09-13T15:43:03Z

X (formerly Twitter) · x.com

This is a pretty incredible use of css grid to overlay items overtop of each other without needing to resort to position: absolute and the side effects that it brings.

.wrap {
  display: grid;
  & > * {
    grid-row: 1;
    grid-column: 1;
  }
}

Note

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

💭 Buttery icons

2024-09-07T21:04:18Z

Buttery.so

Buttery smooth, minimal icons for interfaces.

buttery.so

Some sick looking icons no attribution needed.

Note

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

Slug

2024-08-05T11:45:00Z

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.

💭 Text cursor bug in my Chrome browser that causes the blinking ...

2024-07-12T14:16:32Z

today I learned that there is an accessibility feature in chrome that allows you to place a text cursor anywhere on the page. I had accidentally done this and it drove me mad that it was there.

Note

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

💭 Render-blocking on purpose

2024-07-11T12:55:28Z

Background Tasks - FastAPI

fullystacked.net

You can explicitly make a script render blocking, nothing will be rendered until this js is ready.

<script blocking="render" 
        src="important.js" 
        defer></script>

Note

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

💭 FastHX

2024-07-10T12:53:15Z

FastHX - FastHX

volfpeter.github.io

Very interesting approach to htmx and fast api. It uses separate decorators for returning template partials and json that can be stacked to include both options on a single route. The templates are explicitly set in the decorator. Separate decorators are used for full page and partial pages. I don’t see an example of full and partial pages being combined. I think the demo app must be behaving in a spa like fashion where it does not get all of the data when it calls index and index will ask for user-list.

Definitely going to keep my eye on this project and ponder on it.

from fastapi import FastAPI
from fastapi.templating import Jinja2Templates
from fasthx import Jinja
from pydantic import BaseModel

# Pydantic model of the data the example API is using.
class User(BaseModel):
    first_name: str
    last_name: str

# Create the app.
app = FastAPI()

# Create a FastAPI Jinja2Templates instance and use it to create a
# FastHX Jinja instance that will serve as your decorator.
jinja = Jinja(Jinja2Templates("templates"))

@app.get("/")
@jinja.page("index.html")
def index() -> None:
    ...

@app.get("/user-list")
@jinja.hx("user-list.html")
async def htmx_or_data() -> list[User]:
    return [
        User(first_name="John", last_name="Lennon"),
        User(first_name="Paul", last_name="McCartney"),
        User(first_name="George", last_name="Harrison"),
        User(first_name="Ringo", last_name="Starr"),
    ]

@app.get("/admin-list")
@jinja.hx("user-list.html", no_data=True)
def htmx_only() -> list[User]:
    return [User(first_name="Billy", last_name="Shears")]

Note

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

💭 FastHX

2024-07-10T12:53:15Z

FastHX - FastHX

volfpeter.github.io

Definitely going to keep my eye on this project and ponder on it.

from fastapi import FastAPI
from fastapi.templating import Jinja2Templates
from fasthx import Jinja
from pydantic import BaseModel

# Pydantic model of the data the example API is using.
class User(BaseModel):
    first_name: str
    last_name: str

# Create the app.
app = FastAPI()

# Create a FastAPI Jinja2Templates instance and use it to create a
# FastHX Jinja instance that will serve as your decorator.
jinja = Jinja(Jinja2Templates("templates"))

@app.get("/")
@jinja.page("index.html")
def index() -> None:
    ...

@app.get("/user-list")
@jinja.hx("user-list.html")
async def htmx_or_data() -> list[User]:
    return [
        User(first_name="John", last_name="Lennon"),
        User(first_name="Paul", last_name="McCartney"),
        User(first_name="George", last_name="Harrison"),
        User(first_name="Ringo", last_name="Starr"),
    ]

@app.get("/admin-list")
@jinja.hx("user-list.html", no_data=True)
def htmx_only() -> list[User]:
    return [User(first_name="Billy", last_name="Shears")]

Note

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

💭 Background Tasks - FastAPI

2024-07-03T16:17:45Z

FastAPI framework, high performance, easy to learn, fast to code, ready for production

SVG Backgrounds, icons, and other website graphics

fastapi comes with a concept of background tasks which are functions that can be ran in the background after a function has been ran. This is handy for longer running functions that may take some time and you want to have fast response times.

Here is an example from the docs

from fastapi import BackgroundTasks, FastAPI

app = FastAPI()


def write_notification(email: str, message=""):
    with open("log.txt", mode="w") as email_file:
        content = f"notification for {email}: {message}"
        email_file.write(content)


@app.post("/send-notification/{email}")
async def send_notification(email: str, background_tasks: BackgroundTasks):
    background_tasks.add_task(write_notification, email, message="some notification")
    return {"message": "Notification sent in the background"}

Note

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

💭 One Script Tag Just Pwn'd Over 100,000 Websites - YouTube

2024-06-28T16:08:20Z

Supply chain attacks are so big these days engineers definitely need to take these into consideration. It’s wild that such a simple attack vector hit some really big applications. This particular vector is so easy to avoid. You are already hosting web content, just curl the file and self host the script, then you own it. That eliminates this attack vector all together, but doesn’t completely remove supply chain attacks, the js file can still hit external apis internally.

What I see has happened in this case is that the owner of the domain polyfill.io changed. so anyone who directly linked to them got a malware injected script used.

I can only imagine the number of applicatons that are not even being maintained anymore getting hit by this. TLDR, if you are taking something to production, where you are goind to deploy it and let it run, host the js yourself. these cdns are great for prototyping, but tread with caution.

Note

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

💭 Adam Wathan, Creator of TailwindCSS - YouTube

2024-06-16T22:09:17Z

Two inspirational people in one podcast, its cool to see how adam thinks about code, css, webdev, and building businesses.

Note

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

I've added htmx to my blog

2024-06-15T20:50:12Z

I’ve added htmx to my blog. It’s extra bloatware that I long avoided, but it’s so damn convenient.

Ok so it’s not bloatware, but it’s not the theme I was going for. I wanted my site to be as lightweight as possible. I had at one point gone too far and had Mb’s of react that did not provide any value for the end user.

can it be done with jinja #

{% with feed = markata.feeds.recent_thoughts %} {% include 'feed_sm_partial.html' %} {% endwith %}

Feed Partials #

markata pre-release 0.8.1.dev10 has been released with support for feed partials on pypi.

It’s now part of my blog #

Commit aa233 added support for recent posts on each page to be loaded off of this partial.

💭 Customize and apply backgrounds fast | SVG Backgrounds

2024-06-12T16:09:25Z

👉 Copy-and-paste backgrounds, patterns, icons, and other website graphics directly into projects. All customizable, tiny in file size, and licensed for multi-use.

SVG Backgrounds · svgbackgrounds.com

svgbackgrounds is a really awesome resource for svg things recently featured on https://shoptalkshow.com/618/

Note

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

tailwind post template

2024-06-08T14:47:42Z

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.

Still Loving Tailwind

💭 How to Deliver Code Every Day | Jake Worth

2024-06-01T00:48:21Z

How to Deliver Code Every Day

I recently calculated that I merge 0.8 pull requests every day into my team repo. “How to Deliver Code Every 0.8 Days” didn’t sing, so let’s say I merge about one PR every day, delivering o...

Jake Worth · jakeworth.com

Great set of tips here!

No waiting. No “waiting until tomorrow” or “It’s Friday, let’s wait until Monday” to deploy. If your deploys are so slow that deploying an hour before the end of the day is a risk, that’s a separate problem. If you’re afraid of a Friday deploy, your system is too brittle, or you don’t have foolproof rollback procedures, or you don’t have people you trust on call to resolve it. Each of these is a problem that you can fix.

This one I find interesting I think there are some industries where customers come in large waves over the weekend, and a weekend bug can not only ruin someones day off, take longer to fix, but also cost a lot of money.

Not deploying on Friday is totally what that team should be doing.

Most of us are not that team. Most of us work on small teams supporting some sort of product that Should be able to be tested and rolled back. I completely agree with Jake here, if your not willing to deploy on Friday you are not confident in your product. You need to work on better testing, rollback strategies, and feature flagging is what you need.

I’ve also been on teams where we don’t deploy in the middle of the day or right before we leave for vacation because we are early, our customers are important to us, and we accept that we have not hit our marks yet on the ability to swiftly recover from some downtime so risk is high.

Note

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

💭 Text Decoration - Tailwind CSS

2024-05-30T18:32:45Z

text-decoration-line - Typography

Utilities for controlling the decoration of text.

tailwindcss.com

Tailwind calls strikethrough line-through. This caught me off guard and took me a minute to find.

Control how text is decorated with the underline, no-underline, and line-through utilities.

Note

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

thinking about static sites in 2024

2024-05-30T12:57:24Z

actions build

k8s build

fastapi sqlite

💭 Fields - Pydantic

2024-05-09T20:28:27Z

Fields

Pydantic Docs · docs.pydantic.dev

exclude=True and repr=False is a good pydantic combination for secret attributes such as user passwords, or hashed passwords. exclude keeps it out of model_dumps, and repr keeps it out of the logs.

from pydantic import BaseModel, Field


class User(BaseModel):
    name: str = Field(repr=True)  
    age: int = Field(repr=False)


user = User(name='John', age=42)
print(user)
#> name='John'

Note

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

💭 Media Types

2024-04-30T18:15:43Z

Media Types

iana.org

A full list of standard Accept types.

This is a handy reference.

Note

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

💭 Handling Errors - FastAPI

2024-04-30T18:08:35Z

Handling Errors - FastAPI

FastAPI framework, high performance, easy to learn, fast to code, ready for production

The white-space CSS property sets how white space inside an element is handled.

This page shows how to customize your fastapi errors. I found this very useful to setup common templates so that I can return the same 404’s both programatically and by default, so it all looks the same to the end user.

from fastapi import FastAPI, Request
from fastapi.responses import JSONResponse


class UnicornException(Exception):
    def __init__(self, name: str):
        self.name = name


app = FastAPI()


@app.exception_handler(UnicornException)
async def unicorn_exception_handler(request: Request, exc: UnicornException):
    return JSONResponse(
        status_code=418,
        content={"message": f"Oops! {exc.name} did something. There goes a rainbow..."},
    )


@app.get("/unicorns/{name}")
async def read_unicorn(name: str):
    if name == "yolo":
        raise UnicornException(name=name)
    return {"unicorn_name": name}

This post sat in draft for months. I stumbled upon it again and found great success returning good error messages based on user preferences. the default remains json, but if a user requests text/html it will be an html response, and text for application/rtf or text/plain

Note

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

💭 white-space - CSS: Cascading Style Sheets | MDN

2024-04-30T18:03:17Z

white-space - CSS | MDN

MDN Web Docs · developer.mozilla.org

html can preserve newline \n characters by styling an element with white-space: pre-wrap;

pre-wrap Sequences of white space are preserved. Lines are broken at newline characters, at
, and as necessary to fill line boxes.

Note

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

💭 htmx ~ The response-targets Extension

2024-04-30T18:00:54Z

</> htmx ~ The htmx Response Targets Extension Extension

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypert...

Convert any webpage to a clean markdown w/ images downloaded.

The htmx response-targets extension allows me to respond to errors from the backend and do normal htmx swaps.

Note

by default htmx will only swap on 200 and 300 responses

Load the extension in head

<script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/response-targets.js"></script>

Use the extension on an endpoint that might return a 400.

<div hx-ext="response-targets">
    <div id="response-div"></div>
    <button hx-post="/register"
            hx-target="#response-div"
            hx-target-5*="#serious-errors"
            hx-target-404="#not-found">
        Register!
    </button>
    <div id="serious-errors"></div>
    <div id="not-found"></div>
</div>

Note

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

💭 MarkdownDown

2024-04-20T01:38:35Z

MarkdownDown

MarkdownDown · markdowndown.vercel.app

Small web app to convert html into markdown. Pretty cool idea. I actually want to look into this for reader and see how well it would work. Right now I am just pulling descriptions, but maybe I can pull full web pages, and keep the full intent of the first 200 words or so in the cards.

Note

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

Tailwind Animations

2024-04-15T21:19:21Z

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.

<div id="square"
      class="transition-colors ease-in-out duration-700">
</div>

And the entire square element.

<div id="square"
      class="w-16 h-16 bg-rose-500 rounded border border-4 border-rose-800 hover:bg-indigo-600 hover:border-yellow-500 transition-colors ease-in-out duration-700">
</div>

tailwind arbitrary values

2024-04-12T21:21:42Z

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.

<li class="max-w-[100vw]">
</li>

Learn more about using-arbitrary-values from their docs docs

fix npm global install needs sudo

2024-04-11T13:28:17Z

Each time I go to set up npm I am frustrated by the errors saying that I don’t have permission to npm i -g <package>, 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.

mkdir ~/.npm-global
export NPM_CONFIG_PREFIX=~/.npm-global
export PATH=$PATH:~/.npm-global/bin

For the fix to remain persistent you need to put these two lines in your shell profile like ~/.bashrc or ~/.zshrc.

export NPM_CONFIG_PREFIX=~/.npm-global
export PATH=$PATH:~/.npm-global/bin

darkmode scrollbars

2024-04-10T11:56:38Z

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.

    <style>
        ::-webkit-scrollbar {
            height: 1rem;
            width: 1rem;
        }

        ::-webkit-scrollbar-track {
            background-color: rgb(24 24 27);
        }

        body::-webkit-scrollbar-track {
            background-color: rgb(39 39 42);
        }

        ::-webkit-scrollbar-thumb {
            background-color: rgb(82 82 91);
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: rgb(113 113 122);
        }

        body::-webkit-scrollbar-thumb {
            background-color: rgb(82 82 91);
        }

        body::-webkit-scrollbar-thumb:hover {
            background-color: rgb(113 113 122);
        }

        ::-webkit-scrollbar-corner {
            background-color: rgb(39 39 42);
        }
    </style>

Want a rounded scrollbar thumb? add these styles.

::-webkit-scrollbar-thumb {
    border-radius: 0.25rem;
    border-radius: 9999px;
}

body::-webkit-scrollbar-thumb {
    border-radius: 0.25rem;
    border-radius: 9999px;
}

This makes a very nice looking default darkmode scrollbar.

💭 node.js - How to fix npm throwing error without sudo - Stack O...

2024-04-09T18:21:02Z

Its sad that this is not the accepted answer.

mkdir ~/.npm-global
export NPM_CONFIG_PREFIX=~/.npm-global
export PATH=$PATH:~/.npm-global/bin

Note

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

💭 google chrome - Webkit scrollbar CSS, always a white box in co...

2024-04-09T16:55:55Z

This is how you fix the stupid corner section of a double scroll bar being white on a dark theme site.

::-webkit-scrollbar-corner {
  background: rgba(0,0,0,0);
}

The question included an example image where you can see white squares everywhere there are horizontal and vertical scroll bars.

Note

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

💭 Cache Ruins Everything Around Me - YouTube

2024-04-08T13:50:43Z

This is an interesting problem. I want to make a solution for this on htmx-patterns. I would make user specific routes with an hx-get rather than serving the whole page, serve a partial with hx-oobs to fill in user specific data with a no cache on the cdn level.

Note

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

💭 building a youtube tool in 24 hours to prove a point - YouTube

2024-04-08T13:35:15Z

So cool to see ROX build this over the course of a day.

Note

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

jinja loop variable and htmx

2024-04-06T20:47:13Z

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.

{% for person in persons %}
<li
{% if loop.last %}
    hx-get="{{ url_for('infinite', page=next_page) }}"
    hx-trigger="intersect once"
    hx-target="#persons"
    hx-swap='beforeend'
    hx-indicator="#persons-loading"
{% endif %}
    {{ person.name.upper() }} -
    {{ person.phone_number }}
</li>
{% endfor %}

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.

💭 Middleware Explained - YouTube

2024-03-26T13:56:33Z

Great episode covering a seemingly simple topic. What I really benefitted from was hearing all the different use cases, from logging, debugging, to a/b testing, caching, and auth. I hadn’t even thought of it being applied to a router. I thought of it being applied for an entire application. This seems very useful for things like an admin router, all routes would need to have the admin role to get in.

Note

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

💭 fastapi decorators

2024-03-26T13:50:46Z

![[None]]

I’ve been using these decorators to modify the behavior of specific routes. It will do things like 404 admin only routes in a way that looks just like fastapi’s default, or only allow certain roles into the route, or redirect unauthenticated users to login.

After listening to yesterday’s syntaxfm I’m now really thinking about middleware and the benefits it might have. middleware would make it easy to apply things like admin to an entire admin router, so you wont forget it on any one admin route. It will look cleaner as the admin checker is only applied once per router, not once per route.

import inspect
import time
from functools import wraps
from inspect import signature

from fastapi import Request
from fastapi.responses import FileResponse, JSONResponse, RedirectResponse
from starlette import status

from fokais.config import get_config
from fokais.models.user import Role

config = get_config()


admin_routes = []
authenticated_routes = []
not_cached_routes = []
cached_routes = []


def not_found(request):
    hx_request_header = request.headers.get("hx-request")
    user_agent = request.headers.get("user-agent", "").lower()

    if "mozilla" in user_agent or "webkit" in user_agent or hx_request_header:
        return config.templates.TemplateResponse(
            "error.html", {"status_code": 404, "detail": "Not Found", "request": request}, status_code=404
        )
    else:
        return JSONResponse(
            content={
                "status_code": 404,
                "detail": "Not Found",
            },
            status_code=404,
        )


def no_cache(func):
    not_cached_routes.append(f"{func.__module__}.{func.__name__}")

    @wraps(func)
    async def wrapper(*args, request: Request, **kwargs):
        # my_header will be now available in decorator
        if "request" in signature(func).parameters:
            kwargs["request"] = request

        if inspect.iscoroutinefunction(func):
            response = await func(*args, **kwargs)
        else:
            response = func(*args, **kwargs)

        response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
        response.headers["Pragma"] = "no-cache"
        response.headers["Expires"] = "0"
        return response

    return wrapper


def cache(max_age=86400):
    def inner_wrapper(func):
        cached_routes.append(f"{func.__module__}.{func.__name__}")

        @wraps(func)
        async def wrapper(*args, request: Request, **kwargs):
            if "request" in signature(func).parameters:
                kwargs["request"] = request
            if inspect.iscoroutinefunction(func):
                response = await func(*args, **kwargs)
            else:
                response = func(*args, **kwargs)
            response.headers[
                "Cache-Control"
            ] = f"public, max-age={max_age}, stale-while-revalidate=31536000, stale-if-error=31536000"
            response.headers["Expires"] = f"{int(time.time()) + max_age}"

            return response

        return wrapper

    return inner_wrapper


def admin_only(func):
    admin_routes.append(f"{func.__module__}.{func.__name__}")

    @wraps(func)
    async def wrapper(*args, request: Request, **kwargs):
        if request.state.user is None:
            return not_found(request)
        if request.state.user.role != Role.admin:
            return not_found(request)
        if "request" in signature(func).parameters:
            kwargs["request"] = request
        if inspect.iscoroutinefunction(func):
            response = await func(*args, **kwargs)
        else:
            response = func(*args, **kwargs)
        return response

    return wrapper


def authenticated(roles=[Role.user, Role.admin], redirect_to="get_login"):
    def inner_wrapper(func):
        authenticated_routes.append(f"{func.__module__}.{func.__name__}")

        @wraps(func)
        async def wrapper(*args, request: Request, **kwargs):
            if request.state.user is None:
                return RedirectResponse(
                    url=request.url_for(redirect_to, source=request.url), status_code=status.HTTP_302_FOUND
                )
            if request.state.user.role not in roles:
                return not_found(request)

            if "request" in signature(func).parameters:
                kwargs["request"] = request
            if inspect.iscoroutinefunction(func):
                response = await func(*args, **kwargs)
            else:
                response = func(*args, **kwargs)
            return response

        return wrapper

    return inner_wrapper


default_data = {}


def defaults(data=default_data):
    def inner_wrapper(func):
        default_data[f"{func.__module__}.{func.__name__}"] = data

        @wraps(func)
        async def wrapper(*args, request: Request, **kwargs):
            if "request" in signature(func).parameters:
                kwargs["request"] = request
            if inspect.iscoroutinefunction(func):
                response = await func(*args, **kwargs)
            else:
                response = func(*args, **kwargs)
            return response

        return wrapper

    return inner_wrapper

Note

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

💭 Simon Willison on X: "TIL Google Chrome has a --headless optio...

2024-03-25T03:10:39Z

Placehold is a simple, fast and free image placeholder service to generate SVG, PNG, JPEG, GIF, WebP and AVIF placeholder images for your project.

Huh, so this is just built right into the chrome cli.

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --headless \
  --screenshot=/tmp/shot1.png \
  https://simonwillison.net

Note

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

💭 fastapi https url_for

2024-03-24T18:15:48Z

![[None]]

jinja’s url_for in fastapi does not account for https by default, there is probably a better way, but this is a way that allows me to configure when I use http vs https.

@pass_context
def https_url_for(context: dict, name: str, **path_params: Any) -> str:
    """
    always convert http to https
    """
    request = context["request"]
    http_url = request.url_for(name, **path_params)
    return str(http_url).replace("http", "https", 1)


def get_templates(config: BaseSettings) -> Jinja2Templates:
    templates = Jinja2Templates(directory="templates")
    templates.env.globals["https_url_for"] = https_url_for

    ## only use the default url_for for local development, for dev, qa, and prod use https
    if os.environ.get("ENV") in ["dev", "qa", "prod"]:
        templates.env.globals["url_for"] = https_url_for
        console.print("Using HTTPS")
    else:
        console.print("Using HTTP")

    return templates

Note

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

💭 Placehold | A simple, fast and free image placeholder service

2024-03-14T15:46:22Z

Placehold

placehold.co

This is a handy placeholder generator for generating placeholder items like images, and videos.

Note

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

tailwind and markdown

2024-02-01T08:17:03Z

This post is a bit of an experiment to see what I can do. Lets start with a block of pink text. I build my blog with my own static site generator called markata

Setup Tailwind for Jinja

Still Loving Tailwind

{.text-pink-500}

This text should be pink

This text should be not pink

This text should be pink

This text should be not pink

Now will it work with bulleted lists

{.text-pink-500}
This block will be pink

{.text-pink-500}

* Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
* labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi
* anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est

This block will not be pink.

* Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
* labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi
* anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi
anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est

This block will not be pink.

Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi
anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est

Inline classes #

Now within a [paragraph]{.text-pink-500} can we add [inline classes]{.text-pink-500 .font-bold .underline}.

Now within a [paragraph]{.text-pink-500} can we add [inline classes]

Pros #

lorem
ipsum
dolor

[Cons] #

lorem
ipsum
dolor

Classes on images #

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

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

Given the following markdown

![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.

{.aspect-[2.39/1]}

Note

Both the block and inline version of `.cinematic` works, but `.aspect-[2.39/1]` does not, it turns into text after the image.

💭 I'm Skeptical Of Low Code - YouTube

2024-01-30T23:07:40Z

Great take on low code. I have definitely felt the pressure of being presented low code options, “look it does almost everything you need, and you can do it without code.” Granted there are tons of great low code environments that serve their markets well (things like zapier).

As pointed out here when they fall short rather than being hard, it goes to nearly impossible. As Theo points out here many applications follow an 80/20 rule. 80% of the app is really easy to put together, and takes about 20% of the time, probably less. What no code does is it takes that 80% that is already easy, makes it even easier ( pitches it as faster whether or not that is true ), and makes the last 20% of the project impossibly hard to create and maintain, so you just should have picked a tool that had the capability of doing the whole thing from the start anyways.

Note

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

💭 Template Designer Documentation — Jinja Documentation

2023-12-26T22:00:42Z

Template Designer Documentation — Jinja Documentation (3.1.x)

jinja.palletsprojects.com

html code generated by my jinja templates generally look half garbage because of indents and whitespace all over the place. I just learned about these pesky Whitespace Control characters that can get rid of the whitespace added from templating.

You can also strip whitespace in templates by hand. If you add a minus sign (-) to the start or end of a block (e.g. a For tag), a comment, or a variable expression, the whitespaces before or after that block will be removed:

{% for item in seq -%}
    {{ item }}
{%- endfor %}

Note

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

💭 bunny.net - The Content Delivery platform that truly Hops!

2023-12-20T16:14:28Z

bunny.net - The Global Edge Platform that truly Hops

Hop on bunny.net and speed up your web presence with the next-generation Content Delivery Service (CDN), Edge Storage, and Optimization Services at any scale.

bunny.net · bunny.net

bunny.net looks like an interesting cloudflare alternative.

Note

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

💭 FastAPI - dependency inside Middleware? - Stack Overflow

2023-12-17T17:05:46Z

Handling Errors - FastAPI

After struggling to get dependencies inside of middleware I learned that you can make global dependencies at the app level. I used this to set the user on every single route of the application without needing Depend on getting the user on each route.

from fastapi import Depends, FastAPI, Request


def get_db_session():
    print("Calling 'get_db_session(...)'")
    return "Some Value"


def get_current_user(session=Depends(get_db_session)):
    print("Calling 'get_current_user(...)'")
    return session


def recalculate_resources(request: Request, current_user=Depends(get_current_user)):
    print("calling 'recalculate_resources(...)'")
    request.state.foo = current_user


app = FastAPI(dependencies=[Depends(recalculate_resources)])


@app.get("/")
async def root(request: Request):
    return {"foo_from_dependency": request.state.foo}

Note

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

💭 Handling Errors - FastAPI

2023-12-17T03:47:43Z

FastAPI framework, high performance, easy to learn, fast to code, ready for production

logs with FastAPI and Uvicorn · Issue #1508 · fastapi/fastapi

from fastapi import FastAPI, Request
from fastapi.responses import JSONResponse


class UnicornException(Exception):
    def __init__(self, name: str):
        self.name = name


app = FastAPI()


@app.exception_handler(UnicornException)
async def unicorn_exception_handler(request: Request, exc: UnicornException):
    return JSONResponse(
        status_code=418,
        content={"message": f"Oops! {exc.name} did something. There goes a rainbow..."},
    )


@app.get("/unicorns/{name}")
async def read_unicorn(name: str):
    if name == "yolo":
        raise UnicornException(name=name)
    return {"unicorn_name": name}

Note

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

💭 logs with FastAPI and Uvicorn · Issue #1508 · tiangolo/fastapi

2023-12-15T22:04:42Z

Hello, Thanks for FastAPI, easy to use in my Python projects ! However, I have an issue with logs. In my Python project, I use : app = FastAPI() uvicorn.run(app, host="0.0.0.0", port=8000) And when...

Setting an additional log handler to the uvicorn logger for access logs in fastapi was not straightforward, but This post was very helpful.

@app.on_event("startup")
async def startup_event():
    logger = logging.getLogger("uvicorn.access")
    handler = logging.StreamHandler()
    handler.setFormatter(logging.Formatter("%(asctime)s - %(levelname)s - %(message)s"))
    logger.addHandler(handler)

Note

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

💭 How to group FastAPI endpoints in Swagger UI?

2023-12-15T15:30:37Z

Show some equivalent list comprehensions in filter examples · Issue #1068 · pallets/jinja

    Setting tags in your fastapi endpoints will group them in the docs.  You can also set some metadata around the tags to get nice descriptions.

Here is a full example from the post.

from fastapi import FastAPI

tags_metadata = [
    {"name": "Get Methods", "description": "One other way around"},
    {"name": "Post Methods", "description": "Keep doing this"},
    {"name": "Delete Methods", "description": "KILL 'EM ALL"},
    {"name": "Put Methods", "description": "Boring"},
]

app = FastAPI(openapi_tags=tags_metadata)


@app.delete("/items", tags=["Delete Methods"])
@app.put("/items", tags=["Put Methods"])
@app.post("/items", tags=["Post Methods"])
@app.get("/items", tags=["Get Methods"])
async def handle_items():
    return

Note

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

💭 Show some equivalent list comprehensions in filter examples · ...

2023-12-14T20:28:34Z

I'm willing to write a pull-request for this, but I just want to see what people think before I write it. So the issue is this. I'm very familiar with python. I'm new to Jinja2. Often I find myself...

https://waylonwalker.com/still-loving-tailwind/

I often want to reach for non existing list comprehensions in jinja 2, Here are a few nice equivalents.

a: {{ data | selectattr('x', 'gt', 5) | list }}
b: {{ data | map(attribute='c') | list }} 
c: {{ data | selectattr('x', 'gt', 5) | map(attribute='c') | list }}

Note

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

Hiding Form input During htmx Request

2023-12-14T07:56:27Z

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">HTML #

Let’s start off with the form. It uses htmx to submit a post request to the post_request route. Note that there is a spinner in the post_request with the htmx-indicator class.

The intent is to hide the spinner until the request is running, and hide all of the form input during the request.

<form
  id="signup-form"
  hx-swap-oob="outerHTML"
  class="m-4 mx-auto mb-6 flex w-80 flex-col rounded-lg b p-4 shadow-xlc shadow-cyan-500/10"
  method="POST"
  action="{{ url_for('post_signup') }}"
  hx-post="{{ url_for('post_signup') }}"
>
  <input
    class="mx-8 mt-6 mb-4 border border-black bg-zinc-900 p-1 text-center focus:bg-zinc-800"
    type="text"
    value="{{ full_name }}"
    name="full_name"
    placeholder="Full Name"
  />
  {% if full_name_error %}
  <label class="-mt-6 mb-6 mx-8 text-red-500 p-1 text-center">
    {{ full_name_error }}
  </label>
  {% endif %}
  <input
    class="mx-8 mb-4 border border-black bg-zinc-900 p-1 text-center focus:bg-zinc-800"
    type="text"
    value="{{ username }}"
    name="username"
    placeholder="username"
  />
  {% if username_error %}
  <label class="-mt-6 mb-6 mx-8 text-red-500 p-1 text-center">
    {{ username_error }}
  </label>
  {% endif %}
  <input
    class="mx-8 mb-4 border border-black bg-zinc-900 p-1 text-center focus:bg-zinc-800"
    type="email"
    name="email"
    value="{{ email }}"
    placeholder="email"
  />
  {% if email_error %}
  <label class="-mt-6 mb-6 mx-8 text-red-500 p-1 text-center">
    {{ email_error }}
  </label>
  {% endif %}
  <input
    class="mx-auto w-32 mb-4 border border-black bg-purple-900 p-1 text-center focus:bg-zinc-800"
    type="submit"
    value="sign up"
  />
  <div role="status" class="mx-auto htmx-indicator">
    <svg
      class="mx-auto animate-spin h-5 w-5 text-white"
      xmlns="https://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
    >
      <circle
        class="opacity-25"
        cx="12"
        cy="12"
        r="10"
        stroke="currentColor"
        stroke-width="4"
      ></circle>
      <path
        class="opacity-75"
        fill="currentColor"
        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
      ></path>
    </svg>
    <p>Signing up...</p>
  </div>
</form>

Yes this is styled using tailwindcss.

CSS #

Let’s take a look at how we achieve switching between only spinner an only form inputs using css.

.htmx-indicator {
  @apply hidden;
  opacity: 0;
  transition: opacity 500ms ease-in;
}
.htmx-request button,
.htmx-request input[type="submit"],
.htmx-request input,
.htmx-request label {
  @apply hidden;
}
.htmx-request .htmx-indicator {
  opacity: 1;
  @apply block;
}
.htmx-request.htmx-indicator {
  opacity: 1;
  @apply block;
}

Final Result #

Here is the final result of me signing up for a new account in fokais.

Final Result

💭 Adam Wathan on X: "Hear me out. https://t.co/QHkEI6SJYZ" / X

2023-12-13T01:22:17Z

Path Operation Advanced Configuration - FastAPI

I’m going to give this trick a shot on my sites, and see how I like it.

* {
  min-width: 0
}

Down in the comments @adamwathan goes on to say.

Basically every layout overflow bug ever boils down to some flex or grid child needing min-width: 0 😄

Oh and @ryanflorence also says in the comments.

I … do this.

Note

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

💭 Path Operation Advanced Configuration - FastAPI

2023-12-12T01:37:35Z

FastAPI framework, high performance, easy to learn, fast to code, ready for production

Protect API docs behind authentication? · Issue #364 · fastapi/fastapi

    Excluding routes from fastapi docs, can be done from the route configuration using `include_in_schema`.  This is handy for routes that are not really api based or duplicates.

From the Docs #

from fastapi import FastAPI

app = FastAPI()


@app.get("/items/", include_in_schema=False)
async def read_items():
    return [{"item_id": "Foo"}]

trailing slash #

I’ve had better luck just routing both naked and trailing slash routes in fastapi. I’ve had api’s deployed as a subroute to a site rather than a subdomain, and the automatic redirect betweens them tended to always get messed up. This is pretty easy fix for the pain is causes just give vim a yyp, and if you don’t want deuplicates in your docs, ignore one.

from fastapi import FastAPI

app = FastAPI()

@app.get("/items")
@app.get("/items/", include_in_schema=False)
async def read_items():
    return [{"item_id": "Foo"}]

favicon.ico #

Now you do not need to deploy favicons to your api in any way, it is nice to have it in your browser tab, but more importantly to me I hate having console errors that are meaningless, this gives the browser something to automatically grab and not log errors.

@app.get("/favicon.ico", include_in_schema=False)
def get_favicon():
    return RedirectResponse(url="https://fokais.com/favicon.ico", status_code=status.HTTP_302_FOUND)

Note

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

💭 Protect API docs behind authentication? · Issue #364 · tiangol...

2023-12-12T01:27:04Z

Basic Question Does FastAPI provide a method for implementing authentication middleware or similar on the docs themselves (e.g. to protect access to /docs and /redoc)? Additional context My company...

Cancel subscriptions immediately or at the end of the subscription period with proration options, invoice handling, and automatic cancellation after failed payment attempts.

You can protect your fastapi docs behind auth so that not only can certain roles not run certain routes, but they cannot even see the docs at all. This way no one that shouldn’t be poking around can even discover routes they shouldn’t be using.

Here is the soluteion provided by @kennylajara

from fastapi import FastAPI

from fastapi.openapi.docs import get_redoc_html, get_swagger_ui_html
from fastapi.openapi.utils import get_openapi

import secrets

from fastapi import Depends, FastAPI, HTTPException, status
from fastapi.security import HTTPBasic, HTTPBasicCredentials

app = FastAPI(
    title="FastAPI",
    version="0.1.0",
    docs_url=None,
    redoc_url=None,
    openapi_url = None,
)

security = HTTPBasic()


def get_current_username(credentials: HTTPBasicCredentials = Depends(security)):
    correct_username = secrets.compare_digest(credentials.username, "user")
    correct_password = secrets.compare_digest(credentials.password, "password")
    if not (correct_username and correct_password):
        raise HTTPException(
            status_code=status.HTTP_401_UNAUTHORIZED,
            detail="Incorrect email or password",
            headers={"WWW-Authenticate": "Basic"},
        )
    return credentials.username


@app.get("/docs", include_in_schema=False)
async def get_swagger_documentation(username: str = Depends(get_current_username)):
    return get_swagger_ui_html(openapi_url="/openapi.json", title="docs")


@app.get("/redoc", include_in_schema=False)
async def get_redoc_documentation(username: str = Depends(get_current_username)):
    return get_redoc_html(openapi_url="/openapi.json", title="docs")


@app.get("/openapi.json", include_in_schema=False)
async def openapi(username: str = Depends(get_current_username)):
    return get_openapi(title=app.title, version=app.version, routes=app.routes

Note

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

💭 Cancel subscriptions | Stripe Documentation

2023-12-10T04:28:33Z

Cancel subscriptions

stripe.com

This is a handy guide to cancelling stripe subscriptions.

# Set your secret key. Remember to switch to your live secret key in production.
# See your keys here: https://dashboard.stripe.com/apikeys
import stripe
stripe.api_key = "sk_test_51ODvHtB26msLKqCAPBAo1qkBBuIfT5tQBX6YFWCLMsPixIExxITCRVa9tNCIqkdQS8olhR79NYXsFWBPKsM3LbGO00zEcNQfNI"

stripe.Subscription.modify(
  "sub_49ty4767H20z6a",
  cancel_at_period_end=True,
)

You can even inverse it by flipping True to False and re activate the subscription.

Note

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

💭 Retrieve an upcoming invoice | Stripe API Reference

2023-12-07T14:49:51Z

Use the search APIs to look up and retrieve objects in your Stripe data. Using search is a faster alternative to paginating through all resources.

stripe.com

You can find your customers next billing date through the stripe api by using Invoice. and passing in customer, customer_details, subscription, or schedule.

import stripe
stripe.api_key = "sk_test_51ODvHtB26msLKqCAPBAo1qkBBuIfT5tQBX6YFWCLMsPixIExxITCRVa9tNCIqkdQS8olhR79NYXsFWBPKsM3LbGO00zEcNQfNI"
invoice = stripe.Invoice.upcoming(customer="cus_NeZwdNtLEOXuvB")

Within the invoice, you can find the next_payment_attempt as a epoch.

date = datetime.fromtimestamp(invoice.next_payment_attempt)
amount = invoice.amount_due
currency = invoice.currency

Note

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

💭 Search | Stripe Documentation

2023-12-06T21:54:17Z

stripe.com

Stripe has it’s own query language for querying data. I’m just getting into using it and it seems pretty good so far. I needed to lookup the price for products. I was able to find prices for my product using the python api as shown below.

stripe.Price.search(query="active: 'true' and product: 'prod_P8SfwtxJ45cWE2'")

Note

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

💭 Stripe keys and IDs

2023-12-06T13:46:44Z

stripe-keys-and-ids.tsv tsv

Prefix	Description	Notes
ac_	Platform Client ID	Identifier for an auth code/client id.
acct_	Account ID	Identifier for an Account object.
aliacc_	Alipay Account ID	Identifier for an Alipay account.
ba_	Bank Account ID	Identifier for a Bank Account object.
btok_	Bank Token ID	Identifier for a Bank Token object.
card_	Card ID	Identifier for a Card object.
cbtxn_	Customer Balance Transaction ID	Identifier for a Customer Balance Transaction object.
ch_	Charge ID	Identifier for a Charge object.
cn_	Credit Note ID	Identifier for a Credit Note object.
cs_live_	Live Checkout Session ID	Identifier for a checkout Session object in live mode.
cs_test_	Test Checkout Session ID	Identifier for a checkout Session object in test mode.
cus_	Customer ID	Identifier for a Customer object.
dp_	Dispute ID	Identifier for a Dispute object.
evt_	Event ID	Identifier for an Event object.
fee_	Application Fee ID	Identifier for an Application Fee object.
file_	File ID	Identifier for a File object.
fr_	Application Fee Refund ID	Identifier for an Application Fee Refund object.
iauth_	Issuing Authorization ID	Identifier for an Issuing Authorization object.
ic_	Issuing Card ID	Identifier for an Issuing Card object.
ich_	Issuing Card Holder ID	Identifier for an Issuing Card Holder object.
idp_	Issuing Dispute ID	Identifier for an Issuing Dispute object.
ii_	Invoice Item ID	Identifier for an Invoice Item object.
il_	Invoice Line Item ID	Identifier for a Invoice Line Item object.
in_	Invoice ID	Identifier for an Invoice object.
ipi_	Issuing Transaction ID	Identifier for an Issuing Transaction object.
link_	File Link ID	Identifier for a File Link object.
or_	Order ID	Identifier for an Order object.
orret_	Order Return ID	Identifier for an Order Return object.
person_	Person ID	Identifier for a Person object.
pi_	Payment Intent ID	Identifier for a Payment Intent object.
pk_live_	Live public key	Public key in a live environment.
pk_test_	Test public key	Public key in a test environment.
pm_	Payment Method ID	Identifier for a Payment Method object.
po_	Payout ID	Identifier for a Payout object.
price_	Price ID	Identifier for a Price object.
prod_	Product ID	Identifier for a Product object.
prv_	Review ID	Identifier for a Review object.
pst_live_	Live Connection token	Connection token in a live environment.
pst_test_	Test Connection token	Connection token in a test environment.
py_	Payment ID	Identifier for a Payment object.
pyr_	Payment Refund ID	Identifier for a psuedo Refund object of a payment.
qt_	Quote ID	Identifier for a Quote object.
rcpt_	Receipt ID	Identifier for a receipt.
re_	Refund ID	Identifier for a Refund object.
req_	Request ID	Identifier for a HTTP Request
rk_live_	Live restricted key	Restricted key for live environment eg. stripe-cli
rk_test_	Test restricted key	Restricted key for test environment eg. stripe-cli
seti_	Setup Intent ID	Identifier for a Setup Intent object.
si_	Subscription Item ID	Identifier for a Subscription Item object.
sk_live_	Live secret key	Secret key in a live environment.
sk_test_	Test secret key	Pecret key in a test environment.
sku_	SKU ID	Identifier for a SKU object.
sli_	Subscription Line Item ID	Identifier for a Subscription Line Item object.
sqr_	Scheduled Query Run ID	Identifier for a Scheduled Query Run object.
src_	Source ID	Identifier for a Source object.
src_	Source ID	Identifier for a Source object.
sub_	Subscription ID	Identifier for a Subscription object.
tml_	Terminal Location ID	Identifier for a Terminal Location object.
tmr_	Terminal Reader ID	Identifier for a Terminal Reader object.
tok_	Token ID	Identifier for a Token object.
trr_	Transfer ID	Identifier a Transfer object.
tu_	Topup ID	Identifier for a Topup object.
txi_	Tax ID	Identifier for a customer Tax object.
txn_	Transaction ID	Identifier for a Transaction object.
txr_	Tax Rate ID	Identifier for a Tax Rate object.
we_	Webhook Endpoint ID	Identifier for a webhook endpoint.
whsec_	Webhook Secret	Secret key for signing a web hook.

Stripe has so many keys and ids this is a very helpful list to decode what exactly an id is for.

Note

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

Looking for a Heroku replacement, What I found was shocking!

2023-12-04T20:29:46Z

Your browser does not support the audio element.

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 live on forever without me paying for it. This is a harder problem as it costs more to keep servers spinning, memory, and disk all ready for you to use at a moments notice.

Honestly #

I never really deployed anything that useful on heroku, but it seems like the klenex of the bunch that’s why they are in the title. I’ve moved between digital ocean and fly.io, and have had some great experiences with both. I just don’t want to build something that is going perpetually cost money, I’m cheap and dont want to feel the burden of paying for something that I might not be using all the time.

fly.io #

fly is absolutely amazing to get off the ground. Their cli is top notch. They have servers all over the place and have a great interface to get your application deployed close to your users. You just can’t run all that much on it before you end up off the free tier.

serverless #

These platforms so far have just not felt right for me, again, I have to pay for them, many of them I have to worry about how hard they would get hit, and often they are focused on javascript.

What I am looking for #

easy to deploy
cheap to host
free to use
generous free tier
no chance of big bills
reliable, not 9 9’s, but mostly up.
allows me to run a bunch of stuff that I lightly use
that buttery smooth cli that I get out of fly.io
runs containers

The last one is probably the most important. I don’t get tons of time to work on side projects, and they are mostly ideas I just want to get out there and play with, the idea may flop quickly, but I want that DX to be easy to go from nothing to publically deployed.

What about going back to self hosting?? #

I have a Gateway FX6860 built in 2011, and was gifted to me around 2016. She doesn’t have much power to her, but she does have more than free tier power. I have 8 dedicated cpu, 16GB RAM, 500GB boot disk, and a 4TB hard disk.

Cloudflare tunnels #

Cloudflare Tunnels allow me to route traffic to my own server sitting right next to me and have it publically accessible. They take care of ssl certs, they support wildcard routes, and configuration is pretty easy. I can map addresses to a port on the machine, wildcard to a reverse_proxy, and end with a 404.

I’m missing that buttery smooth cli #

At this point I’m hosting a few things that I use frequently, but I don’t have that buttery smooth deploy experience that I get from fly.io. I have to log into the machine, edit some files, and docker compose up every time I want to deploy.

I was certain there was a better way #

I knew there was something better out there that was not a complex pain in the ass to setup. I know small companies run their own infra with a small team. There has to be tools that don’t take an enterprise to manage.

What about kubernetes #

In my search I keep seeing kubernetes as the solution, just run k8s, k3s, k0s, minikube, or kind. But EVERYTHING I have heard about kubernetes is that its a pain in the ass to deploy, takes a team to manage, and if you don’t have a $1M problem to solve don’t bother cause k8s will create a $1M problem for you. For this reason alone I turned my nose up to k8’s and nearly didn’t even give it a chance. Everyone jokes about blogs and simple sites running on k8s, and how rediculous that must be.

If you don’t have a $1M problem to solve don’t bother cause k8s will create a $1M problem for you.

Let’s jump on k3s #

I’ve never ran kubernetes myself, but after seeing it so many times in my searches for a fly.io replacement, I decided to give it a shot. I chose k3s as it seems like a nice balance of easy to setup, maintain, and feature complete kubernetes service.

# install and start k3s
curl -sfL https://get.k3s.io | sh -
# check to see if your nodes are started
sudo kubectl get nodes

My main hiccup so far was the machine I am running on runs a fairly new ubuntu install with zfs on root, and it would not start the master node. Rather than figuring out how to make zfs play nice I just pointed k3s to a drive that is not zfs.

# manuallly
sudo k3s server -d /mnt/vault/.rancher/k3s
# without editing systemd service
sudo ln -s /mnt/vault/.rancher/k3s /var/lib/rancher/k3s

Next I needed to be able to completely manage my k3s cluster form my main machine while this one sits far away in a closet.

# from the server
sudo cp /etc/rancher/k3s/k3s.yaml ~/.config/kube

# from my local machine
scp falcon@falcon:~/.config/kube/k3s.yaml ~/.config/kube/falcon-k3s.yaml
sudo cp /etc/rancher/k3s/k3s.yaml /home/waylon/.config/kube
sudo chown -R waylon:waylon ~/.config/kube
export KUBECONFIG=~/.config/kube/k3s.yaml

kompose #

Since everything I was running prior was in docker compose, I found kompose.io to be a fantastic tool to help me start converting my docker deployments into kubernetes.

A Month Later #

I started this post a month ago, and I am still enjoying k3s. For clarity, I did have a bit of k8’s experience going in, but zero experience running it by myself. k3’s seems to have made it pretty straightforward so far. My worst issues have been with ingress. Docker registries were a bit of a pain due to their large blob sizes, and a service I wanted to try to self host (sshx) required grpc, which is not supported by cloudflare tunnels.

TLDR #

Don’t believe everyone’s pre-conceived notions about tech you have never tried. Most of these things come from the echo chamber that is twitter anyways. Create your own opinions by trying new things, learning for yourself, and forming your own opnions.

Still Loving Tailwind

2023-11-30T11:54:52Z

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
tree shakable

fokais.com #

I started working on fokais.com only a few weeks ago, It’s going to be a SAS to make blogging easier. I’ve started hosting some tools for this blog that I really like that I think I can turn into a service. It’s been fantastic to quickly pump out new pages with tailwind.

htmx">HTMX #

tailwind and htmx are a match made in heaven. They both really lean on Location of Behavior over Separation of concerns. They do really well at making small components that you can throw on and endpoint and stack into any page. With tailwind I just configure it to look at all my templates, and I can guarantee that the styles will be in app.css, and all I need to do is add classes to my component.

Heres a sample component for a user widget that will go on every page. It has everything it needs right in the template.

<div
  hx-swap-oob="outerHTML"
  id="user-header"
  class="absolute top-0 right-0 mt-8 mr-4"
>
  {% if current_user %}
  <details
    id="user-header-details"
    open
    class="group list-none px-4 py-2 self-center justify-self-center bg-neutral-600/10 shadow-lg shadow-zinc-950/20 ring-2 ring-zinc-950/5 rounded-xl flex justify-center align-center flex-col"
  >
    <summary style="list-style-type: none">{{ current_user.username }}</summary>
    <div class="hidden group-hover:block my-4">
      <a
        class="mt-6 px-4 py-2 rounded bg-purple-950/5 ring-2 ring-cyan-500/30 text-cyan-500 font-bold"
        href="{{ url_for('get_logout') }}"
      >
        Logout
      </a>
    </div>
  </details>

  {% else %}
  <a
    href="{{ url_for('post_login') }}"
    class="mt-5 text-xl text-white font-bold text-shadow-xl text-shadow-zinc-950"
  >
    login
  </a>
  {% endif %}
</div>

internal apps #

I’ve built several interal apps, and tailwind has been really great for this. Its super quick to pop classes on components and get things to look decent quickly, or put some real polish into making them look nice.

My Website waylonwalker.com #

I’ve dropped my old decrepid css for some tailwind on my main site. My css was much smaller, but did not work quite as well on all devices, and most importantly was becoming a house of cards. Every time I fixed one thing several other things would fail. Colors were a bit muddy, and not as nicely configured as tailwind.

Most importantly was becoming a house of cards. Every time I fixed one thing several other things would fail.

One rough side of styling a blog in tailwind is that you don’t necessarily have control over granular details of how your pages get rendered without getting really deep into the markdown renderer, or writing your posts in html. It ends up looking a bit ugly, and is against the tailwind best practices, but it seems like the best way for a site like this.

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "./highlight.css";

.social {
  @apply font-bold;
  @apply flex flex-row;
  @apply gap-4;
  @apply justify-center;
  @apply py-8;
}

#posts ul ul {
  @apply backdrop-blur-sm;
  @apply flex flex-col sm:grid grid-flow-row-dense;
  @apply gap-4;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  @apply p-4;
}

grid #

I’ve struggled to use grid on my projects, and I’ve tried a few different times with no real success or adoption, but started using it on my resume, to have a main middle column, with two outer full bleed columns where I can make some elements full bleed to the edge. tailwind made this easy, once done, I had an admonition that was beautiful full bleed with a touch of color.

💭 CSS @media print issues with background-color; - Stack Overflow

2023-11-30T03:00:52Z

page-break-after - CSS | MDN

Get those print colors exact

body{
  -webkit-print-color-adjust:exact !important;
  print-color-adjust:exact !important;
}

Note

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

💭 page-break-after - CSS: Cascading Style Sheets | MDN

2023-11-30T02:38:49Z

The page-break-after CSS property adjusts page breaks after the current element.

MDN Web Docs · developer.mozilla.org

I’m working on something that might go to print, so I want the page breaks to happen somewhat in my control as the content author. As I do my writing I break my content up in to many short sections using h2, sometimes an h3. These are generally short sections that go together, should stay together, and typically are not too lengthy to cause a large white space in print.

I found a way in css to only allow page breaks to happen on h2 and h3, and it turned out perfect, suck it WSIWIG editors

* {
  page-break-before: avoid;
}

h2,
h3 {
  page-break-before: auto;
}

Note

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

💭 How to Build a Website or App

2023-11-28T02:04:02Z

How to Build a Website or App - Syntax #696

This podcast episode covers a wide range of topics related to building a website or web application from start to finish.

syntax.fm

    Great tips in this one.  They discuss everything from front end to backend, databases and ORMS, here are a few of my favorite points.

Use good data or good fake data
- make it have some variation like long and short text
Don’t use a database if you need one, static content is eaiser to manage
end to end test, (does the site load page x)
You DONT NEED all this complexity, you can deploy a site with HTML and CSS.

Note

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

💭 Sebastián Ramírez on X: "Now @FastAPI has 65k+ GitHub stars! ✨...

2023-11-27T16:15:36Z

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.

Fastapi passes flask in GitHub stars!

Note

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

💭 Separations of Concerns is a Lie - YouTube

2023-11-27T14:49:31Z

Nice take by @t3dotgg. Some of the old patterns that go deep into webdev, MVC, separation of concerns, REST, are things we are told to believe on day one, thrown so many things, no mental bandwidth, or experience to form our own opinions we must take them as fact. Rarely do we take these facts and revisit them with our new understandings years later.

Note

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

💭 Heroicons

2023-11-14T01:06:12Z

Heroicons

Heroicons · heroicons.com

heroicons is a really nice set of many of the basic icons that you will need for building nice ui’s. They have a really nice copy as svg or jsx button, so that you can just yank it and paste it on your page without any extra packages or installation.

Note

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

💭 Wes Bos on X: "🔥 The stale-while-revalidate header is suuuuuup...

2023-10-28T14:29:59Z

</> htmx ~ Locality of Behaviour (LoB)

Wes has some of the coolest OG images i’ve ever seen. Here he talks about how to enable cache configuration so that its constantly updating the cache without the user waiting for the image to be created.

Note

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

💭 htmx ~ Locality of Behaviour (LoB)

2023-10-28T01:11:56Z

Carson Gross explores the Locality of Behaviour (LoB) principle, which emphasizes making the behavior of code units obvious on inspection to enhance maintainability. He discusses the tradeoffs betw...

Litestar: Effortlessly Build Performant APIs

Interesting principle here. What a great example, If I’m looking at the second jQuery example, I have to dig into dev tools or make some assumtions that this team uses jQuery, and selects by id, therefore I can grep for $("#d1").

Consider two different implementations of an AJAX request in HTML, the first in htmx:

<button hx-get="/clicked">Click Me</button>


> and the second in jQuery:

``` js
  $("#d1").on("click", function(){
    $.ajax({
         /* AJAX options... */
    });
  });

<button id="d1">Click Me</button>

Note

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

💭 Tailwind Connect 2023 — Keynote - YouTube

2023-10-19T13:41:24Z

Tailwind comes with space that I have never heard of that is made to give margin and padding together in one class. Adam dropped it here in the Tailwind Connect conference.

Note

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

💭 Episode #433 Litestar: Effortlessly Build Performant APIs - [T...

2023-10-17T18:45:08Z

We all know about Flask and Django. And of course FastAPI made a huge splash when it came on the scene a few years ago. But new web frameworks are being created all the time. And they have these ea...

talkpython.fm

Litestar is an interesting api framework similar to fastpi, that I am interested to check out to see if it fits into some project scope. It sounds like it comes with a lot more batteries included for things like auth, but does not have hard opinions like django. At this point I’m not jumping off of fastapi, but its something I want to try.

Note

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

💭 Twitter Requires full image_urls

2023-10-17T17:30:09Z

![[None]]

Yet again twitter cards were causing me pain. This time it was me not realizing that they require full urls, and not relative or abolute urls.

This was not working

    <meta name="twitter:image" content="/shot/?path={{ request.url|quote_plus }}" content-type='image/png'/>

This does work with a full url

    <meta name="twitter:image" content="https://thoughts.waylonwalker.com/shot/?path={{ request.url|quote_plus }}" content-type='image/png'/>

Note

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

💭 Has Web Development Regressed? A Conversation with Wes Bos | B...

2023-10-17T01:33:41Z

Boot.dev is crushing it with these interviews. This one has Wes Bos, includes teaching, webdev, where is webdev headed.

Note

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

💭 sysid/sse-starlette

2023-10-12T19:14:45Z

GitHub - sysid/sse-starlette

Contribute to sysid/sse-starlette development by creating an account on GitHub.

Utilities for controlling how an element handles content that is too large for the container.

sse-FastAPI.">starlette provides server sent events for startlette and FastApi. I’m evaluating for use with htmx.

Installation: #

pip install sse-starlette

Usage: #

import asyncio
import uvicorn
from starlette.applications import Starlette
from starlette.routing import Route
from sse_starlette.sse import EventSourceResponse

async def numbers(minimum, maximum):
    for i in range(minimum, maximum + 1):
        await asyncio.sleep(0.9)
        yield dict(data=i)

async def sse(request):
    generator = numbers(1, 5)
    return EventSourceResponse(generator)

routes = [
    Route("/", endpoint=sse)
]

app = Starlette(debug=True, routes=routes)

if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=8000, log_level='info')

Note

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

💭 Overflow - Tailwind CSS

2023-10-11T19:16:21Z

overflow - Layout

tailwindcss.com

Controlling overflow with tailwindcss

Examples #

<div class="overflow-visible ..."></div>

<div class="overflow-hidden ..."></div>

Note

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

💭 How To Create a Custom Scrollbar

2023-10-11T19:11:49Z

Default scrollbars on a dark theme website are just the ugliest thing. This page covers all the pseudo selectors needed to style the scrollbar.

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Note

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

💭 Change Autocomplete Styles in WebKit Browsers | CSS-Tricks - C...

2023-10-10T01:48:04Z

Change Autocomplete Styles in WebKit Browsers | CSS-Tricks

We got a nice tip from Lydia Dugger via email with a method for changing the styles that WebKit browsers apply to form fields that have been autocompleted.

CSS-Tricks · css-tricks.com

All the hover, select, autofil, focus combinations have left me confused on how to consistently get my form elements styled in dark mode

This snippet from CSS tricks has fixed all the different states for me to give me full control.

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

Note

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

💭 florimondmanca/arel: Lightweight browser hot reload for Python...

2023-10-08T15:22:23Z

GitHub - florimondmanca/arel: Lightweight browser hot reload for Python ASGI web apps

Lightweight browser hot reload for Python ASGI web apps - florimondmanca/arel

arel is a “Lightweight browser hot reload for Python ASGI web apps”

I just implemented this on my thoughts website using fastapi, and it’s incredibly fast and lightweight. There just two lines of js that make a web socket connection back to the backend that watches for changes.

When in development mode, this snippet gets injected directly on the page and does a refresh when arel detects a change.

const ws = new WebSocket("ws://localhost:5000/hot-reload");
ws.onmessage = () => window.location.reload();

Note

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

💭 Automatic browser reloading in FastAPI

2023-10-08T15:16:56Z

main.py python

import os

import arel
from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates

app = FastAPI()
templates = Jinja2Templates("templates")

if _debug := os.getenv("DEBUG"):
    hot_reload = arel.HotReload(paths=[arel.Path(".")])
    app.add_websocket_route("/hot-reload", route=hot_reload, name="hot-reload")
    app.add_event_handler("startup", hot_reload.startup)
    app.add_event_handler("shutdown", hot_reload.shutdown)
    templates.env.globals["DEBUG"] = _debug
    templates.env.globals["hot_reload"] = hot_reload


@app.get("/")
def index(request: Request):
    return templates.TemplateResponse("index.html", context={"request": request})

# run:
# DEBUG=true uvicorn main:app --reload

I just discovered arel for hot reloading python applications when content changes from this snippet that implements it for fatapi.

On app startup add the /hot-reload routes if in DEBUG mode.


import os

import arel
from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates

app = FastAPI()
templates = Jinja2Templates("templates")

if _debug := os.getenv("DEBUG"):
    hot_reload = arel.HotReload(paths=[arel.Path(".")])
    app.add_websocket_route("/hot-reload", route=hot_reload, name="hot-reload")
    app.add_event_handler("startup", hot_reload.startup)
    app.add_event_handler("shutdown", hot_reload.shutdown)
    templates.env.globals["DEBUG"] = _debug
    templates.env.globals["hot_reload"] = hot_reload


@app.get("/")
def index(request: Request):
    return templates.TemplateResponse("index.html", context={"request": request})

# run:
# DEBUG=true uvicorn main:app --reload

install arel and make sure you have uvicorn[standard] for websocket support.

fastapi
uvicorn[standard]
arel
jinja2

In the template, load the script when in debug mode.

<body>
  {% block content %}{% endblock %}

  <!-- Hot reload script -->
  {% if DEBUG %} {{ hot_reload.script(url_for('hot-reload')) | safe }} {% endif
  %}
</body>

Note

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

💭 teej dv 🔭 on X: "Hypermedia fixes this HATEOAS gonna hate" / X

2023-10-05T01:13:37Z

Pagefind is a fully static search library that aims to perform well on large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure.

HATEOAS gonna hate. More and more htmx seems like the js library for backend devs. So rather than making 55 rest calls here, just make an endpoint that does what you want it to do with one, or a few requests.

Note

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

why-is-postgres-default

2023-09-30T21:26:36Z

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 runs in memory #

Don’t need, or maybe don’t want to persist state. Run it in memory. This is a nice feature for running tests.

Less exposure #

SQLite is a file on your filesystem. It’s not a web service. It’s not a cloud service. Not that postgres is insecure, but it is one more endpoint that you have to think about securing.

this means that is probably also cheaper 🤑

SQLite is easy to replicate #

Want to run your new feature with prod data? Pull a replica or backup. It’s a file, you can cp, scp, rsync it whatever you have available.

SQLite Does everything of what I need in an application db #

SQLite has a rock solid set of features that covers everything that I need, and when it’s not I am probably thinking about pulling data into my application code and running something custom anyways.

SQLite runs on the edge #

Most applications are read heavy and light on writes. Services like turso have recognized this and built a business around it. They give you a master db that all writes go to, and read replicas that can run on the edge with your application code. You have a lot of users in different regions you can run your application close to them without suffering from query latency or replication complexity.

SQLite probably does what you need it to #

For a large number of use cases SQLite is probably the best thing to get you off the ground quick, and likely all that you will need. Consider using it before defaulting to postgres.

You probably already know how to maintain it #

If you know a bit of cli commands and remember that your database is just a file, this will feel very intuitive. If not you can probably poke around a file system gui and still make most of it work.

## create a database
touch database.db
## back it up
cp database.db database.db.bak
## drop the database
rm database.db
## restore the backup
cp database.db.bak database.db
## drop the backup
rm database.db.bak
## create an offsite backup
aws s3 cp database.db s3://my-backup-bucket/
scp database.db username@to_host:/remote/directory/
rsync -a database.db username@to_host:/remote/directory/

Need High Concurrent writes #

You might consider postgres.

Need Remote connection string #

You might consider postgres.

💭 Pagefind | Pagefind — Static low-bandwidth search at scale

2023-09-20T01:04:41Z

Pagefind

Pagefind · pagefind.app

Pagefind is absolutely insane. I’ve tried a number of static site searches, and found them all hard to get get going, clunky and not the best experience as a user or developer.

I setup pagefind in about 2 minutes on my site where it found and indexed 833 pages in 2 minutes.

The only downside I see so far is that it is a lot of bandwidth to the user. On simulated slow 3G you can definitly feel it, but not terrible. Anything slower and its going to start feeling frustrating.

edit: I have actually fully deployed it on waylonwalker.com, and its fast!

create the index

npx -y pagefind --site public --serve

Then I put this on a page, it looks really nice on a white background, but would need some work to drop into a dark theme.

<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        new PagefindUI({ element: "#search", showSubResults: true });
    });
</script>

Note

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

A Case For Tailwindcss

2023-09-10T19:46:19Z

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

It’s tiny #

So unlike big component libraries like tailwind, it comes with a cli that that it uses to create the final css file. It is able to treeshake out all the tailwind classes that you are not using and only ship the ones that you are using.

It’s hard to clash #

Since the classes are so small and single purpose it’s hard to end up with something like .card in two places that mean different things causing you to duplicate most of that css anyways so that the whole design doesn’t break when you change one or the other.

the classes make sense #

The classes are really clear and easy to understand, they mentally map over directly to the css that they implement.

Things like margin are easy to grab once you get the grasp of it. m for margin, and a number for how much, and it’s really easy to bump just a bit more.

.m-6 {
  margin: 1.5rem;
}

.m-5 {
  margin: 1.25rem;
}

.m-4 {
  margin: 1rem;
}

.m-3 {
  margin: 0.75rem;
}

.m-2 {
  margin: 0.5rem;
}

.m-1 {
  margin: 0.25rem;
}

.m-0 {
  margin: 0px;
}

Font Sizes are well thought out #

Rather than having a bunch of random sizes, tailwind has a really well thought out design system that does not grow linearly, but with what makes sense. Not only the font size, but they have given you the appropriate line-height to go with it.

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

Colors #

This goes for colors too. When I want to do things like make a button look clickable, all I need to do is bump the color up or down by 100, I don’t need to know deep color theory to understand if it will be noticable, the team has designed it to work better than I can come up with.

.bg-stone-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 244 / var(--tw-bg-opacity));
}

.bg-stone-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(231 229 228 / var(--tw-bg-opacity));
}

.bg-stone-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(214 211 209 / var(--tw-bg-opacity));
}

.bg-stone-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(168 162 158 / var(--tw-bg-opacity));
}

.bg-stone-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 249 / var(--tw-bg-opacity));
}

.bg-stone-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(120 113 108 / var(--tw-bg-opacity));
}

.bg-stone-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(87 83 78 / var(--tw-bg-opacity));
}

.bg-stone-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(68 64 60 / var(--tw-bg-opacity));
}

.bg-stone-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(28 25 23 / var(--tw-bg-opacity));
}

Am I going to start using tailwind? #

Right now I am working on some projects that I am going to use tailwind on. I really see myself liking it. I don’t like that I need to install it with npm, but I can get past that. Cli tools seem to work out pretty well, but anytime I have a project that installs a bagillion node modules they all come crashing down in 6 month or a year when the project has not been touched and I just need one small change.

I really like the idea of all these classes being consistent across all my projects and really being a short hop away from hand writing css vs a heavy component library. Most of all I like their well thought out design system that I definitly could not get right myself.

💭 aca/emmet-ls: Emmet support based on LSP.

2023-09-08T12:34:38Z

GitHub - aca/emmet-ls: Emmet support based on LSP.

Emmet support based on LSP. Contribute to aca/emmet-ls development by creating an account on GitHub.

How to use the Biome formatter.

This is the greatest nvim emmet plugin I have tried. In the past I had tried the vim plugin a few times and just could not get a good flow with the keybindings and found it confusing for my occasional use. emmet-ls just uses lsp-completion, so its the same flow as other completions.

You can try it out by installing with :Mason

config #

local lspconfig = require('lspconfig')
local configs = require('lspconfig/configs')
local capabilities = vim.lsp.protocol.make_client_capabilities()
capabilities.textDocument.completion.completionItem.snippetSupport = true

lspconfig.emmet_ls.setup({
    -- on_attach = on_attach,
    capabilities = capabilities,
    filetypes = { "css", "eruby", "html", "javascript", "javascriptreact", "less", "sass", "scss", "svelte", "pug", "typescriptreact", "vue" },
    init_options = {
      html = {
        options = {
          -- For possible options, see: https://github.com/emmetio/emmet/blob/master/src/config.ts#L79-L267
          ["bem.enabled"] = true,
        },
      },
    }
})

Note

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

💭 Formatter

2023-09-07T00:32:00Z

Formatter

Biome · biomejs.dev

Tried out biome today and it worked better than prettier on jinja templates, I might adopt this over prettier.

Note

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

💭 htmx ~ The disable-element Extension

2023-09-02T17:02:58Z

</> htmx ~ The disable-element Extension

v1.htmx.org

An extension to disable elements during flight of an htmx request, Looks super useful for things like a create or delete button where the server would end up with an error if you double delete or double create. This eliminates an error path that the user might see under normal use of the ui.

Note

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

💭 htmx ~ hx-indicator Attribute

2023-09-02T16:59:30Z

</> htmx ~ hx-indicator Attribute

The hx-indicator attribute in htmx allows you to specify the element that will have the `htmx-request` class added to it for the duration of the request. This can be used to show spinners or progre...

</> htmx ~ Examples ~ Updating Other Content

The htmx-request class is added to htmx-target elements. You can target this css selector to create loading state throbbers.

By default the target element will the self, but you can use the typical htmx css selector to select which element will recieve the htmx-request class while the request is running.

The only way to override the name of the class is through config.

Note

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

💭 The Truth About HTMX | Prime Reacts - YouTube

2023-09-01T19:02:47Z

HTMX | Prime Reacts" playlabel="Play: The Truth About HTMX | Prime Reacts">

Prime concisely made sense of why htmx is so awesome compared to what has become modern reactive web dev in 2 minutes. I had never thought of it this way and it’s incredible.

One thing I have comepletely missed out on with my use of htmx is setting the disabled state while the server is working, what a genius move!

Note

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

💭 htmx ~ Examples ~ Updating Other Content

2023-08-26T01:03:10Z

GitHub - simonw/shot-scraper: A command-line utility for taking automated screenshots of websites

Three ways to support updating other content. Fantastic article walking through the different ways to update other parts of the screen using htmx.

In htmx there is no 2 way data binding, the dom is your state, and if you have elements derived from the same data on the screen in different places you need to think about how to keep them in sync.

Note

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

💭 simonw/shot-scraper: A command-line utility for taking automat...

2023-08-16T00:05:33Z

A command-line utility for taking automated screenshots of websites - simonw/shot-scraper

HTML Over The Wire | Hotwire

    > A command-line utility for taking automated screenshots of websites

Daaaang, this is such an elegantly simple way to get web screenshots with a cli. I was literally up and running with two commands on my arch linux machine (which it warned was unsupported by playwright).

pip install shot-scraper
# Now install the browser it needs:
shot-scraper install
shot-scraper waylonwalker.com
shot-scraper https://datasette.io/ 
shot-scraper https://datasette.io/ -h 1280 -w 1920
shot-scraper https://datasette.io/ -h 480 -w 720
shot-scraper shot --selector '#posts' https://thoughts.waylonwalker.com/post/89

Note shot-scraper https://datasette.io/ is a full length screenshot of the entire page.

Oh and its pretty dang fast, let alone the setup time, this crushes on startup time in my attempts to use a headless browser in the past.

Note

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

💭 HTML Over The Wire | Hotwire

2023-08-11T01:12:07Z

Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire.

hotwired.dev

An alternative approach to building modern web withhout heavy js and json, but instead html over the wire, keeping the logic in the backend of rails.

Note

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

💭 Lifecycle Hooks | Vue.js

2023-08-09T13:46:02Z

Vue.js

Vue.js - The Progressive JavaScript Framework

vuejs.org

A super handy reference to the vuejs lifecycle.

Note

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

💭 How to Use HTML to Open a Link in a New Tab

2023-08-09T13:44:01Z

How to Use HTML to Open a Link in a New Tab

Tabs are great, aren't they? They allow the multitasker in all of us to juggle a bunch of online tasks at the same time. Tabs are so common now that, when you click on a link, it's likely it'll ope...

freeCodeCamp.org · freecodecamp.org

Most of the time when creating links in html you want to maintain the default behavior, as this is what users are going to expect, but sometimes your site behaves such that it does not fit, and it does something unexpected anyways. in this case you might want to make the default behavior to open the link in a new tab rather than relying on users to control click.

Use this with restraint as this can make your site feel janky and do things that do not feel natural to the web.

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

Note

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

💭 python - How to use a Pydantic model with Form data in FastAPI...

2023-08-08T13:46:19Z

Gzip/Brotli Compression Test | GiftOfSpeed

I went down the route of leveraging the json-enc extention in htmx, but later realized that this completely breaks browsers/users who do not wish to use javascript. While most of the web would feel quite broken with javascript disabled, I don’t want to contribute to that without good reason.

Taking a second look into this issue, rather than using json-enc, and using as_form to get form data into a model keeps the nice DX fo everything being a pydantic model, but the site still works without js. with js htmx kicks in, you get a spa like experience by loading partials onto the page, and without, you just get a full page reload.

the implementation #

copied from https://stackoverflow.com/questions/60127234/how-to-use-a-pydantic-model-with-form-data-in-fastapi

import inspect
from typing import Type

from fastapi import Form
from pydantic import BaseModel
from pydantic.fields import ModelField

def as_form(cls: Type[BaseModel]):
    new_parameters = []

    for field_name, model_field in cls.__fields__.items():
        model_field: ModelField  # type: ignore

        new_parameters.append(
             inspect.Parameter(
                 model_field.alias,
                 inspect.Parameter.POSITIONAL_ONLY,
                 default=Form(...) if model_field.required else Form(model_field.default),
                 annotation=model_field.outer_type_,
             )
         )

    async def as_form_func(**data):
        return cls(**data)

    sig = inspect.signature(as_form_func)
    sig = sig.replace(parameters=new_parameters)
    as_form_func.__signature__ = sig  # type: ignore
    setattr(cls, 'as_form', as_form_func)
    return cls

And the usage looks like

@as_form
class Test(BaseModel):
    param: str
    a: int = 1
    b: str = '2342'
    c: bool = False
    d: Optional[float] = None


@router.post('/me', response_model=Test)
async def me(request: Request, form: Test = Depends(Test.as_form)):
    return form

Note

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

💭 Debugging | pywebview

2023-08-05T18:04:04Z

How to enable debug mode in pywebview.

import webview

webview.create_window('Woah dude!', 'https://pywebview.flowrl.com/hello')
webview.start(debug=True)

Note

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

💭 API — Jinja Documentation

2023-08-04T23:54:05Z

#jinja2.Environment.compile_templates" class="embed-card-link" target="_blank" rel="noopener noreferrer">

API — Jinja Documentation (3.1.x)

jinja.palletsprojects.com

🤯 jinja comes with a loader to pre-compile templates! Defihnitely need to look at this for markata, as jinja is till one of the biggest hot spots.

Note

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

💭 API — Jinja Documentation

2023-08-04T23:35:09Z

![https://jinja.palletsprojects.com/en/3.0.x/api/#jinja2.FileSystemLoader](/static/https://jinja.palletsprojects.com/en/3.0.x/api/#jinja2.FileSystemLoader)

I’ve definitely been missing out on setting up a proper jinja loader on a few projects, I need to lean on this a bit more.

class jinja2.FileSystemLoader(searchpath, encoding='utf-8', followlinks=False):
    '''
    Load templates from a directory in the file system.
    '''

The path can be relative or absolute. Relative paths are relative to the current working directory.

loader = FileSystemLoader("templates")
# A list of paths can be given. The directories will be searched in order, stopping at the first matching template.
loader = FileSystemLoader(["/override/templates", "/default/templates"])

Note

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

💭 Tailwind CSS Crash Course - YouTube

2023-08-04T12:55:03Z

Nice intro into tailwind, I definitely started grasping some of the concepts after watching Brad.

Note

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

💭 GZIP Compression Test | GiftOfSpeed

2023-08-01T13:11:35Z

Check if Gzip or Brotli compression is working on your website.

giftofspeed.com

A nice tool to check compression on a public url.

Note

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

💭 Wesley Aptekar-Cassels | Reasons to avoid Javascript CDNs

2023-07-29T00:31:14Z

Reasons to avoid Javascript CDNs

Wesley Aptekar-Cassels · blog.wesleyac.com

And this is why we don’t run cdn in prod, respect your users who can’t control where the assets are stored. There are so many fast static hosting providers out there, if you are worried about performance reasons use one of those to self host.

Note

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

💭 Header Parameters - FastAPI

2023-07-28T14:59:37Z

Header Parameters - FastAPI

FastAPI framework, high performance, easy to learn, fast to code, ready for production

FastAPI framework, high performance, easy to learn, fast to code, ready for production

Getting request headers in fastapi has a pretty nice stetup, it allows you to get headers values as function arguments,

I was able to use headers to detect if a request was made from htmx or not.

If the request was made from htmx, then we want a html format, otherwise I’m probably hitting the api programatically from something like curl or python

@post_router.post("/post/")
async def post_post(
    request: Request,
    post: PostCreate,
    current_user: Annotated[User, Depends(try_get_current_active_user)],
    session: Session = Depends(get_session),
    is_hx_request: Annotated[str | None, Header()] = None,
) -> PostRead:
    "create a post"
    print('hx_request', hx_request)
    db_post = Post.from_orm(post)
    session.add(db_post)
    session.commit()
    session.refresh(db_post)
    if is_hx_request:
        return templates.TemplateResponse("post_item.html", {"request": request, "config": config, "post": db_post})
    return db_post

Note

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

💭 Session vs Token Authentication in 100 Seconds - YouTube

2023-07-28T14:59:37Z

Great short explaination of session vs token authentication.

Note

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

💭 Form Data - FastAPI

2023-07-28T14:59:37Z

Form Data - FastAPI

Template Designer Documentation — Jinja Documentation (3.1.x)

Getting form data inside of fastapi was not intuitive to me at first. Everything I had used in fastapi leaned on pydantic models. Form data comes in differently and needs collected differently.

from typing import Annotated

from fastapi import FastAPI, Form

app = FastAPI()


@app.post("/login/")
async def login(username: Annotated[str, Form()], password: Annotated[str, Form()]):
    return {"username": username}

Note

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

💭 Template Designer Documentation — Jinja Documentation

2023-07-28T14:59:37Z

jinja.palletsprojects.com

A feature of jinja that I just discovered is including sub templates. Here is an example from the docs.

{% include 'header.html' %}
Body goes here.
{% include 'footer.html' %}

And inside of my thoughts project I used it to render posts.

<ul id='posts'>
    {% for post in posts.__root__ %}
    {% include 'post_item.html' %}
    {% endfor %}
</ul>

note that post_item.html automatically inherits the post variable.

Note

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

💭 Templates - FastAPI

2023-07-28T14:59:37Z

Templates - FastAPI

FastAPI framework, high performance, easy to learn, fast to code, ready for production

A guide to add Jinja2Templates to fastapi.

Note

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

💭 htmx ~ Documentation

2023-07-28T14:59:37Z

</> htmx ~ Documentation

A complete reference of all of the htmx swapping methods.

Note

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

💭 python 3.x - FastAPI redirection for trailing slash returns no...

2023-07-28T14:59:37Z

I am trying to use htmx on a new fastapi site for my thoughts, and have been hitting this error.

Mixed Content: The page at 'https://front.mydomain.com/#/clients/1' was loaded over HTTPS, but requested an insecure resource 'http://back.mydomain/jobs/?_end=25&_order=DESC&_sort=id&_start=0&client_id=1'. This request has been blocked; the content must be served over HTTPS.

What is happening #

I have an htmx component that gets the current users name, but if they are not logged in the backend redirects to a login form.

        <div hx-get='/users/me' hx-trigger='load'>
            get me
        </div>

But for some reason when the front end gets this redirect, it tries to do it through http, and flags it as insecure.

The solution #

To solve this issue, the post directs to set the --forwarded-allow-ips to ‘*’

uvicorn thoughts.api.app:app --port 5000 --reload --log-level info --host 0.0.0.0 --workers 1 --forwarded-allow-ips '*'

Note

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

💭 htmx ~ The client-side-templates Extension

2023-07-28T14:59:37Z

FastAPI framework, high performance, easy to learn, fast to code, ready for production

Using templates with htmx requires the client-side-templates extension, and the template engine to be loaded in a <script> tag.

example htmx using templates.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://unpkg.com/htmx.org"></script>
  <script src="https://unpkg.com/htmx.org/dist/ext/client-side-templates.js"></script>
  <script src="https://unpkg.com/mustache@latest"></script>
</head>
<body>
  <div hx-ext="client-side-templates">
    <button hx-get="https://jsonplaceholder.typicode.com/todos/1"
            hx-swap="innerHTML"
            hx-target="#content"
            mustache-template="foo">
      Click Me
    </button>

    <p id="content">Start</p>

    <template id="foo">
      <p> {% raw %}{{userID}}{% endraw %} and {% raw %}{{id}}{% endraw %} and {% raw %}{{title}}{% endraw %} and {% raw %}{{completed}}{% endraw %}</p>
    </template>
  </div>
</body>
</html>

Note

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

💭 Static Files - FastAPI

2023-07-28T14:59:37Z

Static Files - FastAPI

encodeURIComponent() - JavaScript | MDN

Mounting static files in fastapi.

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

app = FastAPI()

app.mount("/static", StaticFiles(directory="static"), name="static")

Note

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

💭 HTMX looks pretty neat #coding #javascript - YouTube

2023-07-28T14:59:37Z

HTMX looks pretty neat #coding <a href=" tags="" javascript="" "="" class="hashtag-tag" data-tag="javascript" data-count="4" data-reading-time="6" data-reading-time-text="6 minutes">#javascript" playlabel="Play: HTMX looks pretty neat #coding #javascript">

Love the poling example with hx-trigger=‘every 1s’.

Note

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

💭 Dark Form

2023-07-28T14:59:37Z

A nice codepen reference for dark forms. I am using it for my thoughts chrome extension.

Note

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

💭 encodeURIComponent() - JavaScript | MDN

2023-07-28T14:59:37Z

The encodeURIComponent() function encodes a URI by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will ...

MDN Web Docs · developer.mozilla.org

In order to send data that includes special characters such as / in a url you need to url encode it. You have probably seen these many times in urls with things like %20 for spaces.

I’m working on a chrome extension to make quick blog posts, like thoughts or a persistent bookmark tool with comments. The backend is written in fastapi and when I check to see if I have a post for a page I need to url encode it.

curl -X 'GET' \
  'https://thoughts.waylonwalker.com/link/?link=https%3A%2F%2Fhtmx.org%2Fextensions%2Fclient-side-templates%2F' \
  -H 'accept: application/json'

curl example generated from the fastapi swagger docs.

Here is how I used javascript’s encodeURIComponent to turn my chrome extension into a notification when I already have a post for the current page.

// Event listener for tab changes
chrome.tabs.onActivated.addListener(function (activeInfo) {
  // Get the active tab information
  chrome.tabs.get(activeInfo.tabId, function (tab) {
    const url = tab.url || "";

    getData(`https://thoughts.waylonwalker.com/link/?link=${encodeURIComponent(url)}`).then((data) => {
        console.log('link data: ', data);
      if (data.hasOwnProperty('detail')) {
        chrome.browserAction.setBadgeText({ text: "" });
      } else {
        localStorageKey = `formData-${url}`;
        chrome.browserAction.setBadgeText({ text: "1" });
        chrome.browserAction.setBadgeBackgroundColor({ color: "#80A3D5" });
        localStorage.setItem(localStorageKey, JSON.stringify(data));
      }
    });
  });
});

Note

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

💭 Chris Coyier on Twitter: "I was unaware of `text-wrap: pretty;...

2023-07-28T14:59:37Z