techgirlinstyle
techgirlinstyle
  • 47
  • 18 079
Chakra UI [Part 2]: The TOP 5 Chakra UI Layout Components
In this episode of the Chakra UI series, I will delve into several important components that Chakra UI offers out of the box to help you build reliable, responsive, and easy-to-maintain layouts for your web applications. We'll review the Box, Flex, Grid, Stack, Center, Group, and Float components, discussing their uses, advantages, and how to implement them effectively in your projects. I'll also provide practical demonstrations and tips for using these components efficiently. Join me as we explore how to make your frontend development with Chakra UI more streamlined and enjoyable.
www.chakra-ui.com/docs/components/box
www.chakra-ui.com/docs/components/flex
www.chakra-ui.com/docs/components/float
www.chakra-ui.com/docs/components/grid
www.chakra-ui.com/docs/components/stack
00:00 Introduction to Chakra UI Series
00:17 Creating Responsive Layouts
01:28 Overview of Chakra UI Layout Components
01:51 Deep Dive into Box Component
02:53 Styling with Chakra UI Props
10:39 Exploring Flex Container
14:29 Understanding Grid Container
17:22 Stack Container Explained
19:25 Center and Group Containers
22:25 Float Container and Conclusion
มุมมอง: 140

วีดีโอ

Chakra UI [Part 1]: The Secret to Effortless React Apps
มุมมอง 1.3K14 วันที่ผ่านมา
Welcome to the first episode of our series on Chakra UI! I'm excited to dive into this modern, flexible, and accessible component library for React projects. In this episode, we'll discuss the fundamentals of Chakra UI, compare it with other popular libraries like Radix UI and Magic UI, and explore its ease of use, out-of-the-box styling, customizability, and accessibility. I'll also walk you t...
You Won't Believe How Easy Container Queries Make Responsive Grid
มุมมอง 202หลายเดือนก่อน
Today's video dives into building responsive grid containers based on product requirements. We'll review when CSS container queries might be more effective than media queries and tackle a hands-on exercise with a React application using TypeScript and Emotion for styling. I'll start with a flexbox-based approach for grid layout and cover configuring individual grid item sizes based on screen si...
2 Critical JavaScript Concepts You Need to Know for Interviews: Closures & Memory
มุมมอง 125หลายเดือนก่อน
In this video, I share insights into common JavaScript interview question focusing on closures and memory allocation. Through real-world examples, I explain how to identify and resolve memory leaks in code. You'll learn about the significance of closures, block scope with let and const, and effective memory management in JavaScript. I also highlight essential concepts from the official Mozilla ...
How Lottie defined the Future of Animation on the web and beyond
มุมมอง 196หลายเดือนก่อน
In this video, we'll explore the world of cross-platform animation using Lottie. I'll share how Lottie can help you create professional, performant, and scalable animations for both web and native platforms. We'll dive into Lottie's history, its advantages, and see how top brands like Airbnb, Headspace, and Duolingo utilize it. I'll also provide a walkthrough on integrating Lottie animations in...
Can AI REALLY change Component Libraries forever?
มุมมอง 161หลายเดือนก่อน
In this episode, I sit down with Eray Kose, a Senior Front End engineer at Amazon, to delve into the world of design systems and their critical role in modern UI/UX development. We discuss the complexities of developing and maintaining internal component libraries, and the differences between building product-focused applications and reusable design systems. Our conversation highlights the chal...
3 Ways Community Contribution Can Revolutionize Your Design Systems
มุมมอง 562 หลายเดือนก่อน
In this episode, I dive deep into the world of community-contributed design systems. We'll explore how tapping into your corporate community can help create a dynamic and evolving design system, the incredible benefits of these contributions, and the best ways to manage them. We'll also discuss the potential risks, including the challenges of fragmentation, maintenance, governance, and duplicat...
JavaScript Prototypes: The interview question that stumped me
มุมมอง 1.5K2 หลายเดือนก่อน
Mastering JavaScript Prototypes & Inheritance: A Technical Interview Deep Dive Join me, as I explore JavaScript prototypes and prototypical inheritance, drawing from my extensive interview experiences. Learn about the DNA metaphor for understanding prototypes, creating custom methods, and delve into practical coding exercises using array prototypes. This episode is packed with insights and prac...
Did ChatGPT canvas mode just kill Cursor AI?
มุมมอง 2.6K2 หลายเดือนก่อน
In this video, I take my first dive into ChatGPT's Canvas Mode to enhance a static landing page by generating and refining code snippets within the Canvas environment. While the tool aids in creating and iterating components, such as React and CSS, it still requires moving the code to an IDE like Code Sandbox for execution and testing. I highlight the current limitations and potential improveme...
Magic UI Review: The Best of Radix, Shadcn & Framer Motion
มุมมอง 5K2 หลายเดือนก่อน
Magic UI Review: The Best of Radix, Shadcn & Framer Motion
The Future of Design: AI, Tech, and the Art of Tomorrow: interview with Lydia Chilton
มุมมอง 1762 หลายเดือนก่อน
The Future of Design: AI, Tech, and the Art of Tomorrow: interview with Lydia Chilton
How Cursor AI is Revolutionizing Frontend Development
มุมมอง 9093 หลายเดือนก่อน
How Cursor AI is Revolutionizing Frontend Development
Framer Motion vs CSS Keyframes: Which is BETTER?
มุมมอง 1673 หลายเดือนก่อน
Framer Motion vs CSS Keyframes: Which is BETTER?
Comprehensive Review of shadcn/ui - Is This React Toolkit Right for Your Project?
มุมมอง 2894 หลายเดือนก่อน
Comprehensive Review of shadcn/ui - Is This React Toolkit Right for Your Project?
Radix UI: The Toolkit That Changes Everything (Honest Review 2024)
มุมมอง 6594 หลายเดือนก่อน
Radix UI: The Toolkit That Changes Everything (Honest Review 2024)

ความคิดเห็น

  • @EDS432
    @EDS432 วันที่ผ่านมา

    shadcn is an industry planned

  • @neelsamel9323
    @neelsamel9323 วันที่ผ่านมา

    I want ur instad id

  • @box4soumendu4ever
    @box4soumendu4ever 6 วันที่ผ่านมา

    🎉

  • @tech-adventurer
    @tech-adventurer 6 วันที่ผ่านมา

    Really nice content! Eager to see more. Thank you for the time =)

    • @techgirlinstyle
      @techgirlinstyle 6 วันที่ผ่านมา

      @@tech-adventurer thanks for watching! New video coming out today :)

  • @Kijo487
    @Kijo487 19 วันที่ผ่านมา

    Great video, really helpful. Thank you.

  • @Abioticodin2387
    @Abioticodin2387 19 วันที่ผ่านมา

    Thanks for this, used Chakra for a couple of years until I found out about Mantine UI which might be the best traditional library in the React world. That might also be a good one to look at!

    • @techgirlinstyle
      @techgirlinstyle 19 วันที่ผ่านมา

      Never used it before. I'll put it on my list

  •  20 วันที่ผ่านมา

    Thanks

  •  20 วันที่ผ่านมา

    Thanks

  • @ElizabethEdwards-g5j
    @ElizabethEdwards-g5j 20 วันที่ผ่านมา

    Thanks for the analysis! Just a quick off-topic question: I have a SafePal wallet with USDT, and I have the seed phrase. (alarm fetch churn bridge exercise tape speak race clerk couch crater letter). What's the best way to send them to Binance?

    • @techgirlinstyle
      @techgirlinstyle 19 วันที่ผ่านมา

      sure thing! here you go: th-cam.com/video/RqiNsQd0hjQ/w-d-xo.html

  • @luznoceda423
    @luznoceda423 24 วันที่ผ่านมา

    Thanks for reminding me that when I thought I already knew JavaScript actually I don't 😭 Subscribed! Can you zoom in your code next time btw?

    • @techgirlinstyle
      @techgirlinstyle 23 วันที่ผ่านมา

      Will zoom in! Thanks!!!

  • @陈李洁-k8q
    @陈李洁-k8q 25 วันที่ผ่านมา

    Very good video, can you release a follow-up video on how to configure the theme and use Grid or Flex to complete a responsive layout project? I am confused about how to configure the theme💗

  • @khanayan-v7z
    @khanayan-v7z หลายเดือนก่อน

    Hey Yana, great video, Althugh where can I find communities where I can grow as a Web Designer?

    • @techgirlinstyle
      @techgirlinstyle หลายเดือนก่อน

      Hello! It depends on what you are looking for. I would go on Dribbble, Behance, Deviant Art. I am sure there are also a lot of communities on Discord

  • @Ss-zg3yj
    @Ss-zg3yj หลายเดือนก่อน

    This lib is complete trash, "principal" front-end engineer 😁

    • @techgirlinstyle
      @techgirlinstyle หลายเดือนก่อน

      @@Ss-zg3yj you’re entitled to your opinion 🙃

  • @Branstrom
    @Branstrom หลายเดือนก่อน

    Extremely clickbait-y title, Cursor is nowhere near threatened by this. Have you even used it?

    • @techgirlinstyle
      @techgirlinstyle หลายเดือนก่อน

      @@Branstrom i use it every day for work. People ask this question hence the title

  • @ousmand742
    @ousmand742 หลายเดือนก่อน

    Interviewer: What is a closure? Me: What my ex never have me. Interviewer: What is a promise? Me: The thing I can't keep. Interviewer: Umm..ok.. what is a callback? Me: What I never get after the first date? Interviewer: Ok.. you can't have this job. Me: Jeez.. Way to over... React.

    • @techgirlinstyle
      @techgirlinstyle หลายเดือนก่อน

      @@ousmand742 lol gotta try this some time

  • @WillBeebe
    @WillBeebe 2 หลายเดือนก่อน

    hell ya

  • @Eghizio
    @Eghizio 2 หลายเดือนก่อน

    Array.prototype.fistChild 💀Array.prototype.myFatMap 💀 Please tell me you are doing this on purpose 😂 Nice video, although a little bit long 👍

    • @techgirlinstyle
      @techgirlinstyle 2 หลายเดือนก่อน

      Of course I am doing these in purpose :) these are actual technical screening questions you get asked (and I was actually asked) in 2024 in one of the top 20 paying companies (www.levels.fyi/leaderboard/Software-Engineer/Senior-Engineer/country/United-States/)

  • @ousmand742
    @ousmand742 2 หลายเดือนก่อน

    Love this!! Keep it upppp

  • @dan_le_brown
    @dan_le_brown 2 หลายเดือนก่อน

    Nicceee

  • @bensadik
    @bensadik 2 หลายเดือนก่อน

    Thank you 🙌

    • @techgirlinstyle
      @techgirlinstyle 2 หลายเดือนก่อน

      I hope it was helpful! Happy to review more interview questions if you’re interested

  • @StuartLoria
    @StuartLoria 2 หลายเดือนก่อน

    I would appreciate code to illustrate your metaphores rather than just talk.

    • @techgirlinstyle
      @techgirlinstyle 2 หลายเดือนก่อน

      I am extending the prototype later in the video - and adding a new method for the Array prototype than later becomes accessible on the newly created array. This demonstrates the inheritance principle

    • @StuartLoria
      @StuartLoria 2 หลายเดือนก่อน

      The video is interesting and the tipic is not very common, good idea.

  • @spiker.c6058
    @spiker.c6058 2 หลายเดือนก่อน

    I believe the webview option from Canvas is already in the code, but it hasn't been activated yet. They likely know that enabling it now could harm their partners at least rn. However, I think we’re heading in that direction since they want to position ChatGPT as the ultimate AI Operating System. IDE companies riding the AI wave by offering smarter coding tools is the easy way to go, they should focus on developing even more appealing features and perhaps specialize in specific domains because the general AI game (AI for everyone to do anything) is definitely being led by OpenAI with ChatGPT.

  • @ritwiktrivedi
    @ritwiktrivedi 2 หลายเดือนก่อน

    Cool tip! Thanks for sharing.

  • @WillBeebe
    @WillBeebe 2 หลายเดือนก่อน

    Subscribed

  • @Fera-229
    @Fera-229 2 หลายเดือนก่อน

    I think V0 by Vercel have a similar functionality where you can also see a preview of the generated code without the need to copy the code and paste it elsewhere.

    • @techgirlinstyle
      @techgirlinstyle 2 หลายเดือนก่อน

      V0 is on my list to review next - however it is a slightly different use case. With V0 you can generate a Shadcn/ui based components - and yes it will let you preview the code but it will be a Radix UI primitive/Shadcn-ui/Tailwind baby. It is a great way to grow your component library that already has this stack - but not a way to built the entire web page from scratch especially if yuo are choosing a different stack for one reason or the other (e.g. i don't like Tailwind)

  • @okkashaally2115
    @okkashaally2115 2 หลายเดือนก่อน

    You could have just use tailwind to leave out unnecessary issues with the CSS

    • @techgirlinstyle
      @techgirlinstyle 2 หลายเดือนก่อน

      Tailwind is a collection of utility classes, it is not a universal panacea. When i know exactly what i want and (especially) when working on a code someone else wrote (even when someone else is AI), I will go in manually writing my stying. if i am just trying to make a few containers to have a flexbox layout - sure i can use Tailwind for that

    • @okkashaally2115
      @okkashaally2115 2 หลายเดือนก่อน

      @@techgirlinstyle We all know what Tailwind is, and I’m not here to compare it with plain CSS. I’m here to suggest what could have made the task simpler. For instance, why use React instead of vanilla JS? Why use AI instead of writing all the code yourself? It’s about taking advantage of tools and how they add simplicity to development. Creating a flex div in Tailwind takes a second, but with plain CSS, you’d have to navigate to another file, think of and create a unique, meaningful class name, add the properties, go back to the JSX/HTML, find the div, and apply the class. That process could take almost 10 seconds. This video could have been shorter if you had used Tailwind, and it would have made it even easier for AI to generate the code

    • @okkashaally2115
      @okkashaally2115 2 หลายเดือนก่อน

      @@techgirlinstyle Moreover, I wouldn’t say you’re inexperienced, but maybe you’re a bit of an old-fashioned dev. I know plenty of frontend developers who dislike Tailwind 😅, but they probably don’t realize how much time they waste on styling. By the way, I haven’t used CSS/SASS since 2021. I only use it when I need more control over specific properties

    • @techgirlinstyle
      @techgirlinstyle 2 หลายเดือนก่อน

      @@okkashaally2115 like with any tool, it is a matter of preference. Any btw not everyone knows what Tailwind is, I would not assume that. I personally won’t even start with Tailwind because inevitably i will end up with an unreadable string of classes. I can instead have a single class and easily see if there is a conflict in my CSS. Whether it is a separate file or a CSS in JS - is again arguable and depends on the project. You can have it in the same file if you want - just switch to CSS in JS. In the long term I absolutely hate an idea of using Tailwind. For you it might be easier to use a class - I on the other had can recall most of the CSS rules by heart (and my IDE will help me too with autocomplete) while Tailwind requires me to memorize class names instead. Knowledge of CSS is transferrable project to project, company to company. Knowledge of Tailwind classes is only relevant if the team had agreed to use it. That’s why I won’t even show myself using Tailwind in a greenfield project - because of my PERSONAL preference to write CSS directly in any shape or form.

    • @techgirlinstyle
      @techgirlinstyle 2 หลายเดือนก่อน

      @@okkashaally2115 haha thank you for not calling me "unexperienced" - I was not aware we were talking about personal levels of proficiency here, but discussing a tool preference. Trust me I built apps in pure CSS, SASS, SCSS, CSS-in-JS (styled components, emotion), worked with CSS modules, monolithic css/scss files and Tailwind. I began working with CSS in 2011 - when CSS3 began rolling out. I might be old fashioned in a way that i prefer to have more control over my styling and have a way to have a clear picture of what styles are being applied (and where) without having to go down the rabbit hole. If you love Tailwind - all power to you. I am not a fan of it and won't be using it in my projects.

  • @AntanasGeguzinskas
    @AntanasGeguzinskas 2 หลายเดือนก่อน

    Good Job :)

  • @TokiTheBoki
    @TokiTheBoki 2 หลายเดือนก่อน

    Hi

  • @jonhobbssmith
    @jonhobbssmith 2 หลายเดือนก่อน

    Tailwind... Shame. I'm out.

    • @techgirlinstyle
      @techgirlinstyle 2 หลายเดือนก่อน

      @@jonhobbssmith yeah i struggle with it as well… Tailwind is just such a sad reflection of today’s reality that people can’t write CSS anymore, and instead plop on 20 class names in their markup

    • @jonhobbssmith
      @jonhobbssmith 2 หลายเดือนก่อน

      @@techgirlinstyle , in my experience every person I've spoken to who loves Tailwind is somebody who thinks CSS is hard. The kind of person who does z-index:10000

    • @techgirlinstyle
      @techgirlinstyle 2 หลายเดือนก่อน

      @@jonhobbssmith 😭I love CSS, it is my first love even before i switch from UX design to Front End back in 2012

    • @vercieli
      @vercieli 2 หลายเดือนก่อน

      @@jonhobbssmith I use Tailwind not because CSS is difficult, but because it saves me a lot of time.

    • @QuickTuts
      @QuickTuts หลายเดือนก่อน

      @@vercieli simple as that.

  • @alii4334
    @alii4334 2 หลายเดือนก่อน

    Can you review Indie UI?

    • @techgirlinstyle
      @techgirlinstyle 2 หลายเดือนก่อน

      Yes I’ll add it to my list. What about it is specifically interesting to you?

  • @babai2196
    @babai2196 2 หลายเดือนก่อน

    Hii just discovereed your channel saw that you are an experienced front end developer who worked in faang i am 2024 grad also wanted to pursue my career in front end engineering can you please guide and mentor me i am very confused about this path ... Couldn't should i stick to front end only or do i have to know both front end and backend to survive in this market Also i actually dont understand difference between sde and front end devs in this company Please will you be able to help me out

    • @techgirlinstyle
      @techgirlinstyle 2 หลายเดือนก่อน

      Hi thanks for your comment! happy to help you, you can reach me also on Linked in and we can chat there privately about your experience: www.linkedin.com/in/yanaha/ I am still figuring out content for my channels, advice for recent graduates is on my list. On a high level, we are all figuring out what the industry will become now with every newly introduced model. o1 preview is pretty amazing and can truly write end-to-end applications. However the fact of the matter is that third of the web is still running on jQuery. What that means is there there are a lot of legacy systems and systems that need to be maintained, upgraded and improved, rather than built from scratch. There is a still value in human front-end specialists that focus on system design and understand best practices, as well as can develop and upgrade/improvement plan for legacy systems. AI can help with that, but you have to have an opinion to make sure AI is guiding you in the right direction. My main advice would be - do what you are passionate about. I am passionate about design and user experience. 15 years ago that meant becoming a web developer. Today it might mean embracing AI while also having a deep understanding of what it means to write high quality maintainable and scalable front end. The future is in scalable system design in my mind. If you happen to have subscription, give this article a read: www.technologyreview.com/2024/08/28/1096515/ai-interfaces-ux-growth/

  • @babai2196
    @babai2196 2 หลายเดือนก่อน

    Hii just discovereed your channel saw that you are an experienced front end developer who worked in faang i am 2024 grad also wanted to pursue my career in front end engineering can you please guide and mentor me i am very confused about this path ... Couldn't should i stick to front end only or do i have to know both front end and backend to survive in this market Also i actually dont understand difference between sde and front end devs in this company Please will you be able to help me out

    • @techgirlinstyle
      @techgirlinstyle 2 หลายเดือนก่อน

      Hi thanks for your comment! happy to help you, you can reach me also on Linked in and we can chat there privately about your experience: www.linkedin.com/in/yanaha/ I am still figuring out content for my channels, advice for recent graduates is on my list. On a high level, we are all figuring out what the industry will become now with every newly introduced model. o1 preview is pretty amazing and can truly write end-to-end applications. However the fact of the matter is that third of the web is still running on jQuery. What that means is there there are a lot of legacy systems and systems that need to be maintained, upgraded and improved, rather than built from scratch. There is a still value in human front-end specialists that focus on system design and understand best practices, as well as can develop and upgrade/improvement plan for legacy systems. AI can help with that, but you have to have an opinion to make sure AI is guiding you in the right direction. My main advice would be - do what you are passionate about. I am passionate about design and user experience. 15 years ago that meant becoming a web developer. Today it might mean embracing AI while also having a deep understanding of what it means to write high quality maintainable and scalable front end. The future is in scalable system design in my mind. If you happen to have subscription, give this article a read: www.technologyreview.com/2024/08/28/1096515/ai-interfaces-ux-growth/

  • @NedalKouissi
    @NedalKouissi 2 หลายเดือนก่อน

    I think the script for this video might be AI-generated because it contains a lot of incorrect information. 1. Instead of modifying the source of shadcn components, you should wrap them to create higher-level components. Use shadcn components as a base and only use them directly if you have nothing to add. This makes updating shadcn easier. 2. shadcn uses Radix UI primitives, not Radix UI components. These primitives come unstyled(no stitches, css ...), Later styles are added using Tailwind, not styled-components. 3. Managing Radix deps separately? No not true, that would be a nightmare.

    • @techgirlinstyle
      @techgirlinstyle 2 หลายเดือนก่อน

      Hi Nedal! thanks for your comment. Let's unpack this! First, of course I am using GPT to help me structure and wordsmith my scripts, however the facts are coming from my personal experience. 1. There are pros and cons in both cases. If you would like, say have an ability to occasionally update your components (aka. pull the latest version from shadcn/ui and overwrite the one you have locally: `npx shadcn-ui@latest add -a -y -o`) you should wrap them in a HOC. Hoverer some components are known to have issues even after the initial download. e.g. the select component actually have a functional bug that i had to fix in the source code before being able to use it. Overwriting my fix would mean revering to the broken version. This is a lot to keep in mind 3. Since Shadcn/ui is not an npm dependency, it is not added to your project.json upon installation. But the peer dependencies do! This means Radix-ui packages get added directly to your project.json file. Now it is entirely up to you how to manage them (fix the version, always get the latest, stick to a major or a minor version, etc) Here is my codesandbox that shows a clean project with only shadcn/ui initialized - you will find Radix UI dependencies populated in the package.json: codesandbox.io/p/live/f95df568-4d7f-46d7-8679-a205523e2fbe 2. You are actually right. I had experience using Radix UI design system github.com/radix-ui/design-system that was using Stitches for the styling of all components and theming. Looks like it was deprecated earlier this year and I missed the mark on this fact, I will publish a follow up to clear this out, thank you for this catch!

    • @NedalKouissi
      @NedalKouissi 2 หลายเดือนก่อน

      @@techgirlinstyle 1. The example with the select component is quite insightful. From my experience, when dealing with buggy components, rather than editing the source code directly, I usually clone the component, apply the necessary fixes, and once the issue is resolved, I simply point my higher-level components back to the original version. This keeps things clean and manageable. (it's the same philosophy of shad, you build your own composable components) 2. You're absolutely right! Also, it's important to note that the shadcn CLI handles the setup and updates of its dependencies, many of which are tied to specific versions. For instance, "clsx: 2.1.1" is defined as a fixed release. So if clsx 3.0 is released and I manually force it, I must blame myself and not shad. To me, shadcn feels like a wrapper around an excellent set of low-level primitives and solutions (react-hook-form, radix, recharts, etc.). Approaching it with the mindset of learning what's underneath provides valuable insights and skills-something I can't say for other component libraries. Thanks again for the clarity, and I look forward to your upcoming content. Wishing you all the best!

  • @yoman6367
    @yoman6367 3 หลายเดือนก่อน

    will try this...looks interesting

    • @techgirlinstyle
      @techgirlinstyle 3 หลายเดือนก่อน

      Try setting up an entire application from scratch - it might be more efficient that way

  • @mrwoot
    @mrwoot 3 หลายเดือนก่อน

    Here in the beginning before you blow up! Great video!

    • @techgirlinstyle
      @techgirlinstyle 3 หลายเดือนก่อน

      Haha thanks for the support! These are educational for myself - so hopefully more folks find them useful.