Posts tagged: webdev

All posts with the tag "webdev"

188 posts latest post 2026-03-31
Publishing rhythm
Mar 2026 | 2 posts
💭 python 3.x - FastAPI redirection for trailing slash returns no... stackoverflow.com

I am trying to use htmx on a new fastapi 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 #

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,...

...

💭 encodeURIComponent() - JavaScript | MDN developer.mozilla.org

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

Using Django Rest Framework inside react
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({&#34;name&#34;: newName}) }); const content = await rawResponse; console.log(content); getData() } return ( <div className=&#34;App&#34;> { 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;
Getting Started with Django REST framework

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.

To get started lets open up a todo app that I created with django-admin startproject todo.

pip install djangorestframework

Install APP #

Now we need to declare rest_framwork as an INSTALLED_APP.

INSTALLED_APPS = [ ... "rest_framework", ... ]

create the api app #

Next I will create all the files that I need to get the api running.

...

django create superuser

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.

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

trydjango-migration.png

yes I am still running remote on from my chromebook.

...

django disallowed host

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.

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.

Trying out django

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

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

...

Ease into htmx with htmx-get

I recently attended python web conf 2022 and after seeing some incredible presentations on it I am excited to give htmx a try.

Start with some html boilerplate, pop in a script tag to add the htmx.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 {...

...

Automatically Generate a list of Markdown Links in Vim

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.

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 before you wreck something

Something that I have always appreciated form Nick Janetakis 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.

Searchng through the internet I was able to find an article from Vitaly Parnas called

...

Mermaid Highlight

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

style one fill:#BADA55

Grouping Mermaid nodes in Subgraphs

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 #

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 #

It’s also possible to specify subgraphs separate from where you...

Simple Plain Text Diagrams in HTML

Since GitHub started supporting mermaid in their markdown I wanted to take another look at how to implement it on my site, I think it has some very nice opportunities in teaching, documenting, and explaining things.

The docs kinda just jumped right into their mermaid language and really went through that in a lot of depth, and skipped over how to implement it yourself, turns out its pretty simple. You just write mermaid syntax in a div with a class of mermaid on it!

<script src='https://unpkg.com/[email protected]/dist/mermaid.min.js'></script> <div class='mermaid'> graph TD; a --> A A --> B B --> C </div>

You just write mermaid syntax in a div with a class of mermaid on it!

The above gets me this diagram.

...

Using a Python Markdown ast to Find All Paragraphs

In looking for a way to automatically generate descriptions for pages I stumbled into a markdown ast in python. It allows me to go over the markdown page and get only paragraph text. This will ignore headings, blockquotes, and code fences.

import commonmark import frontmatter post = frontmatter.load("post.md") parser = commonmark.Parser() ast = parser.parse(post.content) paragraphs = '' for node in ast.walker(): if node[0].t == "paragraph": paragraphs += " " paragraphs += node[0].first_child.literal

It’s also super fast, previously I was rendering to html and using beautifulsoup to get only the paragraphs. Using the commonmark ast was about 5x faster on my site.

When I originally wrote this post, I did not realize at the time that commonmark duplicates nodes. I still do not understand why, but I have had success duplicating them based on the source position of the node with the snippet below.

Find all Headings with BeautifulSoup

BeautifulSoup is a DOM like library for python. It’s quite useful to manipulate html. Here is an example to find_all html headings. I stole the regex from stack overflow, but who doesn’t.

sample.html

Lets make a sample.html file with the following contents. It mainly has some headings, <h1> and <h2> tags that I want to be able to find.

<!DOCTYPE html> <html lang="en"> <body> <h1>hello</h1> <p>this is a paragraph</p> <h2>second heading</h2> <p>this is also a paragraph</p> <h2>third heading</h2> <p>this is the last paragraph</p> </body> </html>

Get the headings with BeautifulSoup #

Lets import our packages, read in our sample.html using pathlib and find all headings...

...