- 14
- 83 422
CodeSnaps
Germany
Registrace 30. 05. 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!
Build Charts in React With Recharts in 7 Minutes
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 line chart
- How to make your charts responsive
- How to customize your charts
- How to add a tooltip to your charts and customize it
- How to add a legend to your charts
- How to add a grid to your charts
- How to add an x-axis and y-axis to your charts
👇 Timestamps:
00:00 Intro
00:44 Setup & Installation
01:19 Area Chart
02:34 Responsiveness & Styling
03:14 Second Area Chart
03:46 Axis and Cartesian Grid
04:13 Legend & Tooltip
05:55 Bar Chart
06:44 Line Chart
07:26 Outro
📚 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 line chart
- How to make your charts responsive
- How to customize your charts
- How to add a tooltip to your charts and customize it
- How to add a legend to your charts
- How to add a grid to your charts
- How to add an x-axis and y-axis to your charts
👇 Timestamps:
00:00 Intro
00:44 Setup & Installation
01:19 Area Chart
02:34 Responsiveness & Styling
03:14 Second Area Chart
03:46 Axis and Cartesian Grid
04:13 Legend & Tooltip
05:55 Bar Chart
06:44 Line Chart
07:26 Outro
zhlédnutí: 17 374
Video
Build Stunning Documentation With React & Docusaurus (Complete Guide)
zhlédnutí 14KPřed 9 měsíci
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)
zhlédnutí 623Před 10 měsíci
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?
zhlédnutí 6KPřed 11 měsíci
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: czcams.com/video/aoHK8skFZ1U/video.html 👨🏻💻 H...
Everything You Need to Know About Server Components in Next.js 13
zhlédnutí 22KPřed 11 měsíci
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
zhlédnutí 150Před 11 měsíci
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!
zhlédnutí 1,1KPřed rokem
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
zhlédnutí 647Před rokem
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
zhlédnutí 2,8KPřed rokem
Dark mode has become a popular feature on websites, and we'll explore a simple yet scalable solution for your React/Next.js app using Sass 🔥 📚 Materials/References: Full Repository: github.com/CodeSnaps/theme-toggle-nextjs-sass Sass Code: github.com/CodeSnaps/theme-toggle-nextjs-sass/blob/main/app/globals.scss 👨🏻💻 Here's what you'll learn: - Implement a dark mode toggle - Create a Next.js 13 a...
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
Thanks 👍
I have been using Docusarus over a year, now it's great static generator tools which help you on documentation but I have struggling on one thing, to upgrade my project to Docusarus 3.1 , It gives error to upgrade from 2.4 because fontend is old version of react also other dependancy, I will appreciate if you make simple tutorial video, how to upgrade Docusarus 2.4 to 3.1 , because it's my whole year of hard work it would headache for me I struggle on fixing error by Docusarus
This is great
Your explanation, editing and voice is so good. You should create some more content like this. You got a new sub 🫡
Awesome, thank you!
Thanks
Thank you youtube for spying on me and recommending this video at the correct time. Anyway awesome tutorial.😄
How to customize images on default homepage?
You can customize the homepage under "/src/pages/index.js". It's very easy. The default one comes with a <HomepageFeatures />, it's under "/src/components" where you can specifically change the images. Hope this helps!
@@CodeSnaps not really. I don't understand how to change format from svg to anytype. I would like to set there png or webp image using the default template. Anyway, thank you for your anwer.
Ah, I see what your problem is. If you want to use the default template structure, go to the HomepageFeatures component and replace the <Svg /> line with something like <img src={Image} className={styles.featureImage} alt={title} />. In the FeatureList array, you can change the property from Svg: require('...').default to Image: require('...').default. Make sure you change the prop from Feature({Svg, title, description}) to something like Feature({Image, title, description}). Hope this helps now!
@@CodeSnaps thank you very much. You helped a lot.
@@CodeSnaps but still there is an error: Failed to execute 'createElement' on 'Document': The tag name provided
This is seriously the greatest thing ever
Thank you so much :)
i want to create page like default, I want to english version, and korea version of docs in navbar. How to make it ?
That's absolutely possible. First you have to declare the default locale and alternative locales in docusaurus.config.js. Then you create the translation files and put them in the right file system. Then you can deploy the site using single or multi-domain strategies. It's best to check the documentation for details, but it's totally possible.
Awesome, please make more Docusaurus videos!
I really enjoyed the content of this video. I was searching for some good and fast explanation of client component and server actions and most of the short videos are just talking about surface level stuff or the other videos are more then 30 min long. This is some good explanation and example that is easy to process. Keep this up mate.
Glad you enjoyed it!
Thank you❤️🔥
Any time :)
Well explained👏👏👏
Thank you 🙂