![CodeSnaps](/img/default-banner.jpg)
- 16
- 95 052
CodeSnaps
Germany
เข้าร่วมเมื่อ 30 พ.ค. 2023
Welcome to CodeSnaps! I'm Kaumon, and this channel is all about web development in a snap. Join me as we explore various coding techniques, tips and tricks. Get ready to have a great time diving into the world of web development!
World's Shortest Next.js Course
This is the shortest Next.js course you'll ever take. Learn how to create a new Next.js app, style it, create pages and routes, fetch data, implement streaming and loading stages, create custom route handlers, custom error pages, and more.
### 📚 Materials/References:
Code: github.com/CodeSnaps/worlds-shortest-nextjs-course
### 👨🏻💻 Here’s What You’ll Learn
- What is Next.js?
- How to create a new Next.js app
- How to style your Next.js app
- How to switch fonts
- How to set SEO metadata
- How to create pages and routes
- How to create dynamic routes
- How to fetch data using server components
- Difference between client and server components
- How to create custom route handlers
- How to stream data and components
- How to create a custom 404 page and error page
### 👇 Timestamps:
00:00 Intro
00:30 Setup & Installation
01:30 Styling
02:52 Fonts
03:22 SEO
04:10 Pages and Routes
05:24 Layout Component
06:08 Data Fetching
06:39 Client Component
07:12 Route Handlers
08:08 Streaming and Loading UI
09:24 Custom Error and 404
10:54 Conclusion
### 📚 Materials/References:
Code: github.com/CodeSnaps/worlds-shortest-nextjs-course
### 👨🏻💻 Here’s What You’ll Learn
- What is Next.js?
- How to create a new Next.js app
- How to style your Next.js app
- How to switch fonts
- How to set SEO metadata
- How to create pages and routes
- How to create dynamic routes
- How to fetch data using server components
- Difference between client and server components
- How to create custom route handlers
- How to stream data and components
- How to create a custom 404 page and error page
### 👇 Timestamps:
00:00 Intro
00:30 Setup & Installation
01:30 Styling
02:52 Fonts
03:22 SEO
04:10 Pages and Routes
05:24 Layout Component
06:08 Data Fetching
06:39 Client Component
07:12 Route Handlers
08:08 Streaming and Loading UI
09:24 Custom Error and 404
10:54 Conclusion
มุมมอง: 58
วีดีโอ
Everything You Need to Know about Streamlit
มุมมอง 7921 วันที่ผ่านมา
Learn how to turn your Python scripts into web apps using Streamlit. Streamlit is a Python library that makes it easy to create and share beautiful, custom web apps for machine learning and data science. No experience in HTML, CSS, or JavaScript is required. 📚 Materials/References: Code: github.com/CodeSnaps/streamlit-crash-course 👨🏻💻 Here’s What You’ll Learn - What is Streamlit - How to insta...
Build Charts in React With Recharts in 7 Minutes
มุมมอง 23K9 หลายเดือนก่อน
Learn how to create beautiful charts in React with Recharts, a charting library built specifically for React. Once you understand how to create one chart, you can pretty much create any chart you can imagine. 📚 Materials/References: Code: github.com/CodeSnaps/recharts-library 👨🏻💻 Here’s What You’ll Learn - What is Recharts - How to install Recharts - How to create an area chart, bar chart, and...
Build Stunning Documentation With React & Docusaurus (Complete Guide)
มุมมอง 18K11 หลายเดือนก่อน
Learn how to create stunning documentation in minutes with React and Docusaurus. Spend more time building your product and less time writing your documentation. 📚 Materials/References: Code: github.com/CodeSnaps/docusaurus-guide Here’s What You’ll Learn 👨🏻💻 - What is Docusaurus - Install Docusaurus - Creating your own documentation - MDX (Markdown JSX) - Import components into Markdown - Using...
The Only JavaScript Cheat Sheet You Need (For Beginners & Pros)
มุมมอง 778ปีที่แล้ว
Welcome to the ultimate JavaScript cheat sheet, your go-to resource to reference and look up everything from the basics to advanced techniques in JavaScript! 👨🏻💻 Here's what you'll learn: - Comments - Console - Variables - Numbers - Booleans - Strings - Assignment Operators - Conditionals - Functions - Scope - Arrays - Array Methods - Iterators - Loops - Objects - Classes - Modules - Promises ...
Next.js 13 Changed Data Fetching and Rendering... But Is It Good?
มุมมอง 7Kปีที่แล้ว
What's the difference between app router, page router, static site generation, static rendering, server-side rendering, dynamic rendering, incremental static regeneration, server components, client components, getStaticProps, getServerSideProps, getStaticPaths, generateStaticParams, and hydration? 📚 Materials/References: Server & Client Components: th-cam.com/video/aoHK8skFZ1U/w-d-xo.html 👨🏻💻 ...
Everything You Need to Know About Server Components in Next.js 13
มุมมอง 23Kปีที่แล้ว
With the release of Next.js 13, Next.js officially supports React server components, and here's everything you need to know about server components so you can start building better, faster apps right away. 📚 Materials/References: Code: github.com/CodeSnaps/react-server-components 👨🏻💻 Here's what you'll learn: - What are server components - The difference between server and client components - ...
Beautiful Password Generator using only HTML, CSS, and JavaScript | Step-by-Step Tutorial
มุมมอง 165ปีที่แล้ว
Use only HTML, CSS, and JavaScript to create a beautiful password generator. We'll cover everything from creating a colored character-length slider, implementing toggles for including numbers and symbols, copying the password to the clipboard, and even adding a password strength meter. 📚 Materials/References: Full Repository: github.com/CodeSnaps/password-generator-vanilla-js Full HTML Code: gi...
Next.js 13 & Tailwind CSS: Build an Amazing Tip Calculator App in Minutes!
มุมมอง 1.1Kปีที่แล้ว
Build an amazing tip calculator app using Next.js 13 and Tailwind CSS with a step-by-step process to create a fully functional tip calculator app from scratch. Key Takeaways: - Set up a Next.js 13 project and configure Tailwind CSS - Implement server-side and client-side rendering in Next.js 13 - Use the production-ready app router - Build a responsive tip calculator app with a user-friendly in...
Animated Search Bar with HTML, CSS, & JavaScript | Interactive and Engaging UI
มุมมอง 771ปีที่แล้ว
Search bars are boring, but you can take the user experience to the next level by making them interactive and animated using only HTML, CSS, and JavaScript 💻 📚 Materials/References: Full Repository: github.com/CodeSnaps/animated-search-bar CSS Code: github.com/CodeSnaps/animated-search-bar/blob/main/css/style.css 👨🏻💻 Here's what you'll learn: - Create an animated search bar - Use only HTML, CS...
How to Implement Dark Mode in React/Next.js Using Sass
มุมมอง 3Kปีที่แล้ว
How to Implement Dark Mode in React/Next.js Using Sass
Thank you very much for your knowledge sharing sir, finally i made my project works perfect this method. Actually i`m working on a React project with Tailwind Css. It Works perfect. Thank you Sir !!!
Such a great video!! Keep it up man 👨💻
Thanks a lot!
sadly we are living in weird harsh world
Great video
simple and thoroughly explained. Thnks man
Can u also explain how do add a new sidebar, i am trying it but isnt works
@3:15 How did you jump to the folder structure? Could you pls explain? I have locally hosted docusaurus website but can't find the folder structure.
but how we can get the value from the client component to a server component?
good one i might use it thank you
Excellent total. Broke it into understandable steps. Then made it clear once you know the foundation, it becomes easy mode. Well done and thanks.
That was super useful and perfect pace..
❤❤❤❤
Awesome explanation,💫🔥💯❤️🌟
Thanks
Super and Quick Resolution to recharts thanks so much
Thanks
Thanks you so much ! You are great
I am your subscriber now. Kindly post something awesome like this
plz make more videos on charts and dashboards json data plz
Really helpful, Kaumon! Thanks for creating and sharing this wonderful resource.
Jesus, would it kill them to make an interface?!
Thank you , thank you and thank you. You just completely cleared all of my doubts regarding this topic.
Mann..this video is soooo underrated
What is your icon theme? It looks so good!
If you have a Typescript error with <Tooltip content={<CustomTooltip />} /> you have to add : - Import TooltipProps from "recharts" - import { ValueType, NameType, } from "recharts/types/component/DefaultTooltipContent"; Finally : const CustomTooltip = ({ active, payload, label, }: TooltipProps<ValueType, NameType>) => {....
Very helpful, thank you!
Great tutorial, just as needed !!!
appreciate the quality of the content
docusaurus doesn't seem to have a search bar. If I have lot's of documents, I won't be able to search them.
It has built-in Algolia search. It's disabled by default that's why you didn't see it in the demo. Instructions on how to enable it can be found in the docs 😊
Hi. I have a question for you. How to customize the data in YAxis ?
that's amazing video on next js Data Fetching and comparison between next 12 vs 13. well done. Thank you for sharing your knowledge on such a this simple and easy way
hey! that was a very nice and super quick walkthrough , thank you so much for this!❤ you got a sub
Very helpful explanation !! Is there a way to mimic getInitialProps in next 13?
cool video but I can hear mouth noises - if you fixed your audio you would get way more subs. Steal fireships audio setup lol
How can I customize the background/hvoer color of a bar group when I hover over them in a bar graph?
😘
thankyou that's what i was looking for
That really helps man, thanks !
thanks
Спасибо, друг!!!
Thanks for this amazing guide. What do you suggest if i should use a WordPress for my blogs or use docusaurus for both my documentation and blogs
Very nice explanation
Fantastic tutorial 🔥 Thank you for sharing 🍻
This was an amazing introduction and feature walk through. I've been struggling to understand exactly what docusaurus does without reading the docs. This did it for me.
Can I use this on my react project without next.js?
Yes, absolutely. It's 100% the same as in this video
Great video. it was easy to follow. Instant subscribe. I have a question tho. In BarChart, How to control the bg fill of the CartesianGrid on hover? <Bar type="monotone" dataKey="revenue" stroke="#2563eb" fill="#3b82f6" activeBar={<Rectangle fill="#3069D1" stroke="#2155C0" />} // we can control the individual bar like this on hover /> / but the grid turn white and it's doesn't look good.
NeverMind got it <Tooltip content={<CustomTooltip />} cursor={{ fill: '#fff', fillOpacity: 0.075 }} />
help. how to make tooltip scrollable?
Thanks bro ! Amazing video and so helpful. Keep going !
I’m so scared by this I dunno if You’re just speaking random words or if this Is Overt terrorism
6:00