techgirlinstyle
techgirlinstyle
  • 43
  • 14 118
You Won't Believe How Easy Container Queries Make Responsive Grid
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 size. By the end, we'll switch to CSS container queries for a more responsive design experience. Stay tuned till the end for tips on browser compatibility and fallback strategies!
CodeSandox code: codesandbox.io/p/sandbox/container-query-dwcn4m
00:00 Introduction to Responsive Grid Containers
00:25 Setting Up the Basic Interface
01:09 Defining Grid Item Sizes with Flexbox
03:16 Implementing Media Queries
06:27 Calculating Grid Gaps
07:10 Creating a Custom Hook for Grid Items
12:27 Switching to Container Queries
12:35 Browser Support for Container Queries
15:17 Implementing Container Queries in Code
18:34 Conclusion and Final Thoughts
Переглядів: 157

Відео

2 Critical JavaScript Concepts You Need to Know for Interviews: Closures & Memory
Переглядів 10514 днів тому
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
Переглядів 18721 день тому
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?
Переглядів 12728 днів тому
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
Переглядів 49Місяць тому
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,4 тис.Місяць тому
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,6 тис.Місяць тому
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
Переглядів 4,5 тис.Місяць тому
In this video, I dive into the popular Magic UI component library for React. After exploring Radix UI, Shadcn UI, and Framer Motion in previous videos, I explore how to combine the best of both worlds with Magic UI-a library that integrates eye-catching animations powered by Framer Motion with a high level of customization. I walk through the installation process, compare it to Shadcn UI, and e...
The Future of Design: AI, Tech, and the Art of Tomorrow: interview with Lydia Chilton
Переглядів 1692 місяці тому
The Future of Design: AI, Tech, and the Art of Tomorrow: interview with Lydia Chilton
How Cursor AI is Revolutionizing Frontend Development
Переглядів 8822 місяці тому
How Cursor AI is Revolutionizing Frontend Development
Framer Motion vs CSS Keyframes: Which is BETTER?
Переглядів 1522 місяці тому
Framer Motion vs CSS Keyframes: Which is BETTER?
Comprehensive Review of shadcn/ui - Is This React Toolkit Right for Your Project?
Переглядів 2153 місяці тому
Comprehensive Review of shadcn/ui - Is This React Toolkit Right for Your Project?
Radix UI: The Toolkit That Changes Everything (Honest Review 2024)
Переглядів 5443 місяці тому
Radix UI: The Toolkit That Changes Everything (Honest Review 2024)

КОМЕНТАРІ

  • @陈李洁-k8q
    @陈李洁-k8q 2 дні тому

    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 21 день тому

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

    • @techgirlinstyle
      @techgirlinstyle 19 днів тому

      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 27 днів тому

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

    • @techgirlinstyle
      @techgirlinstyle 27 днів тому

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

  • @Branstrom
    @Branstrom 29 днів тому

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

    • @techgirlinstyle
      @techgirlinstyle 29 днів тому

      @@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 Місяць тому

    hell ya

  • @Eghizio
    @Eghizio Місяць тому

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

    • @techgirlinstyle
      @techgirlinstyle Місяць тому

      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 Місяць тому

    Love this!! Keep it upppp

  • @dan_le_brown
    @dan_le_brown Місяць тому

    Nicceee

  • @bensadik
    @bensadik Місяць тому

    Thank you 🙌

    • @techgirlinstyle
      @techgirlinstyle Місяць тому

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

  • @StuartLoria
    @StuartLoria Місяць тому

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

    • @techgirlinstyle
      @techgirlinstyle Місяць тому

      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 Місяць тому

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

  • @spiker.c6058
    @spiker.c6058 Місяць тому

    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 Місяць тому

    Cool tip! Thanks for sharing.

  • @WillBeebe
    @WillBeebe Місяць тому

    Subscribed

  • @Fera-229
    @Fera-229 Місяць тому

    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 Місяць тому

      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 Місяць тому

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

    • @techgirlinstyle
      @techgirlinstyle Місяць тому

      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 Місяць тому

      @@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 Місяць тому

      @@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 Місяць тому

      @@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 Місяць тому

      @@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 Місяць тому

    Good Job :)

  • @TokiTheBoki
    @TokiTheBoki Місяць тому

    Hi

  • @jonhobbssmith
    @jonhobbssmith Місяць тому

    Tailwind... Shame. I'm out.

    • @techgirlinstyle
      @techgirlinstyle Місяць тому

      @@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 Місяць тому

      @@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 Місяць тому

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

    • @vercieli
      @vercieli Місяць тому

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

    • @QuickTuts
      @QuickTuts 27 днів тому

      @@vercieli simple as that.

  • @alii4334
    @alii4334 Місяць тому

    Can you review Indie UI?

    • @techgirlinstyle
      @techgirlinstyle Місяць тому

      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 Місяць тому

      @@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 2 місяці тому

    will try this...looks interesting

    • @techgirlinstyle
      @techgirlinstyle 2 місяці тому

      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.