Samuel Cook
Samuel Cook
  • 4
  • 17 384
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.
Переглядів: 444

Відео

Remix Easy Mode Tutorial, featuring Zod, Prisma & SQLite
Переглядів 1,2 тис.Рік тому
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
Переглядів 6 тис.Рік тому
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
Переглядів 10 тис.3 роки тому
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...

КОМЕНТАРІ

  • @stalexxx2
    @stalexxx2 25 днів тому

    question is: how you make vairance.(diff actions on one route, with diff params)

  • @danielvega646
    @danielvega646 4 місяці тому

    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`

  • @ajinkyax
    @ajinkyax 6 місяців тому

    what are your thoughts on indie-stack

  • @sjc5
    @sjc5 7 місяців тому

    I misspoke at 6:12. It does a full refresh simply because the template needs to be reparsed after it’s edited.

  • @nathanm2891
    @nathanm2891 7 місяців тому

    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.

  • @eleah2665
    @eleah2665 10 місяців тому

    Cool. Thanks.

  • @mailok
    @mailok Рік тому

    This is great!

  • @izzy7541
    @izzy7541 Рік тому

    You have a very handy api. But why did you choose the snake_case style, since js uses camelCase everywhere?

    • @sjc5
      @sjc5 Рік тому

      snake_case_is_much_more_readable_for_long_descriptive_variables. camelCaseIsMuchLessReadableForLongDescriptiveVariables.

    • @izzy7541
      @izzy7541 Рік тому

      @@sjc5 I agree with you 100%. But for some reason in the js community it is common to write as camelCase

    • @sjc5
      @sjc5 Рік тому

      @@izzy7541 Yeah, camelCase definitely is the “accepted standard”. But that will never change until some people start insisting on doing it a different way!

  • @sjc5
    @sjc5 Рік тому

    Sorry to those of you who watched the old version with super low audio volume! Hopefully this one is much better.

  • @sjc5
    @sjc5 Рік тому

    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

  • @JonathanHigger
    @JonathanHigger Рік тому

    This seems like a good pattern, I may use this on my app

    • @sjc5
      @sjc5 Рік тому

      Good timing, now available as a package! github.com/sjc5/remix-easy-mode#readme

  • @marqetintl
    @marqetintl Рік тому

    Question: What would the advantages of this be compared to simply re-exporting the action from the api route, which i am currently doing?

  • @kyuss789
    @kyuss789 Рік тому

    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?

    • @sjc5
      @sjc5 Рік тому

      Excellent point. It really should just be a generic.

    • @joelalexander7293
      @joelalexander7293 Рік тому

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

    • @sjc5
      @sjc5 Рік тому

      @@joelalexander7293 Yeah good idea, should do a follow-up on this and get the repo updated.

    • @sjc5
      @sjc5 Рік тому

      @@joelalexander7293 Now available as a package, of course addressing this concern :) github.com/sjc5/remix-easy-mode#readme

    • @joelalexander7293
      @joelalexander7293 Рік тому

      @@sjc5 awesome, thanks!

  • @SeanLazer
    @SeanLazer Рік тому

    Really cool, but wondering if there's a reason to choose this stack vs. just going with create-t3-app in the first place?

    • @sjc5
      @sjc5 Рік тому

      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.

    • @SeanLazer
      @SeanLazer Рік тому

      @@sjc5 Awesome. So do you use this approach for data loading/mutating in conjunction with Remix's loaders/actions for other data?

    • @sjc5
      @sjc5 Рік тому

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

  • @diegoqueiroz6054
    @diegoqueiroz6054 2 роки тому

    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?

  • @johnicebergvelez4492
    @johnicebergvelez4492 2 роки тому

    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

  • @infty5829
    @infty5829 2 роки тому

    Thanks for making this video - helped a lot!

  • @noto.j1045
    @noto.j1045 2 роки тому

    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?

  • @berrutz4211
    @berrutz4211 2 роки тому

    Thanks you very much 👌

  • @ruans.p.5323
    @ruans.p.5323 2 роки тому

    Thanks :)

  • @mackenmd
    @mackenmd 3 роки тому

    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!

  • @parvati27
    @parvati27 3 роки тому

    What about a complete svelte tutorial, I like the way you explain, thank you

  • @dv4able
    @dv4able 3 роки тому

    Thank you! 😊

    • @sjc5
      @sjc5 3 роки тому

      You're very welcome!

  • @neelsg
    @neelsg 3 роки тому

    Thank you. I was looking into Svelte Material UI, but the documentation sucks. This way, at least I can understand what is going on

    • @sjc5
      @sjc5 3 роки тому

      Exactly! There very well may be even more efficient ways still of doing this, so let us know if you improve on the recipe.

    • @Sogmandl
      @Sogmandl 3 роки тому

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

    • @axetroll
      @axetroll 3 роки тому

      I removed it and started using carbon for svelte