How I Made My Website Load in 0.364 Seconds
Вставка
- Опубліковано 14 тра 2024
- In this video, you'll build the official jsmastery.pro website and learn how to build insanely fast websites with Next.js 14!
⭐ Ultimate Next 14 Course: www.jsmastery.pro/next14
💼 New Masterclass Cohort starts soon! Land your dream job in a project-based bootcamp with expert mentor feedback, code reviews, and career prep. To find out more, apply here: jsmastery.pro/masterclass
📚 Materials/References:
GitHub Repo: github.com/adrianhajdin/jsm_r...
GitHub Gist (code): gist.github.com/adrianhajdin/...
Zipped assets: drive.google.com/file/d/1Bqzr...
💻 Join our Discord Community - / discord
🐦 Follow us on Twitter: / jsmasterypro
🖼 Follow us on Instagram: / javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
Time Stamps 👇
00:00:00 - Intro
00:02:36 - Performance
00:19:17 - Setup
00:33:40 - Navbar
00:39:57 - Footer
00:43:23 - Home Page
00:46:51 - Search Form
00:54:28 - Filters
01:01:36 - Sanity
01:29:07 - Resource Card
01:41:55 - Header and Filtering
01:53:28 - Search Functionality
02:06:25 - Resource Playlist
02:15:45 - Loading
02:21:00 - Deployment
02:23:30 - Build Error Fix
02:25:50 - Further Improvements
Ultimate Next 13.5 Course is now live: www.jsmastery.pro/next13
I am purchasing your course in India my none i used 2-3 different card nothing is working
This error occurred
We are unable to take payment at this time. Please try again, or use a different payment method.
I won't be able to purchase it with the when the discount will expire i want this course
@@EASELearning reach out to support@jsmastery.pro
Hey. I unfortunately missed your deadline by one day. I wanna to purchase, but the discount has already stoped. I am student, and Gathering the money wasn't easy
Please, would you be kind to extend the deadline? Just for one day? That would be much appreciated.
@@javascriptmastery Hey. I unfortunately missed your deadline by one day. I wanna to purchase, but the discount has already stoped. I am student, and Gathering the money wasn't easy
Please, would you be kind to extend the deadline? Just for one day? That would be much appreciated. I have sent you an email about it
The fact that you already put time stamps, makes a big difference for those who want to dive into the building part of the tutorial. I really do appreciate you providing so much knowledge and value with this longer introduction. I really learned a lot. Your 20-minute introduction not only sets the stage for the tutorial but also elevates it to a technology update session for those keen on keeping up with the latest trends. Thank you so much!
Glad it was helpful!
The opening segment of this video is outstanding, truly the best I've encountered across UA-cam videos. It's fascinating how much I was able to learn and grasp from just the introduction. It skillfully breaks down complex information in an engaging way. Despite its length, it stands out as the best! Thank you. Amazing, Adrian!
I love how you use the slides to create an amazing intro and present the topic. As a visual learner, I would love to see more of this and I also would like to know what do you use to creat your slides/animations as I'm looking forward to doing something like you do. Keep the amazing work going!
Hello engineer, I am from Iran and I want to thank you for all your new and good free training.
And I really like this style of starting the video with very practical intro.
"Man, no words for your teaching level. I shared this video with my university teacher, and he thanked me for giving them the first 20 minutes of knowledge. Adrian, brother, you are too good Mashallah! "
Wow, thank you and your university teacher!
Scam 😂
wow, finished today. It's amazing how many quality content this chanel offers for free. Jumping into webscraping with next right now. thanks JSM team!!!!
It depends on type of videos that should you make a longer intro or not. Like for this case i think it was absoluteky brilliant to go in depth and show what nextjs is capable of. You made a full on required comparison between react and next so that is work well done
This is too good to be free can't believe someone would put this much quality content in a single video for free
Thanks so much for this 👍
In this video, unlike the previous videos, you explained it step by step much better than before, and this is great. I'm at minute 30 of this video now
I love the slides youve added and appreciate all the effort youve put in the video
Hi Adrian! I am very appreciate to you and your team for such a great and informative content.
Since you asked: I DO really love Slides at the beginning of tutorials, because it makes my understanding improve.
I prefer how you did this video. Do not change it, topics you covered was really helpful to understand why and how these works and applied. Great work!
Your channel is fantastic! Your teaching style and practical examples have greatly improved my understanding of complex concepts. Keep up the amazing work-you're a real asset to the developer community!"
First of all, I want to thank you for the time and effort you put into each of your videos. Actually, the first 20 minutes of the video contain a lot of content. I believe it's the best way to start because it's evident that you have a perfect grasp of the topic. Later on, you realize that if you don't finish watching the entire video, you'll miss out on a great opportunity to learn a lot in just a couple of hours, something that would take much more time if you were just reading documentation and similar resources. With all due respect, I would say that your channel offers the best content on these topics, and I say that respectfully to other content creators who also invest time and perhaps even money to create similar content. I've seen some very good content, but there's a significant difference- you're the best. Once again, thank you very much.
100% Appreciate the extra context and slides in the beginning, especially if the explanations and visuals are as helpful / thorough as this one was.
Great stuff, Adrian! Thanks.
Appreciate it!
Slides are great, It helps to understand things better, you do GREAT on your content and channel, Please continue to do so.
Amount of effort you are putting in content to teach us hats off, I guess our generation is lucky because we have JSM best channel...
Thank you!
i love you man lmao. your content is so valuable - and i personally don't mind the longer intro, viewers can always skip it!
I love the way companies like versel create these amazing technologies for us.
And also people like Adrian are creating these high quality videos to make our life even more easier.
Exactly!
@javascriptmastery how is that, to scam young code learners 😅 I thought india only works on phone calls 😂 Now IT teaching. Versel employee bought your course. They even don't know who you are.
Man, thanks for being my teacher in software engineer. Never stop learning because technology is updated day by day, month by month and also year by year. Lifelong learning as always
Keep it up!
I like how u keep getting better urself, and I really like that u are explaining more bfr building
Awesome!
You might know this already , You're so popular in India 🇮🇳. Thanks 👍
Wow, that's amazing! 🇮🇳
Yeah bro😊
Amazing video and amazing channel, thank you so much for your hard work! Keep it up!
Wooow, sharing this knowledge free is pure love❤❤❤. Thanks Adrian, much love and mad respect for your hard work and love for the community❤❤❤
🙌
Those explanation parts are vital, please remain them. Thanks alot
I use your videos to fall asleep, the voice is so calm and relaxing 😅. (I actually watch your videos fully but coding at night)
You are doing great I really appreciate you do such struggle to make slides its really amazing to convey you idea through slides after that you do implementation
Introduction slides are better this way. Thank you for this amazing knowledge.
Why do I get fireship vibe?
I'll take that as a compliment! :D
They're are brothers
Because you watch it all day so it sticks 🧠
@@AchwaqKhalidExactly
Lighthouse
Fantastic !!! Awesome content .. I personally would really appreciate to have the slides. They are so helpful to understand the concepts easily.
So, this video convinced me to get your course. Alas I'm a student studying frontend development at the moment, so will have to save up first, but I will :)
Too much excited for next13 course! can't even wait!!
Yess, this Friday!
i like the slides because it gives more context and importance to the build part, also with the time stamps anybody that wants to write code can do it without a trouble, sorry for broken english
You are an outstanding teacher. Your Javascript course completely transformed my web dev understanding.
I'm so happy to hear that! Are you ready for the nextjs 13 one? :)
Kindly share js tutorial link
@@rizwanabbasi5409it costs like $5000
Your intros are more than just intro. They are a great head start! Without them, it will be even harder to understand certain concepts. Trust me sometimes I go over your intros many times even after watching your tutorials. Plus I use to wonder and appreciate how you even create them so professionally. I would be grateful if someday you do tutorials on how you make them! 😊
Thanks for that!
Hi there Adrian, thanks for being a great teacher. Your videos on Next.js and Tailwind are very informative and helpful. Could you do more videos on Next.js, Sanity, and maybe Stripe web projects like that one project you did on ecommerce? I was wondering how you would integrate those technologies together for fast SEO and scalability now that they have updated versions. Keep up the great content!
Great suggestion!
Definitely appreciate the longer explanation!! 🙏🏾
My pleasure!
The slides are really very useful and very knowledge-sharing content. Keep these slides in your videos.......... Amazing Job.
Switch my career from Civil to CSE just because of your videos and got a job too. Thank you
You are awesome! 🥳 I love the way you teach and explain things. 🚀🔥
Glad you enjoy it!
I DO really love Slides at the beginning of tutorials, because it makes my understanding improve.
These slides were really beneficial, thanks!
We like your slides but it should be short ,over all we come here for your new projects 🎉🎉
Thank you, I was waiting for this kind of video
You got it!
Great work. Always likes your videos. Wondering if you will make videos for nuxtjs or svelte kit?
This is an amazing deal. Big thanks to you JSM
It's control space on both Mac and Winodws to get the import statement. Cmmd space on mac brings up spotlight
always tuned in
Awesome!
"Well... I wonder who gets the job." Font cropped in masterclass section of your website
Website is so speed 🔥
I liked the new intro part please keep it going.
Thank you, Adrian! Much love from the Philippines 💯
My pleasure!
Hi Adrian. Always many thank you for your content, tutorials and all the effort .. your contribution is priceless. I want to take the opportunity to comment on this tutorial as guideline for the future ones ? Make it clear that “flex-center” is not part of tailwind …when you build up the query guide us through it don’t just combine all the functionality all together. Things as such could take 10 minutes more but it would be so much appreciated.
you explained very good i'll suggest keep it that way
love the rebuilding slides!
As always, mind blowing content and explanation and for free as well, JSM is the right place for any developer. Thank you Adrian, thank you JSM team, My hat off to you 🎩.
Much appreciated!
It's very nice video I like how you explain every details at the beginning before start coding. I have made some projects using Nextjs and TailwindCSS watching your videos. Thanks for making such amazing projects. 😊
You are most welcome
As always, thank you kindly for these amazing lessons. You are love
So nice of you
It's awesome as always , keep making such videos.
Just one request, from next video onwards please also cover managing github code while creating projects.
I will try my best
what a good thing about you video is fully you explain everything correctly Make videos the way you make them
Quality content as always 🔥🔥🔥
🔥🔥🔥
Slides are perfect man !
I really appreciate introducing slides, for me they are very useful in terms of understanding deeply
Happy to help!
Appreciate that you increased your content duration
Always!
This is awesome! and... Longer intro = more info = I WANT THIS!
Good to know!
Great video, although I had a look at the price for the course must admit, it’s very high considering there are many high level tutorials on UA-cam or even coming soon for others. I love your videos and wish you success with what you do , was looking forward to this course but did not expect this price at all haha . None the less , smash it man you deserve it
Actually not, the price is really low considering what's inside the course.
Think about that in this way, the tutorials teach you in the surface but there course show you what's under tip of the iceberg.
Just awesome work man 🔥❤
Thanks 🔥
Wow, two legends in the same comment! 😍❤️
2 best channels for advanced projects in the same comment section 🔥🔥🔥🔥🔥🔥
This friday waiting for your Next JS course.
Hi there !!! 👋
Yess, finally!
I loved the information provided in Intro.
You're a great teacher..... Keep it up. The introduction is great
Thanks!
we need the intro it actually helps in understanding all the things about why we are doing what we are doing
You are just great .after watching your videos i am getting strong foundation in react . not react dev . but soon i will . your helping a lot ♥
The route codes (for each file routes by id) is not attached in the description. Please make sure to provide it
Thank you very much for your educational videos. Your explanations are great, your videos are very helpful.
Thank you so much sir !
Just love the way you convey the knowledge
It's my pleasure
Intro is really informative . I loved it like this.❤
Thank you so much 🤗
slides and how you are presinting them make the video amazing keep going thank you .♥♥
Thank you!
AMAZING WORK
Thank you so much 😀
i appriciate the effort that you make on the intro, stright valuable informations
I appreciate that!
I like that the intro is longer. helps makes sense better
More to come!
Adrian my mentor the slides u build for us it is phenomenal and the information and knowledge we get it from the slides it's is outstanding ❤❤❤
I appreciate that!
i love the intro. Very Informative keep doing more
The slides are amazing and great with very deep explanation of critical concepts. Keep it up. The time spent was worth it. Learnt a lot with better understanding
That’s better than most site however you have a long way to go. Ctrl-F5 full page reload can load in 70ms, 5 times faster than your example. The page this was achieved on has authentication, 3 grids, 2 tabs, a menu, and 20 text fields. Hit the db 4 times, 1 for each grid then the header info. I used sql server, .net core for the api, and reactjs w/server-side-rendering on. Returned json from the db via SP. about 50 libraries in ReactJS. Have to minimize data sent to the browser. You’ll get there
I appreciate these slides
Now I understand difference between server side rendering and client side rendering, because of 20 mins long discussion.
Hey you are doing amazing job. GoodLuck
I hope your course has Ecommerce, Blog, image gallery with modal navigation, SAAS projects. Would be great if you teach us how to sell also. :) cant wait for the course.
Cool idea!
Nooo this slides are very good and it enhances our knowledge and better understanding the concepts
한국인인데, 영어를 천천히 정확하게 말씀해주셔서 알아듣기가 편해요. 감사합니다
Awesome, thank you!
I prefer this, the slides version, because I can learn more about why and how rather than what.
First of all, thanks for your efforts to make everyone love you, same to me. I would like to request if you could do a video to create a website something like admin dashboard where it more interactive with data instead of static website, appreciate your efforts. thanks
What about an ecom landing page builder with a form?
Can you make tutorials on that!
Tired of shopify lag
As you asked for our opinion about the long intros
Its pretty good actually but you shouldn't make them much longer
My suggestion would be to keep intros max to max 10-15 minutes longer.
Thank You !
I love your videos❤
is this search input and searchparams safety from any hacker database injection attacks? should we validation and sanitize the searchParam?
its perfect when u have short explanation before starting the project ofcourse we appreciate that , Good job
I tried to learn After Effects once and kind of know how it works... I admire the efforts taken for the presentation. The timing & animation was perfect. Just curious... did you use After Effects or something else? Meanwhile, the subject on which you have made this video was not my strength for a long time. (Load time and performance). As soon as I saw the 2.3 hours course on this subject from Javascript Masery... I was like "Yes! Finally... I'm going to watch the full video and implement these tips on my upcoming projects. Thank you so much!
We're using Figma to create them. I'm glad you found the video helpful! :)
Thank you for amazing videos. I really appreciate it. I am able to land a job as software developer not long ago. I took your amazing free videos seriously, and I really appreciate it. Thank you, lots of love.
Great to hear!
🥳🥳🥳Thanks GOAT!!
Thank you!! 🎉
Awesome video. Ty