Posts tagged: dev

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

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. graph TD; a --> A A --> B B --> C This feels so quick and easy to start getting some graphs up and running, but does lead to layout shift and extra bytes down the pipe. The best solution in my opionion would be to forgo the js and ship svg. That said, this is do dang convenient I will be using it for some things. import mermaid from '/assets/vendor/mermaid/mermaid.esm.min.mjs'; const rootStyle = getComputedStyle(document.documentElement); const css = (name, fallback) => ...

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 [1] and using beautifulsoup to get only the paragraphs. Using the commonmark ast was about 5x faster on my site. Duplicate Paragraphs # [2] 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. from itertools import compress import commonmark import frontmatter post = frontmatter.load("post.md") parser = commonmark.Parser() ast = parser.parse(post.content) # find all paragraph nodes paragraph_nodes = [ n[0] for n in ast.walker() if n[0...

BeautifulSoup is a DOM like library for python. It’s quite useful to manipulate html [1]. Here is an example to find_all html headings. I stole the regex from stack overflow, but who doesn’t. Make an example # [2] 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 # [3] Lets import our packages, read in our sample.html using pathlib and find all headings using BeautifulSoup. from bs4 import BeautifulSoup from pathlib import Path soup = BeautifulSoup(Path('sample.html').read_text(), features="lxml") headings = soup.find_all(re.compile("^h[1-6]$")) And what we get is a list of bs4.element.Tag’s. >> print(headings) [<h1>hello</h1>, <h2>second heading</h2>, <h2>third heading</h2>] I recently added a heading_link plugin to markata, you might notice the 🔗’s next to each heading on this page, that is powered by this exact techniq...

Today I discovered a sweet new cli for compressing images. squoosh cli [1] is a wasm powered cli that supports a bunch of formats that I would want to convert my website images to. from the future > Unfortunately, due to a few people leaving the team, and staffing issues resulting from the current economic climate (ugh), I’m deprecating the CLI and libsquoosh parts of Squoosh. The web app will continue to be supported and improved. I know that sucks, but there simply isn’t the time & people to work on this. If anyone from the community wants to fork it, you have my blessing. https://github.com/GoogleChromeLabs/squoosh/pull/1321 Web App # [2] First the main feature of squoosh is a web app [3] that makes your images smaller right in the browser, using the same wasm. It’s sweet! There is a really cool swiper to compare the output image with the original, and graphical dials to change your settings. CLI # [4] What is even cooler is that once you have settings you are happy with and are really cutting down those kb’s on your images, there is a copy cli command button! If you have npx (which you should if you have nodejs and npm) already installed it just works without instal...