Posts tagged: webdev

A Link Blog in the Year 2024 Kellan Elliott-McCrea has started a new link blog: Like many people I’ve been dealing with the collapses of the various systems I relied on for information over the previous decades. … Simon Willison’s Weblog · simonwillison.net [1] THIS! is the same reasons that I built thoughts [2]{.hoverlink}. Simon has bee a big inspiration along the way. He defintely changed the format of my posts as I watched him build out his quote posts. Link blogging is a pleasantly low-pressure way of writing online. Found something interesting? Post a link to it, with a sentence or two about why it’s worth checking out. Ditto! just make a post. 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://simonwillison.net/2024/Jun/9/a-link-blog-in-the-year-2024/ [2]: https://thoughts.waylonwalker.com [3]: /thoughts/

[1] Kellan brings some interesting thoughts on where the internet is headed in 2024. Interestingly I see myself headed in a similar direction. Feeling like I know just enough to say fuck it and build my own platform for me to me me, from thoughts [2]{.hoverlink} where I link and make thoughts on posts like this, to reader [3]{.hoverlink} which is my rss reader replacement that I wanted in 2013 when it was killedbygoogle [4] And particular with the collapse of the social spaces many of us grew up with, I feel called back to earlier forms of the Internet, like blogs, and in particular, starting a link blog. Ai has really had quite the two sided effect since chatgpt launched and set the world ablaze. Suddenly you can get any answer you want as a custom fit blog post for free without effort, thus killing the traffic to any of these sites. Note This post is a thought [5]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: /static/https://laughingmeme.org//2024/06/08/a-link-blog-in-2024.html [2]: https://thoughts.waylonwalker.com [3]: https://reader.waylonwalker.com [4]: https://killedbygoogle.com/ [5]: /thoughts/

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 [1]{.hoverlink} clone or more realistically I could make it into a template for blog pages and this could become og [2] images. Still Loving Tailwind [3] References: [1]: https://carbon.now.sh [2]: /og/ [3]: /still-loving-tailwind/

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 [1] 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...

text-decoration-line - Typography Utilities for controlling the decoration of text. tailwindcss.com [1] 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 [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://tailwindcss.com/docs/text-decoration [2]: /thoughts/

Fields Pydantic Docs · docs.pydantic.dev [1] 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 [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://docs.pydantic.dev/2.7/concepts/fields/#field-representation [2]: /thoughts/

Media Types iana.org [1] A full list of standard Accept types. This is a handy reference. 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://www.iana.org/assignments/media-types/media-types.xhtml#text [2]: /thoughts/

Handling Errors - FastAPI FastAPI framework, high performance, easy to learn, fast to code, ready for production fastapi.tiangolo.com [1] This page shows how to customize your fastapi [2] 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 [3] response, and text for ...

white-space CSS property - CSS | MDN The white-space CSS property sets how white space inside an element is handled. MDN Web Docs · developer.mozilla.org [1] html [2] 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 [3]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space [2]: /html/ [3]: /thoughts/

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... htmx.org [1] The htmx [2] 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/[email protected]/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 [3]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://htmx.org/extensions/response-targets/ [2]: /htmx/ [3]: /thoughts/

MarkdownDown Convert any webpage to a clean markdown w/ images downloaded. MarkdownDown · markdowndown.vercel.app [1] Small web app to convert html [2] 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 [3]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://markdowndown.vercel.app/ [2]: /html/ [3]: /thoughts/

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>

I learned not to fear the arbitrary size feature of tailwind. While building out reader.waylonwalker.com [1] 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 [2] References: [1]: https://reader.waylonwalker.com [2]: https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values

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

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.

External Link stackoverflow.com [1] 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 [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://stackoverflow.com/questions/16151018/how-to-fix-npm-throwing-error-without-sudo#answer-41395398 [2]: /thoughts/

External Link stackoverflow.com [1] 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. [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://stackoverflow.com/questions/35968553/webkit-scrollbar-css-always-a-white-box-in-corner [2]: https://i.stack.imgur.com/P6b7f.png [3]: /thoughts/

- This is an interesting problem. I want to make a solution for this on htmx [1]-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 [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: /htmx/ [2]: /thoughts/

- So cool to see ROX build this over the course of a day. 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/