- 4
- 17 096
Samuel Cook
เข้าร่วมเมื่อ 20 ธ.ค. 2020
Go Live Browser Refresh (using Kiruna)
This is a tutorial showing how to use Kiruna to get live reloading in full-stack Golang applications, including browser refresh and true CSS hot reloading.
KIRUNA REPO: github.com/sjc5/kiruna
Kiruna is a powerful development server and production build tool for developing and deploying full-stack Go applications. You can think of it as sort of a Vite alternative for the Go ecosystem.
Dev server features:
• Automatic smart rebuilds and browser refreshes
• Instant hot reloading for CSS files (without a full page refresh)
• Highly configurable to support any use case
• Glob pattern file watching
• Granular build hooks with customizable timing strategies
Production optimizations:
• Static asset hashing and embedding
• Basic CSS bundling and minification
• Critical CSS inlining
• Safely serve public static assets with immutable cache headers
Dev-time reloads are smart and fast. Based on the type of file you edit and your associated configuration options, Kiruna will do the minimum amount of work necessary to get your changes to your browser as quickly as possible.
Kiruna is completely decoupled from any specific frameworks or libraries, so you can use it with any Go server framework or router you choose, or just use the standard library.
KIRUNA REPO: github.com/sjc5/kiruna
Kiruna is a powerful development server and production build tool for developing and deploying full-stack Go applications. You can think of it as sort of a Vite alternative for the Go ecosystem.
Dev server features:
• Automatic smart rebuilds and browser refreshes
• Instant hot reloading for CSS files (without a full page refresh)
• Highly configurable to support any use case
• Glob pattern file watching
• Granular build hooks with customizable timing strategies
Production optimizations:
• Static asset hashing and embedding
• Basic CSS bundling and minification
• Critical CSS inlining
• Safely serve public static assets with immutable cache headers
Dev-time reloads are smart and fast. Based on the type of file you edit and your associated configuration options, Kiruna will do the minimum amount of work necessary to get your changes to your browser as quickly as possible.
Kiruna is completely decoupled from any specific frameworks or libraries, so you can use it with any Go server framework or router you choose, or just use the standard library.
มุมมอง: 419
วีดีโอ
Remix Easy Mode Tutorial, featuring Zod, Prisma & SQLite
มุมมอง 1.1Kปีที่แล้ว
Remix Easy Mode is a new toolkit for developing highly interactive, typesafe Remix apps. Inspired by the TRPC and React Query developer experience. Check it out! Remix Easy Mode Repo on GitHub: github.com/sjc5/remix-easy-mode Tutorial App Repo on GitHub: github.com/sjc5/favorite-word-app Remix Easy Mode on NPM: www.npmjs.com/package/remix-easy-mode More about Remix: remix.run The Prisma blog po...
Remix.run Can Be Highly Interactive: useFetcher + Zod
มุมมอง 6Kปีที่แล้ว
UPDATE: Now available as an npm package: github.com/sjc5/remix-easy-mode#readme To install:`npm i remix-easy-mode zod superjson` Learn how to build highly interactive, typesafe full-stack apps in Remix - TRPC style - using Zod, Remix's built-in useFetcher hook, and a few hundred lines of simple helper boilerplate setup. Twitter: sjc5_ Website: samcook.cc Learn about Remix: remix.run...
How To Use Material Design Components (Web) In A Svelte App - SvelteJS Material Components Tutorial
มุมมอง 10K3 ปีที่แล้ว
This tutorial shows how you can use plain old Material Design Components (Web) in your Svelte apps. Specifically, we walk through how to make a re-usable button component (with ripple effect) by copying the code directly from material.io (with a few extra tricks to make things work smoothly with Svelte). Final code can be found here: github.com/sjc5/svelte-material-starter My Website: samcook.c...
Tried to run it on windows and didn't work for me. rlyeh in kiruna on ci ❯ go run .\cmd\dev\ 2024/08/24 18:30:09 Kiruna initializing sidecar refresh server on port 10000 2024/08/24 18:30:13 Kiruna Go binary compilation took: 3.9350176s 2024/08/24 18:30:13 Kiruna compilation complete: dist\bin\main 2024/08/24 18:30:13 Kiruna app started with pid 17316 2024/08/24 18:30:13 Kiruna error: failed to match file: syntax error in pattern 2024/08/24 18:30:13 Kiruna error: failed to match file: syntax error in pattern 2024/08/24 18:30:13 Kiruna using disk file system (development) Starting server on: localhost:8080 template: pattern matches no files: `index.go.html`
what are your thoughts on indie-stack
I misspoke at 6:12. It does a full refresh simply because the template needs to be reparsed after it’s edited.
Why did you pass the function? It would have worked better to use an event dispatcher. You could have created a use:action event on the component for when the event is dispatched.
Cool. Thanks.
This is great!
You have a very handy api. But why did you choose the snake_case style, since js uses camelCase everywhere?
snake_case_is_much_more_readable_for_long_descriptive_variables. camelCaseIsMuchLessReadableForLongDescriptiveVariables.
@@sjc5 I agree with you 100%. But for some reason in the js community it is common to write as camelCase
@@izzy7541 Yeah, camelCase definitely is the “accepted standard”. But that will never change until some people start insisting on doing it a different way!
Sorry to those of you who watched the old version with super low audio volume! Hopefully this one is much better.
UPDATE: An evolved version of this pattern has now been published to npm as an easily consumable toolkit: github.com/sjc5/remix-easy-mode#readme
Well done! ❤
This seems like a good pattern, I may use this on my app
Good timing, now available as a package! github.com/sjc5/remix-easy-mode#readme
Question: What would the advantages of this be compared to simply re-exporting the action from the api route, which i am currently doing?
Won’t passing the actual action to your custom hook force it to be bundled in the frontend code? Which would be you would include and other back end code in your front end like the prisma client for example? Would it be better to just pass the action type as a generic to the function?
Excellent point. It really should just be a generic.
@@sjc5 Any plan to update the repo to reflect this change? I am still new to typescript and remix, so i conceptually understand the above, but not sure what the follow on changes would be if instead of the action itself, you only had a action_type.
@@joelalexander7293 Yeah good idea, should do a follow-up on this and get the repo updated.
@@joelalexander7293 Now available as a package, of course addressing this concern :) github.com/sjc5/remix-easy-mode#readme
@@sjc5 awesome, thanks!
Really cool, but wondering if there's a reason to choose this stack vs. just going with create-t3-app in the first place?
Thanks! Put simply, the SSR story isn't nearly as nice with create-t3-app as with Remix. It's totally possible to SSR, but you have to build these SSG helpers to do it in a nice way, and it's just not even close to as nice as Remix's built-in loader pattern IMO. Also, you can export hooks from Remix resource routes -- you can't export hooks from NextJS server-side files! That alone makes Remix a better DX.
@@sjc5 Awesome. So do you use this approach for data loading/mutating in conjunction with Remix's loaders/actions for other data?
@@SeanLazer I think in most cases for data loading, you’ll want to use standard route-level loaders. Otherwise you’re reintroducing spinners. Similarly, for mutations involving a page transition, the standard Remix action pattern makes sense. This is more just a helper around useFetcher to make building those “same page mutation” APIs really painless.
Opa, muito bom o vídeo, sobre a questão de ter um único id, poderia usar o sistema de bind:this do próprio svelte, para vincular cada botão, não?
I wanted to add something that worked for me. I modified the way you set id for each button with a random string function and created a random id "material-*randomString*" with length 8 and inside the button component. Thank you for this tutorial by the way
Thanks for making this video - helped a lot!
hey man, awsome video! Everything works fine, except i get an error from vscode: on "@use '@material....' " it tells me that it "can't find the stylesheet to import". Got any suggestions?
Thanks you very much 👌
Thanks :)
Thank you very much for the efforts that you put into the video. Learned a few things for sure. Excellent presentation skills as well. Cheers!
What about a complete svelte tutorial, I like the way you explain, thank you
Thank you! 😊
You're very welcome!
Thank you. I was looking into Svelte Material UI, but the documentation sucks. This way, at least I can understand what is going on
Exactly! There very well may be even more efficient ways still of doing this, so let us know if you improve on the recipe.
@@sjc5 Embrace the sveltness! The whole explicit id solution can be simplified with bind:this, allowing for a direct reference onto the button element. No need for extra work and making sure there are no name collisions. Also I feel like text should be passed as a slot, so it will handle like vanilla html. Svelte offers a lot of ways to cut down on complexity and code length, but it takes a while to get used to. Have been using it in production for about 1 1/2 years, still find new things every few weeks.
I removed it and started using carbon for svelte