[{"_1":2,"_113":-5,"_114":-5},"loaderData",{"_3":4,"_41":42},"root",{"_5":6,"_15":16,"_21":22,"_27":28,"_35":36,"_37":38,"_39":40},"ENV",{"_7":8,"_9":10,"_11":12,"_13":14},"MODE","production","SENTRY_DSN","https://4e34045e065e0a3ef57135ae5020f388@o4506001960468480.ingest.sentry.io/4506001960599552","AMPLITUDE_INIT","12e15cca4c978dad4bb7dc430e747471","CONVERT_KIT_FORM_ID","7241351","requestInfo",{"_17":18},"userPreferences",{"_19":20},"theme","light","newsLetterData",{"_23":24,"_25":26},"newsletterImage","https://res.cloudinary.com/dinypqsgl/image/upload/f_webp/c_scale,h_500,w_500/b_transparent/r_max/v1/blog/me?_a=BATAV5fi0","showNewsLetter",false,"honeypotInputProps",{"_29":30,"_31":32,"_33":34},"nameFieldName","name__confirm","validFromFieldName","from__confirm","encryptedValidFrom","U2FsdGVkX1+eD9WHLFLaJTnpG06hsVKPF+AxulNOAyQ=","sentryTrace","dc6502f8058c41689e6ec222a75b5309-83787f1a3a8d9666-0","sentryBaggage","sentry-environment=production,sentry-public_key=4e34045e065e0a3ef57135ae5020f388,sentry-trace_id=dc6502f8058c41689e6ec222a75b5309,sentry-sample_rate=0.1,sentry-transaction=routes%2Ftags.%24slug,sentry-sampled=false","remixVersion",2,"routes/tags.$slug",{"_43":44,"_97":98,"_111":112},"blogList",[45,81],{"_46":47,"_65":66,"_75":76,"_77":78,"_79":80},"matter",{"_48":49,"_50":51,"_62":63,"_64":26},"content","\n\n\nYou know the drill; start with why! If you don't know of Simon Sinek's TED talk,\nI highly recommend it. It's a great talk that has helped me in many aspects of\nmy life. So, let's start with why I decided to make a terminal user interface\n(TUI) with Go.\n\nThe primary reason I made this TUI was because it aligned with my goals for the\nyear. If you read [my previous blog post](./12-go-htmx-and-lit/), you know that\nI'm devoting 2024 to learning Go and trying my best to channel my inner Gopher.\nMoreover, I wanted to create a project that would be not only helpful to me but\nalso to my colleagues. Since I'm an avid `neovim` user, I'm fortunate to be able\nto use [ChatGPT.nvim](https://github.com/jackMort/ChatGPT.nvim) while I'm\nworking on features. However, my colleagues who use `VSCode` don't have the same\nluxury (yeah yeah, I know they have copilot, but the neovim plugin just hits\ndifferent). Beyond those reasons, the final (some would say superficial) reason\nis that I wanted to make a TUI because I thought it would be fun. AI is the\nlatest buzzword and I wanted to be part of the hype train... so let's go 🚄.\n\n## What did I make?\n\nI made a TUI that allows you to interact with OpenAI's ChatGPT model. The TUI is\nwritten in Go and is therefore `blazingly fast` (cringed as I typed that 😅).\nThe TUI is a simple interface (because, it's Go, we gotta embrace simplicity)\nthat allows you to interact with the your chosen model (it defaults to\n`chatgpt-3.5-turbo`).\n\n\n\nIf you want to try it out yourself, you can find the source code on\n[GitHub](https://github.com/tearingItUp786/chatgpt-tui)! Now, if you're\nwondering what did I use to make this work of art (awh shucks, thanks friend),\nfret not friend, I'll tell you (I mean, you can just check out the repo, but\nI'll tell you here as well 😆).\n\n- [bubbletea](https://github.com/charmbracelet/bubbletea): A Go framework for\n terminal user interfaces. It's a great framework that makes it easy to create\n TUIs in Go.\n- [openai](https://platform.openai.com/docs/api-reference): OpenAI's REST Api\n- [sqlite](https://www.sqlite.org/): A C library that provides a lightweight\n disk-based database that doesn't require a separate server process (perfect\n for terminal apps, in my opinion).\n- [lipgloss](https://github.com/charmbracelet/lipgloss): Style definitions for\n nice terminal layouts!\n- [bubbles](https://github.com/charmbracelet/bubbles): Some general use\n components for Bubble Tea apps!\n\n## The fun parts\n\nBefore I jump into the things that I struggled with (and ultimately learned a\nlot about) while developing this application, I want to cover the things that\ngot me going as I was chugging along with this tui.\n\n### The Elm Architecture\n\nFirst and foremost, I was thrilled to learn more about\n[The Elm Architecture](https://guide.elm-lang.org/architecture/). For those of\nyou who aren't familiar, Elm is a functional programming language that compiles\nto JavaScript -- wild right. The Elm Architecture is a pattern that is used to\nbuild web applications in Elm (duh). In short, there are three parts to the Elm\nArchitecture: `Model`, `View`, and `Update`. The `Model` is the state of the\napplication, the `View` is the way to turn your state into the UI, and the\n`Update` is way to update your state based on messages. You can check out this\nsimple example using the Elm Architecture in Go\non [Github](https://github.com/tearingItUp786/chatgpt-tui/blob/main/cmd/main.go)\n;it writes what the user just typed into a `debug.log` file.\n\nComing from `React`, it was tough to wrap my head around this architecture at\nfirst, but as I worked my way through this project, I started to see the beauty.\nSimple, yet elegant. Huge shout out to the one homie on youtube that made a\nvideo on the Elm Architecture in Go; you can watch it below.\n\nhttps://www.youtube.com/watch?v=ERaZi0YvBRs\n\nIt wasn't enough to consume the video that I watched above; I had to try and\nreason about what was going on in the code. So, before I even wrote any code, I\ncreated the below mermaid diagram to help me understand how exactly I would go\nabout creating the TUI. Now I want to be clear, I iterated on the below diagram\nquite a bit and it's the _basic_ understanding that I arrived at after watching\nthe video and playing around with some bubbletea examples. Don't `@` me if it's\nnot perfect 😅.\n\n```mermaid\n%%{\n init: {\n 'theme': 'base',\n 'themeVariables': {\n\t\t\t'fontSize\": '16px',\n\t\t\t'primaryColor': '#b01d8b',\n\t\t\t'primaryTextColor': '#f3f3f7',\n\t\t\t'primaryBorderColor': '#D3BCC0',\n\t\t\t'lineColor': '#2a8a90',\n\t\t\t'secondaryColor': '#507DBC',\n\t\t\t'tertiaryColor': '#F4F4F2'\n }\n }\n}%%\n\ngraph TD\n A(package main)\n B(Bubble Tea Program)\n C0(Bubble Tea Init)\n C1(Bubble Tea Model)\n C(Bubble Tea Update)\n D(Bubble Tea View)\n E(Msg)\n F(Cmd)\n G(Side Effect -- keyboard stuff)\n\n A --> B\n B --> C0\n\n subgraph Bubble Tea \\n\n C0 --> C1\n C --> F\n F --> E\n\n subgraph Event Loop______ \\n\n C --> C1\n C1 --> D\n E --> C\n D --> G\n G --> C\n end\n end\n\n```\n\nThis type of architecture was fun to wrestle with and I'm glad I did (I freaking\nlove diagramming)! One of the most fun things for me was trying to figure out\nhow to handle concurrency in Go. I'm coming from Browser and Node land, so I'm\nused to `async` and `await`, an event loop with several types of queues, and a\ncall stack. Go's concurrency model is different, but it's not too difficult to\nunderstand; its simpler than other models I have experience with, such as the\nones you might come accross in traditional C programs.\n\nMy understanding of concurrency in Go can be summarized as the following:\n\n

\n Don't communicate by sharing memory; share memory by communicating\n

\n\nRather than trying to use `locks` and `mutexes` to control access to shared\nmemory, Go encourages you to use channels to communicate between goroutines. In\nfact, `bubbletea` uses its own scheduler to handle goroutines that are\ndispatched by `Commands`; it's kind of an anti-pattern to use go routines in a\n`bubbletea` program. If you want to learn the basic rules of thumbs when it\ncomes to `Commands` in BubbleTea, check out this\n[blog post](https://charm.sh/blog/commands-in-bubbletea/)\n\nSo yeah, I didn't _directly_ write any goroutines in my program, but I did have\nto reason about how to handle concurrency in my program, specifically when I was\nconsuming the streamed response from OpenAI's API. I had to figure out how to\nhandle the stream of responses from OpenAI's API and update the state of my\napplication accordingly. I ended up assigning my own ID's to each message that I\nreceived from the stream and then used those ID's to sort the messages that were\ncoming in.\n\n```go\nfunc (m *Model) appendAndOrderProcessResults(msg ProcessResult) {\n\t// log.Println(\"Appending and ordering process results\", msg)\n\tm.ArrayOfProcessResult = append(m.ArrayOfProcessResult, msg)\n\tm.CurrentAnswer = \"\"\n\n\t// we need to sort on ID here because go routines are done in different threads\n\t// and the order in which our channel receives messages is not guaranteed.\n\t// TODO: look into a better way to insert (can I Insert in order)\n\tsort.SliceStable(m.ArrayOfProcessResult, func(i, j int) bool {\n\t\treturn m.ArrayOfProcessResult[i].ID < m.ArrayOfProcessResult[j].ID\n\t})\n}\n```\n\nIf you've got a better solution in your brain, hit me up; I'd love to hear it!\n\n### Publishing something to the world (that isn't a TODO app)\n\nLet's be honest (well I'll be honest), the first app most people make when they\nare learning a new language or framework is a TODO app. I'm TODO'd out guys and\nunlike Ryan Florence, I don't think I have it in me right now to make Trellix\n😆. Plus, I _just_ made a TODO app with `lit` and `htmx` (you can read about it\n[here](./12-go-htmx-and-lit/) 😅).\n\nI was excited to make something that could live on `homebrew` and be used by my\ncolleagues! Novelty is exciting and publishing something to `homebrew` is as\nnovel as it comes for me (well at least it was at the time of writing this blog\npost). Not going to lie, I felt like a real nerd boss when I saw my TUI on\n`homebrew` 😎 (well at least as a tap).\n\nVariety is the spice of life\n\n## The things I struggled with\n\n**Struggling was fun so I'm not going to say the \"not so fun parts\"**\n\n### Event propagation and delegation\n\nI'm _so_ used to not having to think about event propagation and delegation when\nprogramming because, thankfully, I have my buddy the browser to handle that for\nme. Having to manually handle event propagation and delegation was a bit of a\nstruggle for me; not because it's hard, but because I failed to remember to do\nit at first 😅. For example, I have a `ProcessResult` message in my program that\nI use to handle the messages that I receive from OpenAI's API. I spent way too\nlong trying to figure out why my event wasn't being propagated down to the\n`Update` function of my `message-stream`... turns out I straight up forgot to\npropagate the event down to the `sessions` model😅.\n\n### Error handling\n\nSo `Go` encourages you to return two values from your functions: the first one\nbeing your actual value and the second value being an error. This is a great\npattern because it forces you to handle your errors. However, if you choose to \nignore this convention and `panic` everywhere... you're gonna have a bad time.\n\nI eventually realized the errors of my ways and started to return and handle my\nerrors appropriately. Despite what people say about `Go` not having error\nhandling, I found the whole multiple returns thing and returning an error to be\nquite nice. It's a bit verbose, but it's clear and it's easy to reason about.\n\n\n\nIf you don't wanna have a bad time, handle your errors 😅.\n\n### Concurrency and the lack of content\n\nAlright, so I mentioned above that I had to figure out how to handle the stream\nof responses from OpenAI's API and update the state of my application\naccordingly. However, I was not prepared for the sheer lack of content available\non the interweb when it came to this subject matter. I'm privelleged on the web\nto be able to find a blog post or a video on just about anything I want to learn\nabout, but when it came to `bubbletea` and handling things like streams of data\nin `Go`, it was kinda tough to find content. I had to rely on the `bubbletea`\nexamples, the `bubbletea` documentation, and trial and error to figure out how\nproperly author my program.\n\n### Publishing\n\nOkay, I did mention above that I was super excited to publish my TUI to\n`homebrew`, but that doesn't mean it wasn't a struggle! I learned during my\npublishing attempts via github actions that my usage of `sqlite` relied on `CGO`\n(which is using C in your Go code). For those of you who don't know, `sqlite` is\na database engine writte in C... so I had to figure out how to get `CGO` to work\nwith `gorelaser` (the tool I used to publish my TUI to `homebrew`).\n\nI eventually figured out that I needed to\nuse [goreleaser-cross](https://github.com/goreleaser/goreleaser-cross) and\nset the `CGO_ENABLED` environment variable to `1` in my `.goreleaser.yml` file.\nI also eliminated the binaries for `linux` and `windows` because, well, I didn't\nwant to have to support them 😅.\n\nI don't have a full grasp on what is going on in my `Makefile` yet, but I've got\nenough of a grasp to know how to publish releases and how to create release\ncandidates.\n\n### Testing\n\nI'm not going to lie, I didn't write a single test for this project. It's on my\nlist of things to learn.\n\n## Closing Thoughts\n\nI had a lot of fun making this TUI and I learned a lot about Go, `bubbletea`,\nand OpenAI's API. I learned a lot from the struggle (like anything in life) and\nthe end result, while not perfect, is good enough. After all, what's right is\nwhat works. Am I right? 😆\n\nI'm excited to continue to learn Go and I'm excited to make more applications in\nthe future! Was what I wrote helpful? Did you learn something interesting? If\nyou did, drop me a line; I'd love to hear from you!\n","data",{"_52":53,"_54":55,"_56":57,"_58":59,"_60":61},"date","2024-03-10T00:00:00.000Z","description","You thought it was fun making UI's for the web? Wait till you see a TUI!","subtitle","A reflection on my experience making a TUI with Go","tag","go","title","Making a TUI with Go","excerpt","","isEmpty","readTime",{"_67":68,"_69":70,"_71":72,"_73":74},"minutes",10.47,"text","11 min read","time",628200,"words",2094,"slug","13-making-a-tui-with-go","code","var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var y=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),N=(a,e)=>{for(var n in e)r(a,n,{get:e[n],enumerable:!0})},c=(a,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of b(e))!f.call(a,l)&&l!==n&&r(a,l,{get:()=>e[l],enumerable:!(i=g(e,l))||i.enumerable});return a};var k=(a,e,n)=>(n=a!=null?u(w(a)):{},c(e||!a||!a.__esModule?r(n,\"default\",{value:a,enumerable:!0}):n,a)),I=a=>c(r({},\"__esModule\",{value:!0}),a);var d=y((Z,h)=>{h.exports=_jsx_runtime});var x={};N(x,{default:()=>p,frontmatter:()=>v});var t=k(d()),v={title:\"Making a TUI with Go\",subtitle:\"A reflection on my experience making a TUI with Go\",description:\"You thought it was fun making UI's for the web? Wait till you see a TUI!\",date:\"2024-03-10\",tag:\"Go\"};function m(a){let e={a:\"a\",br:\"br\",circle:\"circle\",code:\"code\",div:\"div\",em:\"em\",foreignObject:\"foreignObject\",g:\"g\",h2:\"h2\",h3:\"h3\",iframe:\"iframe\",li:\"li\",link:\"link\",marker:\"marker\",p:\"p\",path:\"path\",pre:\"pre\",rect:\"rect\",span:\"span\",strong:\"strong\",svg:\"svg\",ul:\"ul\",...a.components},{BlockQuote:n,InlineImage:i,LazyGiphy:l,ShortQuote:o}=e;return n||s(\"BlockQuote\",!0),i||s(\"InlineImage\",!0),l||s(\"LazyGiphy\",!0),o||s(\"ShortQuote\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(i,{containerClassName:\"mx-0 lg:mx-0\",imgDivClassName:\"aspect-w-12 aspect-h-8\",src:\"https://res.cloudinary.com/dinypqsgl/image/upload/v1710111485/blog/13-chatgpt-tui/chatgpt-tui_ffsglh.webp\",alt:\"A bubbletea sitting on top of a laptop\"}),`\n`,(0,t.jsx)(e.p,{children:`You know the drill; start with why! If you don\\u2019t know of Simon Sinek\\u2019s TED talk,\nI highly recommend it. It\\u2019s a great talk that has helped me in many aspects of\nmy life. So, let\\u2019s start with why I decided to make a terminal user interface\n(TUI) with Go.`}),`\n`,(0,t.jsxs)(e.p,{children:[`The primary reason I made this TUI was because it aligned with my goals for the\nyear. If you read `,(0,t.jsx)(e.a,{href:\"./12-go-htmx-and-lit/\",children:\"my previous blog post\"}),`, you know that\nI\\u2019m devoting 2024 to learning Go and trying my best to channel my inner Gopher.\nMoreover, I wanted to create a project that would be not only helpful to me but\nalso to my colleagues. Since I\\u2019m an avid `,(0,t.jsx)(e.code,{children:\"neovim\"}),` user, I\\u2019m fortunate to be able\nto use `,(0,t.jsx)(e.a,{href:\"https://github.com/jackMort/ChatGPT.nvim\",rel:\"noopener\",target:\"_blank\",children:\"ChatGPT.nvim\"}),` while I\\u2019m\nworking on features. However, my colleagues who use `,(0,t.jsx)(e.code,{children:\"VSCode\"}),` don\\u2019t have the same\nluxury (yeah yeah, I know they have copilot, but the neovim plugin just hits\ndifferent). Beyond those reasons, the final (some would say superficial) reason\nis that I wanted to make a TUI because I thought it would be fun. AI is the\nlatest buzzword and I wanted to be part of the hype train\\u2026 so let\\u2019s go \\u{1F684}.`]}),`\n`,(0,t.jsxs)(e.h2,{id:\"what-did-i-make\",className:\"title\",children:[(0,t.jsx)(e.a,{tabIndex:\"0\",href:\"#what-did-i-make\",children:(0,t.jsx)(e.svg,{\"aria-hidden\":!0,viewBox:\"0 0 16 16\",height:\"16\",width:\"16\",children:(0,t.jsx)(e.path,{className:\"fill-accent stroke-accent\",fillRule:\"evenodd\",d:\"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z\"})})}),\"What Did I Make?\"]}),`\n`,(0,t.jsxs)(e.p,{children:[`I made a TUI that allows you to interact with OpenAI\\u2019s ChatGPT model. The TUI is\nwritten in Go and is therefore `,(0,t.jsx)(e.code,{children:\"blazingly fast\"}),` (cringed as I typed that \\u{1F605}).\nThe TUI is a simple interface (because, it\\u2019s Go, we gotta embrace simplicity)\nthat allows you to interact with the your chosen model (it defaults to\n`,(0,t.jsx)(e.code,{children:\"chatgpt-3.5-turbo\"}),\").\"]}),`\n`,(0,t.jsx)(i,{lazyLoadImage:!0,openInNewTab:!0,containerClassName:\"mx-0 lg:mx-0\",className:\"transition-duration-500 transition-transform hover:scale-[1.15]\",imgDivClassName:\"aspect-w-12 aspect-h-7\",src:\"https://res.cloudinary.com/dinypqsgl/image/upload/v1710113600/blog/13-chatgpt-tui/tui-shot_pt9uab.png\",alt:\"A demo shot of the tui in action\"}),`\n`,(0,t.jsxs)(e.p,{children:[`If you want to try it out yourself, you can find the source code on\n`,(0,t.jsx)(e.a,{href:\"https://github.com/tearingItUp786/chatgpt-tui\",rel:\"noopener\",target:\"_blank\",children:\"GitHub\"}),`! Now, if you\\u2019re\nwondering what did I use to make this work of art (awh shucks, thanks friend),\nfret not friend, I\\u2019ll tell you (I mean, you can just check out the repo, but\nI\\u2019ll tell you here as well \\u{1F606}).`]}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.a,{href:\"https://github.com/charmbracelet/bubbletea\",rel:\"noopener\",target:\"_blank\",children:\"bubbletea\"}),`: A Go framework for\nterminal user interfaces. It\\u2019s a great framework that makes it easy to create\nTUIs in Go.`]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.a,{href:\"https://platform.openai.com/docs/api-reference\",rel:\"noopener\",target:\"_blank\",children:\"openai\"}),\": OpenAI\\u2019s REST Api\"]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.a,{href:\"https://www.sqlite.org/\",rel:\"noopener\",target:\"_blank\",children:\"sqlite\"}),`: A C library that provides a lightweight\ndisk-based database that doesn\\u2019t require a separate server process (perfect\nfor terminal apps, in my opinion).`]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.a,{href:\"https://github.com/charmbracelet/lipgloss\",rel:\"noopener\",target:\"_blank\",children:\"lipgloss\"}),`: Style definitions for\nnice terminal layouts!`]}),`\n`,(0,t.jsxs)(e.li,{children:[(0,t.jsx)(e.a,{href:\"https://github.com/charmbracelet/bubbles\",rel:\"noopener\",target:\"_blank\",children:\"bubbles\"}),`: Some general use\ncomponents for Bubble Tea apps!`]}),`\n`]}),`\n`,(0,t.jsxs)(e.h2,{id:\"the-fun-parts\",className:\"title\",children:[(0,t.jsx)(e.a,{tabIndex:\"0\",href:\"#the-fun-parts\",children:(0,t.jsx)(e.svg,{\"aria-hidden\":!0,viewBox:\"0 0 16 16\",height:\"16\",width:\"16\",children:(0,t.jsx)(e.path,{className:\"fill-accent stroke-accent\",fillRule:\"evenodd\",d:\"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z\"})})}),\"The Fun Parts\"]}),`\n`,(0,t.jsx)(e.p,{children:`Before I jump into the things that I struggled with (and ultimately learned a\nlot about) while developing this application, I want to cover the things that\ngot me going as I was chugging along with this tui.`}),`\n`,(0,t.jsxs)(e.h3,{id:\"the-elm-architecture\",className:\"title\",children:[(0,t.jsx)(e.a,{tabIndex:\"0\",href:\"#the-elm-architecture\",children:(0,t.jsx)(e.svg,{\"aria-hidden\":!0,viewBox:\"0 0 16 16\",height:\"16\",width:\"16\",children:(0,t.jsx)(e.path,{className:\"fill-accent stroke-accent\",fillRule:\"evenodd\",d:\"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z\"})})}),\"The Elm Architecture\"]}),`\n`,(0,t.jsxs)(e.p,{children:[`First and foremost, I was thrilled to learn more about\n`,(0,t.jsx)(e.a,{href:\"https://guide.elm-lang.org/architecture/\",rel:\"noopener\",target:\"_blank\",children:\"The Elm Architecture\"}),`. For those of\nyou who aren\\u2019t familiar, Elm is a functional programming language that compiles\nto JavaScript \\u2014 wild right. The Elm Architecture is a pattern that is used to\nbuild web applications in Elm (duh). In short, there are three parts to the Elm\nArchitecture: `,(0,t.jsx)(e.code,{children:\"Model\"}),\", \",(0,t.jsx)(e.code,{children:\"View\"}),\", and \",(0,t.jsx)(e.code,{children:\"Update\"}),\". The \",(0,t.jsx)(e.code,{children:\"Model\"}),` is the state of the\napplication, the `,(0,t.jsx)(e.code,{children:\"View\"}),` is the way to turn your state into the UI, and the\n`,(0,t.jsx)(e.code,{children:\"Update\"}),` is way to update your state based on messages. You can check out this\nsimple example using the Elm Architecture in Go\non\\xA0`,(0,t.jsx)(e.a,{href:\"https://github.com/tearingItUp786/chatgpt-tui/blob/main/cmd/main.go\",rel:\"noopener\",target:\"_blank\",children:\"Github\"}),`\n;it writes what the user just typed into a `,(0,t.jsx)(e.code,{children:\"debug.log\"}),\" file.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Coming from \",(0,t.jsx)(e.code,{children:\"React\"}),`, it was tough to wrap my head around this architecture at\nfirst, but as I worked my way through this project, I started to see the beauty.\nSimple, yet elegant. Huge shout out to the one homie on youtube that made a\nvideo on the Elm Architecture in Go; you can watch it below.`]}),`\n`,(0,t.jsxs)(e.div,{className:\"embed\",\"data-embed-type\":\"youtube\",children:[`\n `,(0,t.jsxs)(e.div,{style:{paddingBottom:\"56.25%\"},children:[`\n `,(0,t.jsx)(e.iframe,{loading:\"lazy\",className:\"lazy\",width:\"200\",height:\"113\",\"data-src\":\"https://www.youtube.com/embed/ERaZi0YvBRs?feature=oembed\",frameBorder:\"0\",allow:\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\",referrerPolicy:\"strict-origin-when-cross-origin\",allowFullScreen:!0,title:\"Understanding the Bubble Tea TUI Framework Architecture for Building Terminal Apps in Go/Golang\"}),`\n `]}),`\n `]}),`\n`,(0,t.jsxs)(e.p,{children:[`It wasn\\u2019t enough to consume the video that I watched above; I had to try and\nreason about what was going on in the code. So, before I even wrote any code, I\ncreated the below mermaid diagram to help me understand how exactly I would go\nabout creating the TUI. Now I want to be clear, I iterated on the below diagram\nquite a bit and it\\u2019s the `,(0,t.jsx)(e.em,{children:\"basic\"}),` understanding that I arrived at after watching\nthe video and playing around with some bubbletea examples. Don\\u2019t `,(0,t.jsx)(e.code,{children:\"@\"}),` me if it\\u2019s\nnot perfect \\u{1F605}.`]}),`\n`,(0,t.jsx)(e.svg,{\"aria-roledescription\":\"flowchart-v2\",viewBox:\"-8 -8 534.33984375 822\",style:{maxWidth:\"534.33984375px\"},xmlns:\"http://www.w3.org/2000/svg\",width:\"100%\",id:\"mermaid-svg-17\",children:(0,t.jsxs)(e.g,{children:[(0,t.jsx)(e.marker,{orient:\"auto\",markerHeight:\"12\",markerWidth:\"12\",markerUnits:\"userSpaceOnUse\",refY:\"5\",refX:\"10\",viewBox:\"0 0 10 10\",className:\"marker flowchart\",id:\"flowchart-pointEnd\",children:(0,t.jsx)(e.path,{style:{strokeWidth:\"1\",strokeDasharray:\"1, 0\"},className:\"arrowMarkerPath\",d:\"M 0 0 L 10 5 L 0 10 z\"})}),(0,t.jsx)(e.marker,{orient:\"auto\",markerHeight:\"12\",markerWidth:\"12\",markerUnits:\"userSpaceOnUse\",refY:\"5\",refX:\"0\",viewBox:\"0 0 10 10\",className:\"marker flowchart\",id:\"flowchart-pointStart\",children:(0,t.jsx)(e.path,{style:{strokeWidth:\"1\",strokeDasharray:\"1, 0\"},className:\"arrowMarkerPath\",d:\"M 0 5 L 10 10 L 10 0 z\"})}),(0,t.jsx)(e.marker,{orient:\"auto\",markerHeight:\"11\",markerWidth:\"11\",markerUnits:\"userSpaceOnUse\",refY:\"5\",refX:\"11\",viewBox:\"0 0 10 10\",className:\"marker flowchart\",id:\"flowchart-circleEnd\",children:(0,t.jsx)(e.circle,{style:{strokeWidth:\"1\",strokeDasharray:\"1, 0\"},className:\"arrowMarkerPath\",r:\"5\",cy:\"5\",cx:\"5\"})}),(0,t.jsx)(e.marker,{orient:\"auto\",markerHeight:\"11\",markerWidth:\"11\",markerUnits:\"userSpaceOnUse\",refY:\"5\",refX:\"-1\",viewBox:\"0 0 10 10\",className:\"marker flowchart\",id:\"flowchart-circleStart\",children:(0,t.jsx)(e.circle,{style:{strokeWidth:\"1\",strokeDasharray:\"1, 0\"},className:\"arrowMarkerPath\",r:\"5\",cy:\"5\",cx:\"5\"})}),(0,t.jsx)(e.marker,{orient:\"auto\",markerHeight:\"11\",markerWidth:\"11\",markerUnits:\"userSpaceOnUse\",refY:\"5.2\",refX:\"12\",viewBox:\"0 0 11 11\",className:\"marker cross flowchart\",id:\"flowchart-crossEnd\",children:(0,t.jsx)(e.path,{style:{strokeWidth:\"2\",strokeDasharray:\"1, 0\"},className:\"arrowMarkerPath\",d:\"M 1,1 l 9,9 M 10,1 l -9,9\"})}),(0,t.jsx)(e.marker,{orient:\"auto\",markerHeight:\"11\",markerWidth:\"11\",markerUnits:\"userSpaceOnUse\",refY:\"5.2\",refX:\"-1\",viewBox:\"0 0 11 11\",className:\"marker cross flowchart\",id:\"flowchart-crossStart\",children:(0,t.jsx)(e.path,{style:{strokeWidth:\"2\",strokeDasharray:\"1, 0\"},className:\"arrowMarkerPath\",d:\"M 1,1 l 9,9 M 10,1 l -9,9\"})}),(0,t.jsxs)(e.g,{className:\"root\",children:[(0,t.jsxs)(e.g,{className:\"clusters\",children:[(0,t.jsxs)(e.g,{id:\"subGraph1\",className:\"cluster default\",children:[(0,t.jsx)(e.rect,{height:\"638\",width:\"518.33984375\",y:\"168\",x:\"0\",ry:\"0\",rx:\"0\",style:{}}),(0,t.jsx)(e.g,{transform:\"translate(215.412109375, 168)\",className:\"cluster-label\",children:(0,t.jsx)(e.foreignObject,{height:\"19\",width:\"87.515625\",children:(0,t.jsx)(e.div,{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},xmlns:\"http://www.w3.org/1999/xhtml\",children:(0,t.jsxs)(e.span,{className:\"nodeLabel\",children:[\"Bubble Tea \",(0,t.jsx)(e.br,{})]})})})})]}),(0,t.jsxs)(e.g,{id:\"subGraph0\",className:\"cluster default\",children:[(0,t.jsx)(e.rect,{height:\"504\",width:\"376.41796875\",y:\"277\",x:\"121.921875\",ry:\"0\",rx:\"0\",style:{}}),(0,t.jsx)(e.g,{transform:\"translate(241.482421875, 277)\",className:\"cluster-label\",children:(0,t.jsx)(e.foreignObject,{height:\"19\",width:\"137.296875\",children:(0,t.jsx)(e.div,{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},xmlns:\"http://www.w3.org/1999/xhtml\",children:(0,t.jsxs)(e.span,{className:\"nodeLabel\",children:[\"Event Loop______ \",(0,t.jsx)(e.br,{})]})})})})]})]}),(0,t.jsxs)(e.g,{className:\"edgePaths\",children:[(0,t.jsx)(e.path,{markerEnd:\"url(#flowchart-pointEnd)\",style:{fill:\"none\"},className:\"edge-thickness-normal edge-pattern-solid flowchart-link LS-A LE-B\",id:\"L-A-B-0\",d:\"M352.5703125,34L352.5703125,38.166666666666664C352.5703125,42.333333333333336,352.5703125,50.666666666666664,352.5703125,59C352.5703125,67.33333333333333,352.5703125,75.66666666666667,352.5703125,79.83333333333333L352.5703125,84\"}),(0,t.jsx)(e.path,{markerEnd:\"url(#flowchart-pointEnd)\",style:{fill:\"none\"},className:\"edge-thickness-normal edge-pattern-solid flowchart-link LS-B LE-C0\",id:\"L-B-C0-0\",d:\"M352.5703125,118L352.5703125,122.16666666666667C352.5703125,126.33333333333333,352.5703125,134.66666666666666,352.5703125,143C352.5703125,151.33333333333334,352.5703125,159.66666666666666,352.5703125,168C352.5703125,176.33333333333334,352.5703125,184.66666666666666,352.5703125,188.83333333333334L352.5703125,193\"}),(0,t.jsx)(e.path,{markerEnd:\"url(#flowchart-pointEnd)\",style:{fill:\"none\"},className:\"edge-thickness-normal edge-pattern-solid flowchart-link LS-C0 LE-C1\",id:\"L-C0-C1-0\",d:\"M352.5703125,227L352.5703125,231.16666666666666C352.5703125,235.33333333333334,352.5703125,243.66666666666666,352.5703125,252C352.5703125,260.3333333333333,352.5703125,268.6666666666667,352.5703125,277C352.5703125,285.3333333333333,352.5703125,293.6666666666667,352.5703125,297.8333333333333L352.5703125,302\"}),(0,t.jsx)(e.path,{markerEnd:\"url(#flowchart-pointEnd)\",style:{fill:\"none\"},className:\"edge-thickness-normal edge-pattern-solid flowchart-link LS-C LE-F\",id:\"L-C-F-0\",d:\"M294.3794642857143,588L280.11700148809524,592.1666666666666C265.8545386904762,596.3333333333334,237.32961309523807,604.6666666666666,202.7533482142857,614.604153455929C168.17708333333334,624.5416402451913,127.54947916666667,636.0832804903825,107.23567708333333,641.8541006129782L86.921875,647.6249207355738\"}),(0,t.jsx)(e.path,{markerEnd:\"url(#flowchart-pointEnd)\",style:{fill:\"none\"},className:\"edge-thickness-normal edge-pattern-solid flowchart-link LS-F LE-E\",id:\"L-F-E-0\",d:\"M86.921875,660.3084076602704L116.82877604166667,666.4236730502254C146.73567708333334,672.5389384401802,206.54947916666666,684.7694692200902,256.4759114583333,696.7332836807982C306.40234375,708.6970981415064,346.44140625,720.3941962830128,366.4609375,726.2427453537658L386.48046875,732.0912944245191\"}),(0,t.jsx)(e.path,{markerEnd:\"url(#flowchart-pointEnd)\",style:{fill:\"none\"},className:\"edge-thickness-normal edge-pattern-solid flowchart-link LS-C LE-C1\",id:\"L-C-C1-0\",d:\"M383.6895461309524,554L391.3168092757937,549.8333333333334C398.94407242063494,545.6666666666666,414.1985987103174,537.3333333333334,421.82586185515873,526.1666666666666C429.453125,515,429.453125,501,429.453125,487C429.453125,473,429.453125,459,429.453125,445C429.453125,431,429.453125,417,429.453125,403C429.453125,389,429.453125,375,421.82586185515873,363.8333333333333C414.1985987103174,352.6666666666667,398.94407242063494,344.3333333333333,391.3168092757937,340.1666666666667L383.6895461309524,336\"}),(0,t.jsx)(e.path,{markerEnd:\"url(#flowchart-pointEnd)\",style:{fill:\"none\"},className:\"edge-thickness-normal edge-pattern-solid flowchart-link LS-C1 LE-D\",id:\"L-C1-D-0\",d:\"M321.4510788690476,336L313.8238157242063,340.1666666666667C306.19655257936506,344.3333333333333,290.94202628968253,352.6666666666667,283.31476314484127,361C275.6875,369.3333333333333,275.6875,377.6666666666667,275.6875,381.8333333333333L275.6875,386\"}),(0,t.jsx)(e.path,{markerEnd:\"url(#flowchart-pointEnd)\",style:{fill:\"none\"},className:\"edge-thickness-normal edge-pattern-solid flowchart-link LS-E LE-C\",id:\"L-E-C-0\",d:\"M417.9506138392857,722L419.8676990327381,717.8333333333334C421.78478422619054,713.6666666666666,425.61895461309524,705.3333333333334,427.53603980654765,694.1666666666666C429.453125,683,429.453125,669,429.453125,655C429.453125,641,429.453125,627,421.82586185515873,615.8333333333334C414.1985987103174,604.6666666666666,398.94407242063494,596.3333333333334,391.3168092757937,592.1666666666666L383.6895461309524,588\"}),(0,t.jsx)(e.path,{markerEnd:\"url(#flowchart-pointEnd)\",style:{fill:\"none\"},className:\"edge-thickness-normal edge-pattern-solid flowchart-link LS-D LE-G\",id:\"L-D-G-0\",d:\"M275.6875,420L275.6875,424.1666666666667C275.6875,428.3333333333333,275.6875,436.6666666666667,275.6875,445C275.6875,453.3333333333333,275.6875,461.6666666666667,275.6875,465.8333333333333L275.6875,470\"}),(0,t.jsx)(e.path,{markerEnd:\"url(#flowchart-pointEnd)\",style:{fill:\"none\"},className:\"edge-thickness-normal edge-pattern-solid flowchart-link LS-G LE-C\",id:\"L-G-C-0\",d:\"M275.6875,504L275.6875,508.1666666666667C275.6875,512.3333333333334,275.6875,520.6666666666666,283.31476314484127,529C290.94202628968253,537.3333333333334,306.19655257936506,545.6666666666666,313.8238157242063,549.8333333333334L321.4510788690476,554\"})]}),(0,t.jsxs)(e.g,{className:\"edgeLabels\",children:[(0,t.jsx)(e.g,{className:\"edgeLabel\",children:(0,t.jsx)(e.g,{transform:\"translate(0, 0)\",className:\"label\",children:(0,t.jsx)(e.foreignObject,{height:\"0\",width:\"0\",children:(0,t.jsx)(e.div,{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},xmlns:\"http://www.w3.org/1999/xhtml\",children:(0,t.jsx)(e.span,{className:\"edgeLabel\"})})})})}),(0,t.jsx)(e.g,{className:\"edgeLabel\",children:(0,t.jsx)(e.g,{transform:\"translate(0, 0)\",className:\"label\",children:(0,t.jsx)(e.foreignObject,{height:\"0\",width:\"0\",children:(0,t.jsx)(e.div,{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},xmlns:\"http://www.w3.org/1999/xhtml\",children:(0,t.jsx)(e.span,{className:\"edgeLabel\"})})})})}),(0,t.jsx)(e.g,{className:\"edgeLabel\",children:(0,t.jsx)(e.g,{transform:\"translate(0, 0)\",className:\"label\",children:(0,t.jsx)(e.foreignObject,{height:\"0\",width:\"0\",children:(0,t.jsx)(e.div,{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},xmlns:\"http://www.w3.org/1999/xhtml\",children:(0,t.jsx)(e.span,{className:\"edgeLabel\"})})})})}),(0,t.jsx)(e.g,{className:\"edgeLabel\",children:(0,t.jsx)(e.g,{transform:\"translate(0, 0)\",className:\"label\",children:(0,t.jsx)(e.foreignObject,{height:\"0\",width:\"0\",children:(0,t.jsx)(e.div,{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},xmlns:\"http://www.w3.org/1999/xhtml\",children:(0,t.jsx)(e.span,{className:\"edgeLabel\"})})})})}),(0,t.jsx)(e.g,{className:\"edgeLabel\",children:(0,t.jsx)(e.g,{transform:\"translate(0, 0)\",className:\"label\",children:(0,t.jsx)(e.foreignObject,{height:\"0\",width:\"0\",children:(0,t.jsx)(e.div,{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},xmlns:\"http://www.w3.org/1999/xhtml\",children:(0,t.jsx)(e.span,{className:\"edgeLabel\"})})})})}),(0,t.jsx)(e.g,{className:\"edgeLabel\",children:(0,t.jsx)(e.g,{transform:\"translate(0, 0)\",className:\"label\",children:(0,t.jsx)(e.foreignObject,{height:\"0\",width:\"0\",children:(0,t.jsx)(e.div,{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},xmlns:\"http://www.w3.org/1999/xhtml\",children:(0,t.jsx)(e.span,{className:\"edgeLabel\"})})})})}),(0,t.jsx)(e.g,{className:\"edgeLabel\",children:(0,t.jsx)(e.g,{transform:\"translate(0, 0)\",className:\"label\",children:(0,t.jsx)(e.foreignObject,{height:\"0\",width:\"0\",children:(0,t.jsx)(e.div,{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},xmlns:\"http://www.w3.org/1999/xhtml\",children:(0,t.jsx)(e.span,{className:\"edgeLabel\"})})})})}),(0,t.jsx)(e.g,{className:\"edgeLabel\",children:(0,t.jsx)(e.g,{transform:\"translate(0, 0)\",className:\"label\",children:(0,t.jsx)(e.foreignObject,{height:\"0\",width:\"0\",children:(0,t.jsx)(e.div,{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},xmlns:\"http://www.w3.org/1999/xhtml\",children:(0,t.jsx)(e.span,{className:\"edgeLabel\"})})})})}),(0,t.jsx)(e.g,{className:\"edgeLabel\",children:(0,t.jsx)(e.g,{transform:\"translate(0, 0)\",className:\"label\",children:(0,t.jsx)(e.foreignObject,{height:\"0\",width:\"0\",children:(0,t.jsx)(e.div,{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},xmlns:\"http://www.w3.org/1999/xhtml\",children:(0,t.jsx)(e.span,{className:\"edgeLabel\"})})})})}),(0,t.jsx)(e.g,{className:\"edgeLabel\",children:(0,t.jsx)(e.g,{transform:\"translate(0, 0)\",className:\"label\",children:(0,t.jsx)(e.foreignObject,{height:\"0\",width:\"0\",children:(0,t.jsx)(e.div,{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},xmlns:\"http://www.w3.org/1999/xhtml\",children:(0,t.jsx)(e.span,{className:\"edgeLabel\"})})})})})]}),(0,t.jsxs)(e.g,{className:\"nodes\",children:[(0,t.jsxs)(e.g,{transform:\"translate(352.5703125, 210)\",id:\"flowchart-C0-60\",className:\"node default default\",children:[(0,t.jsx)(e.rect,{height:\"34\",width:\"133.171875\",y:\"-17\",x:\"-66.5859375\",ry:\"5\",rx:\"5\",style:{},className:\"basic label-container\"}),(0,t.jsx)(e.g,{transform:\"translate(-59.0859375, -9.5)\",style:{},className:\"label\",children:(0,t.jsx)(e.foreignObject,{height:\"19\",width:\"118.171875\",children:(0,t.jsx)(e.div,{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},xmlns:\"http://www.w3.org/1999/xhtml\",children:(0,t.jsx)(e.span,{className:\"nodeLabel\",children:\"Bubble Tea Init\"})})})})]}),(0,t.jsxs)(e.g,{transform:\"translate(60.9609375, 655)\",id:\"flowchart-F-65\",className:\"node default default\",children:[(0,t.jsx)(e.rect,{height:\"34\",width:\"51.921875\",y:\"-17\",x:\"-25.9609375\",ry:\"5\",rx:\"5\",style:{},className:\"basic label-container\"}),(0,t.jsx)(e.g,{transform:\"translate(-18.4609375, -9.5)\",style:{},className:\"label\",children:(0,t.jsx)(e.foreignObject,{height:\"19\",width:\"36.921875\",children:(0,t.jsx)(e.div,{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},xmlns:\"http://www.w3.org/1999/xhtml\",children:(0,t.jsx)(e.span,{className:\"nodeLabel\",children:\"Cmd\"})})})})]}),(0,t.jsxs)(e.g,{transform:\"translate(352.5703125, 319)\",id:\"flowchart-C1-61\",className:\"node default default\",children:[(0,t.jsx)(e.rect,{height:\"34\",width:\"155.640625\",y:\"-17\",x:\"-77.8203125\",ry:\"5\",rx:\"5\",style:{},className:\"basic label-container\"}),(0,t.jsx)(e.g,{transform:\"translate(-70.3203125, -9.5)\",style:{},className:\"label\",children:(0,t.jsx)(e.foreignObject,{height:\"19\",width:\"140.640625\",children:(0,t.jsx)(e.div,{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},xmlns:\"http://www.w3.org/1999/xhtml\",children:(0,t.jsx)(e.span,{className:\"nodeLabel\",children:\"Bubble Tea Model\"})})})})]}),(0,t.jsxs)(e.g,{transform:\"translate(352.5703125, 571)\",id:\"flowchart-C-62\",className:\"node default default\",children:[(0,t.jsx)(e.rect,{height:\"34\",width:\"165.546875\",y:\"-17\",x:\"-82.7734375\",ry:\"5\",rx:\"5\",style:{},className:\"basic label-container\"}),(0,t.jsx)(e.g,{transform:\"translate(-75.2734375, -9.5)\",style:{},className:\"label\",children:(0,t.jsx)(e.foreignObject,{height:\"19\",width:\"150.546875\",children:(0,t.jsx)(e.div,{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},xmlns:\"http://www.w3.org/1999/xhtml\",children:(0,t.jsx)(e.span,{className:\"nodeLabel\",children:\"Bubble Tea Update\"})})})})]}),(0,t.jsxs)(e.g,{transform:\"translate(275.6875, 403)\",id:\"flowchart-D-63\",className:\"node default default\",children:[(0,t.jsx)(e.rect,{height:\"34\",width:\"145.5625\",y:\"-17\",x:\"-72.78125\",ry:\"5\",rx:\"5\",style:{},className:\"basic label-container\"}),(0,t.jsx)(e.g,{transform:\"translate(-65.28125, -9.5)\",style:{},className:\"label\",children:(0,t.jsx)(e.foreignObject,{height:\"19\",width:\"130.5625\",children:(0,t.jsx)(e.div,{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},xmlns:\"http://www.w3.org/1999/xhtml\",children:(0,t.jsx)(e.span,{className:\"nodeLabel\",children:\"Bubble Tea View\"})})})})]}),(0,t.jsxs)(e.g,{transform:\"translate(410.12890625, 739)\",id:\"flowchart-E-64\",className:\"node default default\",children:[(0,t.jsx)(e.rect,{height:\"34\",width:\"47.296875\",y:\"-17\",x:\"-23.6484375\",ry:\"5\",rx:\"5\",style:{},className:\"basic label-container\"}),(0,t.jsx)(e.g,{transform:\"translate(-16.1484375, -9.5)\",style:{},className:\"label\",children:(0,t.jsx)(e.foreignObject,{height:\"19\",width:\"32.296875\",children:(0,t.jsx)(e.div,{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},xmlns:\"http://www.w3.org/1999/xhtml\",children:(0,t.jsx)(e.span,{className:\"nodeLabel\",children:\"Msg\"})})})})]}),(0,t.jsxs)(e.g,{transform:\"translate(275.6875, 487)\",id:\"flowchart-G-66\",className:\"node default default\",children:[(0,t.jsx)(e.rect,{height:\"34\",width:\"237.53125\",y:\"-17\",x:\"-118.765625\",ry:\"5\",rx:\"5\",style:{},className:\"basic label-container\"}),(0,t.jsx)(e.g,{transform:\"translate(-111.265625, -9.5)\",style:{},className:\"label\",children:(0,t.jsx)(e.foreignObject,{height:\"19\",width:\"222.53125\",children:(0,t.jsx)(e.div,{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},xmlns:\"http://www.w3.org/1999/xhtml\",children:(0,t.jsx)(e.span,{className:\"nodeLabel\",children:\"Side Effect -- keyboard stuff\"})})})})]}),(0,t.jsxs)(e.g,{transform:\"translate(352.5703125, 17)\",id:\"flowchart-A-58\",className:\"node default default\",children:[(0,t.jsx)(e.rect,{height:\"34\",width:\"127.609375\",y:\"-17\",x:\"-63.8046875\",ry:\"5\",rx:\"5\",style:{},className:\"basic label-container\"}),(0,t.jsx)(e.g,{transform:\"translate(-56.3046875, -9.5)\",style:{},className:\"label\",children:(0,t.jsx)(e.foreignObject,{height:\"19\",width:\"112.609375\",children:(0,t.jsx)(e.div,{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},xmlns:\"http://www.w3.org/1999/xhtml\",children:(0,t.jsx)(e.span,{className:\"nodeLabel\",children:\"package main\"})})})})]}),(0,t.jsxs)(e.g,{transform:\"translate(352.5703125, 101)\",id:\"flowchart-B-59\",className:\"node default default\",children:[(0,t.jsx)(e.rect,{height:\"34\",width:\"175.109375\",y:\"-17\",x:\"-87.5546875\",ry:\"5\",rx:\"5\",style:{},className:\"basic label-container\"}),(0,t.jsx)(e.g,{transform:\"translate(-80.0546875, -9.5)\",style:{},className:\"label\",children:(0,t.jsx)(e.foreignObject,{height:\"19\",width:\"160.109375\",children:(0,t.jsx)(e.div,{style:{display:\"inline-block\",whiteSpace:\"nowrap\"},xmlns:\"http://www.w3.org/1999/xhtml\",children:(0,t.jsx)(e.span,{className:\"nodeLabel\",children:\"Bubble Tea Program\"})})})})]})]})]})]})}),`\n`,(0,t.jsx)(e.link,{href:\"data:text/css;base64,I21lcm1haWQtc3ZnLTE3e2ZvbnQtZmFtaWx5OiJ0cmVidWNoZXQgbXMiLHZlcmRhbmEsYXJpYWwsc2Fucy1zZXJpZjtmb250LXNpemU6MTZweDtmaWxsOiNmM2YzZjc7fSNtZXJtYWlkLXN2Zy0xNyAuZXJyb3ItaWNvbntmaWxsOiNGNEY0RjI7fSNtZXJtYWlkLXN2Zy0xNyAuZXJyb3ItdGV4dHtmaWxsOiMwYjBiMGQ7c3Ryb2tlOiMwYjBiMGQ7fSNtZXJtYWlkLXN2Zy0xNyAuZWRnZS10aGlja25lc3Mtbm9ybWFse3N0cm9rZS13aWR0aDoycHg7fSNtZXJtYWlkLXN2Zy0xNyAuZWRnZS10aGlja25lc3MtdGhpY2t7c3Ryb2tlLXdpZHRoOjMuNXB4O30jbWVybWFpZC1zdmctMTcgLmVkZ2UtcGF0dGVybi1zb2xpZHtzdHJva2UtZGFzaGFycmF5OjA7fSNtZXJtYWlkLXN2Zy0xNyAuZWRnZS1wYXR0ZXJuLWRhc2hlZHtzdHJva2UtZGFzaGFycmF5OjM7fSNtZXJtYWlkLXN2Zy0xNyAuZWRnZS1wYXR0ZXJuLWRvdHRlZHtzdHJva2UtZGFzaGFycmF5OjI7fSNtZXJtYWlkLXN2Zy0xNyAubWFya2Vye2ZpbGw6IzJhOGE5MDtzdHJva2U6IzJhOGE5MDt9I21lcm1haWQtc3ZnLTE3IC5tYXJrZXIuY3Jvc3N7c3Ryb2tlOiMyYThhOTA7fSNtZXJtYWlkLXN2Zy0xNyBzdmd7Zm9udC1mYW1pbHk6InRyZWJ1Y2hldCBtcyIsdmVyZGFuYSxhcmlhbCxzYW5zLXNlcmlmO2ZvbnQtc2l6ZToxNnB4O30jbWVybWFpZC1zdmctMTcgLmxhYmVse2ZvbnQtZmFtaWx5OiJ0cmVidWNoZXQgbXMiLHZlcmRhbmEsYXJpYWwsc2Fucy1zZXJpZjtjb2xvcjojZjNmM2Y3O30jbWVybWFpZC1zdmctMTcgLmNsdXN0ZXItbGFiZWwgdGV4dHtmaWxsOiMwYjBiMGQ7fSNtZXJtYWlkLXN2Zy0xNyAuY2x1c3Rlci1sYWJlbCBzcGFue2NvbG9yOiMwYjBiMGQ7fSNtZXJtYWlkLXN2Zy0xNyAubGFiZWwgdGV4dCwjbWVybWFpZC1zdmctMTcgc3BhbntmaWxsOiNmM2YzZjc7Y29sb3I6I2YzZjNmNzt9I21lcm1haWQtc3ZnLTE3IC5ub2RlIHJlY3QsI21lcm1haWQtc3ZnLTE3IC5ub2RlIGNpcmNsZSwjbWVybWFpZC1zdmctMTcgLm5vZGUgZWxsaXBzZSwjbWVybWFpZC1zdmctMTcgLm5vZGUgcG9seWdvbiwjbWVybWFpZC1zdmctMTcgLm5vZGUgcGF0aHtmaWxsOiNiMDFkOGI7c3Ryb2tlOiNEM0JDQzA7c3Ryb2tlLXdpZHRoOjFweDt9I21lcm1haWQtc3ZnLTE3IC5ub2RlIC5sYWJlbHt0ZXh0LWFsaWduOmNlbnRlcjt9I21lcm1haWQtc3ZnLTE3IC5ub2RlLmNsaWNrYWJsZXtjdXJzb3I6cG9pbnRlcjt9I21lcm1haWQtc3ZnLTE3IC5hcnJvd2hlYWRQYXRoe2ZpbGw6dW5kZWZpbmVkO30jbWVybWFpZC1zdmctMTcgLmVkZ2VQYXRoIC5wYXRoe3N0cm9rZTojMmE4YTkwO3N0cm9rZS13aWR0aDoyLjBweDt9I21lcm1haWQtc3ZnLTE3IC5mbG93Y2hhcnQtbGlua3tzdHJva2U6IzJhOGE5MDtmaWxsOm5vbmU7fSNtZXJtYWlkLXN2Zy0xNyAuZWRnZUxhYmVse2JhY2tncm91bmQtY29sb3I6IzUwN0RCQzt0ZXh0LWFsaWduOmNlbnRlcjt9I21lcm1haWQtc3ZnLTE3IC5lZGdlTGFiZWwgcmVjdHtvcGFjaXR5OjAuNTtiYWNrZ3JvdW5kLWNvbG9yOiM1MDdEQkM7ZmlsbDojNTA3REJDO30jbWVybWFpZC1zdmctMTcgLmNsdXN0ZXIgcmVjdHtmaWxsOiNGNEY0RjI7c3Ryb2tlOmhzbCg2MCwgMCUsIDg1LjI5NDExNzY0NzElKTtzdHJva2Utd2lkdGg6MXB4O30jbWVybWFpZC1zdmctMTcgLmNsdXN0ZXIgdGV4dHtmaWxsOiMwYjBiMGQ7fSNtZXJtYWlkLXN2Zy0xNyAuY2x1c3RlciBzcGFue2NvbG9yOiMwYjBiMGQ7fSNtZXJtYWlkLXN2Zy0xNyBkaXYubWVybWFpZFRvb2x0aXB7cG9zaXRpb246YWJzb2x1dGU7dGV4dC1hbGlnbjpjZW50ZXI7bWF4LXdpZHRoOjIwMHB4O3BhZGRpbmc6MnB4O2ZvbnQtZmFtaWx5OiJ0cmVidWNoZXQgbXMiLHZlcmRhbmEsYXJpYWwsc2Fucy1zZXJpZjtmb250LXNpemU6MTJweDtiYWNrZ3JvdW5kOiNGNEY0RjI7Ym9yZGVyOjFweCBzb2xpZCB1bmRlZmluZWQ7Ym9yZGVyLXJhZGl1czoycHg7cG9pbnRlci1ldmVudHM6bm9uZTt6LWluZGV4OjEwMDt9I21lcm1haWQtc3ZnLTE3IC5mbG93Y2hhcnRUaXRsZVRleHR7dGV4dC1hbmNob3I6bWlkZGxlO2ZvbnQtc2l6ZToxOHB4O2ZpbGw6I2YzZjNmNzt9I21lcm1haWQtc3ZnLTE3IDpyb290ey0tbWVybWFpZC1mb250LWZhbWlseToidHJlYnVjaGV0IG1zIix2ZXJkYW5hLGFyaWFsLHNhbnMtc2VyaWY7fQ==\",rel:\"stylesheet\",type:\"text/css\"}),`\n`,(0,t.jsxs)(e.p,{children:[`This type of architecture was fun to wrestle with and I\\u2019m glad I did (I freaking\nlove diagramming)! One of the most fun things for me was trying to figure out\nhow to handle concurrency in Go. I\\u2019m coming from Browser and Node land, so I\\u2019m\nused to `,(0,t.jsx)(e.code,{children:\"async\"}),\" and \",(0,t.jsx)(e.code,{children:\"await\"}),`, an event loop with several types of queues, and a\ncall stack. Go\\u2019s concurrency model is different, but it\\u2019s not too difficult to\nunderstand; its simpler than other models I have experience with, such as the\nones you might come accross in traditional C programs.`]}),`\n`,(0,t.jsx)(e.p,{children:\"My understanding of concurrency in Go can be summarized as the following:\"}),`\n`,(0,t.jsx)(n,{children:(0,t.jsx)(e.p,{children:\"Don\\u2019t communicate by sharing memory; share memory by communicating\"})}),`\n`,(0,t.jsxs)(e.p,{children:[\"Rather than trying to use \",(0,t.jsx)(e.code,{children:\"locks\"}),\" and \",(0,t.jsx)(e.code,{children:\"mutexes\"}),` to control access to shared\nmemory, Go encourages you to use channels to communicate between goroutines. In\nfact, `,(0,t.jsx)(e.code,{children:\"bubbletea\"}),` uses its own scheduler to handle goroutines that are\ndispatched by `,(0,t.jsx)(e.code,{children:\"Commands\"}),`; it\\u2019s kind of an anti-pattern to use go routines in a\n`,(0,t.jsx)(e.code,{children:\"bubbletea\"}),` program. If you want to learn the basic rules of thumbs when it\ncomes to `,(0,t.jsx)(e.code,{children:\"Commands\"}),` in BubbleTea, check out this\n`,(0,t.jsx)(e.a,{href:\"https://charm.sh/blog/commands-in-bubbletea/\",rel:\"noopener\",target:\"_blank\",children:\"blog post\"})]}),`\n`,(0,t.jsxs)(e.p,{children:[\"So yeah, I didn\\u2019t \",(0,t.jsx)(e.em,{children:\"directly\"}),` write any goroutines in my program, but I did have\nto reason about how to handle concurrency in my program, specifically when I was\nconsuming the streamed response from OpenAI\\u2019s API. I had to figure out how to\nhandle the stream of responses from OpenAI\\u2019s API and update the state of my\napplication accordingly. I ended up assigning my own ID\\u2019s to each message that I\nreceived from the stream and then used those ID\\u2019s to sort the messages that were\ncoming in.`]}),`\n`,(0,t.jsx)(e.pre,{className:\"language-go\",children:(0,t.jsxs)(e.code,{className:\"language-go code-highlight\",children:[(0,t.jsxs)(e.span,{className:\"code-line line-number\",line:\"1\",children:[(0,t.jsx)(e.span,{className:\"token keyword\",children:\"func\"}),\" \",(0,t.jsx)(e.span,{className:\"token punctuation\",children:\"(\"}),\"m \",(0,t.jsx)(e.span,{className:\"token operator\",children:\"*\"}),\"Model\",(0,t.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),\" \",(0,t.jsx)(e.span,{className:\"token function\",children:\"appendAndOrderProcessResults\"}),(0,t.jsx)(e.span,{className:\"token punctuation\",children:\"(\"}),\"msg ProcessResult\",(0,t.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),\" \",(0,t.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,t.jsxs)(e.span,{className:\"code-line line-number\",line:\"2\",children:[\"\t\",(0,t.jsx)(e.span,{className:\"token comment\",children:'// log.Println(\"Appending and ordering process results\", msg)'}),`\n`]}),(0,t.jsxs)(e.span,{className:\"code-line line-number\",line:\"3\",children:[\"\tm\",(0,t.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),\"ArrayOfProcessResult \",(0,t.jsx)(e.span,{className:\"token operator\",children:\"=\"}),\" \",(0,t.jsx)(e.span,{className:\"token function\",children:\"append\"}),(0,t.jsx)(e.span,{className:\"token punctuation\",children:\"(\"}),\"m\",(0,t.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),\"ArrayOfProcessResult\",(0,t.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),\" msg\",(0,t.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),`\n`]}),(0,t.jsxs)(e.span,{className:\"code-line line-number\",line:\"4\",children:[\"\tm\",(0,t.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),\"CurrentAnswer \",(0,t.jsx)(e.span,{className:\"token operator\",children:\"=\"}),\" \",(0,t.jsx)(e.span,{className:\"token string\",children:'\"\"'}),`\n`]}),(0,t.jsx)(e.span,{className:\"code-line line-number\",line:\"5\",children:`\n`}),(0,t.jsxs)(e.span,{className:\"code-line line-number\",line:\"6\",children:[\"\t\",(0,t.jsx)(e.span,{className:\"token comment\",children:\"// we need to sort on ID here because go routines are done in different threads\"}),`\n`]}),(0,t.jsxs)(e.span,{className:\"code-line line-number\",line:\"7\",children:[\"\t\",(0,t.jsx)(e.span,{className:\"token comment\",children:\"// and the order in which our channel receives messages is not guaranteed.\"}),`\n`]}),(0,t.jsxs)(e.span,{className:\"code-line line-number\",line:\"8\",children:[\"\t\",(0,t.jsx)(e.span,{className:\"token comment\",children:\"// TODO: look into a better way to insert (can I Insert in order)\"}),`\n`]}),(0,t.jsxs)(e.span,{className:\"code-line line-number\",line:\"9\",children:[\"\tsort\",(0,t.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),(0,t.jsx)(e.span,{className:\"token function\",children:\"SliceStable\"}),(0,t.jsx)(e.span,{className:\"token punctuation\",children:\"(\"}),\"m\",(0,t.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),\"ArrayOfProcessResult\",(0,t.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),\" \",(0,t.jsx)(e.span,{className:\"token keyword\",children:\"func\"}),(0,t.jsx)(e.span,{className:\"token punctuation\",children:\"(\"}),\"i\",(0,t.jsx)(e.span,{className:\"token punctuation\",children:\",\"}),\" j \",(0,t.jsx)(e.span,{className:\"token builtin\",children:\"int\"}),(0,t.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),\" \",(0,t.jsx)(e.span,{className:\"token builtin\",children:\"bool\"}),\" \",(0,t.jsx)(e.span,{className:\"token punctuation\",children:\"{\"}),`\n`]}),(0,t.jsxs)(e.span,{className:\"code-line line-number\",line:\"10\",children:[\"\t\t\",(0,t.jsx)(e.span,{className:\"token keyword\",children:\"return\"}),\" m\",(0,t.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),\"ArrayOfProcessResult\",(0,t.jsx)(e.span,{className:\"token punctuation\",children:\"[\"}),\"i\",(0,t.jsx)(e.span,{className:\"token punctuation\",children:\"]\"}),(0,t.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),\"ID \",(0,t.jsx)(e.span,{className:\"token operator\",children:\"<\"}),\" m\",(0,t.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),\"ArrayOfProcessResult\",(0,t.jsx)(e.span,{className:\"token punctuation\",children:\"[\"}),\"j\",(0,t.jsx)(e.span,{className:\"token punctuation\",children:\"]\"}),(0,t.jsx)(e.span,{className:\"token punctuation\",children:\".\"}),`ID\n`]}),(0,t.jsxs)(e.span,{className:\"code-line line-number\",line:\"11\",children:[\"\t\",(0,t.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),(0,t.jsx)(e.span,{className:\"token punctuation\",children:\")\"}),`\n`]}),(0,t.jsxs)(e.span,{className:\"code-line line-number\",line:\"12\",children:[(0,t.jsx)(e.span,{className:\"token punctuation\",children:\"}\"}),`\n`]})]})}),`\n`,(0,t.jsx)(e.p,{children:\"If you\\u2019ve got a better solution in your brain, hit me up; I\\u2019d love to hear it!\"}),`\n`,(0,t.jsxs)(e.h3,{id:\"publishing-something-to-the-world-that-isnt-a-todo-app\",className:\"title\",children:[(0,t.jsx)(e.a,{tabIndex:\"0\",href:\"#publishing-something-to-the-world-that-isnt-a-todo-app\",children:(0,t.jsx)(e.svg,{\"aria-hidden\":!0,viewBox:\"0 0 16 16\",height:\"16\",width:\"16\",children:(0,t.jsx)(e.path,{className:\"fill-accent stroke-accent\",fillRule:\"evenodd\",d:\"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z\"})})}),\"Publishing Something to the World (That Isn\\u2019t a Todo App)\"]}),`\n`,(0,t.jsxs)(e.p,{children:[`Let\\u2019s be honest (well I\\u2019ll be honest), the first app most people make when they\nare learning a new language or framework is a TODO app. I\\u2019m TODO\\u2019d out guys and\nunlike Ryan Florence, I don\\u2019t think I have it in me right now to make Trellix\n\\u{1F606}. Plus, I `,(0,t.jsx)(e.em,{children:\"just\"}),\" made a TODO app with \",(0,t.jsx)(e.code,{children:\"lit\"}),\" and \",(0,t.jsx)(e.code,{children:\"htmx\"}),` (you can read about it\n`,(0,t.jsx)(e.a,{href:\"./12-go-htmx-and-lit/\",children:\"here\"}),\" \\u{1F605}).\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"I was excited to make something that could live on \",(0,t.jsx)(e.code,{children:\"homebrew\"}),` and be used by my\ncolleagues! Novelty is exciting and publishing something to `,(0,t.jsx)(e.code,{children:\"homebrew\"}),` is as\nnovel as it comes for me (well at least it was at the time of writing this blog\npost). Not going to lie, I felt like a real nerd boss when I saw my TUI on\n`,(0,t.jsx)(e.code,{children:\"homebrew\"}),\" \\u{1F60E} (well at least as a tap).\"]}),`\n`,(0,t.jsx)(o,{children:\"Variety is the spice of life\"}),`\n`,(0,t.jsxs)(e.h2,{id:\"the-things-i-struggled-with\",className:\"title\",children:[(0,t.jsx)(e.a,{tabIndex:\"0\",href:\"#the-things-i-struggled-with\",children:(0,t.jsx)(e.svg,{\"aria-hidden\":!0,viewBox:\"0 0 16 16\",height:\"16\",width:\"16\",children:(0,t.jsx)(e.path,{className:\"fill-accent stroke-accent\",fillRule:\"evenodd\",d:\"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z\"})})}),\"The Things I Struggled with\"]}),`\n`,(0,t.jsx)(e.p,{children:(0,t.jsx)(e.strong,{children:\"Struggling was fun so I\\u2019m not going to say the \\u201Cnot so fun parts\\u201D\"})}),`\n`,(0,t.jsxs)(e.h3,{id:\"event-propagation-and-delegation\",className:\"title\",children:[(0,t.jsx)(e.a,{tabIndex:\"0\",href:\"#event-propagation-and-delegation\",children:(0,t.jsx)(e.svg,{\"aria-hidden\":!0,viewBox:\"0 0 16 16\",height:\"16\",width:\"16\",children:(0,t.jsx)(e.path,{className:\"fill-accent stroke-accent\",fillRule:\"evenodd\",d:\"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z\"})})}),\"Event Propagation and Delegation\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"I\\u2019m \",(0,t.jsx)(e.em,{children:\"so\"}),` used to not having to think about event propagation and delegation when\nprogramming because, thankfully, I have my buddy the browser to handle that for\nme. Having to manually handle event propagation and delegation was a bit of a\nstruggle for me; not because it\\u2019s hard, but because I failed to remember to do\nit at first \\u{1F605}. For example, I have a `,(0,t.jsx)(e.code,{children:\"ProcessResult\"}),` message in my program that\nI use to handle the messages that I receive from OpenAI\\u2019s API. I spent way too\nlong trying to figure out why my event wasn\\u2019t being propagated down to the\n`,(0,t.jsx)(e.code,{children:\"Update\"}),\" function of my \",(0,t.jsx)(e.code,{children:\"message-stream\"}),`\\u2026 turns out I straight up forgot to\npropagate the event down to the `,(0,t.jsx)(e.code,{children:\"sessions\"}),\" model\\u{1F605}.\"]}),`\n`,(0,t.jsxs)(e.h3,{id:\"error-handling\",className:\"title\",children:[(0,t.jsx)(e.a,{tabIndex:\"0\",href:\"#error-handling\",children:(0,t.jsx)(e.svg,{\"aria-hidden\":!0,viewBox:\"0 0 16 16\",height:\"16\",width:\"16\",children:(0,t.jsx)(e.path,{className:\"fill-accent stroke-accent\",fillRule:\"evenodd\",d:\"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z\"})})}),\"Error Handling\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"So \",(0,t.jsx)(e.code,{children:\"Go\"}),` encourages you to return two values from your functions: the first one\nbeing your actual value and the second value being an error. This is a great\npattern because it forces you to handle your errors. However, if you choose to`,(0,t.jsx)(e.br,{}),`\n`,\"ignore this convention and \",(0,t.jsx)(e.code,{children:\"panic\"}),\" everywhere\\u2026 you\\u2019re gonna have a bad time.\"]}),`\n`,(0,t.jsxs)(e.p,{children:[`I eventually realized the errors of my ways and started to return and handle my\nerrors appropriately. Despite what people say about `,(0,t.jsx)(e.code,{children:\"Go\"}),` not having error\nhandling, I found the whole multiple returns thing and returning an error to be\nquite nice. It\\u2019s a bit verbose, but it\\u2019s clear and it\\u2019s easy to reason about.`]}),`\n`,(0,t.jsx)(l,{containerClassName:\"w-[100%] pb-[70%] md:w-[50%] md:pb-[35%]\",src:\"https://giphy.com/embed/l3vR8UKKNSEl4LoqI\",giphyAttributionSrc:\"https://giphy.com/clips/southpark-season-6-episode-3-south-park-iFnPrbYFkY9xak3cFu\"}),`\n`,(0,t.jsx)(e.p,{children:\"If you don\\u2019t wanna have a bad time, handle your errors \\u{1F605}.\"}),`\n`,(0,t.jsxs)(e.h3,{id:\"concurrency-and-the-lack-of-content\",className:\"title\",children:[(0,t.jsx)(e.a,{tabIndex:\"0\",href:\"#concurrency-and-the-lack-of-content\",children:(0,t.jsx)(e.svg,{\"aria-hidden\":!0,viewBox:\"0 0 16 16\",height:\"16\",width:\"16\",children:(0,t.jsx)(e.path,{className:\"fill-accent stroke-accent\",fillRule:\"evenodd\",d:\"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z\"})})}),\"Concurrency and the Lack of Content\"]}),`\n`,(0,t.jsxs)(e.p,{children:[`Alright, so I mentioned above that I had to figure out how to handle the stream\nof responses from OpenAI\\u2019s API and update the state of my application\naccordingly. However, I was not prepared for the sheer lack of content available\non the interweb when it came to this subject matter. I\\u2019m privelleged on the web\nto be able to find a blog post or a video on just about anything I want to learn\nabout, but when it came to `,(0,t.jsx)(e.code,{children:\"bubbletea\"}),` and handling things like streams of data\nin `,(0,t.jsx)(e.code,{children:\"Go\"}),\", it was kinda tough to find content. I had to rely on the \",(0,t.jsx)(e.code,{children:\"bubbletea\"}),`\nexamples, the `,(0,t.jsx)(e.code,{children:\"bubbletea\"}),` documentation, and trial and error to figure out how\nproperly author my program.`]}),`\n`,(0,t.jsxs)(e.h3,{id:\"publishing\",className:\"title\",children:[(0,t.jsx)(e.a,{tabIndex:\"0\",href:\"#publishing\",children:(0,t.jsx)(e.svg,{\"aria-hidden\":!0,viewBox:\"0 0 16 16\",height:\"16\",width:\"16\",children:(0,t.jsx)(e.path,{className:\"fill-accent stroke-accent\",fillRule:\"evenodd\",d:\"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z\"})})}),\"Publishing\"]}),`\n`,(0,t.jsxs)(e.p,{children:[`Okay, I did mention above that I was super excited to publish my TUI to\n`,(0,t.jsx)(e.code,{children:\"homebrew\"}),`, but that doesn\\u2019t mean it wasn\\u2019t a struggle! I learned during my\npublishing attempts via github actions that my usage of `,(0,t.jsx)(e.code,{children:\"sqlite\"}),\" relied on \",(0,t.jsx)(e.code,{children:\"CGO\"}),`\n(which is using C in your Go code). For those of you who don\\u2019t know, `,(0,t.jsx)(e.code,{children:\"sqlite\"}),` is\na database engine writte in C\\u2026 so I had to figure out how to get `,(0,t.jsx)(e.code,{children:\"CGO\"}),` to work\nwith `,(0,t.jsx)(e.code,{children:\"gorelaser\"}),\" (the tool I used to publish my TUI to \",(0,t.jsx)(e.code,{children:\"homebrew\"}),\").\"]}),`\n`,(0,t.jsxs)(e.p,{children:[`I eventually figured out that I needed to\nuse\\xA0`,(0,t.jsx)(e.a,{href:\"https://github.com/goreleaser/goreleaser-cross\",rel:\"noopener\",target:\"_blank\",children:\"goreleaser-cross\"}),` and\nset the `,(0,t.jsx)(e.code,{children:\"CGO_ENABLED\"}),\" environment variable to \",(0,t.jsx)(e.code,{children:\"1\"}),\" in my \",(0,t.jsx)(e.code,{children:\".goreleaser.yml\"}),` file.\nI also eliminated the binaries for `,(0,t.jsx)(e.code,{children:\"linux\"}),\" and \",(0,t.jsx)(e.code,{children:\"windows\"}),` because, well, I didn\\u2019t\nwant to have to support them \\u{1F605}.`]}),`\n`,(0,t.jsxs)(e.p,{children:[\"I don\\u2019t have a full grasp on what is going on in my \",(0,t.jsx)(e.code,{children:\"Makefile\"}),` yet, but I\\u2019ve got\nenough of a grasp to know how to publish releases and how to create release\ncandidates.`]}),`\n`,(0,t.jsxs)(e.h3,{id:\"testing\",className:\"title\",children:[(0,t.jsx)(e.a,{tabIndex:\"0\",href:\"#testing\",children:(0,t.jsx)(e.svg,{\"aria-hidden\":!0,viewBox:\"0 0 16 16\",height:\"16\",width:\"16\",children:(0,t.jsx)(e.path,{className:\"fill-accent stroke-accent\",fillRule:\"evenodd\",d:\"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z\"})})}),\"Testing\"]}),`\n`,(0,t.jsx)(e.p,{children:`I\\u2019m not going to lie, I didn\\u2019t write a single test for this project. It\\u2019s on my\nlist of things to learn.`}),`\n`,(0,t.jsxs)(e.h2,{id:\"closing-thoughts\",className:\"title\",children:[(0,t.jsx)(e.a,{tabIndex:\"0\",href:\"#closing-thoughts\",children:(0,t.jsx)(e.svg,{\"aria-hidden\":!0,viewBox:\"0 0 16 16\",height:\"16\",width:\"16\",children:(0,t.jsx)(e.path,{className:\"fill-accent stroke-accent\",fillRule:\"evenodd\",d:\"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z\"})})}),\"Closing Thoughts\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"I had a lot of fun making this TUI and I learned a lot about Go, \",(0,t.jsx)(e.code,{children:\"bubbletea\"}),`,\nand OpenAI\\u2019s API. I learned a lot from the struggle (like anything in life) and\nthe end result, while not perfect, is good enough. After all, what\\u2019s right is\nwhat works. Am I right? \\u{1F606}`]}),`\n`,(0,t.jsx)(e.p,{children:`I\\u2019m excited to continue to learn Go and I\\u2019m excited to make more applications in\nthe future! Was what I wrote helpful? Did you learn something interesting? If\nyou did, drop me a line; I\\u2019d love to hear from you!`})]})}function p(a={}){let{wrapper:e}=a.components||{};return e?(0,t.jsx)(e,{...a,children:(0,t.jsx)(m,{...a})}):m(a)}function s(a,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return I(x);})();\n;return Component;","frontmatter",{"_52":53,"_54":55,"_56":57,"_58":59,"_60":61},{"_79":82,"_46":87,"_65":90,"_75":95,"_77":96},{"_52":83,"_54":84,"_56":85,"_58":59,"_60":86},"2024-02-29T00:00:00.000Z","The way in which you fight is a reflection of how you live your life.","It's pretty lit y'all","Go, HTMX, and Lit",{"_48":88,"_50":89,"_62":63,"_64":26},"\n\n\n**The way in which you fight is a reflection of how you live your life.** I\nheard this in a video interview with arguably the greatest Brazilian Jiu-Jitsu\nfighter of all time, Roger Gracie. Roger was speaking from the perspective of a\nBrazilian Jiu-Jitsu fighter, but if we take this philosophy further and apply it\nto software engineering, it's no surprise why writing a todo app in Go, HTMX,\nand web components felt \"right\" to me. I value simplicity and the fundamentals\n-- in all things.\n\n## The standard disclaimer\n\nIt's a well known fact -- or at least it should be after reading this sentence\n-- that I love React and the modern frontend landscape. We've got a bunch of\ngreat solutions for developing web applications these days, all with their own\namazing communities and authors! Whether you're a\n[Svelter](https://kit.svelte.dev/), a\n[SolidJs homie](https://start.solidjs.com/getting-started/what-is-solidstart),\na; [Remixer](https://remix.run/), a [NextJser](https://nextjs.org/), an\n[Astro Head](https://astro.build/), or a [Qwickster](https://qwik.dev/) (sorry\nif I forgot any of y'all other framework peoples) there's a place for you! For\nme, being able to utilize component driven architecture, creating amazing user\nexperiences, and delivering value to customers with React (hopefully Remix one\nday too) has been a blessing 🙏🏽! We've got great folks like Dan Abramov, Sophie\nBits, Ryan Florence, Kent C. Dodds, Michael Chan, to name a few, in the React\ncommunity and they help make this place on the internet the bustling, super fun\nenvironment that it is. With all that being said, there's an adage that we all\nneed to remember when we're developing solutions, and say it with me now:\n**choose the right tool for the job**.\n\n\n Computer science is all about tradeoffs. There are no solutions, only trade\n offs in this life. So when I'm saying choose \"right\", right constitutes\n different things to different people. The \"right\" tool depends on the problem\n at hand, the team involved and the project requirements. It's inherently\n subjective.\n\n\nNow let's be honest, people are going to flock to whatever technology that they\nare the most comfortable with -- and that's fine. If someone asked me to create\na website today, I'd unashamedly reach for Remix. Someone else, maybe one of my\nPHP bros from back in the day, might reach for Laravel; to quote Kent C. Dodds\non this, what you're using is probably fine. What we need to remember is that\nwe're here to deliver value through our solutions; our customers aren't going to\ncare what tech stack we chose to use to deliver said value.\n\n## What I made\n\nYou can check out the _finished_ version of the application at\n[your leisure](https://taran-todo.fly.dev/signin) now complete with google oauth\n😏. If you're not comfortable signing in with your google account (which is\nfine), you can sign up with a local user account. I say _finished_ because I\ndidn't implement a forgot password flow though -- that's probably something I\nshould add to my todo list 🤭.\n\nThe application allows you to do the standard CRUD operations with a todo list.\nYou can add, edit, delete, and mark as done a todo item. I also added a \"Delete\nall\" modal button and a \"bulk upload\" feature.\n\n\n\n## Why Go, HTMX, and Lit\n\n_TLDR; exposing myself to different ways of thinking is important for growth and\nI wanted to evaluate HTMX as a solution for adding interactivity and a SPA like\nfeel to MPAs._\n\nNow you might be wondering, \"Taran, you've just blabbered on about how much you\nlove modern frontend web development and how you'd reach for Remix when creating\na new fullstack application... so why the heck did you write a todo app with Go,\nHTMX, and Lit?\". My response: **because I can**. Cheekiness aside, the biggest\nreason for my decision is that I think it's important to expose oneself to\ndifferent methods and approaches to problem solving and solution design. It's\nimportant to draw wisdom from many different places. When wisdom comes from only\none place, it becomes rigid and stale. If you know, you know.\n\nGaining experience is the reason why I migrated my site from\n[Gatsby to Remix](/blog/09-my-remix-rewrite). Gaining experience is also the\nreason why I entertained switching from PHP to JavaScript early on in my career.\nI fell so in love with JS that I bet my livelihood on it and dedicated myself to\nbecoming a UI developer, moving away from the backend and focusing solely on\nmodern frontend.\n\nI've been a web developer for about 7ish years now and about 4-5 of those years\nhave been spent solely working with React. It's been great! I've worked on many\ninteresting applications and even contributed to a few open source projects\n(minor contributions, but I'm still proud of them)! Most of them being in the FE\narea of web development.\n\nHowever, and this point has been discussed by Rich Harris and a few others, I do\nremember when I first started with PHP and jQuery -- making stuff for the web\nfelt simpler than it is today. JavaScript fatigue wasn't a thing. Back then, it\ndidn't feel like you needed a module bundler, a state management solution, and\nsometimes, even endpoints that returned JSON. I'm of course hearkening back to\nthe days when a basic multipage application was the way in which we created\nsolutions. User hits an URL and the server responds with some HTML. Basic.\nSimple. It gets the job done. I wrote my view templates using something like\nBlade (which was essentially HTML with some handy template functions), I had\ndata injected into my template via the server, and if I needed some\ninteractivity, I would utilize jQuery. In fact, my first ever gig didn't even\nuse a framework -- the thing was written from scratch! No fancy ORMs, templating\nlanguages, or whatever -- just straight up PHP.\n\nI didn't appreciate how complicated things had gotten for us frontend developers\nuntil I had to give a presentation to one of the backend teams at my current\nplace of employment (Best Buy Canada). The backend team works primarily in Java\nand they wanted to know how they could bootstrap a frontend application for an\nupcoming initiative. I was more than happy to give a presentation on what I\nconsidered to be the bare minimum knowledge required to create a solution with\nReact. When I completed my slide deck, I ended up with this meme --\n\n\n\nObviously, innovations like Vite and NextJS make it a bit easier to get started,\nbut unfortunately, we aren't able to utilize any of these solutions at work (or\nat least that's my understanding of the situation right now). So now, not only\ndid my backend colleagues need to learn how to use React, but they also had to\nget familiar with the surrounding ecosytem. They had to set up a webpack\nconfiguration (which is not fun, even for the best of us), CSS modules, Redux,\nand, like I said earlier, in addition to learning React, they had to learn about\nadditional tooling like prettier and eslint. It was at this point of creating\nthe presentation, I said to myself, \"they're going to need to hire a FE engineer\nto help them with this\". Ultimately, the advice we gave the team was to create a\nbasic multipage application -- there was no need to make the thing a SPA. It was\nan internal tool that just needed to work and it needed to get shipped out\nyesterday 😅. **What's right is what works**.\n\nHowever, it was shortly after this presentation that I saw\n[theprimagen](https://www.youtube.com/watch?v=zjHHIqI9lUY) post a reaction video\nto [HTMX](https://htmx.org/). I think I had already seen a\n\n[fireship video](https://www.youtube.com/watch?v=r-GSGH2RxJs) prior to this as\nwell; those 100 second overviews are the freaking best! It was at this point,\nafter watching Prime react, I thought, \"Hey, I wonder if HTMX would be a viable\ntechnology for my backend colleagues to adopt. If they are ever wanting to add\ninteractivity and a SPA like feel to their applications without having to learn\nabout typescript, module bundlers, vdoms, and a plethora of other technologies\nthat are invovled with modern FE development, could HTMX be the way?\". I wanted\nto answer this for myself, so I did. The answer: HTMX is **pretty damn great**\nand I think it's a great solution for teams wanting to limit the surface area of\ntheir solutions.\n\n## How does Go fit into this 😕?\n\nI've been wanting to pick up an additional low-level language for years -- I\nwork in TypeScript for my day job and it does the job well, but I've always\nwanted to use something with pointers 😆. Go seemed like a great choice for me\nbecause it was built with the web in mind, Go isn't Java (that's a plus for me\nbecause I don't want to be forced back into OOP), and I've always wanted to try\nprocedural style coding and Go lends itself really nicely to this programming\nparadigm! Go is a relatively small and simple language; it has only about 25\nkeywords, you can do pretty much anything with the standard library, it has many\ndifferent compilation targets, and the documentation is stellar; it feels like a\nmore modern C! I won't be diving into the history of Go or anything like that --\nwhile the topic is interesting, it has no bearings on why I like the language!\n\nFirst things first, before I could build out my todo app, I had to grok the\nlanguage. The language is relatively simple, and that's by design. There's no\nwhile loops, everything is a for. There's no extending classes in Go -- we have\nstruct embeds and methods you can attach on objects.\n\nWhen I first started working on this todo app, my first and most obvious\nquestion, after rushing through a course by Jon Calhoun (great course by the\nway), was \"what's the best framework to write Go web apps?\". The last time I did\na traditional multi page app was when I was writing UI code in a Ruby on Rails\napp. For Ruby, the defacto framework to use is Rails and for Python, it's most\nlikely Django. I expected there to be an equivalent in Go. I checked Google,\nreddit, asked ChatGPT and after all the research, the answer that I came up with\nwas: \"Use the standard library whenever you can and embrace packages that are\ncompatible with it\" 😅. Usually, when you're writing Go, the standard library is\nenough and you should pick and choose libraries as you need them. Need something\nto write migrations? Check out goose. The built in mux/router not good enough\nfor you? Maybe try Chi. Need an orm, try out gORM. There are frameworks that\nexist like Gin, Echo, fiber and they all seem great, but there's no defacto\nwinner in this conversation. Plus, I was interested in learning Go... not a\nframework. If the standard library is enough, then why not use it? That being\nsaid, I did end up using Chi for my routing since it just took away some of the\nboilerplate that I'd have to write myself.\n\nThat's not to say Go doesn't have its problems; it does. For instance, I sort of\nmiss `ternaries` and the lack of `enums` is a bit annoying, the error handling\nis verbose which can irk some people (no `try catches`), `interfaces` are tough\nto wrap your head around because they are implicitly implemented (we don't\nexplicilty declare we're implementing an interface).\n\n```go:title=main.go\ntype IsWalkable interface {\n Walk() string\n}\n\ntype Person struct {\n Name string\n}\n\nfunc (p *Person) Walk() {\n return fmt.Println(\"%s is walking\", p.Name)\n}\n\nfunc main() {\n taran := Person{\n Name: \"Taran\"\n }\n\n // Taran can walk (gratefully so)\n // but the Person struct never directly said it was\n // implementing IsWalkable\n taran.Walk()\n}\n```\n\nRegardless of its \"shortcomings\", Go is a great language. It's practical. It's\nsimple. It's boring. These are all things that are important to businesses (and\nme) when I'm developing solutions and applications 😄! I don't want to have to\nbe \"fighting\" with my programming languages! In fact, I like Go so much, I'm\nspending all of 2024 developing side projects with it; I'm currenlty working on\na ChatGPT terminal ui (TUI) and it's been a damn blast! I'll launch it to\nhomebrew soon and y'all can run it in the future.\n\n## HTMX\n\nAlright, anyone who is anyone in the tech twitter space, well at least the\npeople I follow, have mentioned or tangentially mentioned HTMX. HTMX is a\nlibrary that allows one the ability to build modern user interfaces with\nHypermedia as the engine of application state (HATEOAS)... but what does that\nmean for us noobs 😅? In essence, HTMX enhances the built in HTML elements with\ncustom attributes so that not only `` and `

` elements can make HTTP\nrequests, it removes the limitation of only having access to GET and POST\nmethods, and most importantly, it simplifies the mental model when building web\napps! If you want your button to make a GET request, just add an hx-get\nattribute to the element, and boom, like magic, your button will make a GET 😀!\n\nFor most modern web apps that were built in the post React era, the general\nmodel for single page applications has been: Request a page from the server,\nload a blank index.html page, react renders on the page with some default\ncontent (or a loading spinner), we fetch some JSON data from a server somewhere,\nwe then convert that JSON data into some sort of react components, and then\nfinally, react-dom creates those HTML elements and adds them to the Document. At\nthis point, react rehydrates the page and attaches all the click handlers that\nthe elements on the page require. Upon user interaction, React will most likely\nneed to update some state, update the virtual dom, diff the virtual dom with the\nactual dom, and then merge the diffed components into the actual dom. I've\npurposely glossed over the rendering process here because each one of these\ntopics warrants larger discussion and have had plenty of blog posts written\nabout them by much more qualified engineers.\n\n\n\nWith HTMX, this process is simplified. We fetch a page from the server, the\nserver responds with HTML (which may or may not include HTMX attributes within\nHTML tags) and the browser renders it. There may be some JS that runs client\nside based on the code returned from the server but for simplicity sake, let's\njust say it is vanilla HTML with HTMX attributes. When a user interacts with a\npage, we make an AJAX call to the server and the server responds with, you\nguessed it, HTML. Based on the returned HTML and the HTMX attribute present on\nthe elements, HTMX will use a predetermined strategy to swap or replace content\non the page with the server generated markup.\n\n\n\nNotice something with the HTMX version? Look real hard. We didn't need to\ntransform JSON into our HTML; we skipped a step! We took the HTML and just\nplopped it in where it needed to be based on our defined strategy; this is\nincredibly simple and simplicity, like I said above, is great 😄. HTMX puts the\npower back into the hands of our backend engineers; it doesn't care what backend\nframework you're using, what language you choose to right your app in, or what\nthe latest flavour of the month is -- it's HTML, through and through. Give it\nHTML and it'll know what to do.\n\nBut Taran, I like my modern tooling and the ability to create composable\ncomponents; hell, that's what made React and all those other frameworks great.\nBud, I do too! However, it's possible to have components for our backend view\ntemplates as well; sure, they aren't as nifty as our FE versions, but if what\nyou're looking for is components, with type safety in Go, check out templ. I\nhaven't used it myself but based on what I've read online and seen in videos, it\nseems like a great way to get type safe components with easy composability and\ngreat DX!\n\nBut wait... if HTMX is such a great library, why the heck did you have to reach\nfor something like [lit](https://lit.dev/). While HTML and HTMX is great, there\nare certain UI interactions that aren't supported all that well with vanilla\nHTML elements. The canonical example is a modal (although we do have a\n`\"}),\" and \",(0,n.jsx)(e.code,{children:\"\"}),` elements can make HTTP\nrequests, it removes the limitation of only having access to GET and POST\nmethods, and most importantly, it simplifies the mental model when building web\napps! If you want your button to make a GET request, just add an hx-get\nattribute to the element, and boom, like magic, your button will make a GET \\u{1F600}!`]}),`\n`,(0,n.jsx)(e.p,{children:`For most modern web apps that were built in the post React era, the general\nmodel for single page applications has been: Request a page from the server,\nload a blank index.html page, react renders on the page with some default\ncontent (or a loading spinner), we fetch some JSON data from a server somewhere,\nwe then convert that JSON data into some sort of react components, and then\nfinally, react-dom creates those HTML elements and adds them to the Document. At\nthis point, react rehydrates the page and attaches all the click handlers that\nthe elements on the page require. Upon user interaction, React will most likely\nneed to update some state, update the virtual dom, diff the virtual dom with the\nactual dom, and then merge the diffed components into the actual dom. I\\u2019ve\npurposely glossed over the rendering process here because each one of these\ntopics warrants larger discussion and have had plenty of blog posts written\nabout them by much more qualified engineers.`}),`\n`,(0,n.jsx)(a,{lazyLoadImage:!0,containerClassName:\"mx-0 lg:mx-0\",imgDivClassName:\"aspect-w-[1280] aspect-h-[1111]\",src:\"https://res.cloudinary.com/dinypqsgl/image/upload/v1709176917/blog/11-go-and-htmx/traditional-react-spa_gsl0ct.png\",alt:\"Excalidraw diagram of a traditional react SPA\"}),`\n`,(0,n.jsx)(e.p,{children:`With HTMX, this process is simplified. We fetch a page from the server, the\nserver responds with HTML (which may or may not include HTMX attributes within\nHTML tags) and the browser renders it. There may be some JS that runs client\nside based on the code returned from the server but for simplicity sake, let\\u2019s\njust say it is vanilla HTML with HTMX attributes. When a user interacts with a\npage, we make an AJAX call to the server and the server responds with, you\nguessed it, HTML. Based on the returned HTML and the HTMX attribute present on\nthe elements, HTMX will use a predetermined strategy to swap or replace content\non the page with the server generated markup.`}),`\n`,(0,n.jsx)(a,{lazyLoadImage:!0,containerClassName:\"mx-0 lg:mx-0\",imgDivClassName:\"aspect-w-[1280] aspect-h-[1189]\",src:\"https://res.cloudinary.com/dinypqsgl/image/upload/v1709177399/blog/11-go-and-htmx/htmx-setup_owzl2t.png\",alt:\"Excalidraw diagram of a simple HTMX setup\"}),`\n`,(0,n.jsx)(e.p,{children:`Notice something with the HTMX version? Look real hard. We didn\\u2019t need to\ntransform JSON into our HTML; we skipped a step! We took the HTML and just\nplopped it in where it needed to be based on our defined strategy; this is\nincredibly simple and simplicity, like I said above, is great \\u{1F604}. HTMX puts the\npower back into the hands of our backend engineers; it doesn\\u2019t care what backend\nframework you\\u2019re using, what language you choose to right your app in, or what\nthe latest flavour of the month is \\u2014 it\\u2019s HTML, through and through. Give it\nHTML and it\\u2019ll know what to do.`}),`\n`,(0,n.jsx)(e.p,{children:`But Taran, I like my modern tooling and the ability to create composable\ncomponents; hell, that\\u2019s what made React and all those other frameworks great.\nBud, I do too! However, it\\u2019s possible to have components for our backend view\ntemplates as well; sure, they aren\\u2019t as nifty as our FE versions, but if what\nyou\\u2019re looking for is components, with type safety in Go, check out templ. I\nhaven\\u2019t used it myself but based on what I\\u2019ve read online and seen in videos, it\nseems like a great way to get type safe components with easy composability and\ngreat DX!`}),`\n`,(0,n.jsxs)(e.p,{children:[`But wait\\u2026 if HTMX is such a great library, why the heck did you have to reach\nfor something like `,(0,n.jsx)(e.a,{href:\"https://lit.dev/\",rel:\"noopener\",target:\"_blank\",children:\"lit\"}),`. While HTML and HTMX is great, there\nare certain UI interactions that aren\\u2019t supported all that well with vanilla\nHTML elements. The canonical example is a modal (although we do have a\n`,(0,n.jsx)(e.code,{children:\"

Today I learned about... go

Back to all tags

Making a TUI with Go

Blog post about: A reflection on my experience making a TUI with Go

Go, HTMX, and Lit

Blog post about: It's pretty lit y'all

Today I learned about...
go