Posts tagged: dev

[1] I’ve been using tailwind for a few months now and I can still say I’m loving it. I’ve been using it to create some rapid prototypes that may or may not ever become something, a document that is likely to go to print (a resume), and some quick dashboards. I started using Tailwind a few month back # [2] A few months back in september of 2023 I made a case for tailwindcss [3]. And have been using it on quite a few projects since. - values are well thought out - it’s really easy to use - classes that make sense - tree shakable fokais.com # [4] I started working on fokais.com only a few weeks ago, It’s going to be a SAS to make blogging easier. I’ve started hosting some tools for this blog that I really like that I think I can turn into a service. It’s been fantastic to quickly pump out new pages with tailwind. [5] HTMX # [7] tailwind and htmx are a match made in heaven. They both really lean on Location of Behavior over Separation of concerns. They do really well at making small components that you can throw on and endpoint and stack into any page. With tailwind I just configure it to look at all my templates, and I can guarantee that the styles will be in app.css, ...

External Link stackoverflow.com [1] Get those print colors exact body{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; } 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/3893986/css-media-print-issues-with-background-color#answer-14784655 [2]: /thoughts/

page-break-after CSS property - CSS | MDN The page-break-after CSS property adjusts page breaks after the current element. MDN Web Docs · developer.mozilla.org [1] I’m working on something that might go to print, so I want the page breaks to happen somewhat in my control as the content author. As I do my writing I break my content up in to many short sections using h2, sometimes an h3. These are generally short sections that go together, should stay together, and typically are not too lengthy to cause a large white space in print. I found a way in css to only allow page breaks to happen on h2 and h3, and it turned out perfect, suck it WSIWIG editors * { page-break-before: avoid; } h2, h3 { page-break-before: auto; } 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.mozilla.org/en-US/docs/Web/CSS/page-break-after [2]: /thoughts/

How to Build a Website or App - Syntax #696 This podcast episode covers a wide range of topics related to building a website or web application from start to finish. syntax.fm [1] Great tips in this one. They discuss everything from front end to backend, databases and ORMS, here are a few of my favorite points. - Use good data or good fake data - make it have some variation like long and short text - Don’t use a database if you need one, static content is eaiser to manage - end to end test, (does the site load page x) - You DONT NEED all this complexity, you can deploy a site with HTML [2] and CSS. 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://syntax.fm/show/696/how-to-build-a-website-or-app [2]: /html/ [3]: /thoughts/

[1]https://t.co/YWi0i665VO" [1] loading=“lazy”> Sebastián Ramírez (@tiangolo) on X Now @FastAPI [2] has 65k+ GitHub stars! ✨🎉 Since today, FastAPI has a few more GitHub stars than Flask. 🤯 Now FastAPI is the second most starred Python web framework, right after Django. 🥈… X (formerly Twitter) · twitter.com Fastapi passes flask in GitHub stars! [1] 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://twitter.com/tiangolo/status/1729153717956715007 [2]: /fastapi/ [3]: /thoughts/

- Nice take by @t3dotgg [1]. Some of the old patterns that go deep into webdev, MVC, separation of concerns, REST, are things we are told to believe on day one, thrown so many things, no mental bandwidth, or experience to form our own opinions we must take them as fact. Rarely do we take these facts and revisit them with our new understandings years later. 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/t3dotgg [2]: /thoughts/

Heroicons Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS. Heroicons · heroicons.com [1] heroicons is a really nice set of many of the basic icons that you will need for building nice ui’s. They have a really nice copy as svg or jsx button, so that you can just yank it and paste it on your page without any extra packages or installation. 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://heroicons.com/ [2]: /thoughts/

[1]https://t.co/bAiTzSWU9o" [1] loading=“lazy”> Wes Bos (@wesbos) on X 🔥 The stale-while-revalidate header is suuuuuuper handy for striking a balance between fast loads and and frequently changed content. Here I am using it to instantly deliver an OG [2] image that t… X (formerly Twitter) · twitter.com Wes has some of the coolest OG images i’ve ever seen. Here he talks about how to enable cache configuration so that its constantly updating the cache without the user waiting for the image to be created. 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://twitter.com/wesbos/status/1717923624559005977 [2]: /og/ [3]: /thoughts/

htmx ~ Locality of Behaviour (LoB) Carson Gross explores the Locality of Behaviour (LoB) principle, which emphasizes making the behavior of code units obvious on inspection to enhance maintainability. He discusses the tradeoffs betw... htmx.org [1] Interesting principle here. What a great example, If I’m looking at the second jQuery example, I have to dig into dev tools or make some assumtions that this team uses jQuery, and selects by id, therefore I can grep for $("#d1"). Consider two different implementations of an AJAX request in HTML [2], the first in htmx [3]: <!--markata-attribution--> <button hx-get="/clicked">Click Me</button> > and the second in jQuery: ``` js $("#d1").on("click", function(){ $.ajax({ /* AJAX options... */ }); }); <button id="d1">Click Me</button> 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://htmx.org/essays/locality-of-behaviour/ [2]: /html/ [3]: /htmx/ [4]: /thoughts/

GitHub - casey/just: 🤖 Just a command runner 🤖 Just a command runner. Contribute to casey/just development by creating an account on GitHub. GitHub · github.com [1] I think just, might just be the thing I have been looking for. I’ve been looking for some ci/cd that I can host myself, but everything looks pretty big, so for now I am going to use just as my task runner. I installed with installer. curl https://i.wayl.one/casey/just | bash I set up my devtainer builds with just. Here is my justfile, yes you just need the cli and a file named justfile. default: base alpine slim base: build deploy alpine: build-alpine deploy-alpine slim: build-slim deploy-slim build: podman build -t registry.wayl.one/devtainer:latest . deploy: podman push registry.wayl.one/devtainer build-alpine: podman build -f docker/Dockerfile.alpine -t registry.wayl.one/devtainer:alpine . deploy-alpine: podman push registry.wayl.one/devtainer:alpine build-slim: podman build -f docker/Dockerfile.slim -t registry.wayl.one/devtainer:slim . deploy-slim: podman push registry.wayl.one/devtainer:slim Note This post is a thought [2]. It’s a short note that I make about someone else’s content online #thou...

- Tailwind comes with space that I have never heard of that is made to give margin and padding together in one class. Adam dropped it here in the Tailwind Connect conference. 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/

Litestar: Effortlessly Build Performant APIs We all know about Flask and Django. And of course FastAPI made a huge splash when it came on the scene a few years ago. But new web frameworks are being created all the time. And they have these ea... talkpython.fm [1] Litestar is an interesting api framework similar to fastpi, that I am interested to check out to see if it fits into some project scope. It sounds like it comes with a lot more batteries included for things like auth, but does not have hard opinions like django. At this point I’m not jumping off of fastapi [2], but its something I want to try. 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://talkpython.fm/episodes/show/433/litestar-effortlessly-build-performant-apis [2]: /fastapi/ [3]: /thoughts/

![[None]] Yet again twitter cards were causing me pain. This time it was me not realizing that they require full urls, and not relative or abolute urls. This was not working <meta name="twitter:image" content="/shot/?path={{ request.url|quote_plus }}" content-type='image/png'/> This does work with a full url <meta name="twitter:image" content="https://thoughts.waylonwalker.com/shot/?path={{ request.url|quote_plus }}" content-type='image/png'/> 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/

- Boot.dev is crushing it with these interviews. This one has Wes Bos, includes teaching, webdev, where is webdev headed. 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/

GitHub - sysid/sse-starlette Contribute to sysid/sse-starlette development by creating an account on GitHub. GitHub · github.com [1] sse-FastAPI [2].">starlette provides server sent events for startlette and FastApi. I’m evaluating for use with htmx [3]. Installation: # [4] pip install sse-starlette Usage: # [5] import asyncio import uvicorn from starlette.applications import Starlette from starlette.routing import Route from sse_starlette.sse import EventSourceResponse async def numbers(minimum, maximum): for i in range(minimum, maximum + 1): await asyncio.sleep(0.9) yield dict(data=i) async def sse(request): generator = numbers(1, 5) return EventSourceResponse(generator) routes = [ Route("/", endpoint=sse) ] app = Starlette(debug=True, routes=routes) if __name__ == "__main__": uvicorn.run(app, host="0.0.0.0", port=8000, log_level='info') Note This post is a thought [6]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://github.com/sysid/sse-starlette [2]: /fastapi/ [3]: /htmx/ [4]: #installation [5]: #usage [6]: /thoughts/

overflow - Layout Utilities for controlling how an element handles content that is too large for the container. tailwindcss.com [1] Controlling overflow with tailwindcss Examples # [2] <div class="overflow-visible ..."></div> <div class="overflow-hidden ..."></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://tailwindcss.com/docs/overflow [2]: #examples [3]: /thoughts/

[1] Default scrollbars on a dark theme website are just the ugliest thing. This page covers all the pseudo selectors needed to style the scrollbar. /* width */ ::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { background: #f1f1f1; } /* Handle */ ::-webkit-scrollbar-thumb { background: #888; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #555; } Note This post is a thought [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: /static/https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp [2]: /thoughts/

Change Autocomplete Styles in WebKit Browsers | CSS-Tricks We got a nice tip from Lydia Dugger via email with a method for changing the styles that WebKit browsers apply to form fields that have been autocompleted. CSS-Tricks · css-tricks.com [1] All the hover, select, autofil, focus combinations have left me confused on how to consistently get my form elements styled in dark mode This snippet from CSS tricks has fixed all the different states for me to give me full control. /* Change Autocomplete styles in Chrome*/ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { border: 1px solid green; -webkit-text-fill-color: green; -webkit-box-shadow: 0 0 0px 1000px #000 inset; transition: background-color 5000s ease-in-out 0s; } 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://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/ [2]: /thoughts/

GitHub - florimondmanca/arel: Lightweight browser hot reload for Python ASGI web apps Lightweight browser hot reload for Python ASGI web apps - florimondmanca/arel GitHub · github.com [1] arel is a “Lightweight browser hot reload for Python ASGI web apps” I just implemented this on my thoughts website using fastapi [2], and it’s incredibly fast and lightweight. There just two lines of js that make a web socket connection back to the backend that watches for changes. When in development mode, this snippet gets injected directly on the page and does a refresh when arel detects a change. const ws = new WebSocket("ws://localhost:5000/hot-reload"); ws.onmessage = () => window.location.reload(); 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://github.com/florimondmanca/arel [2]: /fastapi/ [3]: /thoughts/

main.py [1] python import os import arel from fastapi import FastAPI, Request from fastapi.templating import Jinja2Templates app = FastAPI() templates = Jinja2Templates("templates") if _debug := os.getenv("DEBUG"): hot_reload = arel.HotReload(paths=[arel.Path(".")]) app.add_websocket_route("/hot-reload", route=hot_reload, name="hot-reload") app.add_event_handler("startup", hot_reload.startup) app.add_event_handler("shutdown", hot_reload.shutdown) templates.env.globals["DEBUG"] = _debug templates.env.globals["hot_reload"] = hot_reload @app.get("/") def index(request: Request): return templates.TemplateResponse("index.html", context={"request": request}) # run: # DEBUG=true uvicorn main:app --reload I just discovered arel [2] for hot reloading python applications when content changes from this snippet that implements it for fatapi. On app startup add the /hot-reload routes if in DEBUG mode. import os import arel from fastapi import FastAPI, Request from fastapi.templating import Jinja2Templates app = FastAPI() templates = Jinja2Templates("templates") if _debug := os.getenv("DEBUG"): hot_reload = arel.HotReload(paths=[arel.Path(".")]) app.add_websocket_route("...