Avi Posts - Answer Overflow

Avi

Explore posts from servers

KPCKevin Powell - Community PD🧩 Plasmo Developers TTCTheo's Typesafe Cult

•Created by Avi on 7/5/2024 in #back-end

Multi-provider authentication on Firestore

I'm working on an MV3 Chrome extension on a feature that requires authentication with a third party provider Considering that I'm not proficient in backend, I was wondering what's the right way to handle multi-provider authentication, i.e. letting the user to login with both Google and Facebook FYI, I chose Firebase for several reasons: 1. It has a great integration with extensions such that when I put a listener for a collection on Firestore in the background script, it prevents it from getting terminated 2. Firebase is quite beginner friendly 3. I was recommended for this project to take the NoSQL route Note that Firebase officially supports authenticating with both Google and Facebook as well as linking accounts (https://firebase.google.com/docs/auth/web/account-linking), however that one works So far I've successfully managed to store user data with a Google provider, i.e. whenever user completes the Google auth flow, I store his data under the UID I received I could technically create a lookup collection that maps between users Google UIDs/Facebook UIDs and auto-generated UIDs and then a user's Google/Facebook UID is used to retrieve his data from the users collection, but it would require two reads, and I feel like there is a better and more efficient approach

1 replies

KPCKevin Powell - Community

•Created by Avi on 7/1/2024 in #back-end

Allow logins from multiple providers

I'm working on an MV3 Chrome extension and in the past several months I've been working on addin a paid feature that requires logging in to the extension Considering that I'm not proficient in backend, I chose Firebase and Firestore My goal is to allow the user to authenticate with both Google and Facebook So far I successfully managed to let the user login with Google and I save his UID in Firestore, but I realized that if his account gets deleted due to https://support.google.com/accounts/answer/12418290 , he should at least be able to authenticate with Facebook After he logs in with Google, he has to start a monthly PayPal subscription to use the feature, and so I pass the UID to the webhook and I update that Firestore entry How do I approach changing the data structure such that the authentication and the PayPal webhooks can correctly reach the user in the database?

1 replies

KPCKevin Powell - Community

•Created by Avi on 6/2/2024 in #back-end

Firebase staging help

I'm new to Firebase and to back-end stuff in general, and I'm trying to use Firebase as I consider it a friendly way to integrate a back end into my project, which is a Chrome extension Recently I've been trying to tackle the issue of setting up a staging environment. However, firebase hosting:channel:deploy staging isn't a great solution because the generated URL is short-lived, yet I need to put the URL hardcoded in the extension and distribute it to test users What would be a better way to tackle this? Thanks

2 replies

KPCKevin Powell - Community

•Created by Avi on 4/23/2024 in #back-end

How to model the data?

I'm working on a Chrome extension that lets users get deeper insights into their YouTube watch time habits I'm looking to use Firestore with Google auth to store the user's data, though I'm not proficient with the back end nor with databases, I just think that NoSQL is convenient enough The current data format that's stored locally:

[yyyy-mm-ddThh:00:00]:
  [videoId]:
    channelId: string
    channelHandle: string
    timestamp: strimg
    secondsSpent: number
    videoCategory: string

[yyyy-mm-ddThh:00:00]:
  [videoId]:
    channelId: string
    channelHandle: string
    timestamp: strimg
    secondsSpent: number
    videoCategory: string

I also need to somehow store data in a scalable and maintainable way regarding: 1. Basic Google account information 2. PayPal subscription payment details 3. I also plan to introduce a feature of matching users based on their mutual watch time habits, so I also need to model data after dating apps

1 replies

KPCKevin Powell - Community

•Created by Avi on 4/20/2024 in #front-end

Making an element take 100% height and scrollable

I have a setup similar to:

<div class="parent">
  <div class="child-1"></div>
  <div class="child-2">
    <h1>Header</h1>
    <div class="list">
      <div class="item-1">{...}</div>
    </div>
  </div>
</div>
<style>
  .parent {
    max-height: min(100vh - 101px, 892px);
    overflow-y: auto;
  }

  .child-2 {
    display: flex;
    flex-direction: column;
  }

  .list {
    flex: 1;
    max-height: 100%;
    overflow-y: auto;
  }
</style>

<div class="parent">
  <div class="child-1"></div>
  <div class="child-2">
    <h1>Header</h1>
    <div class="list">
      <div class="item-1">{...}</div>
    </div>
  </div>
</div>
<style>
  .parent {
    max-height: min(100vh - 101px, 892px);
    overflow-y: auto;
  }

  .child-2 {
    display: flex;
    flex-direction: column;
  }

  .list {
    flex: 1;
    max-height: 100%;
    overflow-y: auto;
  }
</style>

I need the list to take the remaining height of .child-2 yet also be scrollable Currently, the list takes as much height as it needs while being constrained to .parent's height, making .parent's "internal" height increase According to my testing, the issue seems to lie in max-height: 100%

6 replies

KPCKevin Powell - Community

•Created by Avi on 1/10/2024 in #front-end

Dynamic max-height

I wish to make the list height transition but only up to a certain height Markup:

<section class="insights-watch-time">
  <div class="insights-watch-time__header">
    <h1>Top watched channels {periodCurrent[$period]}</h1>
    {#if true || channelsList.length > 1}
      <button
        aria-label="Show all"
        class="insights-watch-time__toggle-all-button"
        class:insights-watch-time__toggle-all-button--show-all={isShowAll}
        on:click={() => (isShowAll = !isShowAll)}>
      </button>
    {/if}
  </div>

  <div class="insights-watch-time__list" class:insights-watch-time__list--show-all={isShowAll}>
    {#each channelsList.slice(0, isShowAll ? channelsList.length : 1) as channel, i (channel.text)}
      <div animate:flip={{ duration: 100 }} class="insights-watch-time__list-item">
        <span
          class="insights-watch-time__list-item-index"
          class:insights-watch-time__list-item-index--show-all={isShowAll}>{i + 1}</span>
        <img class="insights-watch-time__channel-picture" src={channel.channelPicture} alt="Channel" />
        <div class="insights-watch-time__item">
          <a target="_blank" href="https://www.youtube.com/{channel.text}">
            {channel.text}
          </a>
        </div>
        <div class="insights-watch-time__time-spent">
          {channel.timeSpent}
        </div>
      </div>
    {/each}
  </div>
</section>

<section class="insights-watch-time">
  <div class="insights-watch-time__header">
    <h1>Top watched channels {periodCurrent[$period]}</h1>
    {#if true || channelsList.length > 1}
      <button
        aria-label="Show all"
        class="insights-watch-time__toggle-all-button"
        class:insights-watch-time__toggle-all-button--show-all={isShowAll}
        on:click={() => (isShowAll = !isShowAll)}>
      </button>
    {/if}
  </div>

  <div class="insights-watch-time__list" class:insights-watch-time__list--show-all={isShowAll}>
    {#each channelsList.slice(0, isShowAll ? channelsList.length : 1) as channel, i (channel.text)}
      <div animate:flip={{ duration: 100 }} class="insights-watch-time__list-item">
        <span
          class="insights-watch-time__list-item-index"
          class:insights-watch-time__list-item-index--show-all={isShowAll}>{i + 1}</span>
        <img class="insights-watch-time__channel-picture" src={channel.channelPicture} alt="Channel" />
        <div class="insights-watch-time__item">
          <a target="_blank" href="https://www.youtube.com/{channel.text}">
            {channel.text}
          </a>
        </div>
        <div class="insights-watch-time__time-spent">
          {channel.timeSpent}
        </div>
      </div>
    {/each}
  </div>
</section>

2 replies

KPCKevin Powell - Community

•Created by Avi on 10/15/2023 in #front-end

Help with math in SCSS

15 replies

KPCKevin Powell - Community

•Created by Avi on 6/23/2023 in #back-end

How to choose a backend stack

Soon I'll start planning the development of a Chrome extension This particular one will require a backend, database, auth and payment processing with PayPal Considering I've been in frontend for over 10 years, I'm not proficient in backend and I need some help learning how to plan stuff out, what tech stack to choose and best practices, as I don't want to leak user data

25 replies

KPCKevin Powell - Community

•Created by Avi on 3/16/2023 in #ui-ux

Help with designing a Chrome extension UI

Hey, I wish to redevelop my extension from scratch: https://chrome.google.com/webstore/detail/fpoooibdndpjcnoodfionoeakeojdjaj The only issue is that I roughly know what features I want to include but I have no idea how to present them in a nice and intuitive UI I wish to include: - A chart of time spent each day, up to the last 7 days (by default); the range can be changed - Show the total time spent on YouTube - What channels the user spent the most time on - A button to exclude certain channels, view the exclusion list - Exclude certain categories, view the exclusion list

4 replies

KPCKevin Powell - Community

•Created by Avi on 2/8/2023 in #front-end

CSS-only range

Is it possible to make a pure CSS range slider? I'm looking to have a range such that the track colors from the left and from the right sides of the thumb are different

30 replies

KPCKevin Powell - Community

•Created by Avi on 10/14/2022 in #resources

Getting hired without a resume

https://www.tatio.io

1 replies

KPCKevin Powell - Community

•Created by Avi on 9/24/2022 in #front-end

How to set width in a td

In a <table>, how do I set the first column's width to be by the <td>'s max content width?

30 replies

Gaming

Programming