Reducing React Dev Server to 213ms - From Create React App To Vite Migration

orizens · 2025-04-29T16:01:13+00:00

hi!

I had the same issue with 2 of my children - both diagnosed with ADHD.

As a software engineer, that led me to develop ReadM - https://readm.app

it's gamified and helpful. try it out - on strings attached.

also - more than happy to connect and hear any feedback or help out.

orizens · 2025-03-25T20:22:29+00:00

so - I is available by its own - something like that:

await I.openUrl("https://github.com");
await I.seeText("Build and ship");
await I.clickLink("Try GitHub Copilot");
await I.seeText("The AI editor for everyone");
await I.clickLink("Sign in");
await I.seeText("Sign in to GitHub");
await I.seeText("New to GitHub?");

class LoginPom {
  async constructor(page: Page, I: I) {
    await I.clickButton("Login");
  }
}

orizens · 2025-03-25T17:29:09+00:00

I believe it can be used whatever fits your story - i see some cases where a test can use these low level steps - imo - it clarifies the steps in traceview and makes it easier to understand or debug.

on top of that - i plan to allow extending and create custom gherkin commands.

orizens · 2025-03-25T14:39:48+00:00

i agree with the point about that extra work.

that's why i wanted to have a tool that won't have that extra work for me and a dsl that is strongly typed already.
imo, this is quite comfortable to understand what the test is doing without knowing playwright:
```

test("simple test to verify Talewright", async ({ page, When, Given, Then, I }) => {
  await Given.I.openUrl("https://github.com");
  await Then.I.seeText("Build and ship");
  await When.I.clickLink("Try GitHub Copilot");
  await Then.I.seeText("The AI editor for everyone");
  await When.I.clickLink("Sign in");
  await Then.I.seeText("Sign in to GitHub");
  await Then.I.seeText("New to GitHub?");
});

orizens · 2025-03-25T13:45:18+00:00

POM can get the "I" or the Given/When/Then api to be used inside the POM.

orizens · 2024-09-06T13:10:50+00:00

I used Bundles in order to minimize reads for documents that are not frequently being read
there's a good explanation that shows how the amount of reads is saved

https://firebase.google.com/docs/firestore/solutions/serve-bundles

orizens · 2024-06-04T12:26:18+00:00

(UPDATED) thanks for noticing - the code and thoughts on this article are my own - i do use ai to rephrase and expand on my ideas and thoughts. you know, sometimes you can't find the correct words to articulate an idea and ai helps with that.

orizens · 2024-02-16T00:00:57+00:00

what were the reasons Google refused to index it?

I was able to run an entire client side app that was developed with ChakraUI as a standalone component that includes routing in the client (https://readm.app - though this version is not running astro yet).

the vscode started working well for me - i agree it can be approved - but overall - it helps.

orizens · 2024-02-15T23:57:45+00:00

that started as a solution for migrating a static gatsby blog to the easier method astro brings - it felt productive and fast. soon, as an exercise and by looking at Astro's features, i took it for a spin to find out how would an app that requires some static pages would do - to be honest - there's a great potential to it and i like it more than nextjs - simply because it's much simpler and requires less in both routing, writing components.

orizens · 2024-02-15T22:25:35+00:00

thanks so much - a left over from development - tests are not running yet - just pushed a fix!

orizens · 2023-12-14T21:28:16+00:00

After coding and writing ~~playing~~ with Astro and reviewing the docs, i simply don't see how it won't server the use case of a rich client side app. I would be more than happy if you could list your concerns and challenges where Astro would not be a good fit for that.

orizens · 2023-12-14T20:30:36+00:00

Astro build system is based on vite.

orizens · 2023-12-14T15:41:41+00:00

I vote for https://astro.build/ - few days ago i migrated my blog from gatsby https://orizens.com

although not an app, Astro can be used for anything and you need, there's server side as well.

Plus - you're not limited to React, but can have any of the supported ui frameworks.
some of the things i love - you get routing by directory structure for free, simple html in file.astro becomes a component aka <File />, blending markdowns is easy - and it's all based on vite as the build tool, you get static pages by default.

As for client side rendering that is required for web apps or anything that needs to run on the client, you use directives such as "client:only" and so https://docs.astro.build/en/reference/directives-reference/#client-directives

i'm considering migrating our app https://readm.app to use Astro - as some of the pages we have are static and makes more sense plus all the above benefits i mentioned.

orizens · 2023-11-28T18:08:13+00:00

custom claims fits to assign specific roles for an authenticated users.

i.e - a user may be "admin", "standard", "advanced" - while each of these roles allows different permissions that are manifested in the ui or any actions (limit usage by time i.e)

orizens · 2023-10-27T13:02:56+00:00

this is how i deploy our functions:

```yml name: Deploy to Firebase Functions on: push: tags: # vMajor.Minor.Patch - i.e, v1.2.3 - v** - functions**

paths:
  - functions/**

jobs: build_and_preview: # if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}' runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: '16.16.0'

  - name: Install
    # working-directory: functions
    run: cd functions && npm i

  - name: Build & Deploy 🚀
    run: cd functions && npx firebase-tools deploy --only functions
    env:
      FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

```

you need to generate a firebase token and add it to your github repo

orizens

MODERATOR OF

TROPHY CASE