![Web Dev Fuel](/img/default-banner.jpg)
- 42
- 130 962
Web Dev Fuel
Portugal
Registrace 22. 07. 2021
Go SaaS API Third Party Integration (#2 - Database, Field Values, Get Tags by Integration ID)
In part #2 of the Go SaaS API Third Party Integration, we'll go over how to improve upon the integration, with a PostgreSQL database, a schema to enable arbitrary field values for apps/integrations and a modified route to get tags by the integration ID.
📓 Notes
www.webdevfuel.com/notes/go-saas-api-third-party-integration
🖥️ Repository (Source Code)
github.com/webdevfuel/go-saas-api-third-party-integration
🚀 HTMX Go SaaS Blueprint
www.webdevfuel.com/hgsb
📓 Notes
www.webdevfuel.com/notes/go-saas-api-third-party-integration
🖥️ Repository (Source Code)
github.com/webdevfuel/go-saas-api-third-party-integration
🚀 HTMX Go SaaS Blueprint
www.webdevfuel.com/hgsb
zhlédnutí: 101
Video
Go SaaS API Third Party Integration (#1 - HTTP Server, Routing, Integrations Interface)
zhlédnutí 298Před 6 měsíci
In part #1 of the Go SaaS API Third Party Integration, we'll go over how to build a simple integration, with an HTTP Server, Routing and Integrations, with credentials from environment variables. 📓 Notes www.webdevfuel.com/notes/go-saas-api-third-party-integration 🖥️ Repository (Source Code) github.com/webdevfuel/go-saas-api-third-party-integration 🚀 HTMX Go SaaS Blueprint www.webdevfuel.com/hg...
HTMX vs React (Data, UI and Actions)
zhlédnutí 2,4KPřed 7 měsíci
In this video, we'll compare HTMX and React, and go over some of the strengths of HTMX and what makes it have such a great DX. 00:00 - Introduction 00:24 - HTMX Go SaaS Blueprint 01:02 - Comparison Diagram 07:59 - Project Example 📚 HTMX Go SaaS Blueprint www.webdevfuel.com/hgsb
Go SQL Comparison (squirrel, raw queries, sqlc and sqlx)
zhlédnutí 5KPřed 8 měsíci
In this video, you'll learn the pros and cons of 4 different ways to interact with an SQL database in Go, by comparing squirrel vs raw queries vs sqlc vs sqlx.
HTMX Go Todo List Application (#8 - Trigger and SortableJS)
zhlédnutí 1,6KPřed 9 měsíci
In this video, of the HTMX Go Todo List Application series, you'll learn how to update items inside the tasks list and use HTMX attributes and SortableJS to reorder tasks. 00:00 - HTMX attributes to update task 02:10 - Update task handler 05:57 - Install and set up SortableJS with Vite 08:33 - Add HTMX attributes to items form 10:20 - Add hidden input and classes to item block 12:48 - Reorder t...
HTMX Go Todo List Application (#7 - If Else and Swap Target)
zhlédnutí 935Před 9 měsíci
In this video, of the HTMX Go Todo List Application series, you'll learn how to use if else statements inside Go templates to have dynamic content and how to use different swapping targets to update different parts of the DOM from where the action is triggered. 00:00 - HTMX attributes to delete task 01:02 - HTMX Go SaaS Academy 02:54 - Delete task handler 08:08 - Display task input on edit 12:1...
HTMX Go Todo List Application (#6 - Swap and Out of Bounds)
zhlédnutí 1,4KPřed 9 měsíci
In this video, of the HTMX Go Todo List Application series, you'll learn how to parse all templates inside the templates directory into a variable and set up Sprig with Go templates. 00:00 - Set up bare-bones templates 01:41 - Install and set up air 03:01 - Tasks handler 07:06 - Display count from db/server on initial render 09:25 - Set up bare-bones form block 09:56 - HTMX Go SaaS Academy 10:3...
HTMX Go Todo List Application (#5 - Parse Templates and Sprig)
zhlédnutí 889Před 9 měsíci
In this video, of the HTMX Go Todo List Application series, you'll learn how to parse all templates inside the templates directory into a variable and set up Sprig with Go templates. 00:00 - Sprig 01:12 - HTMX Go SaaS Blueprint 01:56 - Parse templates 07:55 - Initialize templates 🖥️ Repository (Source Code) github.com/webdevfuel/htmx-go-todo 📚 HTMX Go SaaS Blueprint www.webdevfuel.com/hgsb
HTMX Go Todo List Application (#4 - CRUD Operations)
zhlédnutí 1,5KPřed 9 měsíci
In this video, of the HTMX Go Todo List Application series, you'll learn how to set up TailwindCSS with a Go template and run it in development mode alongside Vite. 00:00 - Define structs 01:42 - HTMX Go SaaS Blueprint 02:17 - Fetch tasks 06:48 - Fetch task 09:23 - Update task 11:47 - Fetch count 12:49 - Insert task 16:53 - Delete task 25:52 - Order tasks 🖥️ Repository (Source Code) github.com/...
HTMX Go Todo List Application (#3 - SQLite Database)
zhlédnutí 2KPřed 9 měsíci
In this video, of the HTMX Go Todo List Application series, you'll learn how to conncect to SQLite and migrate the database. 00:00 - Define DB variable 00:32 - Define function to connect to DB 03:11 - Define function to disconnect from DB 03:37 - Define function to setup/migrate DB 04:54 - Run previous functions inside main.go 🖥️ Repository (Source Code) github.com/webdevfuel/htmx-go-todo
HTMX Go Todo List Application (#2 - TailwindCSS)
zhlédnutí 2,1KPřed 9 měsíci
In this video, of the HTMX Go Todo List Application series, you'll learn how to set up TailwindCSS with a Go template and run it in development mode alongside Vite. 00:00 - Install tailwind packages 00:32 - Initialize configuration file 00:52 - Add paths to template files 01:42 - Install and set up concurrently package 02:56 - Add tailwind directives to CSS file 03:44 - Add CSS file to base tem...
HTMX Go Todo List Application (#1 - Router, Vite and Template)
zhlédnutí 4,5KPřed 9 měsíci
In this video, of the HTMX Go Todo List Application series, you'll learn how to set up routing withing a Go project, bundle HTMX into a JavaScript file with Vite, and render your first template with Go std library. 00:00 - Introduction 00:35 - Set up routing with Chi 02:36 - Install Prettier to format Go Templates 03:47 - Set up Vite bundling for HTMX 07:20 - Render template with Go Std Library...
HTMX and Golang - Building A Counter With State Management
zhlédnutí 13KPřed 11 měsíci
HTMX and Golang - Building A Counter With State Management
Build A Website with Astro, TailwindCSS and React (#4 - Taxonomies and Authors)
zhlédnutí 495Před rokem
Build A Website with Astro, TailwindCSS and React (#4 - Taxonomies and Authors)
Build A Website with Astro, TailwindCSS and React (#3 - Mobile Header)
zhlédnutí 956Před rokem
Build A Website with Astro, TailwindCSS and React (#3 - Mobile Header)
Build A Website with Astro, TailwindCSS and React (#2 - Header Dropdown and Contact Form)
zhlédnutí 1,5KPřed rokem
Build A Website with Astro, TailwindCSS and React (#2 - Header Dropdown and Contact Form)
Build A Website with Astro, TailwindCSS and React (#1 - Initial Setup, Home Page and Posts)
zhlédnutí 3,3KPřed rokem
Build A Website with Astro, TailwindCSS and React (#1 - Initial Setup, Home Page and Posts)
Should You Use An HTTP Framework With Go?
zhlédnutí 221Před rokem
Should You Use An HTTP Framework With Go?
Todo List Application With Go and Svelte #2 - CORS and Svelte Frontend
zhlédnutí 1,7KPřed rokem
Todo List Application With Go and Svelte #2 - CORS and Svelte Frontend
Todo List Application With Go and Svelte #1 - Router Setup and CRUD Operations
zhlédnutí 2KPřed rokem
Todo List Application With Go and Svelte #1 - Router Setup and CRUD Operations
Deploy Multiple NextJS Websites On One Ubuntu Instance (Update)
zhlédnutí 3,2KPřed 2 lety
Deploy Multiple NextJS Websites On One Ubuntu Instance (Update)
Deploy NextJS Website From Scratch (with Ubuntu, NGINX and pm2)
zhlédnutí 26KPřed 2 lety
Deploy NextJS Website From Scratch (with Ubuntu, NGINX and pm2)
Build a Simple Application Sidebar: Easy useContext React Hooks Tutorial
zhlédnutí 1,3KPřed 2 lety
Build a Simple Application Sidebar: Easy useContext React Hooks Tutorial
Simplify Your React Forms with useReducer Hooks: Easy Refactoring Tutorial
zhlédnutí 3,4KPřed 2 lety
Simplify Your React Forms with useReducer Hooks: Easy Refactoring Tutorial
Install Elixir on Ubuntu with asdf: Easy Step-by-Step Guide
zhlédnutí 3,8KPřed 2 lety
Install Elixir on Ubuntu with asdf: Easy Step-by-Step Guide
Create Your Own Phoenix LiveView Todo List App: Easy-to-Follow Step-by-Step Tutorial
zhlédnutí 3,6KPřed 2 lety
Create Your Own Phoenix LiveView Todo List App: Easy-to-Follow Step-by-Step Tutorial
Create a Phoenix Multi-Tenant App with Triplex: Expert Step-by-Step Tutorial
zhlédnutí 1,8KPřed 2 lety
Create a Phoenix Multi-Tenant App with Triplex: Expert Step-by-Step Tutorial
Master React Router Protected Routes with Our Typescript Step-by-Step Tutorial
zhlédnutí 10KPřed 2 lety
Master React Router Protected Routes with Our Typescript Step-by-Step Tutorial
Master Phoenix LiveView App Deployment with Our Ubuntu and Dokku Step-by-Step Guide
zhlédnutí 1KPřed 2 lety
Master Phoenix LiveView App Deployment with Our Ubuntu and Dokku Step-by-Step Guide
hello, I think you should move tx, err := DB.BeginTx(ctx, nil) to the top of the funcion deleteTask() and execute all the rest of the SQL statements with tx using tx.Exec() and tx.Query().
Hi @WebDevFuel, I noticed your point about LiveView not being ideal for user interfaces and features like Drag and Drop. That might have been true back in the days of Phoenix 1.4 or even 1.5. But things have come a long way since then! With the introduction of hooks, LiveView now allows us to create incredibly dynamic and interactive interfaces. I've personally built some fantastic projects with it, and it's surprisingly simple and efficient. Also, while AlpineJS was great, LiveView now handles many of those dynamic tasks so well that there's less need for it. Remember, the video you're referring to is from three years ago, and the LiveView landscape has improved significantly since then. Cheers, @WebDevFuel
sql injections using sqlx? lol not true
If you build the query manually, yes. I said in the video that it's a possibility, but not if you build the query in the correct way (e.g. with question marks and the values as arguments).
The language is called Go, not Golang.
Sure, but it's referred to as Golang all the time so it's fine either way.
React for FE and Phoenix for Backend, problem solved LV feels like going backward since for lot of projects you need better UI which are reactive. React is easily one of the modern ways to do that without tinkering with vanilla js
Yes, this video is a bit old so LiveView has improved a lot, but still, for complex UIs a frontend library might the better choice! 😊
@@webdevfuel generally thats the case..i see people start using this and ends up with terrible codebases with poor DX
Greate video man! I really appreciate it.
Thanks man! I'm glad you enjoyed and I appreciate your comment!
Really great!! That’s the exact tutorial I was looking for!
Thanks! I'm glad it was helpful! I need to do an updated version for sure, since there have been so many changes in Astro recently. 😊
sqlc is my favorite, because has the highest performance (my benchmarks). I use it with a million users in mysql and postgres. You also have more control over your queries since you write them by hand. Good video!!! Thank you.
Does it work well with N+1 queries? (for two or more structs)
Thank you for sharing your experience! I've actually been using sqlx or the std library more, since I've found I had to modify the sqlc code for some edge cases. But if it works for you, that's what's important!! 😊
Thanks! That was very insightful.
Thank you very much! I'm really glad it was insightful to you! 🙏
Thanks, great video.
Thanks, I appreciate your comment and am really glad that you liked it!
Very nice explanation, Can you please provide all the code snippets examples you have used.
I don't think I have the code snippets publicly available, but I'll try to find them and update the description with the link to the repo! Thank you for watching! 🙏
You didn't put a next app on the server, what's it running?
It's running a next app indeed. 😊
Which app files do I need to upload to the server to make it work. Let me guess, you don't know because you always let a third party do the thinking for you?
Haha, no. Actually I did this video to teach you how to self-host and avoid using a third-party hosting platform. I go over which files need to be uploaded in the video.
Awesome explanation and amazing seeing examples for each library. Thank you.
Thank you, I appreciate you watching. Glad it was helpful to you! 🙏
im gonna be honest here, that was a LOT OF STUFF for getting a simple counter up and running. I'm pretty sure every other language/framework would have this in a couple of lines. But each to their own!
That's because it's not about doing a counter. You're creating a server that handles routing, sends response to client, and handles some sort of state. With this guide you now have more tools you can use to create a web application. Notice that we did very minimal amount on client side. Imagine doing all of this, but without HTMX. Now, we would have to do everything we just did but ALSO we would need to select the right element, create an event handler, create a fetch, and parse the data. So actually, HTMX helped us write less code.
Yes, maybe not the best use-case for HTMX, but like @TheSatyrical said, once you take into account all the complexity that's necessary to run a "real" full-stack web application, HTMX makes it much easier. I've used it to build a members area for students of Web Dev Fuel, and it was sooo easy to not only develop but also deploy.
If you go full HTMX without a external backend, then you are going to suffer a lot when you want to expand your product to mobile for example. Because your mobile app needs JSON, and not pieces of html from the api.
It's possible to return HTML or JSON based on the Accept header sent with a request. It's rare that both a web app and mobile app endpoints need data shaped the same way, even with JSON (e.g. authentication), so it's a totally ok solution to return two different things (HTML or JSON) to web app or mobile app.
But the api will return specific structured html for one website right? Is that not exactly the opposite of the purpose of splitting business logic and presentation?@@webdevfuel
The more i think about this. Isn't a database connection already some kind of API? Back to SQL i guess ;)@@webdevfuel
Can we get tailwind intellisense in templ templates yet?
Yes, I got it working with Neovim and it works just fine! 😊
How can we manage global state server side and trigger UI events based on changes to server side state. Coming from SPAs I am struggling with the context switch and how to drive dynamic content.
I actually have another CZcams Short on how to use events to drive state updates. The basic idea is to have elements that are listening to an event, and also have those elements themselves concerned with requesting the update from the server. A bit different than OOB, but I've been enjoying it more lately! 😊
watching your series of htmx+go and it's absolutely magnificent that tutorial like that are free!
Thank you! I'm enjoying a lot creating content around HTMX, so I'm glad it has been helpful to you!
React needs to go away...while HTMX steps in
HTMX is amazing!
Thank you very much for this tutorial. Exactle the stacks I was looking for and really well explained! 🤩🤩
Glad it was helpful!
What application is that, that you using for the notes?
Google excalidraw 👌🏿
It's excalidraw.
this was a much needed "go-htmx" series for me! Thanks man!!
That's great! I'm going to release even more things related to Go and HTMX!
that delete function 🤯
It's a great function for sure, haha. A bit complex, but necessary to rearange the order of the items.
Hi! Code for this series is missing. Is it possible to update it in github? Thanks
sqlx it is. sql proficiency , control and gigachad points.
I agree, sqlx is probably my favorite choice too!
Although it was my first contact with HTMX, it gave me an idea of what can be done.
Cool, I'm glad to know that! It really opens up a lot of new possibilities for building web applications!
@webdevfuel May you please tell which drawing tool do you use?
Sure! In this video I was using Presentify, but I'm now using ScreenBrush.
Can I use Dokku to host my app on my own laptop instead of being on the cloud?
Yes, you could for sure do that! It probably needs adjustments on the setup, but it's doable for sure.
What a mess! I doubt this can handle big projects, especially when dealing with APIs across multiple apps and platforms.
Actually it's pretty nice. But if it's not a paradigm you enjoy, that's totally fine! At the end of the day what matters is building the projects, so we should all use what we're comfortable with! 😊
i knew you were the right giy for me when i say the neovim
Haha! Thanks man, great comment. Neovim really is the best text editor, I never looked back since I started using it!
@@webdevfuel same it's the best
Great series! I have learned a lot, but I got lost with some of the code changes. Could you please put the final version in the repo as well? Maybe as a separate branch.
Sorry, I'll try to recreate the code, but I didn't really organize it that well in this series when it comes to branches and commits. I'm still learning and getting better at this :) I'm really glad you enjoyed it and learned from it!
your english is amazing man
Thanks man, I appreciate that! :)
Thanks, helped me a lot!!
Thank you for watching, really glad it helped you! :)
Obrigado pelo tutorial. Gostei muito 👍 Ando neste momento a explorar o templ, se quiseres fazer alguma coisa com este tópico agradecia 😅 Estes últimos videos não foram atualizados no repositório 😏 Bom ano e votos de bom trabalho.
Boas. Obrigado eu por assistires! Nunca usei o templ, só ouvi um episódio do criador no podcast Go Time, mas tenho curiosidade em experimentar em projetos. Vou atualizar o repositório, obrigado pela dica! Bom ano para ti também e tudo de bom! 🙏
When you say "go ahead and paste this" in these videos are we supposed to copy the completed version on your github? I don't see incremental branches in the GH repo so not sure where we are supposed to be copy & pasting from.
For example, the item section of form.html you pasted around 22:50 is very different from what is on your Github. Sorry if this seems like nitpicking but it has a huge impact on the viewer's ability to follow along.
Thanks for letting me know, I didn't see it as nitpicking! 🙂 And I understand that these things are important for you to follow along better. I'm getting better at organizing repos to teach, but this one could definitely have been better. I'll try to recreate the repo with more organized branches and commits.
@@webdevfuel thank you for being respectful towards ordinary viewers!
Very cool tutorial with a small misconception how hx-target="#counter" works - it *DOES NOT* replace <div id="counter">{{.CounterValue}}</div> , it replaces CONTENT of this div, i.e. no need for parsing and replacing {{.CounterValue}} - it should be something like w.Write([]byte(strconv.Itoa(counter.GetValue()))) . Otherwise you will end up with a nested <div id="counter" class="counter"><div id="counter">0</div></div>
Use `your string here, without having to escape " or '` for Go strings ;) Nice tutorial!
Thanks for the tip! I appreciate your comment and glad you enjoyed the tutorial! 😊
Hmm, I have a few issues with this, I wonder if there's an agreed upon solution within the community? - you now specify the div counter in three places which makes maintenance a nightmare if you consider a real world application - because the state is on the server, it is now shared among different users. Even if you'd store it in the database per user (which isn't viable in this and many more scenarios), it would still be shared among tabs. Seems client side javascript would still be necessary?
I suppose form inputs would solve number 2
You should not have to duplicate the counter, the way I understand it is you could target the counter div (innerHTML) and make the request and just return the updated number and it should update correctly within the counter div.
A framework with state hooks 🪝 would be nice, now we know how this works imperative it’s time to start using it declarative
Thanks for explaining useReducer with forms. Especially the onChange part! Very helpfull!
Thank you for watching! I'm glad the explanation was helpful to you. Reducers can be hard to understand at first but they're very simple once you get the hang of it! 😊
Thanks.
click bait
Very well explained HTMX. Thanks for creating this playlist!!
Thanks! I'm really glad it was well explained!
are you sure this work ? in my case, I found if there will create multiple port open when running with cluster fork or cluster. Below is message I found: 2023-12-06T18:21:27: PM2 log: [lite-cluster] - 1701861687410 - lite-cluster with pm2 started! 2023-12-06T18:21:27: PM2 log: App [nextjs:0] starting in -fork mode- 2023-12-06T18:21:27: PM2 log: App [nextjs:0] online 2023-12-06T18:21:27: PM2 log: App [nextjs:1] starting in -fork mode- 2023-12-06T18:21:27: PM2 log: App [nextjs:1] online 2023-12-06T18:21:27: PM2 log: [lite-cluster] - 1701861687893 - source=lite-pm2-bus. ⚠ Port 3000 is in use, trying 3001 instead. and here I watch open port, and 2 new ports open: Socket Flowhash Listen Local Address 423890380bfb8ef7 0 0/0/128 *.3001 423890380bfb66f7 0 0/0/128 *.3000
Nice video, subbed!
Thanks for the sub, glad it was helpful to you!
nice! thanks try to control your "go ahead" :)
Thanks for the feedback!
Yeah it's enough to just say you go to ... or you have to do X.
What about having different domains for each website? How to allocate resources for each website? Traffic? RAM? etc
It's possible to configure the max RAM for a process usage with pm2. If it goes over the limit, the process will restart.
🤤 Promo'SM
thanks!
I'm glad it was helpful! Thanks for watching!