A self-directed learning network: WIP v0.2
learning to build a prototype with Vue.js and Firebase
It is a little ironic that v0.2 of this is published slightly after a year since v0.1 was published. I got a little burnt out with it last year, got sidetracked into other rabbit holes, but like an affair I cannot forget, I returned to it. I thought this quote by Dennis Crowely sums it up perfectly:
If, after several turns in your career and life, you return to the same idea, pursue it. Your creation is as much an act of self-expression at that point. — source
In this one year I examined myself a lot, after having several thoughtful responses to the previous post and also some exchanges with a couple of interested parties. What are my desired outcomes?
- First and foremost, I want to make something that I would use myself. I am frustrated with what is available at the moment to chart learning progress, or simply being able to share resources in a coherent, organised manner.
- It would be a very nice bonus if I could find a tribe of people who would use this with me. I am not intending to solve problems with education, I intend to make it easier to learn in a self-directed manner. Plenty of people rightly pointed out motivation is a problem with online learning, but I think with self-directed learners the problem is less motivation, more infrastructure.
- I am not building something to create new content, it is a platform to document and share links to existing content — there is already a ton of amazing content out there, it is just not organized.
- I am still hoping to open-source everything out of this and at this point do not intend to make it into a product or organisation.
- It could take me decades, but what matters more to me is to make this thoroughly in the way I want to. You could say it may be more of an artistic project than trying to solve a problem. I feel less bad about this ever since I discovered this reddit thread.
- Damn, I want to have fun doing this.
You can view the original ideas and clickable prototype here:
Learning to code in order to build
Since March began I have been working full-time on this. The previous clickable prototype came to a point where the learning will not enable me to go much further on it, so I decided that building it out and eating my own dog food would teach me much more.
Dennis Crowely said he learned to code for Foursquare, and this is the project I learned to code seriously for. Using jquery to make rough prototypes was the norm as a designer, but to code something from scratch is a whole other thing.
Initially I experimented with using Contentful for data-entry and Vue.js to display the data. I really like what Contentful is doing as a headless CMS, but eventually I decided I couldn’t decouple the creation experience from the overall user-experience. Making it easy to create cards is the whole point.
Showing the WIP
Cards are organised into stacks. Each card can appear in multiple stacks. Cards are swipe-able on mobile and they are laid out in a simple grid on desktop.
Stack & card creation
I used iframely to grab the meta data of the URL in order to automatically populate the fields:
Thanks to Vue and Firebase, editing cards live seem so seamless.
Feature list for v0.1 of the prototype
Right now it is in single-player mode, though it is set-up to ease into multi-player mode later. There are a lot of features missing — rearranging cards, recording progress, adding notes etc— but I thought this is a good v0.1 for a prototype. This was the list of features I planned (and completed) for this milestone:
- create card and stack
- display cards within a stack
- delete card and stack
- edit card
- auto-populating of image using embedly when you paste a url (I changed this to iframely because of embedly’s new pricing, and instead of fetching the data after the user has finished typing ala facebook, now it fetches after a button is pressed, to prevent accidental calls because it can be costly)
- add/remove card to stack
- loading indicators
- editing stack
- add card while in stack page
- card data structure and display
- bind stack and card to creator but provision for future curator mode: i.e. you can add someone else’s card into your stack but add your own note
- better auto-snippets and fallbacks
Apart from basic formatting to make sure it is not hideous, I didn’t spend much time on the visual design. Aesthetics will not be the priority for the time being as I am focused on the product design itself, though that will evolve as I use it while I build.
For now, I am on the free tiers of Firebase and iframely, but there may come a point when I will need to pay for service costs, even if I fund my own time costs. I will cross that bridge when it comes.
These are some questions that are still up in the air:
- Is the card format necessary? Could a list of unevenly-sized containers work? Is this really different from having a text list?
- Related to the above, is a carousel-style card to card navigation superfluous or a simple scroll will do?
- Is a full client-side processing experience sustainable? One day I may actually be technically good enough to wake up in horror that I have to rewrite everything.
- Am I really building a prototype? Sometimes I find myself making decisions as though I am building something I want to be sustained. It is not necessarily a bad thing, except when it interferes with the purpose of the experiment.
- How is this different from Medium’s Series? I don’t actually have this question but leaving it here in case someone asks. I could replicate a learning path with Medium’s Series but I do think there is a difference having standard formatting for metadata, learning progress indicators, multi-player mode, merge and sort capabilities.
Some closing thoughts
Several times in the process of working on this, especially spending multiple days of 8 hours straight and then falling sick — I wondered to myself if there is a point. I am fulfilled just by the process of making it. At this stage it I am happy to make it into my personal online library of resources, organised just the way I like to share it.
I am also excited to apply the skills I’ve picked up for this, on my other projects. I can think of a dozen things I can build with Vue and Firebase.
- The actual prototype
- The original clickable prototype
- Notes I wrote while making the prototype
- Meta: the stack of cards I made for resources I have used while learning to build this prototype
I hope it wouldn’t be another year before I post v0.3. I intend to enable other users to create their own stack and cards in the next version, so hopefully some of you will follow this journey.