All posts with the tag "webdev"
THIS! is the same reasons that I built thoughts{.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.
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{.hoverlink} where I link and make thoughts on posts like this, to reader{.hoverlink} which is my rss reader replacement that I wanted in 2013 when it was killedbygoogle
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...
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.
...
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.
...
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.
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.
A full list of standard Accept types.
This is a handy reference.
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...
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.
The htmx response-targets extension allows me to respond to errors from the backend and do normal htmx swaps.
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.
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.
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.
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
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.
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.
Its sad that this is not the accepted answer.
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.
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.
So cool to see ROX build this over the course of a day.