robtaussig
Repos
61
Followers
60
Following
32

React Hook for WebSocket communication

976
85

React-based implementation of Conway's Game of Life

Chess UI implemented in HTML Canvas

Boilterplate app using React and Rust-compiled WebAssembly

33
0

Events

Test padding fix

Created at 5 days ago

Test unstyled

Created at 5 days ago

Fix checksum

Created at 6 days ago

Update README.md

Update README.md

Update README.md

Update README.md

Update README.md

Update README.md

Update dependency: typescript@4.9.4

typescript

  • @my/api: ^4.9.3 → 4.9.4
  • @my/db: ^4.9.3 → 4.9.4
  • expo-app: ^4.7.4 → 4.9.4

Update 5 dependencies

@trpc/next

  • app: ^10.7.0 → 10.9.0

@trpc/client

  • @my/api: ^10.1.0 → 10.9.0

@trpc/server

  • @my/api: ^10.1.0 → 10.9.0

@trpc/react-query

  • app: ^10.7.0 → 10.9.0

@tanstack/react-query

  • app: ^4.20.9 → 4.22.0

add version to api/package.json to prevent yarn error

updated lock. Added prisma type to db/index to prevent prisma?

default to sqlite

update TS

Merge pull request #14 from ebg1223/updates

Updates

remove .idea

update clerk api key due to their new api key format

added .yarn nad .yarnrc.yml so user don't have to set yarn version or link-node

Update README.md

gitignore jetbrains

Update dependency: solito@2.1.3

solito

  • app: 2.0.0-canary.4 → 2.1.3

Merge pull request #15 from chen-rn/solito-2.1.3

Update dependency: solito@2.1.3

Created at 6 days ago

Update README.md

Update README.md

Update README.md

Update README.md

Update README.md

Update README.md

Update dependency: typescript@4.9.4

typescript

  • @my/api: ^4.9.3 → 4.9.4
  • @my/db: ^4.9.3 → 4.9.4
  • expo-app: ^4.7.4 → 4.9.4

Update 5 dependencies

@trpc/next

  • app: ^10.7.0 → 10.9.0

@trpc/client

  • @my/api: ^10.1.0 → 10.9.0

@trpc/server

  • @my/api: ^10.1.0 → 10.9.0

@trpc/react-query

  • app: ^10.7.0 → 10.9.0

@tanstack/react-query

  • app: ^4.20.9 → 4.22.0

add version to api/package.json to prevent yarn error

updated lock. Added prisma type to db/index to prevent prisma?

default to sqlite

update TS

Merge pull request #14 from ebg1223/updates

Updates

remove .idea

update clerk api key due to their new api key format

added .yarn nad .yarnrc.yml so user don't have to set yarn version or link-node

Update README.md

gitignore jetbrains

Update dependency: solito@2.1.3

solito

  • app: 2.0.0-canary.4 → 2.1.3

Merge pull request #15 from chen-rn/solito-2.1.3

Update dependency: solito@2.1.3

Created at 6 days ago
create branch
robtaussig create branch thought-map
Created at 6 days ago
closed issue
[bug] styled component behaves differently in deployed production app

There's a lot going on and I tried to reproduce in a forked repo, but the bug only manifests in my deployed app when changing routes twice. But given how I resolved it, I believe the bug originates from tamagui (or my understanding of how styled components work is incorrect).

Another relevant fact is that the bug only exists in the production build and only affects the web version. It affects all browsers that I tested (Safari, Chrome, Firefox).

Happy to give more details, but in its simplest form, I had a component that looks like:

const TOP_NAV_HEIGHT = 100;

const TopNav = styled(XStack, {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bc: 'black',
  height: TOP_NAV_HEIGHT,
  alignItems: 'flex-end',
  justifyContent: 'flex-end',
  display: 'flex',
  paddingBottom: 10,
  px: 20,
  animation: 'lazy',
  zIndex: 300_000,
});

Which I render it in the following context:

return (
    <YStack>
        <TopNav
            key={`top-nav`}
            opacity={isScrollingDown ? 1 : 0}
            y={isScrollingDown ? 0 : -TOP_NAV_HEIGHT}
        >
            <H2>SomeText</H2>
        </TopNav>
        <ScrollView
            space={'$4'}
            scrollEventThrottle={100}
            paddingTop={TOP_NAV_HEIGHT}
            onScroll={(e) => {
                 //Determine if scrolling down to trigger display/hiding of top nav
            }}
        >
          //Arbitrary Content
        </ScrollView>
       <XGroup>
           //Links to various pages with the same layout that differ only in the content displayed inside the ScrollView
       </XGroup>
    </YStack>
);

The problem is that when I navigate to on one of the links inside the XGroup twice, the TopNav element loses most, but not all, of its properties (most importantly the absolute positioning). This causes a layout shift now that it occupies space on the page.

The reason I figure this is related to tamagui is because the fix is to replace TopNav with an XStack and inlining all of the properties that were passed into the styled version:

return (
    <YStack>
        <XStack
            key={`${pageTitle}-top-nav`}
            opacity={isScrollingDown ? 1 : 0}
            y={isScrollingDown ? 0 : -TOP_NAV_HEIGHT}
            position={'absolute'}
            top={0}
            left={0}
            right={0}
            bc={'black'}
            height={TOP_NAV_HEIGHT}
            alignItems={'flex-end'}
            justifyContent={'flex-end'}
            display={'flex'}
            paddingBottom={10}
            px={20}
            animation={'lazy'}
            zIndex={300_000}
        >
            <H2>SomeText</H2>
        </XStack>
        <ScrollView
            space={'$4'}
            scrollEventThrottle={100}
            paddingTop={TOP_NAV_HEIGHT}
            onScroll={(e) => {
                 //Determine if scrolling down to trigger display/hiding of top nav
            }}
        >
          //Arbitrary Content
        </ScrollView>
       <XGroup>
           //Links to various pages with the same layout that differ only in the content displayed inside the ScrollView
       </XGroup>
    </YStack>
);

The above works fine in all environments and compilation targets, though from what I think I understand, it should be exactly the same as the styled TopNav component (just built in a less reusable way).

Created at 1 week ago
issue comment
[bug] styled component behaves differently in deployed production app

@natew Strangely enough, I can't reproduce anymore (even after checking out the exact commits in which I observed this behavior). I wonder if I had old dependencies that I just needed to yarn install? Anyway, apologies for the false report.

Created at 1 week ago
opened issue
[bug] styled component behaves differently in deployed production app

There's a lot going on and I tried to reproduce in a forked repo, but the bug only manifests in my deployed app when changing routes twice. But given how I resolved it, I believe the bug originates from tamagui (or my understanding of how styled components work is incorrect).

Another relevant fact is that the bug only exists in the production build and only affects the web version. It affects all browsers that I tested (Safari, Chrome, Firefox).

Happy to give more details, but in its simplest form, I had a component that looks like:

const TOP_NAV_HEIGHT = 100;

const TopNav = styled(XStack, {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bc: 'black',
  height: TOP_NAV_HEIGHT,
  alignItems: 'flex-end',
  justifyContent: 'flex-end',
  display: 'flex',
  paddingBottom: 10,
  px: 20,
  animation: 'lazy',
  zIndex: 300_000,
});

Which I render it in the following context:

return (
    <YStack>
        <TopNav
            key={`top-nav`}
            opacity={isScrollingDown ? 1 : 0}
            y={isScrollingDown ? 0 : -TOP_NAV_HEIGHT}
        >
            <H2>SomeText</H2>
        </TopNav>
        <ScrollView
            space={'$4'}
            scrollEventThrottle={100}
            paddingTop={TOP_NAV_HEIGHT}
            onScroll={(e) => {
                 //Determine if scrolling down to trigger display/hiding of top nav
            }}
        >
          //Arbitrary Content
        </ScrollView>
       <XGroup>
           //Links to various pages with the same layout that differ only in the content displayed inside the ScrollView
       </XGroup>
    </YStack>
);

The problem is that when I navigate to on one of the links inside the XGroup twice, the TopNav element loses most, but not all, of its properties (most importantly the absolute positioning). This causes a layout shift now that it occupies space on the page.

The reason I figure this is related to tamagui is because the fix is to replace TopNav with an XStack and inlining all of the properties that were passed into the styled version:

return (
    <YStack>
        <XStack
            key={`${pageTitle}-top-nav`}
            opacity={isScrollingDown ? 1 : 0}
            y={isScrollingDown ? 0 : -TOP_NAV_HEIGHT}
            position={'absolute'}
            top={0}
            left={0}
            right={0}
            bc={'black'}
            height={TOP_NAV_HEIGHT}
            alignItems={'flex-end'}
            justifyContent={'flex-end'}
            display={'flex'}
            paddingBottom={10}
            px={20}
            animation={'lazy'}
            zIndex={300_000}
        >
            <H2>SomeText</H2>
        </XStack>
        <ScrollView
            space={'$4'}
            scrollEventThrottle={100}
            paddingTop={TOP_NAV_HEIGHT}
            onScroll={(e) => {
                 //Determine if scrolling down to trigger display/hiding of top nav
            }}
        >
          //Arbitrary Content
        </ScrollView>
       <XGroup>
           //Links to various pages with the same layout that differ only in the content displayed inside the ScrollView
       </XGroup>
    </YStack>
);

The above works fine in all environments and compilation targets, though from what I think I understand, it should be exactly the same as the styled TopNav component (just built in a less reusable way).

Created at 1 week ago

Update README.md

fixed expo build error, caused by conflict of namespace between /apps/next and /node_modules/next, changed our app to nextjs

quick patch, forgot to change the dev route, also upgrade tamagui

Update README.md

Update README.md

Created at 1 week ago
Created at 1 week ago

Required auth for accounts

Created at 1 week ago

Trigger re-deploy second attempt

Created at 1 week ago

Trigger re-deployment to update env variable

Created at 1 week ago

Create accounts

Created at 1 week ago

First commit

Created at 1 week ago
Created at 1 week ago

Include yarn.lock

Created at 2 weeks ago

First commit

Created at 2 weeks ago
create branch
robtaussig create branch main
Created at 2 weeks ago
create repository
robtaussig create repository
Created at 2 weeks ago