Posts tagged: dev

htmx ~ The disable-element Extension htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypert... v1.htmx.org [1] An extension to disable elements during flight of an htmx [2] request, Looks super useful for things like a create or delete button where the server would end up with an error if you double delete or double create. This eliminates an error path that the user might see under normal use of the ui. 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://v1.htmx.org/extensions/disable-element/ [2]: /htmx/ [3]: /thoughts/

htmx ~ hx-indicator Attribute The hx-indicator attribute in htmx allows you to specify the element that will have the `htmx-request` class added to it for the duration of the request. This can be used to show spinners or progre... htmx.org [1] The htmx-request class is added to htmx-target elements. You can target this css selector to create loading state throbbers. By default the target element will the self, but you can use the typical htmx [2] css selector to select which element will recieve the htmx-request class while the request is running. The only way to override the name of the class is through config. 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/attributes/hx-indicator/ [2]: /htmx/ [3]: /thoughts/

- Prime concisely made sense of why htmx is so awesome compared to what has become modern reactive web dev in 2 minutes. I had never thought of it this way and it’s incredible. One thing I have comepletely missed out on with my use of htmx is setting the disabled state while the server is working, what a genius move! 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/

htmx ~ Examples ~ Updating Other Content htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypert... htmx.org [1] Three ways to support updating other content. Fantastic article walking through the different ways to update other parts of the screen using htmx [2]. In htmx there is no 2 way data binding, the dom is your state, and if you have elements derived from the same data on the screen in different places you need to think about how to keep them in sync. 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/examples/update-other-content/ [2]: /htmx/ [3]: /thoughts/

Bigger Applications - Multiple Files - FastAPI FastAPI framework, high performance, easy to learn, fast to code, ready for production fastapi.tiangolo.com [1] Fastapi [2] lets you tag your APIRouter’s so that the swagger docs are grouped according to the router. router = APIRouter(tags=['router']) Now all routes in router will appear in the router group in the swagger docs. 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/bigger-applications/#another-module-with-apirouter [2]: /fastapi/ [3]: /thoughts/

[1] Tailwind css component library. There are many examples with copy and pastabily with the tailwind classes already setup. Note This post is a thought [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: /static/https://preline.co/docs/index.html [2]: /thoughts/

Tailwind CSS Cheat Sheet Cheat sheet to learn Tailwind CSS quickly. Browse and search all Tailwind utility classes or CSS properties on one page. nerdcave.com [1] A nice searchable cheatsheet for tailwindcss classes. 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://nerdcave.com/tailwind-cheat-sheet [2]: /thoughts/

GitHub - simonw/shot-scraper: A command-line utility for taking automated screenshots of websites A command-line utility for taking automated screenshots of websites - simonw/shot-scraper GitHub · github.com [1] > A command-line utility for taking automated screenshots of websites Daaaang, this is such an elegantly simple way to get web screenshots with a cli. I was literally up and running with two commands on my arch linux machine (which it warned was unsupported by playwright). pip install shot-scraper # Now install the browser it needs: shot-scraper install shot-scraper waylonwalker.com shot-scraper https://datasette.io/ shot-scraper https://datasette.io/ -h 1280 -w 1920 shot-scraper https://datasette.io/ -h 480 -w 720 shot-scraper shot --selector '#posts' https://thoughts.waylonwalker.com/post/89 Note shot-scraper https://datasette.io/ is a full length screenshot of the entire page. Oh and its pretty dang fast, let alone the setup time, this crushes on startup time in my attempts to use a headless browser in the past. 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://github.com/si...

HTML Over The Wire | Hotwire Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. hotwired.dev [1] An alternative approach to building modern web withhout heavy js and json, but instead html [2] over the wire, keeping the logic in the backend of rails. 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://hotwired.dev/ [2]: /html/ [3]: /thoughts/

Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org [1] A super handy reference to the vuejs lifecycle. [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://vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram [2]: https://vuejs.org/assets/lifecycle.16e4c08e.png [3]: /thoughts/

How to Use HTML to Open a Link in a New Tab Tabs are great, aren't they? They allow the multitasker in all of us to juggle a bunch of online tasks at the same time. Tabs are so common now that, when you click on a link, it's likely it'll ope... freeCodeCamp.org · freecodecamp.org [1] Most of the time when creating links in html [2] you want to maintain the default behavior, as this is what users are going to expect, but sometimes your site behaves such that it does not fit, and it does something unexpected anyways. in this case you might want to make the default behavior to open the link in a new tab rather than relying on users to control click. Use this with restraint as this can make your site feel janky and do things that do not feel natural to the web. <p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p> 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://www.freecodecamp.org/news/how-to-use-html-to-open-link-in-new-tab/ [2]: /html/ [3]: /thoughts/

Create Models with a Many-to-Many Link - SQLModel SQLModel, SQL databases in Python, designed for simplicity, compatibility, and robustness. sqlmodel.tiangolo.com [1] Creating many to many relationships with sqlmodel requires a LinkTable Model. The link model will keep track of the linked id’s between each of the models. [2] from typing import List, Optional from sqlmodel import Field, Relationship, Session, SQLModel, create_engine class HeroTeamLink(SQLModel, table=True): team_id: Optional[int] = Field( default=None, foreign_key="team.id", primary_key=True ) hero_id: Optional[int] = Field( default=None, foreign_key="hero.id", primary_key=True ) class Team(SQLModel, table=True): id: Optional[int] = Field(default=None, primary_key=True) name: str = Field(index=True) headquarters: str heroes: List["Hero"] = Relationship(back_populates="teams", link_model=HeroTeamLink) class Hero(SQLModel, table=True): id: Optional[int] = Field(default=None, primary_key=True) name: str = Field(index=True) secret_name: str age: Optional[int] = Field(default=None, index=True) teams: List[Team] = Relationship(back_populates="heroes", link_model=HeroTeamLink) Note This post...

External Link stackoverflow.com [1] I went down the route of leveraging the json-enc extention in htmx [2], but later realized that this completely breaks browsers/users who do not wish to use javascript. While most of the web would feel quite broken with javascript disabled, I don’t want to contribute to that without good reason. Taking a second look into this issue, rather than using json-enc, and using as_form to get form data into a model keeps the nice DX fo everything being a pydantic model, but the site still works without js. with js htmx kicks in, you get a spa like experience by loading partials onto the page, and without, you just get a full page reload. the implementation # [3] copied from https://stackoverflow.com/questions/60127234/how-to-use-a-pydantic-model-with-form-data-in-fastapi import inspect from typing import Type from fastapi import Form from pydantic import BaseModel from pydantic.fields import ModelField def as_form(cls: Type[BaseModel]): new_parameters = [] for field_name, model_field in cls.__fields__.items(): model_field: ModelField # type: ignore new_parameters.append( inspect.Parameter( model_field.alias, inspect.Parameter.POSITION...

[1] How to enable debug mode in pywebview. import webview webview.create_window('Woah dude!', 'https://pywebview.flowrl.com/hello') webview.start(debug=True) Note This post is a thought [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: /static/https://pywebview.flowrl.com/guide/debugging.html [2]: /thoughts/

API — Jinja Documentation (3.1.x) jinja.palletsprojects.com [1] 🤯 jinja comes with a loader to pre-compile templates! Defihnitely need to look at this for markata, as jinja is till one of the biggest hot spots. 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://jinja.palletsprojects.com/en/3.0.x/api/#jinja2.Environment.compile_templates [2]: /thoughts/

[1] I’ve definitely been missing out on setting up a proper jinja loader on a few projects, I need to lean on this a bit more. class jinja2.FileSystemLoader(searchpath, encoding='utf-8', followlinks=False): ''' Load templates from a directory in the file system. ''' The path can be relative or absolute. Relative paths are relative to the current working directory. loader = FileSystemLoader("templates") # A list of paths can be given. The directories will be searched in order, stopping at the first matching template. loader = FileSystemLoader(["/override/templates", "/default/templates"]) Note This post is a thought [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: /static/https://jinja.palletsprojects.com/en/3.0.x/api/#jinja2.FileSystemLoader [2]: /thoughts/

- Nice intro into tailwind, I definitely started grasping some of the concepts after watching Brad. 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/

Gzip/Brotli Compression Test | GiftOfSpeed Check if Gzip or Brotli compression is working on your website. giftofspeed.com [1] A nice tool to check compression on a public url. 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://www.giftofspeed.com/gzip-test/ [2]: /thoughts/

Reasons to avoid Javascript CDNs Wesley Aptekar-Cassels · blog.wesleyac.com [1] And this is why we don’t run cdn in prod, respect your users who can’t control where the assets are stored. There are so many fast static hosting providers out there, if you are worried about performance reasons use one of those to self host [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://blog.wesleyac.com/posts/why-not-javascript-cdn [2]: /self-host/ [3]: /thoughts/

External Link stackoverflow.com [1] In flask apps I often get a 404 for routes with a trailing slash. This Stack Overflow post shows how to configure flask to allow trailing slashes on some or all routes. 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/33241050/trailing-slash-triggers-404-in-flask-path-rule [2]: /thoughts/