- 29
- 240 996
Threeveloper
Netherlands
เข้าร่วมเมื่อ 13 มี.ค. 2022
Hey! I'm a front-end developer from the Netherlands who loves developing with modern technologies. Whenever I have time, I like to work on this TH-cam channel and grow a community together with y'all. I'm creating content to help you master front-end development as soon as possible by explaining it as easy as I can. Hopefully you like it, always feel free to reach out to me :)
Thank you and enjoy the content! 🙏
Thank you and enjoy the content! 🙏
#1 Introducing A New Layout Mode - Flexbox Deep Dive
I totally understand the basics of flexbox, but sometimes I ran into weird issues that didn't make any sense to me. I've figured out why some strange behaviour exists, so that you can get a better understanding of the flexbox algorithm, which makes it more fun to work with!. Enjoy!
---
📫 CONTACT ME
3️⃣ GitHub: github.com/sjoerdvanBommel
3️⃣ Instagram: threeveloper
3️⃣ Twitter: threeveloper
3️⃣ LinkedIn: www.linkedin.com/in/sjoerd-van-bommel-8a232914a/
---
⏲ TIMESTAMPS
0:00 Introduction
0:20 Flow Layout vs Flex Layout
1:32 Flex quirk example
2:40 Outro
---
📫 CONTACT ME
3️⃣ GitHub: github.com/sjoerdvanBommel
3️⃣ Instagram: threeveloper
3️⃣ Twitter: threeveloper
3️⃣ LinkedIn: www.linkedin.com/in/sjoerd-van-bommel-8a232914a/
---
⏲ TIMESTAMPS
0:00 Introduction
0:20 Flow Layout vs Flex Layout
1:32 Flex quirk example
2:40 Outro
มุมมอง: 408
วีดีโอ
#2 SSR - Server Side Rendering vs Building a Lego House
มุมมอง 5118 หลายเดือนก่อน
Hi there 🙋♂️ In this series I'm going to try to compare all relevant rendering methods with building a lego house, using simple react and next.js examples :) In this video, we'll dive into building a lego house like how you do Server Side Rendering with Next.js! 📫 CONTACT ME 3️⃣ GitHub: github.com/sjoerdvanBommel 3️⃣ Instagram: threeveloper 3️⃣ Twitter: threeveloper ...
#1 CSR - Client Side Rendering vs Building a Lego House
มุมมอง 5829 หลายเดือนก่อน
Hi there 🙋♂️ In this series I'm going to try to compare all relevant rendering methods with building a lego house, using simple react and next.js examples :) Be aware that, despite the downsides mentioned in this video, there are good reasons for every rendering method to use it (as mentioned in the video as well)! 📫 CONTACT ME 3️⃣ GitHub: github.com/sjoerdvanBommel 3️⃣ Instagram: instagram.co...
I Recreated This Outstanding Music AI Website🤯
มุมมอง 2Kปีที่แล้ว
What's up, TH-cam ✌️ This AI Music creation tool called Suno built a beautiful landing page! I went ahead and recreated it using only plain HTML, CSS and JavaScript. Once again in a fast-paced, compact video. I hope you like it, please let me know what you think and what else you'd like to see! 💻 CODE FROM VIDEO github.com/sjoerdvanBommel/threeveloper/tree/026-modern-scroll-animations 📫 CONTACT...
Simplistic landing pages are TAKING OVER the internet 😈
มุมมอง 1.7Kปีที่แล้ว
It doesn't have to take weeks to develop a landing page that's stunning. With some basic HTML, CSS and JavaScript (and a little bit of video editing 🤫), you can create beautiful landing pages in minutes/hours! Without any library! Simply by taking inspiration from other existing websites. I hope you enjoyed it ✌️ 💻 CODE FROM VIDEO github.com/sjoerdvanBommel/threeveloper/tree/025-simplistic-land...
Recreating AWWWARDS Winning Websites is Easier Than I Thought!
มุมมอง 7Kปีที่แล้ว
Hey! Thanks for watching my content. Here you learn how to recreate amazing looking websites in this fast-paced tutorial where we will recreate a slider using HTML, CSS and JavaScript ONLY! No dependencies, no frameworks, just pure self-written code. You'll not only learn how to code, but also how to split the work into smaller chunks and pick them up one by one using a thinking process that I ...
SSR and Global State - Mastering SvelteKit - 02
มุมมอง 594ปีที่แล้ว
Learn how to use SSR, environment variables, the page store and create an API in this fast-paced SvelteKit tutorial. Please subscribe or comment if you like to see this type of content :) ⏲ TIMESTAMPS 0:00 Introduction 0:20 Implementing the header 1:15 Use custom fonts 2:21 Create a Gallery component 2:42 SvelteKit VS Code Extensions 3:11 Architecture of the app 3:52 Register in Unsplash 4:15 B...
Is it thàt simple? - Mastering SvelteKit - 01
มุมมอง 938ปีที่แล้ว
New branding, new content! I changed my channel's main goal from only placing 3D related content to placing content about front-end development in general. And we'll start with a fast-paced SvelteKit tutorial. Hopefully you like it, I'd like to hear from you since I put a lot of work in it :) ⏲ TIMESTAMPS 0:00 Introduction 0:20 Mastering SvelteKit tutorial topics 1:05 Creating your first Svelte...
Create a no-code 3D website in less than 1 hour using Dora
มุมมอง 16Kปีที่แล้ว
🙋♂️ Hi there A different kind of video this time, where we are going to dive into dora.run, which is a web design tool for creating awesome websites as easily as using figma. Are you unfamiliar with coding or does it take too much time for you to create a 3D website from scratch using code? Then definitely try out www.dora.run yourself! This channel is meant to help you start developing 3D web...
#08 Adding Materialized Objects Part 2 - Let's Recreate Bruno Simon's Portfolio
มุมมอง 10K2 ปีที่แล้ว
Hi there 🙋♂️ 8️⃣ In this eighth video of this course we're applying the floor shadow and the pure materials to the objects in the scene. After that, we're going to improve the current leva folder structure and add new tweakable properties for the new FloorShadowMaterial and FolioMatCapMaterial that we created before. Enjoy! 👋 This channel is meant to help you start developing 3D websites. The ...
#07 Adding Materialized Objects - Let's Recreate Bruno Simon's Portfolio
มุมมอง 3.3K2 ปีที่แล้ว
Hi there 🙋♂️ First of all: sorry for the snotty voice, covid caught me 😅 The good news was that I had time to create this video though! 🎉 7️⃣ In this seventh video of this course we're adding the first visible 3D models to the scene. We're also going to retrieve and apply the correct matcap materials to the objects. In the next videos, we will be able to reuse most of this code for the rest of...
Generated Environment Maps in React Three Fiber and Three.js
มุมมอง 8K2 ปีที่แล้ว
🙋♂️ Hi there Creating a realistic scene requires correct reflection from your surrounding area. And in general, who wants to look at a blank white background? 😉 That's where environment maps come into play. Learn all about how to implement them in react three fiber & drei in this video. This channel is meant to help you start developing 3D websites. The videos are meant to be short and educati...
#06 Improving the Project Structure - Let's Recreate Bruno Simon's Portfolio
มุมมอง 2.7K2 ปีที่แล้ว
🙋♂️ Hi there 6️⃣ In this sixth video of this course we're removing some unused code and improve the folder structure of the project. During the setup of ESLint and Prettier, there was a small mistake in the configuration which skipped the recently added TypeScript and TSX files. This is configured after this video as well. Enjoy! 👋 👀 If you haven't seen the other videos yet, make sure to check...
#05 Creating a custom R3F material - Let's Recreate Bruno Simon's Portfolio
มุมมอง 3.4K2 ปีที่แล้ว
🙋♂️ Hi there 5️⃣ In this fifth video of this course we're creating a custom React Three Fiber Material and use that to create our own react three fiber floor. The material is going to be tweakable so that it automatically updates the colors when the props are updated. It's using custom shaders in the background and a cool technique to cover the entire screen. Enjoy! 👋 👀 If you haven't seen the...
#04 The Canvas Component Part 2 - Let's Recreate Bruno Simon's Portfolio Using React Three Fiber!
มุมมอง 3K2 ปีที่แล้ว
#04 The Canvas Component Part 2 - Let's Recreate Bruno Simon's Portfolio Using React Three Fiber!
#03 The Canvas Component - Let's Recreate Bruno Simon's Portfolio Using React Three Fiber!
มุมมอง 5K2 ปีที่แล้ว
#03 The Canvas Component - Let's Recreate Bruno Simon's Portfolio Using React Three Fiber!
#02 Setting up Prettier & ESLint - Let's Recreate Bruno Simon's Portfolio Using React Three Fiber!
มุมมอง 10K2 ปีที่แล้ว
#02 Setting up Prettier & ESLint - Let's Recreate Bruno Simon's Portfolio Using React Three Fiber!
#01 Introduction - Let's Recreate Bruno Simon's Portfolio Using React Three Fiber!
มุมมอง 53K2 ปีที่แล้ว
#01 Introduction - Let's Recreate Bruno Simon's Portfolio Using React Three Fiber!
React Three Fiber & Three.js - Lights Explained
มุมมอง 10K2 ปีที่แล้ว
React Three Fiber & Three.js - Lights Explained
React Three Fiber & Three.js - Materials Explained 🔮
มุมมอง 11K2 ปีที่แล้ว
React Three Fiber & Three.js - Materials Explained 🔮
React Three Fiber & Three.js - Textures Explained
มุมมอง 12K2 ปีที่แล้ว
React Three Fiber & Three.js - Textures Explained
Learn to debug your UI real time using LEVA
มุมมอง 6K2 ปีที่แล้ว
Learn to debug your UI real time using LEVA
Showcase your 3D model in the web using three.js, react three fiber, react three drei and gltfjsx!
มุมมอง 17K2 ปีที่แล้ว
Showcase your 3D model in the web using three.js, react three fiber, react three drei and gltfjsx!
React Three Fiber & Three.js Geometries Explained
มุมมอง 5K2 ปีที่แล้ว
React Three Fiber & Three.js Geometries Explained
Learn how to create 3D websites faster with those react-three-fiber basics
มุมมอง 8K2 ปีที่แล้ว
Learn how to create 3D websites faster with those react-three-fiber basics
Create your own 3D website using @react-three/fiber (r3f), React, TypeScript, Vite and TailwindCSS
มุมมอง 12K2 ปีที่แล้ว
Create your own 3D website using @react-three/fiber (r3f), React, TypeScript, Vite and TailwindCSS
WebGL, three.js, react-three-fiber and react-three-drei - What are the differences?
มุมมอง 11K2 ปีที่แล้ว
WebGL, three.js, react-three-fiber and react-three-drei - What are the differences?
Awesome man, just what i needed! Got settled with MeshStandardMaterial its classic! Thanks
truly valuable content, very detailed!
i had impressed on your portfolio design❤
thanks
9:57 we add red color on Box and show red color in scene why?
kind and good job, my congratulation from dominican republic
A true Rubik's cube color scheme: with white on left and yellow on right, it goes blue orange green red
This video should be on the official documentation. Haven't found a better explanation than this.
hyperplexed but for three js now haha
Thanks for sharing!
LFG 🚀 🚀🚀
That was actually interesting
Thanks! For how long have you used flexbox already? :)
Can you explain how to change the name, I created 3D of desire name, and import in the Resources file and then use it in the introSection setTitles(), but the desire 3D model doesn't exist. Please guide how to change the name
I was looking for this for so long
🔥🔥🔥
hmmm i followed till 12.34 trying get rid of the error but some how I followed the steps correctly the error still there. I have triple checked the code. anyone got the same problem?
Thanks for this tutorial !
good yo see your face my bro!
This demystified so much, thank you!
Great to hear, more to come, stay tuned! :)
It's a good analogy. I would just add that it seems to me the assumption here is that there is a lot of dynamic data. If the data itself is mostly static, not reactive, refreshed periodically rather than constantly, then it's possible to render the whole thing server side, rendering an "app shell" and data at the same time, in other words just html, with no need to fetch data and then hydrate anything. Most blogs or news sites for instance, even with comments sections, do not necessarily need to be anything other than static sites. Many static site generators now have incremental building, making it quite efficient to keep rerendering on the server. For sites with highly reactive and dynamic data, obviously that wouldn't work out so well, but for many of the sites which are sort of in the middle of this spectrum, something simple like htmx might be all that is needed, as opposed to sveltekit or next etc.
This is a really great comment and describes what I'm going to discuss in the upcoming videos about SSR, SSG, RSC and more! Thanks for thinking along 💪
I cannot install npm -D vite-plugin-glslify. pls help :(
Could you try "npm install -D vite-plugin-glslify" instead?
Really cool but I can't get over the fact the color scheme is wrong 😭
Oops!
Great job 😊😊
Thank you :)
Your tutorials are the best! Well taught, simple to follow, and you give us the code! I spent hours yesterday researching reflective surfaces and your other video helped me do it in 20 min! Thanks and keep up the excellent work!!
Thanks for your kind words! :)
th-cam.com/video/VDyw3XUqBi4/w-d-xo.htmlsi=DamDqkLWPkB6EVFt
th-cam.com/video/VDyw3XUqBi4/w-d-xo.htmlsi=DamDqkLWPkB6EVFt
great content! thank you
Very well explained thanks a lot ! now i can use this tool to debug my lights
Hi do you plan on finishing this I love the content would like to add the car
For now, I don't have any specific plans because I don't have enough time, but maybe I'll get back to the project! 😄
i can't do that svg part would you recommend me some youtubers where i can learn these
I cannot, but most of the SVG related code is pretty well documented on the MDN web docs. And you can checkout my final code if you can't get it to work yourself :)
very nice video
Thank you :)
which software / tool you use for making these videos ?
Mostly Adobe Premiere Pro, OBS and quite some editing 😉
Superb Explanation, Loved it.
Thanks a lot, good to hear 🙏
is this series completed fully i am confused please help me
It's not unfortunately, but completing it would still take a lot of time, while I'm currently focusing on more general frontend development video's. Possibly you are able to continue from this point yourself?
good vid bro! That's a good tutorial. I'm gonna star your repo too.
Thanks, glad you enjoyed it! 🙏
Loved it. You should do more of these
this deserves more views !
I agree 😜
damn, loved it !!
How did you make those code transition animations where it expands and adds code snippets? The animation looks damn coool
It's a time consuming process, I'm duplicating, cropping and moving them manually 😄 But thanks! I'll keep doing that ✌️
@@threeveloper The time invested is well worth it in the end!
This looks cool 😮
Thanks! 😄
Holyyyyy, you are one of my favourite HTML CSS JS cool designs youtuber. Please don't stop these videos. Eager to see more!
Thanks, very motivating! 💪
I don't get how threejs is this big-I mean babylonjs has these things by default already
also wanted to ask you, what tools do you use to make this video? in terms of the code snippets highlighting?
Just screen recording and premiere pro :) I set my VSCode background to the same color as the background in my videos. When the background is not a solid color, I filter out the dark areas in my snippets :)
Just found this channel and subscribed immediately, I cant believe you only have 4k subscribers, you deserve alot more... great content! keep going
Thanks a lot! :D More content coming :)
would I be able to attach an interactive screen (made with react) to a smartphone? my goal is to allow people to simulate my app directly from the browser.
I'm not sure if I understand your use case 😅 Could you elaborate?
I'm interested in purchasing the course!
The code expired, unfortunately :(
"...and the wobbly bubbly background." 😂 Really nice video 👌✨ Thanks for sharing!!
This new wave of frontend designer is crazy skilled and I am blessed enough to view it in play. Hallelujah!
Thanks haha! 😄
What happened between 08:02 and 08:04? I can't get it to work on my system. Please help.