Posts tagged: webdev

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/

External Link htmx.org [1] json-enc extension converts url encoded form values into json encoded data, this is very useful for fastapi [2] to have the same interface for htmx [3] and curl type of interfaces. Note This post is a thought [4]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://htmx.org/extensions/json-enc/ [2]: /fastapi/ [3]: /htmx/ [4]: /thoughts/

Header Parameters - FastAPI FastAPI framework, high performance, easy to learn, fast to code, ready for production fastapi.tiangolo.com [1] Getting request headers in fastapi [2] has a pretty nice stetup, it allows you to get headers values as function arguments, I was able to use headers to detect if a request was made from htmx [3] or not. If the request was made from htmx, then we want a html [4] format, otherwise I’m probably hitting the api programatically from something like curl or python @post_router.post("/post/") async def post_post( request: Request, post: PostCreate, current_user: Annotated[User, Depends(try_get_current_active_user)], session: Session = Depends(get_session), is_hx_request: Annotated[str | None, Header()] = None, ) -> PostRead: "create a post" print('hx_request', hx_request) db_post = Post.from_orm(post) session.add(db_post) session.commit() session.refresh(db_post) if is_hx_request: return templates.TemplateResponse("post_item.html", {"request": request, "config": config, "post": db_post}) return db_post Note This post is a thought [5]. It’s a short note that I make about someone else’s content online #thoughts References: [1]:...

- Great short explaination of session vs token authentication. 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/

Form Data - FastAPI FastAPI framework, high performance, easy to learn, fast to code, ready for production fastapi.tiangolo.com [1] Getting form data inside of fastapi [2] was not intuitive to me at first. Everything I had used in fastapi leaned on pydantic models. Form data comes in differently and needs collected differently. from typing import Annotated from fastapi import FastAPI, Form app = FastAPI() @app.post("/login/") async def login(username: Annotated[str, Form()], password: Annotated[str, Form()]): return {"username": username} 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/request-forms/#define-form-parameters [2]: /fastapi/ [3]: /thoughts/

Template Designer Documentation — Jinja Documentation (3.1.x) jinja.palletsprojects.com [1] A feature of jinja that I just discovered is including sub templates. Here is an example from the docs. {% include 'header.html' %} Body goes here. {% include 'footer.html' %} And inside of my thoughts project I used it to render posts. <ul id='posts'> {% for post in posts.__root__ %} {% include 'post_item.html' %} {% endfor %} </ul> note that post_item.html [2] automatically inherits the post variable. 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://jinja.palletsprojects.com/en/3.1.x/templates/#include [2]: /html/ [3]: /thoughts/

Templates - FastAPI FastAPI framework, high performance, easy to learn, fast to code, ready for production fastapi.tiangolo.com [1] A guide to add Jinja2Templates to fastapi [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://fastapi.tiangolo.com/advanced/templates/ [2]: /fastapi/ [3]: /thoughts/

htmx ~ Documentation 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] A complete reference of all of the htmx [2] swapping methods. 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/docs/#swapping [2]: /htmx/ [3]: /thoughts/

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

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/