- 19
- 27 503
Vladyslav Dihtiarenko
Ukraine
เข้าร่วมเมื่อ 28 ม.ค. 2024
Join my frontend development journey with me!
Hi! I'm Vladyslav, a passionate frontend developer from Ukraine. I created this channel to share my experience and tips that I have gained over the years. Please, subscribe to the channel. More content soon!
Hi! I'm Vladyslav, a passionate frontend developer from Ukraine. I created this channel to share my experience and tips that I have gained over the years. Please, subscribe to the channel. More content soon!
How To Create Tooltips with HTML & CSS Only (no JavaScript needed)
In this video, we'll create user-friendly pop-up messages that appear on hover interactions - tooltips. We'll leverage the power of pseudo-elements and data attributes to dynamically generate informative content. For this tutorial, we'll use HTML and CSS only, so no Javascript needed for this interactivity. But that's not all! We'll also implement smooth fade-in and fade-out animations using CSS transitions, elevating the user experience of your tooltips. Throughout the tutorial, I'll provide step-by-step instructions and explore various customization options, empowering you to create visually appealing and functionally effective tooltips for your web projects.
Please, like the video and subscribe for more content like this!
Useful resources:
CSS Pseudo Elements: developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
CSS attr() function: developer.mozilla.org/en-US/docs/Web/CSS/attr
CSS Keyframes: developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
Let's connect:
Website: www.vddeveloper.online/
Blog: www.vddeveloper.online/blog
Instagram: vladislavdegtyarenko
Telegram: t.me/@Vladislav_Degtyarenko
#frontend #tooltip #tooltips #tutorial
Please, like the video and subscribe for more content like this!
Useful resources:
CSS Pseudo Elements: developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
CSS attr() function: developer.mozilla.org/en-US/docs/Web/CSS/attr
CSS Keyframes: developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
Let's connect:
Website: www.vddeveloper.online/
Blog: www.vddeveloper.online/blog
Instagram: vladislavdegtyarenko
Telegram: t.me/@Vladislav_Degtyarenko
#frontend #tooltip #tooltips #tutorial
มุมมอง: 94
วีดีโอ
Vite React to GitHub Pages: Fix Empty Page & Missing Assets
มุมมอง 33314 วันที่ผ่านมา
Having trouble deploying your awesome Vite React app with React Router to GitHub Pages? Facing a frustrating blank screen or 404 not found errors for your assets? This frontend deployment tutorial tackles those common issues and provides clear solutions to ensure a smooth transition from your local development environment to GitHub Pages. By the end of this 4-minute video, you'll be able to: - ...
Animated Number Counter with Framer Motion | Count Up Animation in React
มุมมอง 3.2Kหลายเดือนก่อน
This video teaches you how to build a reusable counter animation using Framer Motion in React. This is perfect for showcasing things like revenue, reviews, or project completions on your website in an engaging way. Here's what you'll learn: - DRY principles in action: Create a reusable component for your counter animations. - Animate numbers with Framer Motion: Bring your counters to life with ...
Deploy Vite React App to GitHub Pages (2024)
มุมมอง 5Kหลายเดือนก่อน
Looking to deploy your Vite React app to GitHub Pages? This video provides a clear, step-by-step guide to get you started! Learn how to configure your project, set up a GitHub workflow, Vite config, and leverage GitHub Pages for deployment. Whether you're a seasoned React developer or just getting started with Vite, this tutorial will equip you to showcase your app to the world! ✨ #vitejs #reac...
Slide Up Text on Hover | React CSS Animation Tutorial (without libraries)
มุมมอง 1.3K2 หลายเดือนก่อน
Slide Up Text on Hover. React CSS Animation Tutorial (without libraries). Sliding Up Text while hovering the button. This is a step-by-step guide where you’ll learn to make text move up when you hover over a button. We’ll do this using only CSS and React - no extra tools needed. By the end of this video, you’ll know how to make each letter move up one by one, creating a cool effect that can mak...
Next.js Image with Fallback | Fix and Replace Broken Images
มุมมอง 1.1K2 หลายเดือนก่อน
Next.js Image with Fallback. This video teaches you how to build custom Image components that extend next/image with a fallback feature. We'll build a Client component and a Server component to handle broken images on the server side. Fix and Replace Broken Images with the fallback placeholder image in Next.js. Avoid ugly broken image placeholders and load fallback. Learn how to: Handle errors ...
Detect Click Outside Element | React hook | useClickOutside
มุมมอง 4762 หลายเดือนก่อน
In this React hooks tutorial we'll create a useClickOutside hook. This video equips you with the ability to effortlessly detect clicks outside an element, crucial for scenarios like closing dropdown menus or modals with ease. By following along, you'll master the art of handling click events efficiently in your React projects. Don't miss out on mastering this essential skill! Hit like, subscrib...
Next.js Image Optimization on Build Time (Static Export)
มุมมอง 6703 หลายเดือนก่อน
Are you looking to optimize images in your Next.js projects seamlessly? Look no further! Introducing the Next.js Image Optimization API, a powerful tool for enhancing your website's performance by reducing image size and improving page load times. With this library, you can effortlessly integrate advanced image optimization directly into your Next.js workflow, all at build time. Utilizing the N...
How to Add Server Side Code Highlighting | Next.js | Prismjs
มุมมอง 5513 หลายเดือนก่อน
In this tutorial, I'll show you how to add server side synthax highlighting to your code snippet. We'll use Next.js with Prism library, and handle everything on the server side, so the client will experience no flickering as a result of running JavaScript on the client side. #javascript #frontend #nextjs #ssr #prism
Code Faster with Emmet in VS Code | Emmet Tutorial
มุมมอง 1654 หลายเดือนก่อน
Code Faster with Emmet in VS Code | Emmet Tutorial
Elegant Text Reveal Effect using React and Framer Motion | Letter-By-Letter Text Animation
มุมมอง 12K4 หลายเดือนก่อน
Elegant Text Reveal Effect using React and Framer Motion | Letter-By-Letter Text Animation
How to Create Theme Switcher in React. Dark Mode Tutorial using useTheme and Context API
มุมมอง 4124 หลายเดือนก่อน
How to Create Theme Switcher in React. Dark Mode Tutorial using useTheme and Context API
The process '/opt/hostedtoolcache/node/16.20.2/x64/bin/npm' failed with exit code 1 please help me with this error
can you help me sir, i followed but when i go to my website it doesn't show anything and it says error 404 in dev tools
ohh i got it, I misspelled my setbase😅 thanks anyway for the tutorial
Nice! Is it possible to do this with tailwind?
Absolutely! Just style your tooltip using Tailwind classes, and it will work the same way.
Welcome! I just started my channel and this is the first time I make TH-cam tutorials. If you find this video helpful, consider hitting the like button and subscribe to my channel. This will help me to stay motivated in the long run. Btw, I'd be more than happy if you share your suggestions and tips on how I can make my tutorials better. Thanks a lot!
Welcome! I just started my channel and this is the first time I make TH-cam tutorials. If you find this video helpful, consider hitting the like button and subscribe to my channel. This will help me to stay motivated in the long run. Btw, I'd be more than happy if you share your suggestions and tips on how I can make my tutorials better. Thanks a lot!
Yeah 🔥🔥🔥
😎
I have never once commented on a youtube video but this video just saved me big time. I spent hours trying to figure it out but luckily finally came across this video. Thank you very much!
Appreciate it!
@@VladyslavDihtiarenko The process '/opt/hostedtoolcache/node/16.20.2/x64/bin/npm' failed with exit code 1 please help me with this error
Great video and easy to follow! Thanks man!
Glad you liked it!
Lifesaver tutorial for real, Deployed Easily at one go, Underrated Channel! Thank you, you have my like and subscribe!
So glad it was helpful! Thanks for subscribing!
@@VladyslavDihtiarenko The process '/opt/hostedtoolcache/node/16.20.2/x64/bin/npm' failed with exit code 1 please help me with this error
Your tutorial was very bad. Not even a single work has been done. He is not deployed
Welcome to my channel! To improve the tutorial, could you tell me what deployment issues you faced?
usually i don't comment in video but this video help me lot thanks for that 🥰
Thank you a lot! Glad it helped!
@@VladyslavDihtiarenko The process '/opt/hostedtoolcache/node/16.20.2/x64/bin/npm' failed with exit code 1 please help me with this error
Hey Brother thank you for the amazing video, is there anyway I can connect with you? Id like to know more of how you approached different problems :)
Hi, welcome to my channel! Currently, I don't have any special community or chat for my subscribers. Probably, I'll create it later. For now, you can contact me through social media. I do prefer Telegram or Instagram. Here's the links: t.me/Vladislav_Degtyarenko instagram.com/vladislavdegtyarenko/
Good looks crodie
Cool 🔥🔥🔥
Yeah, thanks😎
You saved me! Thank you so much!
You're welcome!
Thank you
You're welcome
Thanks, I successfully deployed my code, but there is a problem with images/icons. Seems like there is some problem with relative paths.
Check out my new view where I showed how to fix this issue: th-cam.com/video/uStf2HMXcAs/w-d-xo.html&ab_channel=VladyslavDihtiarenko
I'm confused, so you push the entire project, or just the content of "dist" folder created by the build process? Answer:
You don't need to push the dist folder. Push the entire project. 'Dist' is added to .gitignore automatically by Vite so Git doesn't track this folder (i.e. don't include it in commits history). The dist folder (the builded project) is automatically created during the workflow as a build result (that's why we create this file)
@@VladyslavDihtiarenko thanks, why when I use the vite's website workflow it fails, I notice it doesn't create the extra branch
@@netizen_94 It didn't create that extra branch for me as well
what if we use react-router-dom in the project? it requires more configurations to support react-router on GitHub pages
Check out my new video where I covered issues when we use React Router along with base url in Vite config file: th-cam.com/video/uStf2HMXcAs/w-d-xo.html
If you use React Router in your project, you're probably facing an issue with empty pages (blank screen with no errors in the console) or 404 not found errors for your assets. Check out this video, I've covered those issues there: th-cam.com/video/uStf2HMXcAs/w-d-xo.html
Blank page, console is completely empty. When I added the base property with the repo name, the deployment manages to render the Vite icon as the app icon in the tab title, so that works, but it's like the index.html is not served at all
Hi, welcome to my channel! I've just released a video showing how to address this issue in Vite React projects. Check it out: th-cam.com/video/uStf2HMXcAs/w-d-xo.htmlsi=xShS2ai5-dr4Ujl6
Thank you so much This was really helpful
Appreciate it!
@@VladyslavDihtiarenko The process '/opt/hostedtoolcache/node/16.20.2/x64/bin/npm' failed with exit code 1 please help me with this error
Thanks for the video! Please zoom in on VS Code for all of us who watch on mobile phones. Overall, it will make the video accessible to more people. I could barely make out the code, but had to strain my eyes.
Thanks, I'll consider to zoom in a bit more in future videos!
thanks (y)
😎
what vscode theme is that?
Community Material Theme High Contrast: marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-community-material-theme
Здравствуйте! Владислав, а у меня возникают проблемы с отображением картинок которые находятся в папке assets. И в принципе с переходами на другие урл если не добавить роуты. Есть ли возможность как-то это решить?
Приветствую! Похоже, что многие сталкиваются с этой проблемой. И она кроется в base адресе, который мы устанавливаем в vite config. В случае с переходом на другие роуты, проблема в React Router (подразумевая, что именно его вы используете), в котором нужно тоже прописывать basename: v5.reactrouter.com/web/api/BrowserRouter/basename-string А в случае директории src/assets нужно смотреть отдельные случаи. Если статический импорт через import, то Vite решает проблему автоматически. Но если указываем путь в самом jsx (к примеру, в src атрибуте img тега), то возможно нужно самому к пути прибавлять base url, который доступен через import.meta.env.BASE_URL: vitejs.dev/guide/build.html#public-base-path
Nice video 😍. One thing, if we use char as the key it will thow an error saying "Encountered two children with the same key" since there could be same letters. Instead we can use React.Children.map(chars, char => <span>{char}</span>)
Thanks for sharing your advice! Evenmore, we can use indexes for two reasons: 1) Our text is a static lightweight DOM content that we don't expect to change 2) React actually uses indexes for key attrubute as a fallback
I have a problem with my photos won't show in the page
Same issue occurred with my e-commerce project, I had to click on the shop menu button to render the product images.
I could help you if you share a link to you repo here or through social media. The issue could be with the baseUrl we set in Vite config, or with React Router if you use it in your project.
Yes that was the problem i fixed it already
Thanks brother very helpful..
Appreciate it! 😊
For those who uses master as your main branch make sure to update the deploy.yml
Thanks brother. appreciate a lot.
😎
thank you sir its works , it was more help full to me☺
Appreciate it a lot!
@@VladyslavDihtiarenko The process '/opt/hostedtoolcache/node/16.20.2/x64/bin/npm' failed with exit code 1 please help me with this error
it's work. thanks 🤗👌
🫡
i am gettingn a blank page bro !!
any errors in the console?
Thank you! It was vey helpful!
Appreciate it!
The process '/opt/hostedtoolcache/node/16.20.2/x64/bin/npm' failed with exit code 1 please help me with this error
So helpful! Thanks for the tutorial.. I really appreciate it :D
🙏🏼
how do we deploy the backend?
This video is only about the frontend part. Consider to find another tutorial for backend.
Thank you for this video
thanks for watching!
Thanks to this video, I avoided being fired for another day.
🤣
your video is great but idk why it didn't work in production
Check out the example that works in prod: Repo: github.com/VladislavDegtyarenko/tutorial-animated-number-counter Preview: tutorial-animated-number-counter.vercel.app/
Nice one. This is a useful effect to have a tutorial for, thanks!
Glad you liked it!
Nice content for optimisation of images in Nextjs 😊
Glad you liked it! 😎
Hey pal, I wish to learn MERN full Stack web development. So, please suggest me appropriate course for MERN
th-cam.com/video/CvCiNeLnZ00/w-d-xo.html everything from Dave Gray is a gem 💎
Thanks 🙂
@@RaJat2905_ 😎
😎👌 Thank you bro !!!
You're welcome!
дякую!
👌
In my sources i only have the options main and none, no gh-pages
Try to switch to Github Actions, and then again back to Deploy from a branch
@@VladyslavDihtiarenko i also get this unusual error 404 (main.jsx resource not found)in my console.Is there a specific way to put my main.jsx file path
Did you set "base" in your vite config according to your repo name? 0:45 For example, If your repo name is vite-react, set base: "/vite-react/"
I did, but when i deploy it first routes to the not found page
@@Thee_Don96 send me a link to your repo
Thank you.
👌
I would love a complete framer motion tutorial. I would recommend people just because I can't find a good tutorial anywhere. Please make multi hour or segmented framer motion tutorial or complete GSAP tutorial
It's a great idea, I'll take it into consideration, thanks!
thanks buddy works like a charm appricated
You're welcome!