How we can build Schrödinger’s div 📦 with Vue!
There’s a 50% chance we’ll get this right…
Before I get to the article, I just want to share that I’m building a product, and I would love to collect some data about how to better serve web developers. I created a short questionnaire to check out before or after reading this article. Please check it out — thanks! And now, back to our regular scheduled programming.
So please allow me a few minutes of your time to make a convincing argument for why learning Vue could be a great decision. You should learn it not only for your qualifications, but for the pure fun and glee that comes with learning a well-documented and orchestrated piece of software.
I also teach how this 📦 works and a whole lot more in the Vue course I just released. Learn Vue from the basics and how to build a few things, too! Click here to enroll for free!
Scrimba.com is a new and interactive website for learning and sharing how to code. Screencasts can be interrupted and edited, making learning active and fun to experiment with!
Schrödinger’s cat is a morbid thought experiment posited by Albert Einstein and Erwin Schrödinger to mock the absurdity of quantum physics. It’s an (in)conceivable experiment for which randomness at a micro-level can be measured in the macro-world we experience. Ironically, it has become a centerpiece for explaining quantum physics!
You can learn more about the experiment and its origins here.
It goes something like this: You have a cat. You put it in a sealed box. In the box is placed some radioactive material that over an hour has a 50% chance of one if its atoms ionizing. Also placed in the box is a Geiger counter, which is a measuring device. If it detects an ionized atom, it will release a hammer that will smash a vial of poison thus killing the cat! 🐱💀
Here’s a more academic explanation of Schrödinger cat:
The scenario presents a cat that may be simultaneously both alive and dead, a state known as a quantum superposition, as a result of being linked to a random subatomic event that may or may not occur …
… Schrödinger did not wish to promote the idea of dead-and-alive cats as a serious possibility; on the contrary, he intended the example to illustrate the absurdity of the existing view of quantum mechanics.
Building Schrödinger’s div
Using Vue, we can bind a click handler to a
span — I lied, it’s not a
div — containing the
📦, and selects from either the 💀
emojis. Clicking it calls a function that emulates throwing dice, and reveals whether our cat lived or died. And clicking again could reset the state back to the original closed-box. This can all be achieved with Vue’s v-h
ick, and :cl
Psst.. the full code is available in the eighth screencast.
shows Click the box! The cats…📦! Also inside
is a span with a few attribu
and emojify() are techniques I’m using to show emojis as images.
@click="quantum_fluctuation()" is how I’m attaching a function to the
span being clicked, and
:class="jittering()" — also
:class="theme()" — make for subtle special effects.
Let’s now understand how
Math.random() to influence the state of our cat, which is initialized to
📦, and selects from either 💀
Bear in mind, I’m obfuscating a few details for the bigger picture, that being that we have our cat’s state, for example
this.cat, stored in data, and that a function call sets
this.cat state, which also gets updated in the DOM.
You can of course learn more about the implementation of
this.is_alive() in the corresponding screencast.
To touch on how the
The overarching point is that it’s now conceivable — and sensible — for a sole individual to create web-based products and services that emulate the snappiness of modern native apps, all without the same technical debt. And this is a big deal because while native apps are nice, they do require extra steps and often access to dozens if not one hundred MB to download. 🙊
There’s a lot more to learning Vue, so I wrote two more articles on the subject matter. Please, after this article, have a look!
Vue is a superpower disguised as a framework
I love software that creates meaningful value — and not just for the end-users, but also for the developers who choose to learn and use it. Well-documented and orchestrated software feels great to learn, and feels even greater when the developer-experience is on par with the desired user-experience. Vue is no exception here, and programming Vue has been a blissful experience, and much easier than anticipated.
Now is a time like no other to get into web development. With the introduction of CSS Flexbox and Grid, web design has become at least an order of magnitude easier, more fun, and more powerful. With backend languages like Go, and delightful frontend frameworks like Vue, one programmer/designer can now do what would have required entire teams or companies in the past.