Posts tagged: webdev

The htmx response-targets extension allows me to respond to errors from the backend and do normal htmx swaps.

Load the extension in head

<script src="https://unpkg.com/[email protected]/dist/ext/response-targets.js"></script>

Use the extension on an endpoint that might return a 400.

Small web app to convert html into markdown. Pretty cool idea. I actually want to look into this for reader and see how well it would work. Right now I am just pulling descriptions, but maybe I can pull full web pages, and keep the full intent of the first 200 words or so in the cards.

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.

I learned not to fear the arbitrary size feature of tailwind. While building out reader.waylonwalker.com 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

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.

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.

Its sad that this is not the accepted answer.

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.

This is an interesting problem. I want to make a solution for this on htmx-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.

So cool to see ROX build this over the course of a day.

jinja has a loop variable that is very handy to use with htmx. 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.

Great episode covering a seemingly simple topic. What I really benefitted from was hearing all the different use cases, from logging, debugging, to a/b testing, caching, and auth. I hadn’t even thought of it being applied to a router. I thought of it being applied for an entire application. This seems very useful for things like an admin router, all routes would need to have the admin role to get in.

![[None]]

I’ve been using these decorators to modify the behavior of specific routes. It will do things like 404 admin only routes in a way that looks just like fastapi’s default, or only allow certain roles into the route, or redirect unauthenticated users to login.

After listening to yesterday’s syntaxfm I’m now really thinking about middleware and the benefits it might have. middleware would make it easy to apply things like admin to an entire admin router, so you wont forget it on any one admin route. It will look cleaner as the admin checker is only applied once per router, not once per route.

Huh, so this is just built right into the chrome cli.

![[None]]

jinja’s url_for in fastapi does not account for https by default, there is probably a better way, but this is a way that allows me to configure when I use http vs https.

This is a handy placeholder generator for generating placeholder items like images, and videos.

Great take on low code. I have definitely felt the pressure of being presented low code options, “look it does almost everything you need, and you can do it without code.” Granted there are tons of great low code environments that serve their markets well (things like zapier).

As pointed out here when they fall short rather than being hard, it goes to nearly impossible. As Theo points out here many applications follow an 80/20 rule. 80% of the app is really easy to put together, and takes about 20% of the time, probably less. What no code does is it takes that 80% that is already easy, makes it even easier ( pitches it as faster whether or not that is true ), and makes the last 20% of the project impossibly hard to create and maintain, so you just should have picked a tool that had the capability of doing the whole thing from the start anyways.

html code generated by my jinja templates generally look half garbage because of indents and whitespace all over the place. I just learned about these pesky Whitespace Control characters that can get rid of the whitespace added from templating.

You can also strip whitespace in templates by hand. If you add a minus sign (-) to the start or end of a block (e.g. a For tag), a comment, or a variable expression, the whitespaces before or after that block will be removed:

bunny.net looks like an interesting cloudflare alternative.