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.

The concept

You can view the original ideas and clickable prototype here:

Designing a self-directed learning network: work-in-progress v0.1

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.

Javascript has gotten both easier and harder in the last few years. For now I would say somewhat easier because I managed to get a prototype running using Vue.js and Firebase in a relatively short amount of time (1 day just for the very bare terrible minimum). This is considering that I would rate my javascript skills as non-existent though I interacted briefly with Angular. I also don’t have to deal with databases and learn a backend language just to read and write data.

Showing the WIP

Navigation

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:

Editing

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
• navigation
• 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

Design

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.

Code

I am not proud of it right now. I intend to write a post on how I went from not knowing much javascript to building this. The hardest thing to learn for me was how data denormalization works and writing the code to make the proper calls. To be honest, I am still not sure if I am doing it right. I look forward to the day I am good enough to refactor it all.

Sustenance

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.

Questions

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.

There is only an opportunity cost if I am missing out on something while working on this, but I can’t think of anything else I would rather be doing. There is a meta lesson here for me — I am building this because in the process of building it, I had to learn a whole new ball of skills, and I thrived on it. There’s very few things more satisfying (and masochistic) than spending 8 hours trying to make something work, and then see it come to life. I would have also loved to see how other people approached and learned javascript. I had to do a ton of googling — there must be a better way to do this.

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.

Explore:

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