- 30
- 80 402
Code & Stuff
United States
Registrace 15. 01. 2023
Join my adventures as I write code, build projects, and explore the latest in technology.
Simplify React and Phoenix using Inertia JS: A quick look
Some of the hardest parts of React development are routing and data fetching. The Inertia JS library, originally from the Laravel community, was recently brought to Phoenix by the folks behind SavvyCal.
Join me as I walk through a couple of demos that show how Inertia can fit into modern monolithic applications.
Links
Screen recording software I use (affiliate): screen.studio/@Yy75o
Project source repo: github.com/ChristianAlexander/phoenix-inertia-react-demo
Inertia Phoenix docs: hexdocs.pm/inertia
Inertia Site: inertiajs.com/
Timestamps
Intro - 00:00
Inertia Demo - 1:22
Repo Walkthrough - 3:41
Database, Forms, and Validation - 4:40
Summary / Next Steps - 5:59
Join me as I walk through a couple of demos that show how Inertia can fit into modern monolithic applications.
Links
Screen recording software I use (affiliate): screen.studio/@Yy75o
Project source repo: github.com/ChristianAlexander/phoenix-inertia-react-demo
Inertia Phoenix docs: hexdocs.pm/inertia
Inertia Site: inertiajs.com/
Timestamps
Intro - 00:00
Inertia Demo - 1:22
Repo Walkthrough - 3:41
Database, Forms, and Validation - 4:40
Summary / Next Steps - 5:59
zhlédnutí: 2 421
Video
Extending Phoenix LiveView with Hooks
zhlédnutí 939Před 14 dny
Phoenix LiveView is typically enough to build an app, but there are times where it is necessary to boost performance or get access to browser-native behavior only available to JavaScript. Luckily, LiveView has an escape hatch for these scenarios: hooks! Join me as I walk through the process of building a simple countdown timer app with LiveView, and then improve it with a little JS. Links Scree...
How fast is your Elixir code? Find out with Benchee!
zhlédnutí 992Před měsícem
Benchee is a common microbenchmarking package used in Elixir and Erlang to measure the performance characteristics of functions. In this video, I show how to use Benchee with real examples-from the new OTP 27 JSON support to sorting algorithms and even Advent of Code solutions. Links Livebook Code: gist.github.com/ChristianAlexander/6c64b2df15f1dec395b341199b416e9a Screen recording software I u...
Native JSON in OTP 27! (Elixir, Erlang, Gleam)
zhlédnutí 1,3KPřed měsícem
Erlang OTP, which runs all Erlang, Elixir, and Gleam apps, now has built-in support for JSON. Soon, this will eliminate the need for third party libraries to use the web's most common data serialization format! Here's a quick preview of what the new JSON support looks like! Links Demo repo: github.com/ChristianAlexander/json-otp-27 Screen recording software I use (affiliate): screen.studio/@Yy75o
GitHub's Secret Blocks
zhlédnutí 1,7KPřed měsícem
Communicate more clearly on GitHub by emphasizing text with GitHub's beta block feature. This uses an extension of Markdown called GitHub Flavored Markdown, which makes it available in most places across the site. Links Syntax documentation: github.com/orgs/community/discussions/16925 Screen recording software I use (affiliate): screen.studio/@Yy75o
How to Track Faces in Live Video with Elixir: Quick Tutorial
zhlédnutí 807Před měsícem
In this quick walkthrough, learn how to detect and track faces from a live video feed using the Elixir OpenCV binding library called Evision! Links Evision Library: github.com/cocoa-xu/evision Livebook Code: gist.github.com/ChristianAlexander/256f18818055494cbe4483390dd65314 Screen recording software I use (affiliate): screen.studio/@Yy75o
How to Use Remote GPUs in AI Projects with Elixir Livebook
zhlédnutí 605Před 2 měsíci
Learn how to accelerate local AI projects by connecting to cloud-hosted GPUs, using Elixir's Livebook. This tutorial describes why Elixir and the BEAM are a great fit for scaled AI tasks, and walks through the process of running the code step-by-step. Links - Part 1: czcams.com/video/rHRbZ_MH3Lw/video.html - Harness code repository: github.com/christianalexander/bumblebee-model-harness - Livebo...
Transcribe Podcasts with Whisper AI & Elixir in Livebook
zhlédnutí 806Před 2 měsíci
Transcribe Podcasts with Whisper AI & Elixir in Livebook
Build a React JS Full Text Search - No Backend Needed
zhlédnutí 120Před 3 měsíci
Build a React JS Full Text Search - No Backend Needed
Real-Time Techniques: Polling, Long Polling, Server-Sent Events & WebSockets
zhlédnutí 213Před 3 měsíci
Real-Time Techniques: Polling, Long Polling, Server-Sent Events & WebSockets
Build a GPT Haiku Generator (Simple AI Tutorial)
zhlédnutí 143Před 9 měsíci
Build a GPT Haiku Generator (Simple AI Tutorial)
Fine-Tuning GPT 3.5: From Generalist to Specialist
zhlédnutí 2,4KPřed 10 měsíci
Fine-Tuning GPT 3.5: From Generalist to Specialist
Building a ChatGPT Slackbot with Javascript
zhlédnutí 384Před 10 měsíci
Building a ChatGPT Slackbot with Javascript
Very nice. I wonder if it will *only* work with React, or if it will mount any type of function component?
Inertia supports React, Vue, and Svelte out of the box. The protocol is pretty simple, so I imagine one could port it to anything else with a little effort if there isn’t already an unofficial adapter out there.
Please create more stuff on phoenix
I get the argument about having to use React if you are forced to use a component library (ask yourself if its worth the complexity) but whats up with all the arguments about "high latency connection"? Its not like React doesn't need to also fetch stuff from the server and in form intensive web apps there is really no difference. You load the page. Fill the form and send it to the server.
The latency stuff comes up for immediate interactivity like opening a modal. There were arguments against Rails Hotwire a few weeks ago where the Hey calendar was compared to Google Calendar. Since the modal code was included in the calendar code bundle, the time from clicking the “new event” button to the modal showing was near-instant. In a Hotwire / Liveview context, this button press event would be sent to the server and HTML would be returned.
Agreed though: if a server round trip is required for both approaches, or if the JS bundle is excessively large, the advantage may swing back toward the server-rendered approach. “It Depends” is definitely in play here.
@@CodeAndStuff Way too many people don't like "It Depends" because they want it to be easy but engineering is not and never will be easy so its ridiculous to cling to that. Imagine saying building a house is easy and there is only 1 way for everyone. Thanks for claryfing the thing with the Modal :). Didn't know that.
Just echoing the prior comments - this video was really well done. I had looked at inertia and didn't grok it. This video cleared that right up!
It would be interesting to see a comparison between this and LiveView
I considered diving deeper into that comparison, but realized in my mind it comes down to this: If you don’t need to use React, Vue, or a ton of JavaScript that’s hard to fit into a hook, LiveView is probably the best choice for an Elixir team. If you have extreme client-side functionality requirements or strong latency concerns, consider Inertia.
Great ❤
great format, explanative but straight to the point!
Simplify Phoenix & React - get rid of React and use LiveView 🤘
so cool we have an adapter that is official now.
This is a really cool stack, thanks for sharing!
Straight to the point, that's a great video and I am definitely gonna try inertia
oh snap
This is great! Thanks for sharing!
Awesome!
extremely clean and to the point video, well done!
Great video. Love the use of copilot and pragmatic approach, hope all is well :)
Great content. Thank you for sharing. Subscribed.
Great video!
Thank you so much for these videos. They're all fantastic
Sweet take!
Great demo
Would love to see more LiveView videos!
Great introduction to hooks. Will use them for sure :)
Super helpful thank you!
Very informative and concise, great video! I might look into using this from Gleam
thanks for the video. please do create a video on distributed AI computing with elixir
This was a fantastic livebook demo!
Yeah, I knew that and use it all the time, but still thinks for the information 😅
Holy shit you've changed my life
What's your font please ? 👀
I’m using a paid font called Berkeley Mono. I never thought I would pay for a font, but I just love the way it looks.
Sweet! Thanks for the JSON performance test and benches power tips
Really like your videos, would love to see how you go about creating SPA built with Elixir / Livebook using - Pheonix - Ash Frameworks?. Coming from the React Eco system it seems this is missing??
Hey there, thanks for the feedback! I've been thinking about showing how to build web apps with Phoenix LiveView, which provides a pretty cohesive developer experience-in some ways better than building as a frontend-heavy SPA. Were you hoping to learn more about how to use things like React or Vue with Phoenix + Ash, or just in how to build web applications with Elixir in general?
Thanks for your reply We build SaaS solutions and really looking at moving across to the Elixir Eco system but there is not a lot of good information on how best to build SPA using Phoenix or Ash frameworks.
I also have a hard time finding good material online about how to build real-world applications (with authentication, authorization, heavy use of crud forms, and so on) using just elixir and phoenix or other elixir web frameworks. It always seems like people are keeping it to themselves or it's just not possible to do it.
Hell yeah!
Good trick man... Thanks
El mejorrr!! gracias!
Thx And Also I Made The 100th Like
i need this shit thank god FINALLY
I put the important at the top of the PR when it needs to be merged together with other PR's
These have been added to obsidian too some time ago. I found out about github's via obsidian's actually.
Finally. Callouts have been a thing in several MD engines for a while
I learned that these exist from Obsidian usage examples
In beta? I could've sworn they announced it was officially released a few months back.
I think it’s just been a really long beta. Full story in the linked GitHub discussion, with a couple of different syntax options over time.
Don't know how this got on my feed, but I love the call out! Thanks for spotlighting this! I've been having to do a lot of weird formatting on some of my repos to get this type of information out
Or you can just use an IDE like one that JetBrains provides. VSCode feels more and more like SublimeText: limited, promising, but never good enough
Tell me one Feature you are missing other than killing your ram?
It's not provided, it's sold
VSC has more language support. jetbrains is overpriced bloat
I'll use this one thanks! ⭐️⭐️⭐️⭐️⭐️
I use Cmd B to hide that bar, usually after a Cmd Shift F to global find
good stuff ! thanks for creating more content
this is PYTHON?
This is all written in the Elixir programming language
Good stuff 👌🏻 Nice to see your face again (and track it too!) 😁
I'll subscribe. You're good.