THE LACK THEREOF

Various musings of Brock Wilcox (@awwaiid)

HomeTest

<div class="home-rss">

</div>

2020.06.21 Sugary Sunday - Javascript Object Property Shorthand

In today's sugary exploration, let's take a look at a shorthand for object key expansion in Javascript (ECMAScript 2015+, es6+). For an overview of the TON of delicious sugar that was added to Javascript at around es6, check out es6-features.org.

Most of the "scripting" languages (Python, Ruby) have "dictionaries" or "hashes", a datastructure of key-value pairs. In JS these are called "objects", and they do a lot of other things beyond this basic data-storage behavior. In JSON -- JavaScript Object Notation -- you can see the basic literal declaration syntax. Let's build an addressbook, keyed (indexed) by name.

let addressBook = {
  "alice": {
    "street": "123 Elsewhere Lane",
    "zip": "32341"
  },
  "bob": {
    "street": "221 Baker Street",
    "zip": "00234"
  },
  "clarence": {
    "street": "P.O. Box 17",
    "zip": "88877"
  }
};

console.log("Bob's info", addressBook["bob"]);

For our first dash of sugar, we can remove the string notation on keys. They are still strings! We can also access bob using property notation.

let addressBook = {
  alice: {
    street: "123 Elsewhere Lane",
    zip: "32341"
  },
  bob: {
    street: "221 Baker Street",
    zip: "00234"
  },
  clarence: {
    street: "P.O. Box 17",
    zip: "88877"
  }
};

console.log("Bob's info", addressBook.bob);

Pretty fun. But that's not what we're here for. Let's say we have a variable, doug, which contains an address entry. We might do something like this:

let doug = {
  street: "6453 Canyon Canyon",
  zip: "53425"
};

let addressBook = {
  doug: doug
};

It's that last bit where we can add The Sugar. Remember that the key is actually a string, "doug", whereas the value is a reference to the variable doug (which contains an address). What we can do here when these two things are exactly the same is collapse them!

let addressBook = {
  doug
};

This crazy bit of sugar does something pretty strange -- it uses the NAME of the variable as the stringified key! In most circumstances and languages the name of a variable doesn't really matter to the running of the program. This sugary feature sort of breaks the 4th wall, reaching into the source code and lifting the specific variable name into the key (property) of the object.

Real World Example

In VueJS a component can use other components inside the template, but only if they are declared first. Here's a snippet extracted and summarized from the covidcanidoit.com codebase:

<template>
  <div>
    <SearchBar />
    <SearchResults />
  </div>
</template>

<script>
// Importing alone does NOT register the components for use in the template
import SearchBar from "@/components/SearchBar.vue";
import SearchResults from "@/components/SearchResults.vue";

export default {
  components: { SearchBar, SearchResults }
};
</script>

Pretty slick. If you wanted to, you can give the components local-names (or I suppose register a single component with several names, weirdo).

components: { coolSearch: SearchBar, coolSearchResults: SearchResults }

Providing a "list" of components in VueJS is done by providing this object, which gives VueJS not only the component but also the NAME of the component, without VueJS needing to reach inside the component to ask it what its official name is.

BONUS

I like to sprinkle console.log all over the place while exploring code. In addition to static strings, I often throw in the contents of variables. But generally I want to know the NAME of the variable, in addition to the content. So I used to do:

function addAddress(newAddress, otherStuff) {
  console.log("Adding newAddress:", newAddress, "otherStuff:", otherStuff);
  // ...
}

Using today's sugary shorthand, I now usually do this:

function addAddress(newAddress, otherStuff) {
  console.log("Adding", { newAddress, otherStuff });
  // ...
}

This will output something like:

Adding
{
  newAddress: { street: "...", zip: "..." },
  otherStuff: ...
}

You can see that the variable name is handily provided. Here when I had multiple variables I want to log it is even more handy.

DELICIOUS!

Add Comment

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

Add Comment

2020.01.19 Mobile WebAudio Synth

PO33 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.

sample_mob_screenshot1 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.

Add Comment

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.

Add Comment

More...

Navigation

Blog

https://thelackthereof.org/pics/16px-Feed-icon.svg.png Blog RSS Feed

Tweets


Toots (Mastodon)

2018-07-02

2018-06-30

Code

Follow @awwaiid

Wiki Edits

https://thelackthereof.org/pics/16px-Feed-icon.svg.png Wiki RSS Feed

... more changes