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>
Publishing rhythm
I recently updated ollama [1], and it now installs a systemd
service that I was not expecting. Seems like a great option, but I hadn’t
expeted this and I was able to kill it previously. It was using up gpu, and I
do other things on my machine with a gpu. I tried pkill, kill, and everything,
it was still coming back.
No matter what it comes back
# stop it
systemctl stop ollama.service
# disable it if you want
systemctl disable ollama.service
# confirm its status
systemctl status ollama.service
You can confirm this with the following command.
# checking running processes
ps aux | grep ollama
pgrep ollama
# checking gpu processes
gpustat --show-cmd --show-pid
Next time you want to start you can do it as before with ollama serve.
References:
[1]: https://ollama.com/
-
I found this statement quite intriguing.
multi-cursors are just macros.
This is quite a philisophical video and mostly prime talking about the things that make vim vim, and what prime needs in and editor vs what he can live without.
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/
Typer makes it easy to compose your cli applications, like you might with a web
router if you are more familiar with that. This allows you to build smaller
applications that compose into a larger application.
You will see similar patterns in the wild, namely the aws cli which always
has the aws <command> <subcommand> pattern.
Lets setup the cli app itself first. You can put it in project/cli/cli.py.
import typer
from project.cli.api import api_app
from project.cli.config import config_app
from project.cli.user import user_app
from project.cli.run import run_app
app = typer.Typer()
app.add_typer(api_app, name="api")
app.add_typer(config_app, name="config")
app.add_typer(user_app, name="user")
app.add_typer(run_app, name="run")
Creating an app that will become a command is the same as creating a regular
app in Typer. We need to create a callback that will become our command, and a
command that will become our subcommand in the parent app.
import typer
from rich.console import Console
from project.config import get_config
config_app = typer.Typer()
@config_app.callback()
def config():
"model cli"
@config_app.command()
def show(
):
project_config = get_config(env)
Cons...
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
Use an llm to automagically generate meaningful git commit messages
I
harper.blog [1]
This is pretty sick, I wanted this early on when I was making lockhart. I wanted to do the git [2] hook thing but could not figure it out and did not know that prepare-commit-msg was a hook that I could use.
Git Hooked
Then I remembered! Git hooks! Lol. Why would I have that in my brain - who knows!
I asked claude again, and they whipped up a simple script that would act as a hook that triggers with the prepare-commit-msg event.
This is awesome, cuz if you want to add a git message, you can skip the hook. But if you are lazy, you exclude the message and it will call the LLM.
Simon Willison’s llm cli comes in clutch here, it has such a good intereface to allow a prompt to be piped in, but the system prompt be set by -s.
gpt = "!f() { git diff $1 | llm -s \"$(cat ~/.config/prompts/commit-system-prompt.txt)\" }; f"
I love hacking on projects, but often I am super bad at making commits that make sense.
I completely relate to this statement, and this is why I am trying it.
Note
This post is a thought [3]. It’s a short note that I make
about someone else’s content online #thoughts
Refere...
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_...