Y7YA
Y7YA
PostsComments
TTCTheo's Typesafe Cult
Created by Y7YA on 6/8/2024 in #questions
React Native Security Question (.env)
Building an app using Expo + Supabase. During the set up I created some envs. Everything works, but what happens to the environment variables? Can an attacker access them from the mobile app? In web dev it's simple, secret variables stay on the server. I don't understand what mobile does to address this issue, to me it just looks like the .env is bundled in the app, and the app is on the user's device therefore susceptible to attack? Any help appreciated.
9 replies
TTCTheo's Typesafe Cult
Created by Y7YA on 4/24/2024 in #questions
NextJS detect if page is fetching new data, if so, display loading
So suppose I have this page.tsx 
interface DataPropsExampleTypeForReference {
  category: string;
  products: Product[];
  pageInfo: PageInfo;
  //... plus many other fields used by all components for various reasons
}

export default function Page() {
  const data = await getAsyncData();

  return (
    <div>
      <Breadcrumbs data={data} />
      <Products data={data} />
      <Pagination data={data} />
    </div>
  )
}
interface DataPropsExampleTypeForReference {
  category: string;
  products: Product[];
  pageInfo: PageInfo;
  //... plus many other fields used by all components for various reasons
}

export default function Page() {
  const data = await getAsyncData();

  return (
    <div>
      <Breadcrumbs data={data} />
      <Products data={data} />
      <Pagination data={data} />
    </div>
  )
}
Whenever the data is revalidated, as expected all the components update accordingly with the fresh data. I don't want to just simply replace the entire component with a Suspense fallback whilst the data is loading, I want to instead have a greyed out overlay ontop of Products which signifies to the user that the data is loading. What's the best way of achieving this? I hacked together a custom client based solution but surely there's a better pattern that exists for this?
21 replies
TTCTheo's Typesafe Cult
Created by Y7YA on 4/7/2024 in #questions
Help responding to coworkers on my technical decisions (NextJS)
I feel like I'm at a point where I'm writing great quality software by blind-following best practices, but I've got little low level understanding that when I'm confronted about my technical decisions I'm not able to give convincing explanations. It's especially problematic since the average dev doesn't really care about the state of the tech meta, so being unable to explain these decisions to coworkers leads to lost potential productivity. I really dread work when I'm being forced to follow poor, outdated, & straight up bad practices - but at the same time I'm at fault for not having the knowledge to move my team forwards. How do I get to a stage where I can convincingly push my decisions towards coworkers? I'm less senior than my coworkers, but I'm passionate about what I do, actively seek the latest trends, & develop stuff in my spare time - whilst they treat their job purely as a job (which is completely fine!), so naturally I have a bit more knowledge about good patterns (but less so to why they're good patterns as you can find out more below).
19 replies
TTCTheo's Typesafe Cult
Created by Y7YA on 3/26/2024 in #questions
Debugging vercel cron?
Trying to debug cron jobs but I have no indication to what's going on. I click run but I just get no logs whatsoever & unable to test my functionality. Any ideas how I can test this?
4 replies
TTCTheo's Typesafe Cult
Created by Y7YA on 3/21/2024 in #questions
Puppeteer App Router NextJS?
Is it possible to setup puppeteer within NextJS? Could someone help me with outlining how this could be done? End goal is to have an api that runs some puppeteer tasks when called.
2 replies
TTCTheo's Typesafe Cult
Created by Y7YA on 3/12/2024 in #questions
NextJS Server Cache?
Noticed some odd behaviour in my NextJS app where I have a simple table which uses data fetched via server action. I updated the data in my database, but the table still had the old data. I cleared storage, but the table still had the old data. Then I redeployed NextJS, and the new data was now visible. What's could the cause be & how can I fix it?
8 replies
TTCTheo's Typesafe Cult
Created by Y7YA on 1/28/2024 in #questions
Top loader bar | App Router
Is there any good solution for a top loader progress bar for when navigating between pages using NextJS router? All these NProgress solutions are not good enough as they create a fake loading bar even when the page is already cached and immediately loaded by NextJS. This makes the entire app feel slow even though the pages are loading instantly. My plan was to create a custom solution but for that I need some means of knowing when the page has already been cached by NextJS, and if so, skip the loading bar. But I couldn't find anything on NextJS docs that help with achieving this. I feel like this is an essential feature for good UX. The current options I have are not very good: - Make the app feel slow due to fake loader bars on instantly loading pages - Add a disruptive loading.tsx in place of the loading content which is bad UX for data I expect to load quickly. - Not add any form of feedback and leave the user guessing whether features are working or not.
59 replies
TTCTheo's Typesafe Cult
Created by Y7YA on 1/15/2024 in #questions
Check if page has been cached
Trying to make a custom progress bar as there's no good solution for the app router, I've tried pretty much every relevant package. It's easy until I get to the part where I want to disable the progress bar on pages that have already been cached and load instantly. So I want to somehow get something along the lines of 
if(!pageIsCached) {
   loadProgress()
}
if(!pageIsCached) {
   loadProgress()
}
This is crucial for UX because if the user sees a loading bar on a site that's loading instantly it creates the illusion of the site being slow.
2 replies