Posts tagged: dev

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/

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

pytest-subtests unittest subTest() support and subtests fixture PyPI · pypi.org [1] pytest-subtests is a package to register multiple subtests within a similar test function. 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://pypi.org/project/pytest-subtests/ [2]: /thoughts/

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

External Link X (formerly Twitter) · twitter.com [1] 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 [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://twitter.com/chriscoyier/status/1681407724993798144 [2]: /thoughts/

from kedro.pipeline import node node( input="raw", output="int", func=my_func, tags=["one"], )

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;