Posts tagged: dev

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/

jinja has a loop variable that is very handy to use with htmx [1]. 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. References: [1]: /htmx/

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

![[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 [1]’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" i...

Simon Willison (@simonw) on X TIL Google Chrome has a --headless option you can use to take a screenshot from the CLI that's built into the default installation https://t.co/hoA4ujPSTh X (formerly Twitter) · twitter.com [1] 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 [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://twitter.com/simonw/status/1772043579231445366 [2]: /thoughts/

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

![[None]] import logging from typing import List import strawberry from fastapi import FastAPI from strawberry.fastapi import GraphQLRouter logger = logging.getLogger(__name__) authors = {} books = {} book_authors = {} authors_books = {} def get_author_for_book(root) -> "Author": return authors[book_authors[root.id]] @strawberry.type class Book: id: int title: str author: "Author" = strawberry.field(resolver=get_author_for_book) def get_books_for_author(root) -> List[Book]: print(f"getting books for {root}") return [books[i] for i in authors_books[root.id]] @strawberry.type class Author: id: int name: str books: List[Book] = strawberry.field(resolver=get_books_for_author) authors = {1: Author(id=1, name="Michael Crichton")} books = {1: Book(id=1, title="Jurassic Park")} # relationships book_authors[1] = 1 authors_books[1] = [1] def get_author_by_id(id: int) -> Author: return authors.get(id) def get_book_by_id(id: int) -> Book: return books.get(id) def get_authors(root) -> List[Author]: return authors.values() def get_books(root) -> List[Book]: print(books) print(authors) print(book_authors) print(authors_books) return books.values() @strawberry.typ...