Posts tagged: thought

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/

Custom pages and templates - Datasette documentation docs.datasette.io [1] Datasette has its own static server that can host assets such as style sheets. datasette -m metadata.json --static assets:static-files/ 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://docs.datasette.io/en/stable/custom_templates.html#serving-static-files [2]: /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/

cURL Command Without Using Cache | Baeldung on Linux A quick and practical guide to using curl without cache. Baeldung on Linux · baeldung.com [1] Busting cache with curl. I’m not sure how much gets cached by curl, but I have ran into several cases where I am looking for new content and I want to ensure the content is new and no chance of being cached. This article suggests 3 different techniques. curl -H 'Cache-Control: no-cache, no-store' http://www.example.com curl -H 'Pragma: no-cache' http://www.example.com curl http://www.example.com/?xyzzyspoon 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.baeldung.com/linux/curl-without-cache#adding-the-pragma-http-header [2]: /thoughts/

[1] sqlite has 3 different tokenizers, porter, ascii, trigram. These can be used with sqlite-utils. sqlite-utils enable-fts --tokenize porter database.db post title message tags And with the python api. db = Database('database.db') db["post"].enable_fts( ["title", "message", "tags"], create_triggers=True, tokenize="trigram" ) posts = list(db["post"].search(search)) 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://www.sqlite.org/fts5.html [2]: /thoughts/

GitHub - sharkdp/bat: A cat(1) clone with wings. A cat(1) clone with wings. Contribute to sharkdp/bat development by creating an account on GitHub. GitHub · github.com [1] Bat is my favorite pager, its the one for me that seems to just work more than the rest. colors, syntax highlighting, line numbers search, it just feels the most natural. 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/sharkdp/bat [2]: /thoughts/

sqlite_utils Python library - sqlite-utils sqlite-utils.datasette.io [1] sqlite-utils is primarily a cli tool for sqlite operations such as enabling full text search, and executing searches, but it also has a nice python api that is exposed and pretty straightforward to use. from sqlite_utils import Database db = Database("database.db") db["post"].enable_fts(["title", "message", "tags]) db["post"].search("water") This returns a generator object that you can iterate over the row objects with. 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://sqlite-utils.datasette.io/en/stable/python-api.html#full-text-search [2]: /thoughts/

External Link levelup.gitconnected.com [1] Use prettier to format all files in a directory. By default prettier does not write, it just echos out the format that it would do. Give it the --write and it will write the changes to the files. prettier --write . I just used this on my thoughts repo. prettier --write 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]: https://levelup.gitconnected.com/how-to-format-all-files-in-a-directory-with-prettier-5f0ff5f4ffb2 [2]: /thoughts/

GitHub - simonw/datasette-render-markdown: Datasette plugin for rendering Markdown Datasette plugin for rendering Markdown. Contribute to simonw/datasette-render-markdown development by creating an account on GitHub. GitHub · github.com [1] datasette really does everything doesn’t it! 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/simonw/datasette-render-markdown [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...

shot-scraper: automated screenshots for documentation, built on Playwright shot-scraper is a new tool that I’ve built to help automate the process of keeping screenshots up-to-date in my documentation. It also doubles as a scraping tool—hence the name—which I … Simon Willison’s Weblog · simonwillison.net [1] An interesting way to build automatically annotaatd docs with arrows pointing to elements on a webpage. 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://simonwillison.net/2022/Mar/10/shot-scraper/#a-complex-example [2]: /thoughts/

- I’d never given this much thought, but there are so many guides that are complete guides for beginner workflows, but once you get beyond beginner there is likely no manual for what you are trying to do in programming. There is no guide that will tell you the best way to get your companies salesforce data, alongside of the ERP data and present it to the users who need to know in a way that compels them to make the right decisions. You are going to have to build this out for yourself by piecing together knowledge about each subject. 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/

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/

How do I post form data using Curl? ReqBin is the most popular online API testing tool for REST, SOAP and HTTP APIs. ReqBin · reqbin.com [1] How to pass form data with curl, give it the d. curl -X POST https://reqbin.com/echo/post/form -H "Content-Type: application/x-www-form-urlencoded" -d "param1=value1&param2=value2" 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://reqbin.com/req/c-sma2qrvp/curl-post-form-example [2]: /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/