Posts tagged: dev

The beautiful sentence that is the web A metaphor for the building blocks of web development. cassidoo.co [1] 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 [2]/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 [3] 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 n...

External Link stackoverflow.com [1] Today I learned how to configure the baseurl for htmx [2] 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 [3]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://stackoverflow.com/questions/69456875/how-to-configure-base-url-for-all-requests-using-htmx [2]: /htmx/ [3]: /thoughts/

Addy Osmani (@addyosmani.bsky.social) Tip: Chrome DevTools can override the content of Fetch/XHR requests! Useful for mocking APIs without waiting on backend changes. Bluesky Social · bsky.app [1] WTF, you can just change a server response from devtools and update a vuejs app? Just tried with htmx [2], 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 [3]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://bsky.app/profile/addyosmani.bsky.social/post/3lei5jhkgdk2k [2]: /htmx/ [3]: /thoughts/

- Great list of 4 tips for running fastapi applications. Keep routes small # [2] 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 # [3] 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 [4] Note This post is a thought [5]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: /fastapi/ [2]: #keep-routes-small [3]: #deploy-early [4]: https://youtu.be/XlnmN4BfCxw?si=ks1wvmgDyoQLgrv2&amp;t=1093 [5]: /thoughts/

- This was an eye opening video into agentic editing workflows. setting rules # [1] Dfferent ai tools use different rules files, windsurf uses .windsurfrules. [2] testing out rules # [3] Test out your rules file by having it say something at the beginning of the output to verify that the rules are being applied correctly. [4] First line # [5] He suggests to use this key rule for debugging purposes, otherwise you are guessing to what rules if any it is following. Every time you choose to apply a rule(s), explicitly state the rule(s) in the output. You can abbreviate the rule description to a single word or phrase. Note This post is a thought [6]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: #setting-rules [2]: https://dropper.waylonwalker.com/api/file/f75bf439-919f-4c19-8695-176ca8a7d52d.webp [3]: #testing-out-rules [4]: https://dropper.waylonwalker.com/api/file/ebeed79c-435b-4aab-b3dc-c744b144c438.webp [5]: #first-line [6]: /thoughts/

- This is a pretty great episode talking shop with typecraft. They talk setups, cameras, content creation. I found them talking about their linux setups particularly interesting. Dax talked about his flow from building his own machines to using reliablesite.com. tmux default leader # [1] Dax hates on c-a, both typecraft and dax use c-s, which normally freezes a terminal, we can all agree that is useless. I use the default c-b, it seems fine for me. type crafts setup # [2] - Ubuntu - Ghosty - Tmux - Nvim - Ruby Selling coffee without a web front end # [3] Dax talks about terminal.shop and how they originally planned to have a web front end, but after they had so much success they stuck with it. now they are leaning harder into it and are building out integrations with a bunch of languages and an api, but no front end. Note This post is a thought [4]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: #tmux-default-leader [2]: #type-crafts-setup [3]: #selling-coffee-without-a-web-front-end [4]: /thoughts/

- Reminder to tune in later, can’t watch now, but saw a link on Dave’s blog. [1] Note This post is a thought [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://dropper.waylonwalker.com/api/file/ea6d4a9f-9abe-4853-9b5b-97335130d221.webp [2]: /thoughts/

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. [1] 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. [2] Now I got that 100 A11y score in lighthouse. [3] References: [1]: https://dropper.waylonwalker.com/api/file/24b4e31f-60db-47b8-b67c-07c4d4b6fb71.webp [2]: https://dropper.waylonwalker.com/api/file/8b4f2087-3f24-4212-ad00-74f294aff114.webp [3]: https://dropper.waylonwalker.com/api/file/17497676-3730-4875-9e10-c6d121ba537a.webp

Add a healthcheck to your FastAPI app | Nic Payne I'm building a few FastAPI apps to throw in docker and run on my homelab... I wanted to add healthchecks and here's a simple way to do it Make sure to pype.dev [1] Nice example of adding a healthcheck to fastapi [2], and integrating it with docker. Don’t forget to include curl in the install, nice touch. Note This post is a thought [3]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://pype.dev/add-a-healthcheck-to-your-fastapi-app [2]: /fastapi/ [3]: /thoughts/

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 [1] Hurl was mentioned by @gerhard [2] on the latest changelog and Friends [3]. 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 [4] content, REST / SOAP / GraphQL APIs, or any other XML / JSON based APIs. Note This post is a thought [5]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://hurl.dev/ [2]: https://gerhard.io/ [3]: https://www.youtube.com/watch?v=mvC7497CJJs&amp;t=3001s [4]: /html/ [5]: /thoughts/

Wes Bos (@wesbos) on X CSS Anchors: flip a tooltip to the bottom when it goes offscreen https://t.co/UYrQIIpmn9 X (formerly Twitter) · x.com [1] These css anchors are crazy that you can do this with html [2] and not a bunch of js, probably requiring a library or framework. [3] Note This post is a thought [4]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://x.com/wesbos/status/1856724739336859713 [2]: /html/ [3]: https://x.com/i/status/1856724739336859713 [4]: /thoughts/

External Link uxplanet.org [1] 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 [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://uxplanet.org/alternatives-to-using-pure-black-000000-for-text-and-backgrounds-54ef0e733cdb [2]: /thoughts/

[1]https://t.co/hmpbExR88Q" [1] loading=“lazy”> Wes Bos (@wesbos) on X Are you using position: absolute; to overlap elements? It's almost always better to Use CSS Grid instead! https://t.co/hmpbExR88Q 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 [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://x.com/wesbos/status/1834242925401694490 [2]: /thoughts/

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.

Wikilinks are a core concept within obsidian to link to documents by Slug [1] wrapped in double square brackets. These are commonly used within wiki site generators. [[slug]] Obsidian gives you a keybinding alt+enter to go to that file, but if it does not exist it will create the file for you in the root of the project. It’s a nice way to quickly make new documents. References: [1]: /slug/

Hotkey to open link under at the text cursor position while typing in edit mode I find myself not wanting to leave the keyboard for navigation and think a keyboard-only shortcut that could open a link at the text cursor position is at would be really handy for this case. Obsidian Forum · forum.obsidian.md [1] Obsidian has a go to definition like feature, the keybind is alt+enter, I would have never guessed this one. Note This post is a thought [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://forum.obsidian.md/t/hotkey-to-open-link-under-at-the-text-cursor-position-while-typing-in-edit-mode/8144 [2]: /thoughts/

It was not obvious to me, but if you have a wikilink such as Trying Obsidian [1], you can jump to the file in obsidian, just like you can with lsp go to definition, the keybinding is alt + enter. References: [1]: /trying-obsidian/

I’ve long used copier to create all of my posts for my blog, and it works really well for my workflow. I think of a title, call a template, and give it a title. out of the box obsidian did not seem to work this way. It seems like it wants me to right click a file tree and make a new file using the tree, this is not my jam. Here is what I came up with to replace my til template. --- date: <% tp.file.creation_date() %> templateKey: til title: <%* const originalFileName = await tp.system.prompt("Enter file name"); const toTitleCase = str => str.replace( /\w\S*/g, txt => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase() ); const title = toTitleCase(originalFileName); tR += title + '\n'; // Add the title to the template result -%> published: true tags: - --- <%* const fileName = originalFileName.toLowerCase().replace(/\s+/g, '-'); const newFilePath = `pages/til/${fileName}`; await tp.file.move(newFilePath); -%> <% tp.file.cursor() %> - tR is a return value, and it gets placed directly into the place it is in the file - to.file.cursor() creates a tab-index point so I can tab into the content

I’m giving obsidian a go as an editor for my blog and one of the main things I want to fix in my workflow is the ability to quickly drop in images. on first look through the community plugins I found Image Converter. I set it up to convert to webp and drop them in a git [1] submodule. I may make it something other than a git repo in the future, but I’ve learned that adding images to my blog repo quickly makes it heavy and hard to clone on other machines. [2] Once the images are there they are pushed and deployed as their own site to cloudflare pages. I made a quick edit to my sick wikilink hover [3] plugin for my blog. if it sees a wikilink ending in webp, convert the domain over to obsidian-assets.waylonwalker.com, and clean up the remaining "! " that the python md-it library leaves behind. Note after first try I needed to increase the width from 600 to 1400, the image in this post was unreadable. This is part of me getting set up and Trying Obsidian [4] References: [1]: /glossary/git/ [2]: https://dropper.waylonwalker.com/api/file/626d85b1-5588-45c4-a4f4-c372dc7c8ff3.webp [3]: /sick-wikilink-hover/ [4]: /trying-obsidian/