ì ìë§ êž°ë€ë € 죌ìžì.
CodeBucks
2022. 9. 13.
Tutorialð to create Apple iPhone 14 landing page using ThreeJs + ReactJS Demo Linkð€: https://apple-iphone14.vercel.app/ ----------------------------------------------- Need Web Development or AI Solutions Services? ð Let's bring your ideas to life! Contact Me From Here: https://tally.so/r/wdlj0N ----------------------------------------------- Blogð: https://devdreaming.com Hi there ð, In this video, We are going to create cool landing page for Apple iPhone 14 Pro Max where we will render 3D model using ThreeJs and add scrolling animations using GSAP. Here I have used different libraries to render 3D model in a React application and made a unique design, You can check the demo link. For this project, we're going to use, â¶ïž React JS (CRA) â¶ïž GSAP for scrolling animations â¶ïž styled-components for styling â¶ïž react-three-fiber and react-three-drei to render 3D model ----------------------------------------------------------------------------------------------------------- Starter CODE: â¡ Link ð: https://github.com/codebucks27/Apple-iphone-3d-landing-page-starter-Code Final CODE: â¡ Link ð: https://github.com/codebucks27/3D-Landing-page-for-Apple-iPhone ----------------------------------------------------------------------------------------------------------- Don't forget to watch the whole video, we're going to learn a lot of stuff like, â¶ïž How to render 3D model in ReactJS applications â¶ïž How to create Scrolling effects using Gsap â¶ïž How we can leverage the advantages of Context API â¶ïž How to use ThreeJS in React JS Timestampâ: Channel Intro @00:00:00 Intro + Demo @00:00:10 Setup @00:06:00 Adding Basic Styles @00:09:32 Quote Section @00:15:25 Hero Section @00:31:45 Rendering 3D Model @00:40:15 Adding Animation Using GSAP @00:56:00 Design Section @01:17:15 Display Section @01:29:30 Processor Section @01:44:10 Battery Section @01:56:00 Color Section @02:08:05 Animating 3D Model @02:26:20 Camera Section @02:44:00 Pricing Section @02:58:55 Using Context API @03:20:47 Adding Loading Screen @03:36:35 Making Website Responsive @03:40:50 Final touch @04:19:20 Watch the full video to understand, so that you can easily build and customize your own website. [ð ð¬ðð«ðšð§ð ð¥ð² ð¬ð®ð ð ðð¬ð ð²ðšð® ððš ð°ð«ð¢ðð ððšðð ðð¥ðšð§ð ð°ð¢ðð¡ ðŠð ð¬ðš ð²ðšð® ððð§ ð¥ððð«ð§ ðð¡ð ðð¥ðšð° ðšð ðð«ðððð¢ð§ð ðð¡ð¢ð¬] ððŒð¹ð¹ðŒð ðºð² ðŒð» ð ððµð²ð¿ð² ð'ðº ððµð®ð¿ð¶ð»ðŽ ð¹ðŒð'ð ðŒð³ ððð²ð³ðð¹ ð¿ð²ððŒðð¿ð°ð²ð! Twitterð€ : https://twitter.com/code_bucks LinkedIn ð: https://www.linkedin.com/in/codebucks/ Instagram ð«: https://www.instagram.com/code.bucks Email ð§: codebucks27@gmail.com In upcoming videos, I'm going to create lots of cool stuff with JavaScript and React so make sure to subscribe. Like, Subð¥ & Share! ⥠Learn More About, ð¥Build a Stunning Fashion Studio Website with React JS [ Locomotive Scroll + GSAP + Framer Motion ] https://youtu.be/Ra1Fsa9YJCk ð¥Create an NFT Collection Website Landing page with React JS [Mobile Responsive] https://youtu.be/edr2o59Twrs ð¥Build a Stunning Portfolio Website with React JS [ Framer-motion + Styled-components ] https://youtu.be/jcohAIaSy2M Build Responsive website with ReactJS, Styled-Components & GSAPâ£ïž: https://youtu.be/aAEfBxcGpJ8 Build Devto Clone in React: https://youtube.com/playlist?list=PLjxZxD6BDkebDKxYH4El8P4Obb5VzcGlX Build Awesome stuff with ReactJs (Playlist) : https://youtube.com/playlist?list=PLjxZxD6BDkebOPXoqccGpiinfdY9zybXm React Advanced Topic (Playlist) : https://www.youtube.com/playlist?list=PLjxZxD6BDkeZoRU6v7gMyQ7BirGD6u0Lt If you have any suggestions regarding any topics in Web Development feel free to reach out or just comment below. Thank You for watching! ð Buy me a coffee and Support this channelð¥°: https://www.buymeacoffee.com/CodeBucks Where else you can find me: Twitterð€ : https://twitter.com/code_bucks LinkedIn ð: https://www.linkedin.com/in/codebucks/ Instagram ð«: https://www.instagram.com/code.bucks Email ð§: codebucks27@gmail.com Disclaimer: All videos are for educational purposes only, please use them wisely. #AppleIphoneLandingPage #landingpage #reactjs
2024. 10. 19.
ë¹ëêž° íë¡ê·žëë°ì ìì, ë¹ëêž° ìœë°±! ê·žëŠ¬ê³ ... ìœë°±ì§ì¥... ìŽ ìììŒë¡ ëëŽë²ëŠ¬ì구ì! ..................................................... ðìœë ìëí° Visual Studio Code ..................................................... âïžVisual Studio Code Extension Live Server - ì ì¥ì ìëìŒë¡ ë³í륌 ëžëŒì°ì ì ì ì©íŽì£Œë ížëŠ¬í ìµì€í ì ìŽìì ..................................................... â±íìëŒìž 00:00 ììí©ëë€! 00:22 ìœë°±íšìë? 01:19 ë¹ëêž° ìœë°±ìŽë? 02:22 ë¹ëêž° ìœë°± ë§ë€ìŽë³Žêž° (ìì 1) 05:42 ìšëŒìž ìŒí몰 ìëëŠ¬ì€ (ìì 2) 13:40 ìœë°±ì§ì¥! 15:20 ìœë°±ì§ì¥ì íŽê²°íë Promise 15:51 Promise ìŽì§ë§ ë§ë³Žêž°
2023. 11. 19.
Build your API for free with Zuplo: https://t.ly/J7cV5 ======â¡â¡â¡====== How can partitioning, worker threads, clustering, setImmediate(), and Promises help unblock the main thread and the event loop? Also, how can we prevent blocking the event loop, REDOS, and JSON DOS? Let's learn all of that. â Buy me a coffee: https://www.buymeacoffee.com/softwaredeveloperdiaries ð Become my Patreon and get exclusive perks: https://patreon.com/softdevdiaries ðŒ Follow me on LinkedIn and drop me a message if you'd like: https://www.linkedin.com/in/gadirovgs/ ð» Also, let's connect on GitHub: https://github.com/gusgad ð Resources: Practical guide to not blocking the Event Loop: https://www.bbss.dev/posts/eventloop/ Don't block the Event Loop: https://nodejs.org/en/learn/asynchronous-work/dont-block-the-event-loop#blocking-the-event-loop-json-dos Ways to avoid blocking the Event Loop: https://medium.com/dkatalis/eventloop-in-nodejs-ways-to-block-it-and-ways-to-avoid-b60a65bab2be Worker threads: https://youtu.be/MuwJJrfIfsU Clustering: https://youtu.be/6lHvks6R6cI My side-project ð€: https://trennbar.com/ Code: https://github.com/gusgad/youtube-tutorials/tree/nodejs-event-loop-perf And don't forget to subscribe for more videos like this ð
2024. 8. 5.
ì€ëªšìŽí¡, ë íŒë°ì€ êž°ë°ì AI ìŽë¯žì§ ìì± íŽ âíëŒë©â ê°ë° í©íì§ ì€ëªšìŽí¡ ëí âêŽê³ , ê²ì, ëììž ììŽì ì ë± B2C2B 1ì°š íê¹â ì§ëíŽ ìŽ ì±GPT ë±ì¥ ìŽí ë€ìí ìì±AI(Generative AI) ìë¹ì€ê° êžê²©í ëê³ ìë ê°ìŽë°, ê°ì¥ ìžêž°ë¥Œ ëê³ ìë ë¶ìŒ ì€ íëê° í ì€ížë¥Œ ì ë ¥íë©Ž ìíë 귞늌ìŽë ìììŽ ëì€ê² íë ìë¹ì€ë€ìŽë€. ë¬ëŠ¬, 믞ëì ë ë±ìŽ ëíì ìž ìë¹ì€ë€. êµëŽ êž°ì ìŒë¡ë ì€ëªšìŽí¡(ëí í©íì§)ìŽ ì£Œëª©í ë§íë€. ì§ë 2022ë 12ì íêµìŽë¡ ì²ì ìŽë¯žì§ ìì± íŽì ì 볎ìë ìŽ íì¬ë 1ë ëì ë² íí ì€ížë¥Œ ì§ííë©° ì¬ì©ìë€ì ì구륌 ë°ìíŽìë€. ì€ëªšìŽí¡ìŽ ê°ë°í ê²ì ë íŒë°ì€ êž°ë°ì ìŽë¯žì§ ìì± íŽìž âíëŒë©âìŽë€. ìŽ íŽìŽ êŽì¬ì ë°ë ìŽì ë ë² í í ì€ížë¥Œ ì 볎ìë ì§ëíŽ 8ì ìë¬Žë° êŽê³ ë íì§ ììëë° êž°ì ëŽë¹ ëêž°ì ëª ëšë§ 500ì¬ëª ìŽ ëìŽì°êž° ë묞ìŽë€. 볞격 ì¶ìë íêž° ì ì ìŽë¯ž ìŽë°ëžë ìŽí¬(íëí늬믞ìììžë ), ëì€ìœ°ìŽì, 몰í ì€, 칎ìŽì€íž ë± ì¬ë¬ êž°ì ìì ì¬ì©ì€ìŽë€. í©íì§ ëíë ìŽì²ëŒ êž°ì ì¬ì©ìë€ì êŽì¬ì ë°ë ìŽì ë¡ âíëŒë©ì ë€ë¥ž ìŽë¯žì§ ìì±AI ìë¹ì€ìë ë€ë¥Žê², ë³µì¡í í롬ííž ìì§ëìŽë§ìŽ íììê³ ìœê² ì¬ì©í ì ìë ìŽë¯žì§ ìì± íŽìŽêž° ë묞âìŽëŒê³ ì€ëª íë€. ìŽë íëŒë©ìŽ ê°ë° êž°í ëšê³ììë¶í° ì² ì íê² ì¬ì©ìê° íìí êž°ë¥ ìì£Œë¡ ë§ë€ìŽì¡êž° ë묞ìŽë€. í©íì§ ëíë ì€ëªšìŽí¡ ì°œì ì ì KAIST ê¹ì¬ì² AIëíì ìì¬ ê³Œì ìì ë©í í¬ì€ìŒìŽì ëí êŽì¬ìŒë¡ í¬ì€ìŒìŽ AI ì°êµ¬ì€ì ë€ìŽê°ë€. 2022ë ë§ ë¹ì ë©íìŒìŽë¥Œ íŽì£Œë ìë¹ì€ë¥Œ ê°ë°íë€ê° 귞늌ìŒêž°ë¥Œ ëì íê³ ì ìŽë¯žì§ ìì±AI륌 ì 목íŽëŽ€ëë°, ë€ë¥ž íŽë€ì ì¬ì©ì±ìŽ ë§ìŽ ëšìŽì§ë ì ì 볎ìíŽ ë§ë ê²ìŽ ë°ë¡ íëŒë©ìŽë€. âíëŒë©, ë³ëì íìµ íì ìë ì¬ì©íêž° ì¬ìŽ íŽ í© ëíë íëŒë©ì ìµë ì¥ì ìŒë¡ ë€ë¥ž ìì±AI íŽê³Œë ë€ë¥Žê² ë구ë ììœê² ì¬ì©ê°ë¥íë€ë ì ì ë€ìë€. ì첎 êž°ì ë ¥ìŒë¡ ì¬ì©ìë íìµìŽ íììê³ , AI 몚ëžì íìµìí¬ íì ê° ìëë¡ ë§ë ì íìŽëŒë ê²ìŽë€. í©íì§ ëíë âíëŒë©ì ì첎 10ë§ê±Ž ë°ìŽí°ë¥Œ êž°ë°ìŒë¡ í ì첎 í롬ííž íë ìì§ì íµíŽì ì¬ì©ìë ë³µì¡í í롬ííž ìì§ëìŽë§ ììŽë ìíë ìŽë¯žì§ë¥Œ ê²ìíë¯ìŽ ì ë ¥ë§ íë©Ž ìµì ì ìë륌 ìëìŒë¡ íì íŽ ìíë íì§ ì¢ì ìŽë¯žì§ë¥Œ ë§ë€ ì ìë€âê³ ë§íë€. ëí AI 몚ëžì ë³ëë¡ íìµíì§ ììë ëêž° ë묞ì íìµíë 곌ì ìì ë€ìŽê°ë ë¹íšìšì ìž ì¬ë¬ 늬ìì€ì ìë² ë¹ì© ë±ì ì ê°ì ê°ì žì¬ ì ìë€ë ê²ë í¹ì§ìŽë€. í© ëíë âíëŒë©ì 몚ë 곌ì ì ìë¡ìŽ íìµì íë ê²ìŽ ìëëŒ ë³ëì ë©í°ëªšë¬ ìì§ì ê°ì§ê³ ì€íìŒ ê°ë§ ì¶ì¶ì íê³ ìŽë€ ì€ëžì íž í¹ì§ë§ì ì¶ì¶ì íë êž°ì ì êž°ë°ìŒë¡ ìŽë¯žì§ë¥Œ ë§ë€ìŽ ëŽê² ëë€âë©Žì âìíë ì€íìŒì ìŽë¯žì§ë¥Œ ì§ìì ìŒë¡ ë§ë€ ì ìë íŽâìŽëŒê³ ì€ëª íë€. ìŽë° êž°ì ë ¥ê³Œ ì±ì¥ ê°ë¥ì±ì ëìžì ìŒë¡ ìŽë¯ž ìžì ë°ìë€. ì§ëíŽ í¬ì€í íë©ì€, íêµí¬ìì¡ì ë¬ë ìŽí°ë¬ë¶í° ìëí¬ìë ë°ììŒë©°, ëì Kì€íížì ìì€ìì í¹íì²ì¥ì, ì€êž°ë¶ì¥êŽ íì°œ ë±ì ë°ìë€. íêµìŽ ì€íìì€ ê±°ë ëªšëž ì±ë¥ì§í 1ìë ë¬ì±íë° ìŽìŽ ìµê·Œìë ì€ìêž°ì ë¶ê° ì§ìíê³ íìëíêµê° 죌êŽíë 2023ë ì°œì ì€ì¬ëí(ìë¹) ìµì°ì ì¡žì êž°ì ìŒë¡ë ëœíë€. âíëŒë©, B2B ìë¹ì€ì ìŽìŽ ìŒë°ìž ëììŒë¡ë ì€í ìì ì€ëªšìŽí¡ì íëŒë©ì ê°ìžÂ·êž°ì (B2C2B) ëìì íëì ìë¹ì€ë¡ ì ê³µí ìì ìŽë€. ìŽë¯ž PoC륌 íê³ ìë êž°ì ë 10ì¬ê°ì ë¬íë€. ì€ëªšìŽí¡ì ì§ëíŽ íŽë¡ìŠ ë² íí ì€íž 3í륌 ê±°ì¹ë©° ëìš ì구ì¬íì ìì íŽì ìë¡ê² ì¬ì©ì겜í(UX) 구ìì í ë§íŒ ìŒë° ëì€ë ì¬ì©í ì ìëë¡ ìë¹ì€ë¥Œ ì¶ìí ìì ìŽë€. í©íì§ ëíë ì€ëªšìŽí¡ì ìŽë¯žì§ ìì±íŽì ê·žì¹ë ê²ìŽ ìëëŒ ì°œìë ¥ì ê·¹ëíí ìµì ì ìœí ìž ë¥Œ ì ê³µíë íŽë¡ ì ê·žë ìŽëíëë° ì£Œë ¥íê³ ìë€. ê·žë âíŽìì íì¬ ê°ì¥ ì€ìíê² ìê°íë ë¶ë¶ì ì¬ì©ìì ìë륌 ìŽë»ê² ë°ì ë€ìì ìŽë€ ìíë ê²°ê³Œë¬Œë¡ ë§ë€ìŽì€ê¹ëŒë ì¬íí 곌ì âìŽëŒê³ ë§íë€. ì륌 ë€ìŽ ì§êžì âìŽë»ê² ìê°ì ë°ìê¹âëŒë ë¶ë¶ìŽ í ì€ížì ë íŒë°ì€ ìŽë¯žì§ë§ ë°ê³ ìë€. ì°šíìë ì¹ì¬ìŽíž, ìì, êž°ì¬ ë± ìŽë€ ìì€ë¥Œ ë£ëëŒë ê·ž ìê°ì ê°ê³ ì¬ì©ì ìë륌 ê°ì¥ ìµì ìŒë¡ ë¶ìí ë€ì ìíë ìœí ìž ë¡ ë§ë€ìŽëŽë íŽì ê°ë°í ê³íìŽë€. ìŠ, ì§êžì ìŽë¯žì§ì í ì€ížë¥Œ ë£ìŒë©Ž ìŽë¯žì§ê° ëì€ë 구조ìŽì§ë§ ììŒë¡ë ìììŽë êžìŽë , ìºëŠí°ë ë€ìí ê²ì ë£ìŒë©Ž ê±°êž°ì ìµì ì ìœí ìž ë¡ì ìŽë¯žì§ ëë ìììŒë¡ ë§ë€ìŽ ëŒ ì ìë ìë¹ì€ë¡ ë°ì ìí€ê² ë€ë ê²ìŽë€. í©íì§ ëíë âìì§ ìŽë¯žì§ ìì±AI륌 ìŽë»ê² ìšìŒ ê°ì¥ ì¢ìì§ ì ìë €ì§ ë°ê° ìë€âë©Žì âíëŒë©ì ìŽë¥Œ ê°ì²íŽëê°ë ì€ìŽë©°, ë€ìí ìŽë¯žì§ ìì±AI íŽ ì€ ê°ì¥ ì¬ì©íêž° ìœë€ê³ ìë¶í ì ìë€âê³ ë§íë€. ê·žë âìì±AIì ê°ì¥ í° ê°ì¹ë ì€ìê°ìŒë¡ ë§€ë² ìë¡ìŽ ê²ì ë§ë€ìŽëžë€ë ê²âìŽëŒë©° âê°ìžë³ë¡ ë¹ì£ŒìŒì ìŒë¡ ë€ë¥ž êŽê³ ê° ë³Žì¬ì§ë ë± ìŽê°ìží ë¹ì£ŒìŒ ìœí ìž ìëí ë± ìë¡ìŽ ìììë ëì í ê²âìŽëŒê³ ë§íë€.
2024. 2. 26.
ìëë íìë€ Discord Bot Server륌 ìëìŒë¡ ë°°í¬ íŽì£Œë©° ì€ìºì€ë§ì ìë§ê² ìŽìê°ë¥í íë¡ê·žëšì 구ííê³ ì íë€ê° ë§ë€ìŽì§ íë¡ì ížìë€. íì§ë§ ê°ìžì ìž ì¬ì 곌 êž°ì ì íê³ì ìíŽì 구íìŽ ì€ëšëê³ ëíêµì ì ííê² ëë©Žì êµìëì êž°ì 곌ì 륌 4ê°ë ì§ííê² ëë©Žì ë€ì ê°ë°ì íê²ë íë¡ì ížê° ëìë€.
2024. 3. 24.
Service Discovery with Eureka is a key part of microservices architecture, where services register themselves in Eureka Server. Eureka acts as a service registry, allowing client services to dynamically discover and communicate with each other without hardcoding service locations. This enables load balancing, scalability, and fault tolerance, as Eureka ensures services are always available, even if some instances go down. It's commonly used in systems built with Spring Cloud Netflix. https://www.linkedin.com/in/bytemonk/ https://www.youtube.com/playlist?list=PLJq-63ZRPdBt423WbyAD1YZO0Ljo1pzvY https://www.youtube.com/playlist?list=PLJq-63ZRPdBssWTtcUlbngD_O5HaxXu6k https://www.youtube.com/playlist?list=PLJq-63ZRPdBu38EjXRXzyPat3sYMHbIWU https://www.youtube.com/playlist?list=PLJq-63ZRPdBuo5zjv9bPNLIks4tfd0Pui https://www.youtube.com/playlist?list=PLJq-63ZRPdBsPWE24vdpmgeRFMRQyjvvj https://www.youtube.com/playlist?list=PLJq-63ZRPdBslxJd-ZT12BNBDqGZgFo58 AWS Certification: AWS Certified Cloud Practioner: https://youtu.be/wF1pldkQrOY AWS Certified Solution Architect Associate: https://youtu.be/GzomXNLFgkk AWS Certified Solution Architect Professional: https://youtu.be/KFZrBxSA9tI #microservices #servicediscovery
2024. 10. 16.