You've done well to make it this far without a glimpse of the UI. Here it is, Search Track and add it to Home. For now, we don't need to worry about Add Track, a feature which is definitely only ever going to be available in dev mode. In this UI demo I search for and choose two tracks, then expand them in the Home screen to present the view the choir would sing from. 1-4:

Show thread

I'm used to adding songs for production updates to a JS object, hardcoded_songs.js. When given this functionality of choosing their own songs, users decided instead they prefer a hardcoded list of songs each week, so they DON'T have to look up their own songs from the JSON of everything. For production I use an older version of the app that doesn't lift state up and has a half-functioning search component that highlights a song BUT DOES NOT ADD IT to the home screen. So in this version, the roll-your-own one, /db2-ALL.json is our endpoint for json-server, which will hopefully then become our Redux Store state.

Show thread

You will notice a /db.json file. This is our current application state, a JSON object of songs and their lyrics and some other parameters. Internally, it looks like this, empty or populated (in /db2-ALL.json). In the development environment ONLY, /db.json is served by json-server. Songs are then added by the user to appear on the home screen. This is an environment which could only be mocked IRL by. a proper database backend. This is problem No. 1 that I hope to improve via the addition of Redux, where /db2-ALL.json will become our Redux Store, with /db.json as a dynamic slice of the store state. That came to me during my preliminary Power Nap. Redux Store effectively becomes our database in the frontend.

Show thread

The app structure of the choros app looks like this. With Vite, /index.html is up front and centre. I decided to put my components in a /src directory.

Show thread

We are going to add Redux to the choros app, which additionally is built using the Vite bundler, taking a ready-made Redux-plumbed-in boilerplate, the my-redux app, as our guide. my-redux is built using the create-react-app bundler. And here we encounter the first gotcha of modern Redux. All but deprecated now in the official React docs, create-react-app is an interesting choice for the go-to Redux Toolkit, or RTK for short. It is my opinion and that of my colleague's that create-react-app, or CRA, has superior error reporting to Vite, and a more reliable dev server, albeit a bit slower to build. But how many times do you build out a new JavaScript Web App with Node modules, compared to unit test using its' built-in dev server?

Show thread

I have two apps as starting points. "/choros..." is a copy of a production app using React and React state only (lifting state up pattern) to manage state across the app, whereas "/my-redux..." is a template scaffolded using the following command:

npx create-react-app my-redux-template-app --template redux

Show thread

When at my desktop and doing important original work, the first app I reach for is a simple pomodoro timer. I work in intense bouts of only 20 minutes, devices OFF.

Show thread

And some frozen mango chunks to take into the office should cover the snacks kind of things.

Show thread

Now time for forty winks power nap. Dreaming of my new redux store, of course. A chance, in all seriousness, to trigger the power of the subconscious mind. That's my story anyway and I'm sticking to it. The science:
nhs.uk/every-mind-matters/ment

Show thread

First step: nobody marches on an empty stomach. This is an important and often overlooked extension of your own DX.

Show thread

NEW THREAD: REACT WITH REDUX VIA REDUX TOOLKIT:

Finally on development comparing adding to an existing app (bundled by ) versus template (bundled by create-react-app with redux template flag).

Mac: I’ll just carry on working with no complaint.

PC: Hold my beer while I work on this scan for the next 9 hours.

Time to kill my json-server before I quit VS Code. I never really quit it: it's my go-to for React, JavaScript, HTML/CSS and Python.
>>

Show thread
Show more
Qoto Mastodon

QOTO: Question Others to Teach Ourselves
An inclusive, Academic Freedom, instance
All cultures welcome.
Hate speech and harassment strictly forbidden.