# 2020.04.26 What Even Is Firebase

We're using Firebase as the hosting service for https://covidcanidoit.com and the experience has been kinda weird, coming from a more traditional server-database world.

First, I didn't even realize that Firebase was more than a cloud-JSON-blob! Our initial use of it was only for static asset hosting. This is a VueJS application that so far mostly lives in the browser, so static hosting is perfect. I generally use Github Pages for this purpose, but another team member had already set up Firebase for us.

Once I learned that it was even a thing, all was good. I wrapped the CLI that Firebase provides into yarn land, and now you can do yarn deploy and it'll build up the local assets and push them up. Works quite well! The auth is stored somewhere else on my computer. If a new dev wants to deploy, you add their google account to the Firebase project and presto!

We now have 3 devs on this project, and I'm starting to wonder about staging environments and such. As far as I can tell this isn't a thing in The Cloud, and instead we need to set up a separate project. I guess I'll do that eventually?

Our first user-serviceable data store was the almighty Google Sheets. You might not know this, but you can craft a URL to a public sheet and get down a very lovely CSV. When our app "boots" in the browser, we pull down this csv, parse it, turn it into a nice JSON tree that we stick into Vuex. If you edit the Google Sheet, the next app reload gets the new data. This is a disturbingly effective way to prototype. I grabbed a markdown rendering Vue component and ... now we have a SheetyCMS(tm) (haha).

As we look to expand the type of data we are storing and who can edit the data, I decided that we should switch over to the only thing I thought Firebase did in the first place, a hosted and magically live JSON "database". This is called the "Real Time Database", and for good reason -- all of the client libs know how to watch this thing for changes. In the VueJS one-way world, it goes Firebase -> Vuex -> component -> [edit-event] -> Firebase, and then wraps back around.

I built this admin tool to edit content, and now when you change the description text of something it updates every browser viewing it ... LIVE. Like, even as you type things. We went from having to do a lot of work to make things that live to now maybe having to create a "commit" button so that people can't see you typing and re-typing your text.

Things to discuss further:

• Firebase Rules
• Staging environments vs staging data
• I wonder how much this is going to cost?
• Firebase data migrations
• Tracing the round trip of a text update

Cool things I saw on the internet at some point:

# 2020.01.19 Mobile WebAudio Synth

I got a Pocket Operator PO-33 a while back, and find it super fun -- it is minimalist and usable. It inspires me to play around with beats and tunes ... and it also inspires me to work on my own samplers, sequencers, and synths.

Let's see what we can do with Web Audio these days! Starting with a basic VueJS app, I googled lots of stuff. Somewhat randomly, I wanted a Wicki-Hayden hexagon style keyboard, so had to find some CSS that makes hex-buttons. I'll probably switch to this Hexi-Flexi-Grid at some point, to make dynamically sized hexagons easier, but these work.

Combine that with a simple synth, and now we have a playable thing. I had to make some tweaks to get it to work tolerably on my phone -- fix the layout size, use touch events. Unfortunately it isn't very usable at this point due to a sizeable delay between pushing a button and the sound. I'm going to write a pure-JS snippet to eliminate any overhead from VueJS, and if that is also slow then I'm not sure what I'll do. It's kinda cool that I can use Web Audio ... and I'd sure like to keep using it. We'll see!

Other ideas ... so many. I want to give it access to your microphone so you can record a live sample. The PO-33 then lets you pitch the sample (by speeding it up and slowing it down) and maps it to the keys. I'd like to do that, as well as try a pitch change while keeping the duration. Probably after that is doing some sequencing and/or looping. The PO-33 also has one-shot mode for drums, so might do that. So many things!

Check out the Demo Build and the Github Repo.

# 2019.03.03 Learning Machine Learning

I'm working on making the jump from READING about recent machine learning techniques to APPLYING recent machine learning techniques. I have some nice datasets at work, so I am doing a bit of double-dipping by playing with those.

I previously struggled with getting started, getting bogged down in picking technologies and such. I'm specifically going after some Neural Network models, so also get overwhelmed with the Python ecosystem of tools and libraries. The best way to get started is to get started .. so I turned the corner with a little help.

Fluent Python (book)
Great advanced-introduction to Python, letting me better understand/recognize meta-programming and DSLs. Things like the array-slice syntax turning into an object which can be passed to any class that implements the right methods.
Keras
I think this is the second-most popular python NN library, after Tensorflow itself, and it has Tensorflow as a backend. Seems nice and usable. Then I pull in whatever numpy stuff as needed.
Convolutional Neural Networks
I knew about image and audio convolution filters, so had to spend some effort in transferring that knowledge into how convolutional layers work in a CNN. I read a bunch of articles like Visualize CNN With Keras to get my mind around this.
Dog vs Cat with Augmentation
I had been through random tutorials before, but this time I went through Building Powerful Image Classification Models Using Very Little Data in detail, step by step, and made sure that I roughly understood each step. To help, I switched from Dog and Cat images into my own dataset -- so I had to go through the usual data cleaning process in addition to the learning.
Living Code
Meanwhile I've also been sharing my excitement with friends and coworkers, and started a new Machine Learning club at work. We're taking even the simple examples and building them into services that our live systems can use - code that isn't running is dead code, and dead code is soon abandoned code. A big part of this learning is getting LIVING examples, and the double-dipping of making something useful for work is a great way to get that.

# 2018.12.08 Transition

let gray = amt => color(amt, amt, amt);

function setup() {
randomSeed(7);
createCanvas(600, 600);

for (let i = 0; i < 200; i++) {
x1 = randomGaussian(300, 120);
y1 = randomGaussian(300, 50);
y2 = randomGaussian(300, 50);
fill(gray(x1 / 600 * 255));
line(x1, y1, x1, y2);
ellipse(x1, y1, 20, 20);
ellipse(x1, y2, 20, 20);
}
}


(View full source at https://repl.it/@BrockWilcox/Transition)

More...

META INFORMATION: This is the technical blog and wiki of Brock Wilcox (awwaiid). Entries focus on my current projects, interests, and sometimes life events. If you'd like you can check out the list of All Entries or the RSS Feed. I also have a LiveJournal syndication feed for LJ friends.

2020-05-29

2020-05-27

2018-07-02

2018-06-30

... more changes