External Link
stackoverflow.com [1]
I am trying to use htmx [2] on a new fastapi [3] site for my thoughts, and have been hitting this error.
Mixed Content: The page at 'https://front.mydomain.com/#/clients/1' was loaded over HTTPS, but requested an insecure resource 'http://back.mydomain/jobs/?_end=25&_order=DESC&_sort=id&_start=0&client_id=1'. This request has been blocked; the content must be served over HTTPS.
What is happening # [4]
I have an htmx component that gets the current users name, but if they are not logged in the backend redirects to a login form.
<div hx-get='/users/me' hx-trigger='load'>
get me
</div>
But for some reason when the front end gets this redirect, it tries to do it through http, and flags it as insecure.
The solution # [5]
To solve this issue, the post directs to set the --forwarded-allow-ips to ‘*’
uvicorn thoughts.api.app:app --port 5000 --reload --log-level info --host 0.0.0.0 --workers 1 --forwarded-allow-ips '*'
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://stackoverflow.com/questions/63511413/fastapi-redirection-for-trailing-slash-returns-non-s...
Posts tagged: webdev
All posts with the tag "webdev"
212 posts
latest post 2026-06-01
Publishing rhythm
External Link
htmx.org [1]
Using templates with htmx [2] requires the client-side-templates extension, and the template engine to be loaded in a <script> tag.
example htmx using templates.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://unpkg.com/htmx.org"></script>
<script src="https://unpkg.com/htmx.org/dist/ext/client-side-templates.js"></script>
<script src="https://unpkg.com/mustache@latest"></script>
</head>
<body>
<div hx-ext="client-side-templates">
<button hx-get="https://jsonplaceholder.typicode.com/todos/1"
hx-swap="innerHTML"
hx-target="#content"
mustache-template="foo">
Click Me
</button>
<p id="content">Start</p>
<template id="foo">
<p> {% raw %}{{userID}}{% endraw %} and {% raw %}{{id}}{% endraw %} and {% raw %}{{title}}{% endraw %} and {% raw %}{{completed}}{% endraw %}</p>
</template>
</div>
</body>
</html>
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/extensions/client-side-templates/
[2]: /htmx/
[3]: /thoughts/
Static Files - FastAPI
FastAPI framework, high performance, easy to learn, fast to code, ready for production
fastapi.tiangolo.com [1]
Mounting static files in fastapi [2].
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")
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/static-files/
[2]: /fastapi/
[3]: /thoughts/
- #javascript" playlabel="Play: HTMX looks pretty neat #coding #javascript [2]">
Love the poling example with hx-trigger=‘every 1s’.
Note
This post is a thought [3]. It’s a short note that I make
about someone else’s content online #thoughts
References:
[1]: /htmx/
[2]: /tags/javascript/
[3]: /thoughts/
First-class session support in FastAPI · Issue #754 · fastapi/fastapi
Is your feature request related to a problem All of the security schemas currently supported by FastAPI rely on some sort of "client-server synergy" , where, for instance, the client is expected to...
GitHub · github.com [1]
Here is a snippet provided by @tiangolo to store the users jwt inside of a session cookie in fatapi. This was written in feb 12, 2020 and admits that this is not a well documented part of fastapi [2].
It’s already in place. More or less like the rest of the security tools. And it’s compatible with the rest of the parts, integrated with OpenAPI (as possible), but probably most importantly, with dependencies.
It’s just not properly documented yet. 😞
But still, it works 🚀 e.g.
from fastapi import FastAPI, Form, HTTPException, Depends
from fastapi.security import APIKeyCookie
from starlette.responses import Response, HTMLResponse
from starlette import status
from jose import jwt
app = FastAPI()
cookie_sec = APIKeyCookie(name="session")
secret_key = "someactualsecret"
users = {"dmontagu": {"password": "secret1"}, "tiangolo": {"password": "secret2"}}
def get_current_user(session: str...
A nice codepen reference for dark forms. I am using it for my thoughts chrome extension.
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/
Filter Data - WHERE - SQLModel
SQLModel, SQL databases in Python, designed for simplicity, compatibility, and robustness.
sqlmodel.tiangolo.com [1]
When fetching pydantic models from the database with sqlmodel, and you cannot select your item by id, you probably need to use a where clause. This is the sqlmodel way of doing it.
Here is a snippet of how I am using sqlmodel select and where to find a post by link in my thoughts database.
@post_router.get("/link/")
async def get_post_by_link(
*,
session: Session = Depends(get_session),
link: str,
) -> PostRead:
"get one post by link"
link = urllib.parse.unquote(link)
print(f'link: {link}')
post = session.exec(select(Post).where(Post.link==link)).first()
if not post:
raise HTTPException(status_code=404, detail=f"Post not found for link: {link}")
return post
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://sqlmodel.tiangolo.com/tutorial/where/#filter-rows-using-where-with-sqlmodel
[2]: /thoughts/
URL Decoding query strings or form parameters in Python | URLDecoder
URL Decode online. URLDecoder is a simple and easy to use online tool for decoding URL components. Get started by typing or pasting a URL encoded string in the input text area, the tool will automa...
urldecoder.io [1]
In order to turn url encoded links back into links that I would find in the database of my thoughts project I need to urldecode them when they hit the api. When anything hits the api it must urlencode the links in order for them to be sent correctly as data and not get parsed as part of the url.
Here is a snippet of how I am using urlib.parse.unquote to un-encode encoded urls so that I can fetch posts from the database.
@post_router.get("/link/")
async def get_post_by_link(
*,
session: Session = Depends(get_session),
link: str,
) -> PostRead:
"get one post by link"
link = urllib.parse.unquote(link)
print(f'link: {link}')
post = session.exec(select(Post).where(Post.link==link)).first()
if not post:
raise HTTPException(status_code=404, detail=f"Post not found for link: {link}")
return post
Note
This post is a thought [2]. It’s a short note that I make
about someone else’s content ...
encodeURIComponent() - JavaScript | MDN
The encodeURIComponent() function encodes a URI by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will ...
MDN Web Docs · developer.mozilla.org [1]
In order to send data that includes special characters such as / in a url you need to url encode it. You have probably seen these many times in urls with things like %20 for spaces.
I’m working on a chrome extension to make quick blog posts, like thoughts or a persistent bookmark tool with comments. The backend is written in fastapi [2] and when I check to see if I have a post for a page I need to url encode it.
curl -X 'GET' \
'https://thoughts.waylonwalker.com/link/?link=https%3A%2F%2Fhtmx.org%2Fextensions%2Fclient-side-templates%2F' \
-H 'accept: application/json'
curl example generated from the fastapi swagger docs.
Here is how I used javascript’s encodeURIComponent to turn my chrome extension into a notification when I already have a post for the current page.
// Event listener for tab changes
chrome.tabs.onActivated.addListener(function (activeInfo) {
// Get the active tab information
...
[1]@chriscoyier [1]) on X — I was unaware of `text-wrap: pretty;`
I knew about the (new/cool) text-wrap: balance; — but sometimes that's a bit… too much. I feel like it's nice on headers but not smaller type.
Here's what I mean." loading=“lazy”>
Chris Coyier (@chriscoyier [2]) on X
I was unaware of text-wrap: pretty;
I knew about the (new/cool) text-wrap: balance; — but sometimes that's a bit… too much. I feel like it's nice on headers but not smaller type.
Here's w…
X (formerly Twitter) · twitter.com
Next time I’m working with large headers on small screens I need to try this. I always truggle to get them to look good for most text and overflow ridiculously long words correctly or at all.
text-wrap: pretty;
text-wrap: balance
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/chriscoyier/status/1681407724993798144
[2]: https://chriscoyier.net
[3]: /thoughts/
npx create-react-app todoreact
import React,{useState,useEffect} from 'react';
import './App.css';
function App() {
const [data,setData]=useState([]);
const [newName,setNewName]=useState([]);
const getData=()=>{
fetch('/api'
,{
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
}
)
.then(function(response){
return response.json();
})
.then(function(myJson) {
setData(myJson)
});
}
useEffect(()=>{
getData()
},[])
const addItem= async () => {
const rawResponse = await fetch('/api/add/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({"name": newName})
});
const content = await rawResponse;
console.log(content);
getData()
}
return (
<div className="App">
{
data && data.length>0 && data.map((item)=><p>{item.id}{item.priority}{item.name}<button>raise priority</button></p>)
}
<input type='text' value={newName} onChange={(e) => (setNewName(e.target.value))} />
<button onClick={addItem} >add item</button>
</div>
);
}
export default App;
In my adventure to learn django, I want to be able to setup REST api’s to feed
into dynamic front end sites. Potentially sites running react under the hood.
[1]
Install # [2]
To get started lets open up a todo app that I created with django-admin startproject todo.
pip install djangorestframework
Install APP # [3]
Now we need to declare rest_framwork as an INSTALLED_APP.
INSTALLED_APPS = [
...
"rest_framework",
...
]
create the api app # [4]
Next I will create all the files that I need to get the api running.
mkdir api
touch api/__init__.py api/serializers.py api/urls.py api/views.py
[5]
base/models.py # [6]
I already have the following model from last time I was playing with django. It
will suffice as it is not the focus of what I am learning for now.
Note the name of the model class is singular, this is becuase django will
automatically pluralize it in places like the admin panel, and you would end
up with Itemss.
from django.db import models
# Create your models here.
class Item(models.Model):
name = models.CharField(max_length=200)
created = models.DateTimeField(auto_now_add=True)
def __str__(self):
return f"{self.priority} {self.name}"
Next I will m...
[1]
References:
[1]: https://dropper.waylonwalker.com/api/file/388f4342-8623-4ac7-9b4b-1d63cd82d2ad.png
My next step into django made me realize that I do not have access to the admin panel, turns out that I need to create a cuper user first.
[1]
Run Migrations # [2]
Right away when trying to setup the superuser I ran into this issue
django.db.utils.OperationalError: no such table: auth_user
Back to the tutorial [3]
tells me that I need to run migrations to setup some tables for the
INSTALLED_APPS, django.contrib.admin being one of them.
python manage.py migrate
[4]
yes I am still running remote on from my chromebook.
python manage.py createsuperuser
[5]
The super user has been created.
[6]
CSRF FAILURE # [7]
My next issue trying to run off of a separate domain was a cross site request
forgery error.
Since this is a valid domain that we are hosting the app from we need to tell
Django that this is safe. We can do this again in the settings.py, but this
time the variable we need is not there out of the box and we need to add it.
CSRF_TRUSTED_ORIGINS = ['https://localhost.waylonwalker.com']
I made it!! # [8]
And we are in, and welcomed for the first time with this django admin panel.
[9]
Remote Hosting # [10]
You might find these settings helpful as well if yo...
I am continuing my journey into django, but today I am not at my workstation. I
am ssh’d in remotely from a chromebook. I am fully outside of my network, so I
can’t access it by localhost, or it’s ip. I do have cloudflared tunnel
installed and dns setup to a localhost.waylonwalker.com.
Settings # [1]
I found this in settings.py and yolo, it worked first try. I am in from my
remote location, and even have auth taken care of thanks to cloudflare. I am
really hoping to learn how to setup my own auth with django as this is one of
the things that I could really use in my toolbelt.
ALLOWED_HOSTS = ['localhost.waylonwalker.com']
[2]
References:
[1]: #settings
[2]: https://stable-diffusion.waylonwalker.com/000321.3422093952.webp
I have no experience in django, and in my exploration to become a better python
developer I am dipping my toe into one of the most polished and widely used web
frameworks Django to so that I can better understand it and become a better
python developer.
If you found this at all helpful make sure you check out the django tutorial [1]
[2]
install django # [3]
The first thing I need to do is render out a template to start the project.
For this I need the django-admin cli. To get this I am going the route of
pipx it will be installed globally on my system in it’s own virtual
environment that I don’t have to manage. This will be useful only for using
startproject as far as I know.
pipx install django
django-admin startproject try_django
cd try_django
[4]
Make a venv # [5]
Once I have the project I need a venv for all of django and all of my
dependencies I might need for the project. I have really been diggin hatch
lately, and it has a one line “make a virtual environment [6] and manage it for
me” command.
hatch shell
[7]
If hatch is a bit bleeding edge for you, or it has died out by the time you
read this. The ol trusty venv will likely stand the test of time, this is w...
I recently attended
python web conf 2022 [1]
and after seeing some incredible presentations on it I am excited to
give htmx [2] a try.
The base page # [3]
Start with some html [4] boilerplate, pop in a script tag to add the
htmx [5].org script, and a button that says click me. I added just a tish
of style so that it does not sear your delicate developer your eyes.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html { background: #1f2022; color: #eefbfe; font-size: 64px; }
button {font-size: 64px;}
body { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items:center; }
</style>
<!-- Load from unpkg -->
<script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
<!-- have a button POST a click via AJAX -->
<button hx-get="/partial" hx-swap="outerHTML">
Click Me
</button>
</body>
</html>
Save this as index.html and fire up a webserver and you will be
presented with this big beefcake of a button.
[6]
If you don’t have a development server preference I reccomend opening
the terminal and running python -m http.serve...
Let’s make a vim command to automatically collect all the links in these
posts at the end of each article. Regex confuses the heck out of me…
I don’t have my regex liscense, but
regex can be so darn powerful especially in an editor.
Step one # [1]
Before you run someone’s regex from the internet that you don’t fully
understand, check your git status and make sure you are all clear with
git [2] before you wreck something
Inspiration # [3]
Something that I have always appreciated form
Nick Janetakis [4] is his links section. I
often try to gather up the links at the end of my posts, but often end
up not doing it or forgetting.
Making a Links section # [5]
Searchng through the internet I was able to find an article from
Vitaly Parnas called
vim ref links [6] that did
almost exactly what I needed, except it was more complicated and made
them into ref liks.
Here is my interpretation of the code I took from Vitaly’s post. It
makes a Links section like the one at the bottom of this post.
function! MdLinks()
$norm o## Links
$norm o
g/\[[^\]]\+\]([^)]\+)/t$
silent! '^,$s/\v[^\[]*(\[[^\]]+\])\(([^)]+)\)[^\[]*/* \1(\2)/g
nohl
endfunction
command! MdLinks call MdLinks()
So far ...
Mermaid gives us a way to style nodes through the use of css, but rather than
using normal css selectors we need to use style <nodeid>. This also applies
to subgraphs, and we can use the name of the subgraph in place of the nodeid.
graph TD;
a --> A
A --> B
B --> C
style A fill:#f9f,stroke:#333,stroke-width:4px
style B fill:#f9f,stroke:#333,stroke-width:4px
subgraph one
a
end
style one fill:#BADA55
produces the following graph
graph TD;
a --> A
A --> B
B --> C
style A fill:#f9f,stroke:#333,stroke-width:4px
style B fill:#f9f,stroke:#333,stroke-width:4px
subgraph one
a
end
style one fill:#BADA55
import mermaid from '/assets/vendor/mermaid/mermaid.esm.min.mjs';
const rootStyle = getComputedStyle(document.documentElement);
const css = (name, fallback) => (rootStyle.getPropertyValue(name) || fallback).trim();
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches ||
document.documentElement.dataset.theme === 'dark';
const accent = css('--color-primary', '#ffcd11');
const flowchart = {
nodeSpacing: 60,
rankSpacing: 90,
padding: 12,
};
const themeCSS = `
.label foreignObject > div { padding: 14px 14px 10px; line-height: 1.2; }
.nodeLabel ...
Mermaid provides some really great ways to group or fence in parts of your
graphs through the use of subgraphs.
Here we can model some sort of data ingest with some raw iot device and our
warehouse in different groups.
graph TD;
subgraph raw_iot
a
end
subgraph warehouse
A --> B
B --> C
end
graph TD;
subgraph raw_iot
a
end
subgraph warehouse
A --> B
B --> C
end
connecting subgroups # [1]
If we want to connect them, we can make a connection between a and A outside of
the subgraphs.
graph TD;
subgraph raw_iot
a
end
a --> A
subgraph warehouse
A --> B
B --> C
end
graph TD;
subgraph raw_iot
a
end
a --> A
subgraph warehouse
A --> B
B --> C
end
separation of concerns # [2]
It’s also possible to specify subgraphs separate from where you define your
nodes. which allows for some different levels of grouping that would not be
possible if you were to define all your nodes inside of a subgraph.
graph TD;
a --> A
A --> B
B --> C
subgraph one
A
C
end
graph TD;
a --> A
A --> B
B --> C
subgraph warehouse
A
C
end
import mermaid from '/assets/vendor/mermaid/mermaid.esm.min.mjs';
const rootStyle = getComputedStyle(document.documentElement);
co...