background music makes it difficult to listen in 1.5x
@andreas.soderlund
7 күн бұрын
Very nice to see Superforms in action! 😊 At 1:55:50, you're prepopulating correctly with an object, and then you can set the errors option to false, to prevent them from being shown.
@johnnifytech
6 күн бұрын
Oh hello Andreas, creator of Superforms 😄 how nice you found this, thank you for watching and the tip! It's right there in the docs and mentioned in the "getting started" section even, so great job writing those too! I was trying to think of a use-case for when you'd want to do that, and I guess it's exactly this: when you want to pre-populate a "create" form with some dynamic defaults, without shouting at the user as if they've done something wrong already 😄 --- After a couple of years of showing how you can write your own mini state-machine just to show a spinner, an error message, or a success toast... it's nice to do it with a popular library! I think I'll likely do a deeper dive on Superforms & sveltekit-flash-message next time I show "CRUD with x", so please do let me know if there's anything in particular that's maybe super-handy but under-used, often misused, or similar 🙂
@andreas.soderlund
5 күн бұрын
@@johnnifytech That sounds great, I think proxy objects could be interesting to explore, as they can handle most of the slightly confusing html date and time inputs, with automatic conversion to the Date type. Even constraints are possible.
@johnnifytech
5 күн бұрын
Amazing, thanks! I love using vanilla HTML elements and that makes things much easier 🤩 `melt-ui` & `shadcn-svelte` depend on `@internationalized/date` for some reason which I'm sure is perfectly valid, so I'll start with a vanilla date input and see if I can get inspired by your `dateProxy` to write a `InternationalizedDateValueProxy` of sorts... and get things working with the shadcn Calendar people are asking me for 🙂 Thanks again! 🙌
@Woeden
9 күн бұрын
Man, google fonts were taking almost 1mb of loading time in my project, this tip reduced it to 70kb. AMAZING, thank you very much for sharing. Will always use fontsource from now.
@johnnifytech
9 күн бұрын
Wow, ~1MB?! 😵 Now that’s gainz! Thank you so much for taking the time to comment this, I’m always delighted to learn I’ve helped 😄
@keywordniches2207
10 күн бұрын
great great but how about a no coder that uses wordpress? i dont have any terminal. I do everything from the wordpress dashboard..I want to remove google font.
@johnnifytech
10 күн бұрын
Thanks for watching this one! It'd depend on the Wordpress theme you're using, or maybe there's a Wordpress plugin for that? First check if you're actually using a Webfont "the wrong way", is there a connection to googleapis or gstatic? Maybe you're using a theme where they've thought about this 😄 But if they haven't and there is a preconnect or whatnot... well you'd need to do *some* code & work 😅 unless there's a plugin which magically does it for you!
@keywordniches2207
10 күн бұрын
@@johnnifytech is there a difference between connecting through googleapis or gstatic? and do you think it will make a difference to load it locally in website speed? yes, there is a theme called kadence but i dont use it on my site. Might do it another site maybe in the near future. thanks
@johnnifytech
9 күн бұрын
There is no difference between connecting through googleapis or gstatic, or both; the problems come from having to do the extra request(s) in the first place, and they're requests outside your own domain, so they need an extra DNS lookup amongst other things. Yes, it will make a difference to load it locally in website speed! There are case studies on the website speed impacts specifically, as well as improved conversions correlated with optimising fonts, and other things that affect your Core Web Vitals. I've experienced some of them first-hand in companies I've worked with 🙂 Fonts are always the first thing to tackle in those situations, as they're super impactful to optimise and *relatively* easy. Images are also extremely impactful, but they're trickier to get right and it's usually achieved by using a third-party services that can get costly!
@keywordniches2207
9 күн бұрын
@@johnnifytech ok great, i will start with image compression and google fonts loading locally. thank you for your input. I appreciate it
@taunado
14 күн бұрын
Congrats on 100 and thanks for the streams.
@johnnifytech
14 күн бұрын
Thank you! Can hardly believe it's been 💯, nor that today we went over 6 hours 😄 always fun, and I always say if one other person finds a stream or video useful, it's been worth it 🥳
@mikejohneviota9293
15 күн бұрын
🎉🎉🎉🎉🎉
@johnnifytech
15 күн бұрын
🥳 Thanks for catching up with this one too 🥳
@mikejohneviota9293
15 күн бұрын
@@johnnifytech do you have a guide sir johnny installing drizzle, lucia, turso with SvelteKit 😭 beginner here.
@johnnifytech
15 күн бұрын
Not a short guide for now, sorry 😅 I did just add timestamps to this livestream to make it a bit easier to follow, but also check out this earlier one: kzitem.info/news/bejne/k2aE16Znp5ybgI4 Where I recall we took it a bit slower introducing Drizzle & Turso! Also the one from yesterday: kzitem.info/news/bejne/qW2MqWuJiqKoaYo The Turso, Drizzle & Lucia parts go much faster because I know what I'm doing better, and account both for multiple social providers & email login from the beginning... but also because I have a lot of the code ready and we don't write it from scratch together 😅 Check out links in the description too for each part, I usually explain that really we're copy & pasting what is in the guide linked in that section of the description! And the links should always have an installation section, saying something like "to bring in this library `npm i -D the-library` in a terminal"!
@mikejohneviota9293
15 күн бұрын
@@johnnifytech i love you sir me and my classmates watching your SvelteKit content always ❤️
@gauravrawat7175
19 күн бұрын
can you make youself a little smaller so that we can see what you are actually typing..?
@johnnifytech
19 күн бұрын
Thanks for the suggestion! I've tried it before and people wanted bigger 😅 I'll try smaller again for the next livestream, and see if anyone notices 😄 Also, just found there's an editor padding setting for the last line in VSCode! Maybe I'll manage to always squeeze my face within that, let's see!
@user-db2ul3pq3o
19 күн бұрын
Awesome content. Have you considered Shadcn-Svelte gives you complete control of your components.
@johnnifytech
19 күн бұрын
Yes, perfectly timed comment 🙌 I've considered covering it myself and it's been heavily requested, so we're doing it for the next series! I'm literally just now drafting up my plan for tomorrow's (Friday's) and Tuesday's livestreams, and I'm debating whether to do a dedicated `shadcn-svelte` episode first, or go straight into "Auth with Supabase & SvelteKit & shadcn"! Just shadcn setup and demo might be too short, but the whole Supabase auth flow + shadcn setup might be too big! So, we'll see, haha 😄 Thanks for the suggestion!
@user-db2ul3pq3o
17 күн бұрын
@@johnnifytech I just started your series. Cant wait to watch that when it comes out. Again awesome content.
@johnnifytech
17 күн бұрын
Amazing 🥰 I ended up "recapping" the series that comes after this portfolio one, so did "Social Login with Turso, Drizzle, Lucia & shadcn" yesterday: kzitem.info/news/bejne/qW2MqWuJiqKoaYo Around halfway is where we start adding `shadcn` and have quite a few thoughts! I'm sure I'll have even more for the next stream where we do a new Supabase app 😄
@mikejohneviota9293
21 күн бұрын
aws❤
@johnnifytech
20 күн бұрын
Yes! 🥰 They've got something for everything, in fact they've got so much it's easy to get overwhelmed and not know where to begin 😅 Very excited to cover S3 & CloudFront on this one! Their Simple Email Service / AWS SES is another one I use often, so it's likely we'll see it at some point... And let me know if you've got other AWS services you'd like me to cover!
@Mexad0n
29 күн бұрын
Thank you ;)
@johnnifytech
22 күн бұрын
Thank you once again for watching and commenting 🙌 It's been interesting to go deeper into images for a couple streams!
@mikejohneviota9293
Ай бұрын
wow another underated live❤🎉
@johnnifytech
Ай бұрын
Thanks, that's so kind 🙌 in hindsight I'm so happy I had a look right when Bun was starting to really pop off! I should probably do a deeper dive nowadays, looks like it's been 6 months already!
@onefloatavenue
Ай бұрын
did you manage to get it flowing with the signUp() method of Supabase also? i will try signUpWithOTP tomorrow as that seems to go smoother
@johnnifytech
Ай бұрын
Hey, thanks for watching! It's been a while since I last tried the `.signUp` method, probably for a project that had "email + password" login... which I think still needs the user to be created first, before you can log them in? `.signUp` did work back then! But for magic links, `signInWithOtp` is just more convenient for me, with the implicit user creation if needed! Similarly with `signInWithOAuth`. I guess I can see an edge case for explicitly doing the `signUp` call and using `shouldCreateUser: false` for the `signInWithOtp` methods, but I'd need a User Researcher to make a great case for the users preferring an explicit flow like that 🙂 In the meantime, I'll assume people just want to login as fast as possible, and it's definitely a bit less code for us to write, so I'll keep opting for the `signInWithX` methods 😄: `supabase.com/docs/reference/javascript/auth-signinwithotp Hope it works out smoothly for you today, let me know if something unexpected comes up! 🙌
@onefloatavenue
Ай бұрын
@@johnnifytech Yeah i think today it’s very clear to me that signInWith…() is just a much simpler way to go about it 😄especially long-term, less to worry about. i think i was just wanting to (and still want to at some point) prove to myself i can make the signUp() out of pride, but pride can wait!
@johnnifytech
Ай бұрын
haha, well I love saying "anything is possible given infinite time", it's just that at some point time is at a premium 😄
@BhideSvelte
Ай бұрын
niceee onee
@johnnifytech
Ай бұрын
Thanksssss, I’m getting more and more used to Drizzle, I like it! 🚀
@BhideSvelte
Ай бұрын
@@johnnifytech same
@thedelanyo
Ай бұрын
Great video 😅😅
@johnnifytech
Ай бұрын
Thanks for watching this one too 🙌😄
@thedelanyo
Ай бұрын
This is timely 😅😅
@johnnifytech
Ай бұрын
Haha, I hope so 😄 Drizzle was recommended to me in the comments and the Discord last year, and it's about a month since I used Turso for Johnnify... But Turso's actually having their launch week this week I believe! Auspicious 😄 They're both great tools, I'll keep using them often, and more and more people will be discovering and braving them this year! 🙌
@accountwizardindia8171
Ай бұрын
I have a question about Dataflow considering you are using Turso. If my Svelte Application is on a VPS server (1 location) and the Turso database is stored in multiple locations (6 as seen as of now). Then, if a user requests a webpage, will the Turso (SQLite) data first go to the VPS (considering SSR) and then to users, or will both happen in parallel? My goal is to understand the benefit of Turso cloud in this case if the overall time is the same or more.
@johnnifytech
Ай бұрын
Hey there, great question! You should only be connecting to your Turso DB on the backend, so in your case your users will be hitting the VPS that hosts your Svelte Application, and that will be requesting the data from Turso. In theory, no matter how many Turso replicas you got, you'd always be requesting from the same one in your case: given your VPS will always be in the same location, the Turso replica closest to it will always be the same! The speed benefits of Turso replicas work best when you're deploying the APIs that talk to it (including your SvelteKit application) on somewhere like Fly which uses the same network, or Vercel Edge which is what I'm doing! And I literally saw much better metrics the moment I added a replica in India actually 😄 If you are committed to that VPS deployment and Turso however, you should have a look at their Embedded Replicas: docs.turso.tech/features/embedded-replicas Essentially this creates a replica right where your server is, so if you've only got the one server you could just set it up and don't worry about anything, and then it will literally be reads from a local file: no extra network latency!
@accountwizardindia8171
Ай бұрын
@@johnnifytech Thanks for the detail reply... I am not committed to any VPN just trying to thing the possible stack mix. I think Fly or Koyeb would be good for long term objective.
@johnnifytech
Ай бұрын
Nice. Embedded replicas theoretically are a perfect solution without changing your stack, but I haven't tried them out myself so can't guarantee them! I've almost always deployed to Vercel in the livestreams, Google App Engine a couple times, but I'll see about showing more options in that space 🙂
@thedelanyo
2 ай бұрын
Bing bang boom 😅😅
@johnnifytech
2 ай бұрын
Rolls off the tongue! 💥😄
@BhideSvelte
2 ай бұрын
Good timing ...i was in search of TURSO and DRIZZLE Stuff
@johnnifytech
2 ай бұрын
They’re both popping off right now, we’ll definitely be diving in deeper on both in the coming streams too! 🙌
@Mexad0n
2 ай бұрын
Thanks for another great video. Is there any possibility to add to agenda approx referential time when section starts (add video URL at the time) as in long video like that it is hard to guess in like 2 months from now where to look.
@johnnifytech
2 ай бұрын
You’re welcome! I do add timestamps to some videos, and always when at least one person asks, so will add them in this one for sure, and will comment again 🙂 Ideally I’d just do it after every stream straight away since I do have the agenda as the rough outline… but even skimming through and listening to my own voice after 5 hours of talking I slightly dread 😅😂 Brain’s always a bit fried! I’ll be “recovered” and up for it tomorrow 🙌
@johnnifytech
2 ай бұрын
Timestamps have now been added, enjoy 😄🙌 It was a fun stream!
@bozidarbralic1937
2 ай бұрын
You're absolutely brilliant and by far my favorite Svelte/Kit content on YT or anywhere for that matter. Don't get how Joy of Code or Huntabyte have a stronger following... Maybe start a Discord if you've got time for that? For the take away home exercise I don't have time right now to do it, but to me it seems the key would be the navigation callback type === popState and by that triggering a different view transition. Would my trail of thought be correct? Love and greetings from Croatia :-)
@johnnifytech
2 ай бұрын
Oh, thank you Bozidar, your comment means a lot 🥰 Haha, thankfully it's not a Highlander situation where there can only be one Svelte KZitemr 😂 There's room of everyone and no-one needs to sword-fight ⚡️ And they're, of course, great! I can only imagine we each have our strengths, but they're definitely much better than I at getting the content out there, and KZitem loves consistency and timely-ness! As if that weren't enough, Huntabyte is a key contributor to at least two massively popular Svelte libraries! Of course I'm proud of my content, and love doing it in my own, let's say "overly-meticulous", pace 😄 Just saying that if I don't have a stronger following, it's on me to do more and better to grow it 😛 On that vein, I do have a Discord! I should organise it more and do more community stuff, but there's some great discussions going on there actually! My favourite recent thread being how to e2e test an email login flow! The links are in the description, I just don't stop the videos to say "don't forget to comment and subscribe and check out the Discord and Johnnify Premium and...", because when I jolt attention back I do it to teach something helpful to you, not just me 😂 -- Speaking of links in the description, you can also checkout the Svelte Kritic repo, and confirm your hunch is correct! We do something `onNavigation` so that's 100% correct, although what I find checking `navigation.delta` makes the most sense to me. If it's a negative number, it means it's "back" navigation (through a keyboard shortcut, or the browser back button even if you go back in history multiple entries). That said, there's a few ways to do it, some people check if they are literally going back to the home route, or you could check how many slashes `/` you have in the url: if you're going somewhere with fewer `/`, you're probably going "back out" the app, so you may want a "back" animation. If you have too big of a spec of what counts as a "back" transition, that'd be a prime case for a little unit test! When it comes to "triggering a different view transition", that's kinda correct, depends on how you mean it! We still `startViewTransition` the same way, but we'll have added or removed a data-attribute to the html depending on our check above. I add `data-back`, some people add a class instead. Then it's gonna be our styling that says if that `data-back` exists, do these slightly different "back" animations. `:root[data-back]` will have higher specificity than the other transitions we've declared in the previous video, so we'll get the "back" transitions so long as the html has a `data-back` set 🙂 -- Thanks again for your comment, and for watching, and even for reading this little essay response 😄
@bozidarbralic1937
2 ай бұрын
@@johnnifytech Love the essay, I actually am begging my lead to give me more responses on PR's as I'm old (37 in a month) and got into this industry self taught at like 34. The Highlander comment made me chuckle, because I've had two puzzles on screens and only one can be connected to the answer so used the same Array for each block {#each selectedAnswers.includes... and not includes} and used animate:flip to achieve it, very similar to Svelte tutorial. Left a comment there can be only one, they didn't like it 😂. To get back on course here. I love the data-back attribute approach more so than a class forsure. But regarding the video in hand, I've followed along both and experimented on my own. What's bugging me at the moment, lets say we want to disable the original view transition set on the root +layout only for the detail page how would you achieve that? I've tried overriding it in the +layout of the detail item view but that results in that new values I've used to override to be applied everywhere after that. I'm also trying to do onMount(() => { if (browser && document) { console.log( document.documentElement.getAttribute( ":root::view-transition-old(root)", ), ); } }); But to no avail. Is this possible? To override and then restore the previous globally set view-transition. Via CSS or JS.
@bozidarbralic1937
2 ай бұрын
And thanks for the suggestion got the back lets call it "perk" as I don't think its big enough to be called feature working! The animations / keyframes are defined in tailwind.config.cjs obv... Thanks a ton Johnny! onNavigate((navigation) => { if ( document.startViewTransition && navigation.from?.route.id !== navigation.to?.route.id && window.matchMedia(`(prefers-reduced-motion: no-preference)`) .matches === true ) { return new Promise((resolve) => { navigation?.delta && navigation.delta < 0 ? document.documentElement.setAttribute("data-back", "back") : document.documentElement.removeAttribute("data-back"); // @ts-ignore document.startViewTransition ? document.startViewTransition(async () => { resolve(); await navigation.complete; }) : resolve(); }); } }); <style> @media (prefers-reduced-motion: no-preference) { html:root::view-transition-old(root) { @apply animate-fade-out; } html:root::view-transition-new(root) { @apply animate-slide-from-left; } html[data-back="back"]:root::view-transition-old(root) { @apply animate-fade-out; } html[data-back="back"]:root::view-transition-new(root) { @apply animate-slide-from-right; } html[dir="rtl"]:root::view-transition-new(root) { @apply animate-slide-from-right; } } /* Failsafe */ @media (prefers-reduced-motion) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } </style>
@johnnifytech
2 ай бұрын
Nice going getting stuff working! For your first question, there must be a couple of ways, unfortunately something like `document.documentElement.getAttribute(":root::view-transition-old(root)")`, ain't one of them 😄 The CSS does target the "documentElement", but it's not set in a way you can access it with Javascript. Since you're now doing the checks to set or remove the `data-back` anyway, you could actually make that slightly more complicated and instead have a `data-transition` property, which you do set to different values, like `forward`, `back`, `none`. But then I'd definitely extract a little method because already the spec is a bit complicated 😂 The idea I guess, on the CSS side, would be you only apply the "default" animations you had by specifying `[data-transition="forward"]`, the back animations [data-transition="back"], and, well, you specify nothing for the `none` case. And on the root layout `onNavigate` where you're checking the `route.id`s and the `delta` and whatnot, you decide whether to document.documentElement.dataset.transition = 'forward' or document.documentElement.dataset.transition = 'back' or document.documentElement.dataset.transition = 'none' A bit of the cuff, but I think it'll do what you want! --- Also: Cheeky comments is the only part I like about code reviews! I'd rather pair when coding, or talk 1-1 for the code review, but if I just have to review it by myself, you better believe it's mostly jokes and references 😄 Which feels like you'd mostly get, as I'm 38, not that far off, even if I got into web dev much earlier! I especially love helping people career-switch into software engineering, as I honestly believe it's fun, flexible and well-compensated compared to most jobs! For the snippet you shared, if you're wondering why does Typescript insist on checking whether `startViewTransition` is defined, like, a million times, which I was: it's because every time you go into another closure, it assumes there's chance `startViewTransition` may have become undefined again. In reality, either the browser has that API, or not, so if we were to do the one check, we'd know that won't ever change! Even if it's an asynchronous method that runs a bit later. But Typescript doesn't know that, as far as it's concerned, `startViewTransition` could be a method you add and remove with javascript during the lifecycle of the app!
@erifullmoon
2 ай бұрын
👏🏻👏🏻👏🏻
@johnnifytech
2 ай бұрын
🤗🙌🥰
@tolgatopkac
2 ай бұрын
I really enjoy the live stream content you create, and I have a question. Why do you create SVG components instead of using the Iconify Svelte package? Is there a difference, or is it because of Svelte 5?
@johnnifytech
2 ай бұрын
Hello Tolga, thank you for watching and enjoying the streams 🙌 Great question! I have used Iconify Svelte and other icon libraries in the past, they work 😄 There's a few reasons I went for this: 1. In general I do try to show the fundamentals first, especially if they're viable options you can keep using forever without problems! 2. I thought it was a great way to show the new `$props` in Svelte 5, and safely spreading all attributes the element your Svelte Component uses as a root has 😄 3. In this use-case with the icons for a portfolio or marketing project, it is very likely you'll only need a few! Maybe you'll have them in a design in Figma and want to somehow paste them in, maybe they're a custom SVG you wouldn't find in a Iconify. 4. Iconify in particular is good, but also kinda complicated! It **is** different than writing your own SVG and how most icon libraries do it actually. I'd need to explain how it works in principle, fetching data from the Iconify API! Why are they doing that, what are the pros and cons. Also, for a portfolio / marketing project especially, you'd definitely want to Server Side or Statically Render your icons. That's a chunky section, to explain how you set that up with Iconify, as it doesn't work out of the box, and you need to pass it SvelteKit's enhanced `fetch`! We haven't needed to do fetch / API calls in this project at all yet, so felt like way too much complexity to introduce when you just want to paste three icons in! 5. I thought there's a non-zero chance Iconify (much like any Svelte library) wouldn't work yet in strict runes mode 😛 didn't want to take that chance 😄 I did end up dropping strict mode to get Paraglide working, but that wasn't my plan! So those are mostly my reasons 😄 Thanks again for asking, as I didn't even think of explaining "why not Iconify Svelte itself, or another icon library" during the stream! One of the next series will inevitably be a more "dashboard" type of app where we'll need, like, dozens of icons, so I'll make sure to introduce the Iconify / Icon library option there, and we'd likely go for it! Do let me know if you're interested in seeing that, or if it's clear enough and there's other things you'd like to see more 😄
@tolgatopkac
2 ай бұрын
@@johnnifytech Thank you very much for your detailed explanation. I am eagerly looking forward to your series on Svelte; there is so much I can learn from you 😀
@johnnifytech
2 ай бұрын
You're welcome, that's a very kind thing to say! My pleasure 😄
@joaoalves1359
2 ай бұрын
Excellent videos using SvelteKit. A good content fot another videos, is using superforms changin between the techs Zod, Valibot, Formsnap, etc.
@johnnifytech
2 ай бұрын
Nice one João, thank you for watching and the suggestions! Next series we'll be talking to a DB, so we'll definitely be using something for validation! We've used Zod before and we'll likely do so again, but I'll definitely talk about options 🙂 Superforms is a cool project with a great maintainer! I do think current SvelteKit is very pleasant to work with when it comes to forms, and it always helps to know how the vanilla stuff works... so we'll see if we'll end up bringing it as a second pass! I did debate bringing in Zod for that form action for the language toggle near the end of the stream, as I do use it often for server-side validation... but I wasn't sure if we'd stick to a form action and cookie, just wanted to try that possibility out... So "saved" going in deeper for dedicated streams where I've investigated more tools too. Didn't know of Valibot or Formsnap for example! Thanks again for the suggestions 🙌
@markusmitk2161
2 ай бұрын
You can also download the woff files and put it into the public folder. After that you can use it if you had imported the files and declared the weights.
@johnnifytech
2 ай бұрын
You’re right, that’s another way to self-host, and if you want a font that Fontsource doesn’t have, you’ll need to do it like that! But it’s slightly more work, given you also need to write the @font-face CSS to declare them. Thank you for watching & pointing this out! In hindsight, I should have had a quick scene at the end mentioning this, that if you want to bring your own, even licensed, font, you can do what Fontsource is doing behind the scenes for us: Bring in the font files (.woff & .woff2) like so, write the @font-face declarations like so, + the rest of the stuff we did earlier in the video. 🙂
@mikejohneviota9293
2 ай бұрын
waiting for your new content sir i am your new fan
@johnnifytech
2 ай бұрын
Great to have you on board Mike 🙌 We keep going with this series tomorrow! 🚀
@aron-lomner
2 ай бұрын
I am only one hour in. Thank you! I really like how you don't just show how to build this specific project, you explain what's going on behind the scenes and the general knowledge needed to build any project like this. For instance you spent time explaining the configuration files, explain your choice for the svelte settings. You spent time on CSS in general and how it works in svelte. This provides value that few other youtubers do, most just give a tutorial on how to build the specific project their building, and the viewer only knows how the code works in that specific use case, which leads to "tutorial hell".
@johnnifytech
2 ай бұрын
Wow, Aron, you are amazing at giving feedback! Not just because it's so kind, of course I'm flattered by that, but you are specific with examples and explain why you found them valuable, or counter-examples that can get people stuck in "tutorial hell". Great! Feedback is a gift 😄 I do like doing "real" or at least "realistic" projects, at the same time I do try get to "general knowledge" as you say! Outside of people having different use-cases, things change rapidly anyway, especially in the frontend world! But if we've got some core concepts figured out, we can better adapt or "roll with the punches" 🙂 Hope you stick with the stream and you keep finding it useful! I suspect my ability to talk & explain things deteriorated a bit by the end 😅 but we did the image optimisation off-the-cuff approaching five hours in, and in my head it was decent 😂 Thanks for watching and taking the time for such a lovely comment 🙌
@mikeSharesCode
2 ай бұрын
wooow, i am your new follower sir lab u!
@johnnifytech
2 ай бұрын
Awesome, great to have you onboard Mike 🙌 Have a look at the View Transitions videos, I think you'll like them a lot 😉
@accountwizardindia8171
2 ай бұрын
I agree with your comments on Short video...for someone new in coding learning through long videos get intimidating.
@johnnifytech
2 ай бұрын
Yes! My dream would be to have short videos on every subject covered in my streams, as they'd be much easier to "digest" 😄 The Fonts and View Transitions I do have, but I'd love to do a fresh one on theming and dark mode, authentication, end-to-end tests... Image optimisation, metadata and OpenGraph... there's so much to learn even for a mostly static app! Thank you again for sticking with me, we'll get there bit by bit 🙌
@accountwizardindia8171
2 ай бұрын
Theme part was so informative...I just have no words. Thank you!!
@johnnifytech
2 ай бұрын
Thank *you*! For watching and the comments 😄 I always do these streams & videos hoping to help at least other person, so I'm always delighted when people comment and let me know 💌
@SoreBrain
2 ай бұрын
I would love a more condensed video version of streams like this because of my horrible attention span. I will give it a try and code along sometime.
@johnnifytech
2 ай бұрын
Hey there Sore Brain (if that's your real name 😄), thanks for watching! For sure, and it's not just a matter of attention span! I always have a plan in these streams, and sometimes even know what I'm doing, but inevitably I will make mistakes, and have to go back on things, look up some others... which I'm sure makes it harder to stay in the flow with me. That's why I make my videos as short as possible, with a few format changes & little jokes to jolt attention back in ⚡️ But those videos take me a lot of time to make, so it's always in my mind to experiment with a "Director's cut" version of a livestream... a condensed video version as you say. My fear is that even that would take me too much time, but I'll never know until I do it! So I resolve this year to give it a go and see what we learn! Thanks for the suggestion 🙌
@BhideSvelte
3 ай бұрын
Really miss u My friend hopefully i will get notfied on discord
@johnnifytech
3 ай бұрын
It's always great when you make it, but no worries 😄 I'll have a bonus Sunday morning stream in just a while, but I really should start a project which syncs my Calendar, with the KZitem Livestream, with the Discord, to automate that process and the alerts! Always more fun & useful projects to do than there are days in the week 😅
@ScriKidding-eg6vn
3 ай бұрын
use kit actions omg
@johnnifytech
3 ай бұрын
How do you mean? 😅 We are using SvelteKit form actions in a few places by now, but I don’t think that’s what you mean 😅
@ScriKidding-eg6vn
3 ай бұрын
@@johnnifytech sorry my bad i comment too early yeah! i watched it! it was brilliant love it.
@johnnifytech
3 ай бұрын
No worries, I just thought there was a library or method I missed and should be using! Always looking for feedback & tips 😄 thanks for watching! 🙌
@SoreBrain
3 ай бұрын
I can't believe I somehow forgot to subscribe and had to go by months without this channel. Won't miss any more videos I promise!
@johnnifytech
3 ай бұрын
Haha, I guess this is why most channels abruptly stop the video and do the “did you know only X% of you are subscribed?!” thing 😂 No worries though, I’ve been doing a lot of livestreams, but not that many videos, so you can always catch up at your leisure 😄 But in all seriousness, thank you so much for watching! I’m delighted when people enjoy my videos 🙌
@SoreBrain
3 ай бұрын
@@johnnifytech so technically it was your fault for not reminding me. Btw I will use this video as a reference to utilize a view transition for a video modal in my current work project to impress my boss. Looking forward to more practical sveltekit patterns from you. In the meantime I will catch up on those videos that I missed out on.
@johnnifytech
3 ай бұрын
Technically yes, but let’s say a known trade-off 😂 I’d rather keep the flow of the video & have all information be useful to you, than get sub numbers up 😄 if the content is good you’ll find it eventually! 🤞 And that’s awesome, I’m sure it’s going to work for you! I recently used view transitions myself again, to impress a client who really wanted a slick native app, and it worked! 🚀
@BhideSvelte
3 ай бұрын
10xify ...has good UI ...aslo i liked the sun/moon morph animation
@johnnifytech
3 ай бұрын
Thanks! I'm not a designer but I try my best 🙌 I love this animation! I have a few that I use as theme toggles, but this is the one I pick most often. It's a slightly adapted version of what Adam had for this GUI Challenge: kzitem.info/news/bejne/zJCfuWWHjKZ6ipg Adam's GUI Challenges are great content!
@BhideSvelte
3 ай бұрын
Nice onee.......
@cskouros
3 ай бұрын
Επιτέλους ένα σωστό διαφωτιστικό βίντεο. Μπράβο!
@johnnifytech
3 ай бұрын
Να’σαι καλά, σε ευχαριστώ για την συμπαράσταση! 🙌💻💡
@chadthedouchebag
3 ай бұрын
This is awesome! Regarding charts and svelte, is there any library or approach you prefer? A third-party library or directly with things like d3 and svg?
@johnnifytech
3 ай бұрын
Hello Chad, thanks for watching! Like most things, I'd say "it depends" when it comes to Svelte/SvelteKit and charts! For the "Next.js Learn... But it's Sveltekit" series, I did `chart.js`, which is great for simple use-cases, and was one of the recommended libraries in that course. For the more recent stream during the advent of Svelte, I went with d3! kzitem.info/news/bejne/mI-Gz5iLs2SXnZg I know "it depends" is a copout since it's almost always true, I'd say figuring out d3 is more "worth it"! If you don't have a client pressuring you to just get a bar chart up, I'd go with d3 🙂
@devinator272
3 ай бұрын
This is a great series, and looking forward to the next part! If I wanted to look at your repo/code, how do I access it since it is private?
@johnnifytech
3 ай бұрын
Thank you for watching and for the feedback 🙌 We'll keep going! For the code, my idea is to make another SaaS, where subscription gets you in the Github org, so you can see (and use) the starters. But since I haven't really decided and made that yet, if you ping me on Discord with your Github username, I'll invite you no worries 🙂
@taunado
26 күн бұрын
@@johnnifytech Why not use Discord tiers? Much like Patreon.
@johnnifytech
21 күн бұрын
We've talked in Discord, but I have since put Johnnify Premium live, with automatic Github sync for exclusive access: johnnify.com/premium Happy supporters there already! Mentioning in case others look into this comment thread 🙂
@johnnifytech
21 күн бұрын
@@taunado I looked into that, but Discord is another third-party which takes a cut and still needs quite a bit of manual work (or custom code) to automate things like Github organization membership! And I think it's still only available in the US? I'm in the EU so I'm out for now🙂 Did go live with Johnnify Premium which just has the Stripe cut, and it's also more fun, better learnings for me, and educational for others 😄 -- Discord is a great option already for people in the US who don't want to offer very niche integrations like I do! If others are reading looking to have a "mostly community" membership service, they should definitely look into it! Discord & Discord communities are definitely having a moment, so having Discord itself be your source of truth has its merits for sure.
@hasibuzzamantonmoy8845
4 ай бұрын
Great content! Thank you.
@johnnifytech
4 ай бұрын
Thank *you*, especially for commenting and subscribing 🙌 Let me know if you've got suggestions on what I should cover in the future 🙂
@asadmehboob1300
4 ай бұрын
Please add Tanstack table..with server side pagination, searching, sorting, filtering
@johnnifytech
4 ай бұрын
Oh, that’s a cool idea! I’ve used “tanstack” stuff before but only for React, didn’t know they made a Svelte version now! Search / Pagination / Sorting / Filtering I was planning to do already yes, we’ve done a server-side Search livestream before and we can do it even better now 🙂 melt-ui has a nice pagination component!
@asadmehboob1300
4 ай бұрын
Thank you so much
@johnnifytech
4 ай бұрын
Thank *you* for tuning in and this suggestion 🙌
@johnnifytech
4 ай бұрын
Hello again! I experimented with the Tanstack table for Svelte, and realised I'm not gonna use it! Exactly because we're doing all of the logic server-side, we don't need a client-side library like that 🙂 I also went back to this stream that was all about Search & Pagination and added timestamps: kzitem.info/news/bejne/yqtq1JuEi36Sdn4 If you haven't seen it already, I recommend it 🙂 Just remember to do `form.requestSubmit` instead of `form.submit`, a mistake I do spend quite a while debugging, midway through 😅 I'll still do the next stream on Friday about adding search & pagination to this project, and also cover filtering using toggle-able buttons, and sorting, which I hadn't mentioned at all!
@asadmehboob1300
4 ай бұрын
ok sure, thanks for the hard work...wish you all the best
@jeno427
4 ай бұрын
The rationale for Google fonts used to be that your users will have most fonts cached eventually so it actually makes every website faster. If you self host, it doesn't matter that the user has the font already cached for some other website, a download for yours is still needed. A couple years ago people started self hosting due to privacy reason, since fonts is just another way for Google to track users.
@johnnifytech
4 ай бұрын
Hey Jeno and thanks for this comment 🙌 You're right in that *used to be* one of the theoretical benefits, but as discussed in another comment, that's no longer possible! You cannot cache cross-site resources anymore, since browsers started using partitioned caches for security purposes. Chrome moved to cache partitioning in 2020: developer.chrome.com/blog/http-cache-partitioning/ Safari was doing it even earlier, and the rest of the browsers moved by the end of 2021. So it's been 2+ years already where the statement "if a user has visited a site using the `Inter` font from the Google CDN, they'll get it pre-cached for every other site they visit that uses `Inter` also from the Google CDN!" hasn't been true! I also remember that use-case being a big part of the news around the Google Fonts launch, so I'd imagine most engineers would be surprised to find out it's no longer true!
@Mexad0n
4 ай бұрын
Thank you
@johnnifytech
4 ай бұрын
Thank *you* for this comment! Feedback always inspires me to keep going, especially in a series that’s gonna be as long as this one! 😄🙌
@Mexad0n
4 ай бұрын
@@johnnifytech I'm surprised you do not have more subscribers as your content is very valuable. I really like how you explain things in logical way and I always find in your videos some hidden gems. ;)
@johnnifytech
4 ай бұрын
Aww, thanks for this nugget too 🤗 I'm not that surprised to be honest 😂 thinking about it now, it's a bit like how being good at software engineering doesn't necessarily mean you'd be good at software engineering **interviews**! And vice versa. I know I put a lot of effort into the videos and streams, and I'm often happy with the end result... but I'm sure there's a ton of things I could be doing better when it comes to making the content more discoverable / recommendable / shareable 🤷♂️ more "KZitem-friendly"! But it's all good, I suspect, much like interviewing too, it also gets easier the more you keep doing it 😄
@lanwara
4 ай бұрын
What font do you use for your editor? Looks like Fira Code but I don't remember it having such nice italics like yours 😍
@johnnifytech
4 ай бұрын
It *is* Fira Code with ligatures, good eye! But I am hard-coding the `FiraCode-Retina` version in VSCode, which may be why the weight and the italics look slightly different to what you remember? 🤔 Thanks for picking up this detail, and for commenting 🙌 Fonts and visually pleasing editor setups are fun subjects 😄
@Indra-wc7kx
4 ай бұрын
Great video thanks
@johnnifytech
4 ай бұрын
Thank *you* for watching Indra! 🙌
@DanielRios549
4 ай бұрын
7:06 This goback animation is awesome
@johnnifytech
4 ай бұрын
Haha, yes, it’s my favourite too! I got lost in a loop a few times coding & recoding this, because it’s so pleasing how it gets back in the grid 😂 Thanks for noticing!
@OneBrighDay
4 ай бұрын
I would love to see a full tutorial/ course of this whole app. SvelteKit seems amazing but the problem is how few full project tutorials there are compared to say Next. SvelteKit tutorials be like build a todo app. Next tuts, build an e-commerce site, 😅
@johnnifytech
4 ай бұрын
Hey Tyus, thanks for watching this one! I hear you and I'd love to do a long tutorial like this for a proper app start to finish. Drop by the Discord and you'll find fellow engineers also encouraging me to do the same thing! Problem is, these videos take me absurdly long, like each minute of video = 1-5 hours of me working on it 😅 So I tend to do "small" bits, like the next one I'm thinking of would be how to do Search (in this app still, search for games, filter results, pagination...). I do livestreams as well, so those are the closest we've got to what we all want 😂 Maybe checkout the "Next/Learn but it's SvelteKit" playlist, where I build the Dashboard app from the official course by Vercel (meant for Next.js, but I reimplemented with SvelteKit after going through it with Next.js). I'm always putting down notes for a course, and I think I'll start a new livestream series in the new year, a real SvelteKit app from start to finish. It will definitely have Auth and Data Persistence, but do let me know if you've got suggestions on what we should be trying to build! (e-commerce site and patreon clone are what people seem to want the most so far 🙂) Thanks again for watching, and for your comment 😄 It's feedback like this that encourages me to do more!
@OneBrighDay
4 ай бұрын
@@johnnifytech can you recommend any courses from someone else with Sveletekit? Something beyond a blog or todo?
@johnnifytech
4 ай бұрын
I haven't gone through any sorry 😅 I still think this video from my older channel is very current, we do route params, SvelteKit load methods, hit a third-party API (OpenAI for Chat-GPT), browser cache with headers, mention caching within our app with Redis or Supabase: kzitem.info/news/bejne/tq1rrY6dcmicd20 And it's in my short-form video style, so I know what I'm doing, switch things up to rejig attention etc 🙂 It's not that I don't know ANY other coding channels covering SvelteKit, I've seen a couple from Joy of Code, but they were also zoomed in a particular topic instead of a big course!
@nelan8220
5 ай бұрын
Whoa, so cool, amazing 🙀🙀
@johnnifytech
4 ай бұрын
Thank you so much for watching, I try to make cool & useful videos 😄🙌
@johnnifytech
5 ай бұрын
Paolo reached out to me with his library `sveltekit-view-transition`! It's great, especially for the second half of the video where we do the "just-in-time" addition of the `view-transition-name` to the relevant elements. It can do that for us behind the scenes, so if you've followed the video and have an understanding of why and how we're doing what, this can save you a lot of boilerplate! I've added a link in the description, it's: github.com/paoloricciuti/sveltekit-view-transition Thanks for the suggestion 🙂
@JimmyCeeTV
5 ай бұрын
would be great to add chapters to this given how long it is :)
@johnnifytech
5 ай бұрын
Hey, thanks for watching 😄 Timestamps added! They do take me a while to do, and I don't particularly want to re-watch myself right after the stream, so I wait for indication that at least one other person would find them useful 😅 This is from a while ago, but the linked Johnnify project is updated! The biggest change is Supabase has depecrated the framework-specific helpers (we used `@supabase/auth-helpers-sveltekit` here), in favour of `@supabase/ssr`: supabase.com/docs/guides/auth/server-side/creating-a-client?framework=sveltekit I think it's a bit easier to setup now, and their official docs have the SvelteKit specific instructions! They're similar, so you can still follow along with me, but make sure to paste in the correct stuff from that page 🙂
@Venyl
5 ай бұрын
Awesome work
@johnnifytech
5 ай бұрын
Thanks! I really enjoyed doing these Next/Learn streams 😄
Пікірлер