Posts tagged: dev

![[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("...

External Link X (formerly Twitter) · twitter.com [1] HATEOAS gonna hate. More and more htmx [2] seems like the js library for backend devs. So rather than making 55 rest calls here, just make an endpoint that does what you want it to do with one, or a few requests. 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/teej_dv/status/1708258701008593173 [2]: /htmx/ [3]: /thoughts/

Pagefind Pagefind is a fully static search library that aims to perform well on large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure. Pagefind · pagefind.app [1] Pagefind is absolutely insane. I’ve tried a number of static site searches, and found them all hard to get get going, clunky and not the best experience as a user or developer. I setup pagefind in about 2 minutes on my site where it found and indexed 833 pages in 2 minutes. The only downside I see so far is that it is a lot of bandwidth to the user. On simulated slow 3G you can definitly feel it, but not terrible. Anything slower and its going to start feeling frustrating. edit: I have actually fully deployed it on waylonwalker.com, and its fast! create the index npx -y pagefind --site public --serve Then I put this on a page, it looks really nice on a white background, but would need some work to drop into a dark theme. <link href="/pagefind/pagefind-ui.css" rel="stylesheet"> <script src="/pagefind/pagefind-ui.js"></script> <div id="search"></div> <script> window.addEventListener('DOMContentLoaded', (event) => { new PagefindUI({ element: "#search", s...

GitHub - aca/emmet-ls: Emmet support based on LSP. Emmet support based on LSP. Contribute to aca/emmet-ls development by creating an account on GitHub. GitHub · github.com [1] This is the greatest nvim emmet plugin I have tried. In the past I had tried the vim plugin a few times and just could not get a good flow with the keybindings and found it confusing for my occasional use. emmet-ls just uses lsp-completion, so its the same flow as other completions. You can try it out by installing with :Mason config # [2] local lspconfig = require('lspconfig') local configs = require('lspconfig/configs') local capabilities = vim.lsp.protocol.make_client_capabilities() capabilities.textDocument.completion.completionItem.snippetSupport = true lspconfig.emmet_ls.setup({ -- on_attach = on_attach, capabilities = capabilities, filetypes = { "css", "eruby", "html", "javascript", "javascriptreact", "less", "sass", "scss", "svelte", "pug", "typescriptreact", "vue" }, init_options = { html = { options = { -- For possible options, see: https://github.com/emmetio/emmet/blob/master/src/config.ts#L79-L267 ["bem.enabled"] = true, }, }, } }) Note This post is a thought [3]. It’s a sho...

Formatter How to use the Biome formatter. Biome · biomejs.dev [1] Tried out biome today and it worked better than prettier on jinja templates, I might adopt this over prettier. 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://biomejs.dev/formatter/ [2]: /thoughts/

htmx ~ The disable-element 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... v1.htmx.org [1] An extension to disable elements during flight of an htmx [2] request, Looks super useful for things like a create or delete button where the server would end up with an error if you double delete or double create. This eliminates an error path that the user might see under normal use of the ui. 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://v1.htmx.org/extensions/disable-element/ [2]: /htmx/ [3]: /thoughts/

htmx ~ hx-indicator Attribute The hx-indicator attribute in htmx allows you to specify the element that will have the `htmx-request` class added to it for the duration of the request. This can be used to show spinners or progre... htmx.org [1] The htmx-request class is added to htmx-target elements. You can target this css selector to create loading state throbbers. By default the target element will the self, but you can use the typical htmx [2] css selector to select which element will recieve the htmx-request class while the request is running. The only way to override the name of the class is through config. 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/attributes/hx-indicator/ [2]: /htmx/ [3]: /thoughts/

- Prime concisely made sense of why htmx is so awesome compared to what has become modern reactive web dev in 2 minutes. I had never thought of it this way and it’s incredible. One thing I have comepletely missed out on with my use of htmx is setting the disabled state while the server is working, what a genius move! 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/

htmx ~ Examples ~ Updating Other Content 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] Three ways to support updating other content. Fantastic article walking through the different ways to update other parts of the screen using htmx [2]. In htmx there is no 2 way data binding, the dom is your state, and if you have elements derived from the same data on the screen in different places you need to think about how to keep them in sync. 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/examples/update-other-content/ [2]: /htmx/ [3]: /thoughts/

Bigger Applications - Multiple Files - FastAPI FastAPI framework, high performance, easy to learn, fast to code, ready for production fastapi.tiangolo.com [1] Fastapi [2] lets you tag your APIRouter’s so that the swagger docs are grouped according to the router. router = APIRouter(tags=['router']) Now all routes in router will appear in the router group in the swagger docs. 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/bigger-applications/#another-module-with-apirouter [2]: /fastapi/ [3]: /thoughts/

[1] Tailwind css component library. There are many examples with copy and pastabily with the tailwind classes already setup. 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://preline.co/docs/index.html [2]: /thoughts/