Posts tagged: webdev

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. [1] References: [1]: https://dropper.waylonwalker.com/api/file/fb693b92-3744-45a5-9220-bd914162f435.png

Colors - Core concepts Using and customizing the color palette in Tailwind CSS projects. tailwindcss.com [1] 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 [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://tailwindcss.com/docs/colors [2]: /thoughts/

Jhey ʕ·ᴥ·　ʔ (@jhey.dev) breakin' down classics CSS background-image + background-blend-mode + custom properties = holo-like effects with parallax ✨ Bluesky Social · bsky.app [1] Jhey has the coolest webdev demos! 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://bsky.app/profile/jhey.dev/post/3lgoev36hps2h [2]: /thoughts/

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 [1] References: [1]: https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png

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. {.aspect-[2.39/1]} {.cinematic} {.cinematic}  We get the following output with only the middle one working correctly. [1]{.aspect-[2.39/1]} [1] [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. References: [1]: https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png

- I like the charts that Theo brings to to these videos. Shout out for a positive k8s reference and not shitting on it. [2] Htmx brings html [3]/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. [4] 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. [5] Note This post is a thought [6]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: /htmx/ [2]: https://dropper.waylonwalker.com/api/file/6b2d4ec0-98f2-4e58-8ab4-936b7356e7f4.webp [3]: /html/ [4]: https://dropper.waylonwalker.com/api/file/71ac480a-4e45-4777-87eb-a9d2d8775cca.webp [5]: https://...

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 [1] 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 [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://developer.chrome.com/docs/css-ui/animate-to-height-auto/ [2]: /thoughts/

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 [1] 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 [2] 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 [3]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://matthiasott.com/notes/owning-it [2]: /self-host/ [3]: /thoughts/

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 [1] 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 [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://chriscoyier.net/2025/01/03/realign/ [2]: /t...

About Harry Roberts – CSS Wizardry csswizardry.com [1] 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 [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://csswizardry.com/about/#section:colophon [2]: /thoughts/

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 [1] 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 [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://buttondown.com/ownyourweb [2]: /thoughts/

slash pages A guide to common pages you can add to your website slashpages.net [1] 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. [2] 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://slashpages.net/ [2]: https://dropper.waylonwalker.com/api/file/ba4edf27-03d4-49ff-ab4e-712e9ab8acda.webp [3]: /thoughts/

- Theo does a fantastic history of serverless here. Kubernetes shit # [1] 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. [2] Serverless shines in high variance # [3] 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 # [4] 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 instanc...

- 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 [1]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: /thoughts/

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/