not that it matters, I am sure you are extremely busy... but you can cut 1:54:22-2:00:24 before the word cool and before the retake... more importantly thank you for such awesome content!!!
thank you for making this tutorial, this is very exciting, i will try fresh very soon, but i have a question, is it required to use preact or i can use any front end framework?
What a great video showing how Fresh works 🏆 Fantastic work 🥇 (I do fear that the name Fresh is a poor choice because it will be hard to google for help) I find it very interesting to watch what is happing in regards to react frameworks in 2022: NextJS, Remix, Fresh etc. Just find it kinda odd that there seem to be a lost focus on one of the core reasons I started doing React: Because of React Native. Is it only me that sees this elephant 🐘 in the room that web devs really really really wanna have a framework that allows them to be full-stack devs and then ignore the fact that many end-users uses their phone way more than their computer (wonder if a mobile-front-back-end dev should be called full-circle-stack dev 🤣). Heard that 90% of the time is used in apps (TikTok, instagram) and only 10% on browsing (on which many sites treats mobile users as 2nd class citizens). 🐘🐘🐘🐘🐁
mobile users should be treated as 2nd class citizen. it's not healthy to spend much time on your phone. am I the only one who uses his phone for 80% communication and 20% watching memes? and there is capacitor
21:40 I've been told that React uses className instead of just class because it could conflict with the class keyword, but Preact seems to work with it just fine 🤔 Does anyone know if it's a different preprocessor or if "h" can just handle it properly?
You are correct about `className` in React. And I think you are right about `h` handling it. This would imply that React is "closer to the metal". But that's really just in this case. React has a lot of synthetic stuff, like onChange. Preact is closer to the metal on events.
one thing I don't really get: how exactly is this API/API routes supposed to work, what's it purpose? I mean, does it really work as a real API for new projects or is it more like a middleware (or backend for frontend)? can fresh really be used (just) for a backend (API, business logic, data(base), file processing)?
Hi, I'm a fan of your videos. Your content is amazing, advanced yet clearly explained. I had this question related to micro frontend: Is there an equivalent to module federation for vite?
Not that I'm aware of. But I think ESM shares a lot of similarities, and you may be able to pull off runtime loading using ESM with Vite and achieve similar results. But I haven't verified that myself.
Fresh is great. Starting off with a 100 lighthouse score (with Deno Deploy) is great. I wonder how Fresh can solve the other common factors that impact scores: 3rd party scripts (can be alleviated with partytownjs), handling additional work like fetching data from multiple sources and databases to render a complete page (maybe streaming html like how marko or react tries), and of course asset management (ideally fresh adds adapters to serve assets from some cdn).
Hi Jack, thanks for the video - I am looking to learning more about deno and TS, and web dev through some of the frameworks running on top of those two - fresh looks great. This video comes in at the right time - great intro. - Thanks! I wanted to ask how you are doing the sketching on screen - looks like a drawing tablet (in the traditional graphic design sense) - it really helps SEE things as you go along.. Thanks again!
I use screenbrush and a commodity Gaomon drawing tablet that I got on Amazon for cheap. I actually find that the more expensive tablets come with drivers that crash my machine. So in this case, cheap and simple FTW.
@@jherr Thanks for the reply Jack! Yes, for what you do it works great - highlighting what you are talking about at the moment, pointing to code blocks as you explain what is going on with it. I find that visual explanations greatly enhance the learning process and look for any resource that uses such modality. Thanks again Jack!
Same way you would in React. Make a Layout component that takes children and wraps the children in the container (including in this case the Header). Basically "the same way you would do it in React" is the answer to most preact questions.
Not sure, I've used `import { Head } from "$fresh/runtime.ts"` with handler function and it works but just asked this to find any other simpler way to add that. Thanks.
I would like to know more about Bun from your perspective, Especially about React with Bun.
Working on content for a Bun video as we speak.
Amazing. What a great intro to Fresh. I’m excited to give it a try. The island concept is nice. It’s crazy how fast the deploys are. Wow!
by far the best quality videos on anything react related, keep it up! awesome stuff
Great, helpful video! Just a note - it's officially pronounced "dee-no", not "den-o" 😄
not that it matters, I am sure you are extremely busy... but you can cut 1:54:22-2:00:24 before the word cool and before the retake... more importantly thank you for such awesome content!!!
Ah, crap, woops.
Lovely video as always Jack, was looking into Deno right now myself, and this came as a nice surprise :D
This was a great Deno/Fresh intro! I was curious to know what tool you use to draw on your screen. Very effective teaching 🙌
I want to work with Fresh now!!!
Real good introduction, your explanations are excellent!
Nice Space Battleship Yamato 2199 poster ⚓️
Thanks!
As a backend engineer, this makes me incredibly excited to learn more frontend! This was awesome.
nah frontend sucks
Omg, this is super crazy.
You are helping us to be a better engineer day by day.
Very impressive & modern way to teach new crazy frontend stuff. Thanks to you!
I'm in love with this architecture
*smashing that SUBSCRIBE button faster than a Deno deploy*
Thanks for the great video! I will have a look at Fresh. I'm especially interested in the performance with styling tools like Mantine.
Yeah I hope I can use Mantine with fresh.
Jack, great tutorial on Fresh. Been trying to learn this framework with other tutorials. This is by far the most informative and helpful. Thank you!
Great intro! I Also like Jake fresh look of his hair
The quality of your explaination and videos is so great, really enjpy it! Thanks so much!
thank you for making this tutorial, this is very exciting, i will try fresh very soon, but i have a question, is it required to use preact or i can use any front end framework?
Fresh sounds really interesting! Thanks for the video!
What a great video showing how Fresh works 🏆 Fantastic work 🥇 (I do fear that the name Fresh is a poor choice because it will be hard to google for help)
I find it very interesting to watch what is happing in regards to react frameworks in 2022: NextJS, Remix, Fresh etc. Just find it kinda odd that there seem to be a lost focus on one of the core reasons I started doing React: Because of React Native.
Is it only me that sees this elephant 🐘 in the room that web devs really really really wanna have a framework that allows them to be full-stack devs and then ignore the fact that many end-users uses their phone way more than their computer (wonder if a mobile-front-back-end dev should be called full-circle-stack dev 🤣).
Heard that 90% of the time is used in apps (TikTok, instagram) and only 10% on browsing (on which many sites treats mobile users as 2nd class citizens).
🐘🐘🐘🐘🐁
mobile users should be treated as 2nd class citizen. it's not healthy to spend much time on your phone. am I the only one who uses his phone for 80% communication and 20% watching memes? and there is capacitor
21:40 I've been told that React uses className instead of just class because it could conflict with the class keyword, but Preact seems to work with it just fine 🤔 Does anyone know if it's a different preprocessor or if "h" can just handle it properly?
You are correct about `className` in React. And I think you are right about `h` handling it. This would imply that React is "closer to the metal". But that's really just in this case. React has a lot of synthetic stuff, like onChange. Preact is closer to the metal on events.
Fresh... it's drippin!
How do you think this compares to Astro?
Astro supports Svelte as well. I think this is a simpler approach. But Astro is also excellent.
Haha, the astonishment at ourselves when we say a word wrong haha
Impressive! Island architecture is the way 👍.
Thanks for the video! Love to see more new tech implementations.
one thing I don't really get: how exactly is this API/API routes supposed to work, what's it purpose? I mean, does it really work as a real API for new projects or is it more like a middleware (or backend for frontend)? can fresh really be used (just) for a backend (API, business logic, data(base), file processing)?
Hi, I'm a fan of your videos. Your content is amazing, advanced yet clearly explained. I had this question related to micro frontend: Is there an equivalent to module federation for vite?
Not that I'm aware of. But I think ESM shares a lot of similarities, and you may be able to pull off runtime loading using ESM with Vite and achieve similar results. But I haven't verified that myself.
Hi Jack, thanks for all your teachings, hope your wife is doing better now.
hey Jack how were you getting hints on your terminal instance in vscode 🤯
Fig
@@jherr thank you!! I was searching for few hours to find what it is you are using. Thank you! It is looking really cool, gonna try it too.
I never saw Deno or Preact in action before, thanks for the video 🙌
Fresh is great. Starting off with a 100 lighthouse score (with Deno Deploy) is great.
I wonder how Fresh can solve the other common factors that impact scores: 3rd party scripts (can be alleviated with partytownjs), handling additional work like fetching data from multiple sources and databases to render a complete page (maybe streaming html like how marko or react tries), and of course asset management (ideally fresh adds adapters to serve assets from some cdn).
Hi Jack, thanks for the video - I am looking to learning more about deno and TS, and web dev through some of the frameworks running on top of those two - fresh looks great. This video comes in at the right time - great intro. - Thanks!
I wanted to ask how you are doing the sketching on screen - looks like a drawing tablet (in the traditional graphic design sense) - it really helps SEE things as you go along.. Thanks again!
I use screenbrush and a commodity Gaomon drawing tablet that I got on Amazon for cheap. I actually find that the more expensive tablets come with drivers that crash my machine. So in this case, cheap and simple FTW.
@@jherr Thanks for the reply Jack! Yes, for what you do it works great - highlighting what you are talking about at the moment, pointing to code blocks as you explain what is going on with it.
I find that visual explanations greatly enhance the learning process and look for any resource that uses such modality. Thanks again Jack!
I'm just wondering, why evt? I know you're a big fan of Zustand. Any particular reason for the decision? Does it play better with Preact?
It doesn't play with preact, since it has a hard linkage to react.
@@jherr Thanks! & Thanks for the great content as always!
BLAZINGLYYYY FASTTTT!!!
Excellent video. Really liked it.
OMG! Thank you for super interesting (as usual!) and well explained (as usual again!) content!
How do you do layouts in fresh? I just saw you copy the Header component to both home and details page.
Same way you would in React. Make a Layout component that takes children and wraps the children in the container (including in this case the Header). Basically "the same way you would do it in React" is the answer to most preact questions.
That is really something. Thanks.
Someone knows where he got the images? Like, is there a site with all the images or was a manual process of downloading each one?
nice video but i am having the typescript error "cannot find the module preact or twind". i understand it is a new framework has a long way to go
Do you have the Deno extension installed?
Nice video! What app are you using for drawing over your screen?
screenbrush
Have you heard of Bun ? They say it is the fastest Javascript Runtime, do you have any idea if its better than node or this one ?
I have. I'll be doing a video on that coming up. I don't think it's apples to apples really.
Would be interesting to see this with BunJS
This is cool Jack.. I however don't fully understand how the env works here
You mean the environment variables? What's your question?
45:49 Lol 😹
Yeah... That was a good one. I probably would have cut that down nowadays. :(
Why Deno doesn't support something like Layout rather than repeating Header in every route !
Would it make any sense to use Solid signals instead of Evt here?
Wouldn't you have to bring in Solid for that?
@@jherr Yeah, you would, and that's why I was asking if it makes any sense. I reckon bringing in Evt is way smaller than bringing in all of Solid.
@@nairanvac79 Indeed. media.giphy.com/media/XOFsOM3MnuWEE/giphy.gif
Great video as per!
awesome!!! ---- from china
Solid.js, it's just so much faster than react but virtually the same syntactically. Otherwise, sveltkit✌️
Awesome
Ive been really impressed with Directus. It would be great to see you use it more in your videos. Thanks, Jack.
What is the screen at @6:26 about?
I don't know, honestly. And I edit these things. Subliminal messaging I guess.
Can you guy provide me name of the Color Theme you're using?
Night Wolf (black)
@@jherr Thank you so much!
Dear Jack, what do you thing about new runtime environment Bun?
I'll be doing a video on it soon.
@@jherr that's amazing ! Thank you 🙏
QQ - how to add SSR meta tags?
That's a good question. I wonder if there is an equivalent of Helmet?
Not sure, I've used `import { Head } from "$fresh/runtime.ts"` with handler function and it works but just asked this to find any other simpler way to add that. Thanks.
1:58 editing fail 🤨