Svelte can be the future

At timing 1:35:00 , I am unable to find repeatable and non repeatable zones in my prismic slice machine, it just shows fields option how to work on the repeatable fields

Quite basic conversation for Rich but good talk nonetheless

Please increase the volume, can only hear correctly with everything maxed out - great talk with Rich!

If I would start looking into Svelte (v5 new syntax) today, i don't think i would choose Svelte as my go to framework. Svelte v3-4 was "magical" to me, and I dropped interest to use anything else. Really liked the slim code syntax and separation of concerns with minimal svelte in my non .svelte files. The thing I missed was some way to injecting slot content as props (thinking of svelte constructor for my exported components). This talk got me hooked: kzbin.info/www/bejne/d5Wxe2acrsmYl9E there are much things in this talk that gets voided now (or in svelte v6).

Start 5:22

Getting an error at 2:43:30 with item.case_study (Property 'case_study' does not exist on type 'never'.ts(2339)). Anyone know the fix?

I started this tutorial and would love to complete it but when I tried to run the code we copy after setting up the repository I never got asked to install slice machine or anything…..all I got was an error code saying it could not run the code

reaaaaaaahhhk

Thank you so much!

In 6 years on linkedin, received way more then a hundred interview requests (not counting thos I sent) and there was not a single one giving a f**k about my portfolio, and a couple were those that even looked at it. First was made in wordpress with full height pages sliding when it wasnt even a thing, then nextjs the nextjs with 3d stuff via three.js. the two gigs I got were because was me sending the job application over hundreds. Luckly i have clients by word of mouth (who also never checked or understood my design skills until I designed their website)

To be honest, I don't like doing web dev much but with Prismic it looked so fun and easy. It is just amazing...

Would

One hour in and I am so excited to actually build along with @TrostCodes. I'm curious if you'll use this tutorial as a basis for a rewrite once Svelte 5 drops? I'm hoping this will be a good 1-to-1 comparison to learn the differences and advantages of versions 4 vs 5.

I've been trying for weeks but just can't finish the project. I always get lost with that Prismic thing :( Maybe it's just me. I'll try again later.

Fantastic video! Please tell us what your terminal theme is!

Hello Alex, I have just finnished the tutorial and that is absolutetly beautifull. I am definetely going to use it as my portfolio. I am having a couple of issues, tough, I can not see the teckList or the floating images in mobile view. I don't know if that is the idea. thank you for this tutorial, it is inspirational. what's next?

good video but that vscode font is a crime

I *_can not possibly_* disagree more. It's great for simple stuff, but I've spent the last 3 days going back and forth between different node and react versions to get an app that ran flawlessly locally to build on Vercel. It's awesome for straight forward stuff, but don't rely on it for anything more than the most basic deployments.

This video is invaluable, thank you!!

@TrostCodes Would you be willing to share what VSCode theme are you using? :) I'll keep spamming until I get it!

Minor note: Reactive functions outside of components need to be in .svelte.js or .svelte.ts files, not just any .js file.

The slice simulator doesn't seem to work, the editor works fine but not the preview. What could I be doing wrong? There is no obvious way to reach support.

Amazing video tutorial 🔥

Probably best to use VS code standard file manager, it makes following along easier.

Doesn't work on iPhones ??? that's a big issue

Web dev has sucked from the start. Framework after framework to try and address the deficiencies. Can't change the underlying languages though, HTML, CSS, JS. Can only build on top but still amazing after nearly 30 years we still haven't got there. Interested to try Svelte out on a project and see what it can do.

Great interview

Thanks for the new video! I’m looking forward to seeing what other content you post! Always good to learn as much as you can!

Unhandled Runtime Error Error: R3F: Hooks can only be used within the Canvas component! While adding Footer

I love the ease of use when utilizing slices and gsap. Thank you so much!

Link?

Such a valuable content. Thanks for sharing!

Svelte(kit) has been absolutely the worst thing that ever happened to me, because now I hate my day job whenever I have to do something in react 😭

Wow. Very impressive, both the rich content & your smooth and confident presentation. Thanks for you initiative and effort in developing this tutorial and making it available.

Sir there's problem in the code in ContentList it's throwing error during build not during development something to do with ref in first li element.

dammmm i knew rich created rollup but i didn't realize it was one of the driving forces behind vite. and ractive, it's not hard to see how fb named their framework. Rich is foreal one of the best things that's happened to the web. 🈷SVELTE 5 🐅 LETZZZZZZ GOOOOO ✊

You're an AMAZING teacher.

I did everything, its running on localhost but vercel is failing to deploy, feels like all my time and effort were wasted

Awesome work. Thank you for sharing this :) You've just got a new sub!

I am hyped to follow this tutorial ! I spent a lot of time learning prismic with sveltkit and this will make me learn much more. thanks!

Amazing tutorial! I would like to make a suggestion for the next one in NextJS, as you are using it in conjunction with GSAP, you could add preload and page transition, in a project I was working on I couldn't do it with the Prismic API due to the server.

Awesome tutorial! Just in case somebody runs into the typescript issue that I ran into Type '(el: HTMLLIElement | null) => HTMLLIElement | null' is not assignable to type 'LegacyRef<HTMLLIElement> | undefined'. Line: 147: ref={(el) => (itemsRef.current[index] = el)} A solution could be to filter out null values from assignment to the array. ref={(el) => (itemsRef.current[index] = el)} should(or could be) {(el) => { if (el) { itemsRef.current[index] = el; } }}

GL is for Glide drivers. Its actually OpenGL 3D drivers written in C. WebGL is the Javascript implementation of it.

i have a problem , con useRef (property) RefAttributes<HTMLLIElement>.ref?: React.LegacyRef<HTMLLIElement> | undefined

really nice tutorial. so nice that i build it twice in a week just to deepen the concepts, please more of this and please more gsap stuff !

i did Something Similar to what the tutorial showed in Case Studies Slice but i am Having the 404 Error , i tried to fix it with the same way you showed but still not working , i used a single page instead of a re-usable page in the Slice Machine , is there any way i can fix it The Error i am getting is : SvelteKitError: Not found: /feature_extraction/feature-extraction-page [vite:dev] at resolve (eval at instantiateModule (file:///D:/Svelte_code/New%20folder/voice-sense/node_modules/vite/dist/node/chunks/dep-Pluk1iaB.js:50501:28), <anonymous>:494:13) [vite:dev] at resolve (eval at instantiateModule (file:///D:/Svelte_code/New%20folder/voice-sense/node_modules/vite/dist/node/chunks/dep-Pluk1iaB.js:50501:28), <anonymous>:294:5) [vite:dev] at #options.hooks.handle (eval at instantiateModule (file:///D:/Svelte_code/New%20folder/voice-sense/node_modules/vite/dist/node/chunks/dep-Pluk1iaB.js:50501:28), <anonymous>:67:56) [vite:dev] at Module.respond (eval at instantiateModule (file:///D:/Svelte_code/New%20folder/voice-sense/node_modules/vite/dist/node/chunks/dep-Pluk1iaB.js:50501:28), <anonymous>:291:40) [vite:dev] at process.processTicksAndRejections (node:internal/process/task_queues:95:5) [vite:dev] at async file:///D:/Svelte_code/New%20folder/voice-sense/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:502:22 { [vite:dev] status: 404, [vite:dev] text: 'Not Found' [vite:dev] }

Ok... you are a much better creator than me. But my screens are bigger than yours... LOL

I am trying to build something like this and this tutorial has been really helpful but I am having a problem with I think my mappers.js folder, when I import mappers to the pages.server.js page, there is this error coming: Type '{ case_studies: ({ slice, context }: { slice: CasestudiesSlice; context: { client: Client<AllDocumentTypes>; }; }) => Promise<{ slice: CasestudiesSlice; caseStudies: (CaseStudyDocument | undefined)[]; }>; }' has no properties in common with type 'SliceMappers<PageDocumentDataSlicesSlice, { client: Client<AllDocumentTypes>; }>'. If anyone could help me understand what I might have done wrong I will really appreciate it. Thanks

🔥❤