Published

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/

Before deploying to cloudflare pages with wrangler you need a cloudflare api token. You can get one at dash.cloudflare.com/profile/api-tokens [1]. [2] Install Wrangler # [3] Next install wrangler using npm. npm i -g wrangler Create a Project # [4] Before you deploy to cloudflare pages you need to create a project. You might already have one, or you might want to create one in the webui, but you have the option to create it at the command line with wrangler. npx wrangler pages deploy markout --project-name reader-waylonwalker-com --branch markout Deploy # [5] Now you can deploy your static application using wrangler to cloudflare pages. In this example I have my application built into the markout directory, and since the production branch is named markout I need to pass that in here as well. wrangler pages deploy markout --project-name reader-waylonwalker-com --branch markout References: [1]: https://dash.cloudflare.com/profile/api-tokens [2]: https://dropper.waylonwalker.com/api/file/7b566e55-98ff-4d96-b0bc-3c4e5b619d68.png [3]: #install-wrangler [4]: #create-a-project [5]: #deploy

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/

For my reader app I am using cronjobs to schedule my a new build and upload to cloudflare pages every hour. In this example I have built a docker image docker.io/waylonwalker/reader-waylonwalker-com and pushed it to dockerhub. It uses a CLOUDFLARE_API_TOKEN secret to access cloudflare, and the entrypoint itself does the build and upload. apiVersion: v1 kind: Namespace metadata: creationTimestamp: null name: reader namespace: reader --- apiVersion: batch/v1 kind: CronJob metadata: name: reader-cronjob namespace: reader spec: schedule: "0 * * * *" successfulJobsHistoryLimit: 6 failedJobsHistoryLimit: 6 jobTemplate: spec: template: spec: containers: - name: reader-container image: docker.io/waylonwalker/reader-waylonwalker-com:latest env: - name: CLOUDFLARE_API_TOKEN valueFrom: secretKeyRef: name: cloudflare-secret key: cloudflare-secret restartPolicy: OnFailure

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

Looking for inspiration? DigitalHarbor [1] by DigitalHarbor7 [2]. No description available. References: [1]: https://github.com/DigitalHarbor7/DigitalHarbor [2]: https://github.com/DigitalHarbor7

I’m really excited about fastapi-observability [1], an amazing project by blueswen [2]. It’s worth exploring! Observe FastAPI [3] app with three pillars of observability: Traces (Tempo), Metrics (Prometheus), Logs (Loki) on Grafana through OpenTelemetry and OpenMetrics. References: [1]: https://github.com/blueswen/fastapi-observability [2]: https://github.com/blueswen [3]: /fastapi/

I am working on a page for htmx-patterns [1] and I ran into a situation with lots of duplication. Especially when i am using tailwind I run into situations where the duplication can get tedious to maintiain. The solution I found is macros. Now I can use the same code for all of my links, and call the macro to use it. {% macro link(id, text, boosted=false) -%} <a class=" {% if id is none %} pointer-events-none bg-terminal-950 text-terminal-900 ring-terminal-900 {% else %} bg-terminal-950 hover:bg-terminal-900 hover:text-terminal-400 text-terminal-500 shadow-lg shadow-terminal-300/20 hover:shadow-terminal-300/30 ring-terminal-300 {% endif %} cursor-pointer block text-center font-bold py-2 px-4 rounded w-full ring-1 " {% if id is not none %} href="{{ url_for('boosted', id=id) }}" {% endif %} {% if boosted %} hx-boost="true" {% endif %}> {{ text }} </a> {%- endmacro %} <h2 class='text-3xl font-light mt-0 max-w-xl text-center prose-xl mt-8 text-terminal-500'> Boosted Links </h2> <div class='flex flex-row gap-4'> {{ link(prev_id, 'Previous', boosted=True) }} {{ link(next_id, 'Next', boosted=True) }} </div> <h2 class='text-3xl font-light mt-0 max-w-xl text-center...

If you’re into interesting projects, don’t miss out on taipy [1], created by Avaiga [2]. Turns Data and AI algorithms into production-ready web applications in no time. References: [1]: https://github.com/Avaiga/taipy [2]: https://github.com/Avaiga

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/

Out of the box FastAPI [1].">Starlette does not support url_for with query params. When trying to use url_for with query params it throws the following error. starlette.routing.NoMatchFound: No route exists for name "infinite" and params "page" In my searching for this I found starlette issue #560 [2] quite helpful, but not complete, as it did not work for me. import jinja2 if hasattr(jinja2, "pass_context"): pass_context = jinja2.pass_context else: pass_context = jinja2.contextfunction @pass_context def url_for_query(context: dict, name: str, **params: dict) -> str: request = context["request"] url = str(request.url_for(name)) if params == {}: return url from urllib.parse import parse_qs, urlencode, urlparse, urlunparse # Parse the URL parsed_url = urlparse(url) # Parse the query parameters query_params = parse_qs(parsed_url.query) # Update the query parameters with the new ones query_params.update(params) # Rebuild the query string updated_query_string = urlencode(query_params, doseq=True) # Rebuild the URL with the updated query string updated_url = urlunparse( ( parsed_url.scheme, parsed_url.netloc, parsed_url.path, parsed_url.params, updated_...

Kind (Kubernetes in Docker) is a tool that makes it easy to create and tear down local clusters quickly. I like to use it to test out new workflows. Argocd is a continuous delivery tool that makes it easy to setup gitops workflows in kubernetes. Here is how you can setup a new kind cluster and install argocd into it using helm, the kubernetes package manager. kind create cluster --name argocd # your first time through you need to add the argocd repo helm repo add argo https://argoproj.github.io/argo-helm helm repo update # install argocd into the cluster helm install argo argo/argo-cd --namespace argocd --create-namespace # deploy the app of apps kubectl apply -f apps/apps.yaml If you want to add repos and apps to your cluster you can use the argo cli to do that, but first you will need forward the argocd port and login. # Wait until Argo CD API server is available echo "Waiting for Argo CD API server to be available..." while ! kubectl wait --for=condition=available --timeout=60s deployment/argo-argocd-server -n argocd; do echo "Waiting for Argo CD API server to be ready..." sleep 10 done kubectl port-forward svc/argo-argocd-server -n argocd 8080:443 & argocd_admin_pa...

External Link dotesports.com [1] Damn this button had me stuck for way too long. It definitely looks like a button once I see it, but I don’t recall coming into contact with many buttons in the game, I tried to set it ablaze, pull it, fly it, nothing. 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://dotesports.com/hp/news/hogwarts-legacy-argyllshire-map-what-does-the-button-do [2]: /thoughts/

How can I add my YouTube videos via RSS? You can share your videos or other people SocialBee Help Documentation · help.socialbee.com [1] YouTube makes finding rss feeds way too hard. Hats off to them for still supporting it, allowing you to find content outside the algorithm, and consuming content you asked for. But i had no idea you had to search the source code to get it. 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://help.socialbee.com/article/129-how-can-i-add-my-youtube-videos-via-rss [2]: /thoughts/

External Link stackoverflow.com [1] Another interesting option for slow count queries in sqlite. If you haven’t DELETEd any records, doing: SELECT MAX(ROWID) FROM "table" LIMIT 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://stackoverflow.com/questions/8988915/sqlite-count-slow-on-big-tables [2]: /thoughts/