- Видео 32
- Просмотров 18 952
Ido Evergreen
Нигерия
Добавлен 12 авг 2016
Hi 👋
Am creating a Universe of content for frontend developers
Am creating a Universe of content for frontend developers
PostCSS, Logux & The Future of CSS - Andrey Sitnik
Join me as i chat with Andrey Sitnik, creator of PostCSS, in this season finale episode. We dove deep into the evolution of postCSS, what it means for the tool as it enters maintenance mode and the future of CSS. Plus, we got to chat about Andrey’s exciting work on the Logux project-a flexible JS framework to make a local-first sync engine. see you in season 2
Listen on the go :
Spotify
open.spotify.com/episode/1GYCVpMp8haQux5Q65R3IX
Apple Podcast
podcasts.apple.com/us/podcast/postcss-logux-the-future-of-css-andrey-sitnik/id1763224230?i=1000670526166
Links from our discussion:
sitnik.ru/en/
PostCSS :
postcss.org/
CSS Linter
stylelint.io
CSS polyfill
preset-env.cssdb.org
Guide to write PostCSS plugin...
Listen on the go :
Spotify
open.spotify.com/episode/1GYCVpMp8haQux5Q65R3IX
Apple Podcast
podcasts.apple.com/us/podcast/postcss-logux-the-future-of-css-andrey-sitnik/id1763224230?i=1000670526166
Links from our discussion:
sitnik.ru/en/
PostCSS :
postcss.org/
CSS Linter
stylelint.io
CSS polyfill
preset-env.cssdb.org
Guide to write PostCSS plugin...
Просмотров: 155
Видео
Next.js Type-Safe URL State Management Using nuqs - François Best
Просмотров 3292 месяца назад
I had an amazing conversation with François Best, the creator of nuqs, where we explored the ins and outs of this powerful library for type-safe URL state management in Next.js. We reviewed the documentation, discussing the core features and what to expect in future releases. Also listen on the go : open.spotify.com/show/0sWnW9Y5pGUCKjcaY3QA8p docs: nuqs.47ng.com/ X: x.com/nuqs47ng Don’t forget...
Getting started with astro - Ben Holmes
Просмотров 1233 месяца назад
I had a great conversation about Astro with @bholmesdev who is the core maintainer at astro . Astro is a web framework for content-driven websites. Astro docs : astro.build/ Definitely check it out guys 🔥🔥🔥🔥
Getting started with frontend architecture - Maxi Ferreira
Просмотров 1,2 тыс.3 месяца назад
I had an awesome conversation about frontend architecture with @charca22 Maxi from Frontend at Scale. Listen to audio on spotify : open.spotify.com/episode/3PRugck6I4rLbTNchdWuHm?si=bbapZ5nfTZe2rzcpIq1qxg Check out Frontend at Scale frontendatscale.com/ and also follow Maxi on Twitter x.com/charca Also, check out maxi course : frontendatscale.com/workshop/ C4 model : c4model.com/ Timestamps...
ReactJS discussion - Gitcoder
Просмотров 1953 месяца назад
On this first episode we sit down with @thegitcoder to explore the world of ReactJS! Yassin shares valuable insights into the latest React features, best practices for building efficient applications, and more. Connect with @thegitcoder Blog : gitcoder.me RUclips: youtube.com/@thegitcoder?si=zIgLHMGTU3LlVyRZ Follow me on Twitter: IdoEvergreen Follow me on Instagram: instagram.co...
Build Palette SVG Animations || Next.js || Framer Motion || Tailwind CSS
Просмотров 1275 месяцев назад
In this video let's recreate the svg animation from the coolors site with framer motion, nextjs and tailwind css. #reactjs #tailwindcss #framermotion #css Link to full stack coolors clone : ruclips.net/video/QhrEc3i4VM0/видео.htmlsi=8rZWmGdDZjEdoqAa Get svg used in video : drive.google.com/drive/u/0/mobile/folders/1BEQro5bxKTuxJUeHu4WDl7QE4-yyql7Z?usp=drive_link
Nextjs 14 and Framer Motion - The basics
Просмотров 4746 месяцев назад
This is a collection of all my framer motion videos together , learn how use framer motion in your react application to handle animation . 🐦 Follow me on Twitter: IdoEvergreen 🖼️ Follow me on Instagram: evergreenx.dev
Build a Video Meeting App with Nextjs 14 and ZEGOCLOUD
Просмотров 5996 месяцев назад
Build a video meeting application using Nextjs 14. Tailwind css, Typescript, and ZEGOCLOUD Get 10000 free mins with ZEGOCLOUD UIKits: bit.ly/3WivXY2 Take Advantage of ZEGOCLOUD: bit.ly/3WkEUQK 100% customized video call SDK: bit.ly/44iMPQu How to build a video call App: bit.ly/3UDZ5Ys ZEGOCLOUD video call SDK &API allows you to easily build your live video chat apps within minutes. Github: gith...
Build colors palette generator app with Nextjs 14, tailwindcss || No talking
Просмотров 6286 месяцев назад
Build a colors palette generator web app like coolors with authentication, nice color palettes generator, exporting palettes as PNG, PDF, SVG, saving palettes and more using Next JS 14, Clerk, Supabase, Typescript, Tailwind CSS, Shadcn, React Hook Form, Zod, Colord and framer motion #framermotion #nextjs #typescript #reactjs 📚 Materials/References: Link: coollors.idoevergreen.me/ GitHub Reposit...
Build and deploy a Full Stack coolors clone with Nextjs 14, Supabase, Clerk, and Typescript
Просмотров 5 тыс.6 месяцев назад
Build a colors palette generator web app like coolors with authentication, nice color palettes generator, exporting palettes as PNG, PDF, SVG, saving palettes and more using Next JS 14, Clerk, Supabase, Typescript, Tailwind CSS, Shadcn, React Hook Form, Zod, Colord and framer motion #framermotion #nextjs #typescript #reactjs 📚 Materials/References: Link: coollors.idoevergreen.me/ GitHub Reposit...
Build and deploy a Full Stack coolors clone (Nextjs 14, Supabase, Clerk, and Typescript) (part 3)
Просмотров 3606 месяцев назад
Build a colors palette generator web app like coolors with authentication, nice color palettes generator, exporting palettes as PNG, PDF, SVG, saving palettes and more using Next JS 14, Clerk, Supabase, Typescript, Tailwind CSS, Shadcn, React Hook Form, Zod, Colord and framer motion #framermotion #nextjs #typescript #reactjs 📚 Materials/References: Link: coollors.idoevergreen.me/ GitHub Reposit...
Build and deploy a Full Stack coolors clone (Nextjs 14, Supabase, Clerk, and Typescript) (part 2)
Просмотров 1676 месяцев назад
Build a colors palette generator web app like coolors with authentication, nice color palettes generator, exporting palettes as PNG, PDF, SVG, saving palettes and more using Next JS 14, Clerk, Supabase, Typescript, Tailwind CSS, Shadcn, React Hook Form, Zod, Colord and framer motion #framermotion #nextjs #typescript #reactjs 📚 Materials/References: Link: coollors.idoevergreen.me/ GitHub Reposit...
Build and deploy a Full Stack coolors clone (Nextjs 14, Supabase, Clerk, and Typescript) (Part 1)
Просмотров 7486 месяцев назад
Build and deploy a Full Stack coolors clone (Nextjs 14, Supabase, Clerk, and Typescript) (Part 1)
Build and deploy a Full Stack coolors clone (Nextjs 14, Supabase, Clerk, and Typescript) (Intro)
Просмотров 4456 месяцев назад
Build and deploy a Full Stack coolors clone (Nextjs 14, Supabase, Clerk, and Typescript) (Intro)
Build an awwwards navigation with Nextjs and Framer Motion
Просмотров 3387 месяцев назад
Build an awwwards navigation with Nextjs and Framer Motion
React GSAP : Deep Dive - Installation
Просмотров 2667 месяцев назад
React GSAP : Deep Dive - Installation
React GSAP : Deep Dive - Introduction
Просмотров 7467 месяцев назад
React GSAP : Deep Dive - Introduction
Awwwards Page Transition with Framer Motion and Nextjs
Просмотров 1,8 тыс.8 месяцев назад
Awwwards Page Transition with Framer Motion and Nextjs
6 | Framer Motion React Tutorial: Deep dive - Transition property
Просмотров 638 месяцев назад
6 | Framer Motion React Tutorial: Deep dive - Transition property
5 | Framer Motion React Tutorial: Deep Dive - Animate property
Просмотров 668 месяцев назад
5 | Framer Motion React Tutorial: Deep Dive - Animate property
4 | Framer Motion React Tutorial: : Deep dive - Initial property
Просмотров 608 месяцев назад
4 | Framer Motion React Tutorial: : Deep dive - Initial property
How to use Active link in Next.js 14
Просмотров 1538 месяцев назад
How to use Active link in Next.js 14
3 | Framer Motion React Tutorial: : Deep dive - Motion components
Просмотров 1098 месяцев назад
3 | Framer Motion React Tutorial: : Deep dive - Motion components
2 | Framer Motion React Tutorial: Deep Dive - Installation and setup
Просмотров 999 месяцев назад
2 | Framer Motion React Tutorial: Deep Dive - Installation and setup
1 | Framer Motion React Tutorial: Deep Dive - Introduction
Просмотров 1,3 тыс.9 месяцев назад
1 | Framer Motion React Tutorial: Deep Dive - Introduction
Slider Animation with Reactjs, Framer Motion Tutorial
Просмотров 2399 месяцев назад
Slider Animation with Reactjs, Framer Motion Tutorial
Page Transitions in React - Framer Motion and Next.js Tutorial
Просмотров 6769 месяцев назад
Page Transitions in React - Framer Motion and Next.js Tutorial
Thanks for review my website!
it is my pleasure 😌😌😌
Thank you
No problem 👍
Great 🙌🏻
🔥🔥🔥
Nice and informative Thanks
Glad you found the conversation informative
What if we want to use active link on scroll instead of going to another link, can we do the same method like in the video above?
yes it is possible to do that
why did you use clerk when supabase itself offers authentication?
I have the same question? Is it more difficult to implement supabase authentication?
@@santiagopereira4691 not at all. It's comparatively easier than next-auth.
Thanks Ido for this great discussion! 🙌
Great stuff!
Very insightful 🔥
Great Discussion Guys
🔥🔥
Nice. Weldone
@@chidiebere 🔥🔥🔥
Thanks for having me on the show, @idoevergreenx 🙌🏽
🙌🏻
If react.js is Js library is there need to go deep into Js before knowing react.js?
Thank you for your question . Yes definitely you should have solid foundations before picking a library like reactjs
Gitcoder made mention of a beginner starting with redux before react Js but I do not get why
Hey @@chideraakamadu , Redux is state management library, When you learn ReactJS then start learning Redux.
@@thegitcoder oh, Thank you very much
Thanks for inviting 🙌🏻
Thanks for the amazing insights you shared . 🔥🔥🔥🔥🔥
can we kick the users from the meeting
Yes we can do that .
thank you bro
You're welcome!
Awesome 🔥🔥Can u do scroll animations in framer motion
Yes definitely, that can be achieved with usescroll hook for framer motion . Checks docs for help
Great Man 🎉
Thanks man 👍
great vid
Thanks
Yes ,i like it
💯💯
Nice job, man! Subscribed. Keep up the great work.
Awesome, thank you!
Great one boss But can this same cloud be used if i want to create a chrome extension of this same thing you did ?
Yes, definitely for that use case you might need some permission on chrome Here is a the link to the doc : docs.zegocloud.com/article/14933
Thanks for the video , zegocloud looks amazing will definitely check it out
Hope u guys enjoyed this video and make sure to leave a comment and share 😊😊
Thanks all
Amazing build man 🔥🔥🔥🔥
Appreciate it!
Source Code?
Check video description for code on GitHub
❤🔥❤🔥❤🔥
Going back to working on this framer motion playlist
Thanks.
Welcome!
Also for those looking for the desktop svg we used on the home page . Check the iconx.tsx file on the Google drive that is in the video description. Happy coding again ❤
amazing tutorial mate
Thanks a ton!
32:47 I realized most viewers have questions about what happening here , as mentioned the piece of code was from the documentation. So supabase is our database while clerk auth is our authentication provider, so we needed a way to connect both tools to each other to save the user palette based on the user_id provided by the clerk to database. Hope this helps. If u have any doubts still do leave a comment I will attend to it
32:47 I realized most viewers have questions about what happening here , as mentioned the piece of code was from the documentation. So supabase is our database while clerk auth is our authentication provider, so we needed a way to connect both tools to each other to save the user palette based on the user_id provided by clerk to database. Hope this helps. If u have any doubts still do leave a comment I will attend to it
Nice projects bro 🎉
Thanks ✌
Grewt work man 💯💯💯
Big up
The attention to details in this project is amazing ❤
Yeah thanks
Underrated
I love the interface it nice and it great project thank you
U welcome 💯💯💯
Awesome video I learned a lot thanks😮😮😮😮
Glad you enjoyed it!
Great explanation! Was looking for tutolial like this for several days
Glad it was helpful!
I think on a site the users should be able to see what the sites does before they sign in, some users may just be checking it randomly and just seeing the sign in first they may not have the time but, when the users is able to see what it is about and how it works maybe when they are about to save or download then the sign in notification can recommend them to do so when it has caught their interest. I am just saying this because the project is very unique and beautiful.
hi, your suggestion is excellent, I just had to go with the authentication first for simplicity for beginners.
If u coding along with me u can try implementing yours this way. It should be very quite easy to handle that. If u hit any blocker when trying to build yours with your suggestion do tell me know. I am willing to help.
Okay, that will be cool for me adding mine
But i just want to say, is there need of locking colours when it can be downloaded. I think there should be a notification on using the space bar to generate colours or an icon as the same on the mobile because some users that just came across it may not have idea about it
First off thanks for taking out time to commenting 💯, the need to lock 🔒 a particular color is because users might see a color they are interested in and they don't want it lost when a new palette is created, why don't I lock this particular color before creating new palette 🎨 and add more colors to this already colors .
Secondly we could show a toast notification when users create new palette 🎨 with the spacebar on desktop and also on mobile . This willl come as an improvement to the user experience 😉, thanks for pointing that out again 🙂
Cool bro
Wow, this project is amazing and beautiful
Thank you 🙏😊. Glad you enjoyed the video
remendous work. Well done!
Thank you! Cheers!
Excited 🔥🔥🔥🔥🔥
❤️💯