Posts tagged: webdev

- 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&t=3001s [4]: /html/ [5]: /thoughts/

External Link 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/

External Link X (formerly Twitter) · x.com [1] 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/

Buttery.so Buttery smooth, minimal icons for interfaces. buttery.so [1] Some sick looking icons no attribution needed. 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.buttery.so/icons [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.

External Link stackoverflow.com [1] today I learned that there is an accessibility feature in chrome that allows you to place a text cursor anywhere on the page. I had accidentally done this and it drove me mad that it was there. 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/75886276/text-cursor-bug-in-my-chrome-browser-that-causes-the-blinking-cursor-to-appear-e [2]: /thoughts/

External Link fullystacked.net [1] You can explicitly make a script render blocking, nothing will be rendered until this js is ready. <script blocking="render" src="important.js" defer></script> 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://fullystacked.net/render-blocking-on-purpose/ [2]: /thoughts/

FastHX - FastHX volfpeter.github.io [1] Very interesting approach to htmx [2] and fast api. It uses separate decorators for returning template partials and json that can be stacked to include both options on a single route. The templates are explicitly set in the decorator. Separate decorators are used for full page and partial pages. I don’t see an example of full and partial pages being combined. I think the demo app must be behaving in a spa like fashion where it does not get all of the data when it calls index and index will ask for user-list. Definitely going to keep my eye on this project and ponder on it. from fastapi import FastAPI from fastapi.templating import Jinja2Templates from fasthx import Jinja from pydantic import BaseModel # Pydantic model of the data the example API is using. class User(BaseModel): first_name: str last_name: str # Create the app. app = FastAPI() # Create a FastAPI Jinja2Templates instance and use it to create a # FastHX Jinja instance that will serve as your decorator. jinja = Jinja(Jinja2Templates("templates")) @app.get("/") @jinja.page("index.html") def index() -> None: ... @app.get("/user-list") @jinja.hx("user-list.html") async...

FastHX - FastHX volfpeter.github.io [1] Very interesting approach to htmx [2] and fast api. It uses separate decorators for returning template partials and json that can be stacked to include both options on a single route. The templates are explicitly set in the decorator. Separate decorators are used for full page and partial pages. I don’t see an example of full and partial pages being combined. I think the demo app must be behaving in a spa like fashion where it does not get all of the data when it calls index and index will ask for user-list. Definitely going to keep my eye on this project and ponder on it. from fastapi import FastAPI from fastapi.templating import Jinja2Templates from fasthx import Jinja from pydantic import BaseModel # Pydantic model of the data the example API is using. class User(BaseModel): first_name: str last_name: str # Create the app. app = FastAPI() # Create a FastAPI Jinja2Templates instance and use it to create a # FastHX Jinja instance that will serve as your decorator. jinja = Jinja(Jinja2Templates("templates")) @app.get("/") @jinja.page("index.html") def index() -> None: ... @app.get("/user-list") @jinja.hx("user-list.html") async...

Background Tasks - FastAPI FastAPI framework, high performance, easy to learn, fast to code, ready for production fastapi.tiangolo.com [1] fastapi [2] comes with a concept of background tasks which are functions that can be ran in the background after a function has been ran. This is handy for longer running functions that may take some time and you want to have fast response times. Here is an example from the docs from fastapi import BackgroundTasks, FastAPI app = FastAPI() def write_notification(email: str, message=""): with open("log.txt", mode="w") as email_file: content = f"notification for {email}: {message}" email_file.write(content) @app.post("/send-notification/{email}") async def send_notification(email: str, background_tasks: BackgroundTasks): background_tasks.add_task(write_notification, email, message="some notification") return {"message": "Notification sent in the background"} 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://fastapi.tiangolo.com/tutorial/background-tasks/ [2]: /fastapi/ [3]: /thoughts/

- Supply chain attacks are so big these days engineers definitely need to take these into consideration. It’s wild that such a simple attack vector hit some really big applications. This particular vector is so easy to avoid. You are already hosting web content, just curl the file and self host [1] the script, then you own it. That eliminates this attack vector all together, but doesn’t completely remove supply chain attacks, the js file can still hit external apis internally. What I see has happened in this case is that the owner of the domain polyfill.io changed. so anyone who directly linked to them got a malware injected script used. I can only imagine the number of applicatons that are not even being maintained anymore getting hit by this. TLDR, if you are taking something to production, where you are goind to deploy it and let it run, host the js yourself. these cdns are great for prototyping, but tread with caution. Note This post is a thought [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: /self-host/ [2]: /thoughts/

- Two inspirational people in one podcast, its cool to see how adam thinks about code, css, webdev, and building businesses. 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/

SVG Backgrounds, icons, and other website graphics 👉 Copy-and-paste backgrounds, patterns, icons, and other website graphics directly into projects. All customizable, tiny in file size, and licensed for multi-use. SVG Backgrounds · svgbackgrounds.com [1] svgbackgrounds is a really awesome resource for svg things recently featured on https://shoptalkshow.com/618/ 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.svgbackgrounds.com/ [2]: /thoughts/

Blogmarks that use markdown I needed to attach a correction to an older blogmark (my 20-year old name for short-form links with commentary on my blog) today - but the commentary field has always … Simon Willison’s Weblog · simonwillison.net [1] Oh I kinda like the name blogmark, as opposed to thoughts like I have chose for the same thing. Aparantly Simon beat me to the punch by 20 years on 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://simonwillison.net/2024/Apr/25/blogmarks-that-use-markdown/ [2]: /thoughts/