ALAN LAVENDER @lavenderlens@qoto.org

There's the song in the app's JSON now.
>>

PDFs very often copy across with unusual line terminators. JSON is a very fussy format but that's partly what makes it so popular as a "glue" language format between different scripts or parts of a app. It's easy to remove them: they are highlighted in Visual Studio Code.
>>

There are fields for Song Title, Words, Usage, Key, Capo, and YouTube embed video link for learning new songs from the web. Mostly it's just Title and Words, but that enables a search on EITHER Title or first line in another version of the app. Handy.
>>

Next, fire up the React app, made in Vite, in development mode, also with a json-server loading the songs table JSON. Copy/paste new song into form in the app.
>>

Possibly of interest to those #React #JavaScript developers among you, here is today's workflow for updating a new song in my choir app. End-to-end 20 mins or less. Start by texting the song to myself from PDF supplied. It works from a photocopy too, using scan text OCR in Mac Notes. >> THREAD

To a zero alcohol guy this tastes like champagne!

Just back after an extended safari, but, looking for a friend, is there a cheat sheet on how to follow users from other servers? Getting this a lot.

As that time of year approaches…

…my choir app supports in-app YouTube video player for learning new songs

Intrigued by these modal socks. So they just pop up on my feet ready to go and I click cancel to take them off?

From the St. Mark’s Place #NYC Wiki. Like superglue for fragmented identities. Wow. Just wow.

Emptying the bin on a Friday night feels so good.

Ok, all good. But WHY #BING?? It's like hitching a sheep trailer on a Lambo.
#AI #JonyIves #neuralink #wearables

20 minutes start to finish.

Scan 4 songs and edit OCR, switch to development version of app and copy from iCloud Notes into add-track form and thence into json. Copy from json into JS hardcoded songs array which means the app will work offline in airplane mode.

Do a production build and upload. Test in device. 20 minutes. Not at all shabby for an update workflow if I say so myself.

One version of the app, using #React state management, is already completed in development. That will mean when all the popular songs are in the json the user will be able to search and compile their own set list. Just not much point switching this feature on when there are so few songs encoded thus far.

As an academic exercise for my training work I will be doing another version of the searchable app using #Redux state management with #RTK. When I started this I was less enthusiastic about adding Redux to the project so soon. Yesterday it only took one level of prop drilling - passing a different click handler function down to the table in the search component - to make me considerably more enthusiastic about the Redux option.

It's an exercise, for me, myself, I alone, to see which I prefer among #React state management architecture patterns - lifting state up or plumbing in #Redux. With the help of some nifty conditional rendering here, my #choros home page component either displays hardcoded songs (this was a requirement so the app could run during Mass with choristers' devices switched to airplane mode), or custom songs chosen from the search form component. But to make this work, re-using the same (dumb) table component, I have had to do a bit of prop drilling. And that's with only TWO state "little trees" - songs and custom songs. Much as I deplore the extra complexity of Redux, even with #RTK, in a training context, I have commented in the search component that :
// when prop drilling is a solution, redux becomes an option...

Life really is getting more #BlackMirror by the day. Thinking of that one where Miley Cyrus downloads her consciousness into a plastic toy.

They missed a slam dunk there, by not calling the app The CAI…

{song.words.substr(0, song.words.indexOf(‘<‘).substr(0, 30).concat("...")}

nifty string manipulation cuts off after the first line, truncates to max 30 chars, adds ellipsis

It detects the beginning of a line break tag in the React render (rendered using dangerouslySetInnerHTML)

#React #JavaScript #webdevelopment

And it’s a great big sláinte mhaith from me as I’ve done the first upload of my choir app ready for tomorrow night’s Mass. Made in React and Vite, with a dash of Tailwind, it does away with the need for endless on-mic rustling of photocopies. Welcome to the 21st century church!

EMOJIS! Straight in to your code!
Fairly late to the table here but I just realised what the little globe on the function button means.

Full disclosure: I’ve been looking up the Unicode table or copying from iMessage.
🤦🏻‍♂️

Aw c’mon lads this is awesome!!
Just look at those wholesome ingredients!
#Glenisk Rich Dark Cherry