experimentalfragments

[experimentalfragments]

stack to stack

Just a short GIF on how rabbit-holing looks like – basically you can navigate from stack to stack to stack...

I just came out of a bad migraine last week so I am glad I could find it in myself to continue work on this today. The last time I had a migraine I stayed off coding for 6 months.

Today I sat down just to add some content to make this look a little bit more coherent but I ended up writing some code to add a little feature: a card will now display the stacks it is in and we can navigate to the other stacks it belongs to.

[experimentalfragments]

I took a coding break yesterday because it is the time of the month for me and every month on that day I am drained of blood and energy. 

Today though, I managed to clean up my cascading terrible code. I’m reusing a function instead of duplicating code in two functions. Knowing how to debug is a skill in itself. I feel like each time I work on a new piece of code I learn something new, what will work and what doesn’t. I hope I’ll be good enough to rewrite everything I have written, one day. 

[experimentalfragments]

I feel like I am painting a house, and I thought I’ve finished painting it, only to discover there’s an entire room I forgot to paint. And there’s always hidden rooms! That’s how I feel today because I was creating a new card in a stack, and I realised I only provisioned for adding an existing card to a stack, so there’s data not being updated properly when there is a new card. Same for deleting. In fact, while writing this, I realised while I fixed the ordering bug last friday, I forgot to again provision for the scenario when I delete the card.

I am sure a lot of this is because I write shitty code and the code is repeating itself in multiple functions, so when I update one, I don’t remember to update it elsewhere. :( 

[experimentalfragments]

I think the “add a stack to a stack” is feature complete. I mostly worked on completing it and fixing some bugs today. There’s still a weird ordering bug but I think I’m going to call it a day. If I start on another thing I won’t be able to stop.

There’s a lot more to do. I haven’t provisioned for another user, all my functions are all over the place, I have to audit my firebase listeners...meta info for every page...

[experimentalfragments]

Solved an ordering bug for now: Previously a card will have an order number derived from card count + 1 when added to a stack, but I forgot to reorder them when I removed a card, resulting in two cards having the same order number. 

Original stack: [1,2,3,4,5]

I removed card 3 from the stack, resulting in [1,2,4,5] when it should be [1,2,3,4]

When I add a new card, it should be [1,2,3,4, + 5], but instead I have [1,2,4,5,5] because it registered the added card order as card count of 4 + 1 and I didn’t decrement the previous card order numbers.

I just wrote a function to reorder them from 1 incrementally when any card is removed, but I’ll need to come up with something more robust if one day i implement custom ordering, i.e.

adding a card after position 3 in [1,2,3,4,5] should update card 4,5 to 5,6. Right now you can only add a card in the end. I don’t know enough programming patterns to do that elegantly. I think there’s array functions to do that?

[experimentalfragments]

documenting the process for adding a stack to a stack

(and how I overcame my phobia of working on this prototype)

I wish I documented my process, thoughts and problems everyday instead of saving them for a cohesive post because now I don’t remember much of it. I think I could derive some of them from my daily journal. 

Monday 4 Sept 2017

After a 6-month hiatus because of chronic pain, I finally spent some time doing a couple of coding exercises on codewars – my head hurt. I felt a little hopeless trying to get back to coding again, it felt like I am starting all over, with a much more dysfunctional brain.

Wednesday 3 Sept 2017

I spent some time updating http://lucent.space – which isn’t really related to the learning network prototype but at least it made me feel a little better getting back into the feel of coding again. 

Thursday 7 Sept 2017

I decided to brave and start looking at my prototype’s code. I could at least run it even though I migrated computers in the meantime. It wasn’t as intimidating as I thought it would be, though I think I should start writing comments everywhere. It also doesn’t help that I’m still new at this so I am probably writing badly written code and it looks like spaghetti. 

Friday 8 Sept 2017

I started working on the prototype again. I had a very surreal feeling looking at it because I don’t know who was the person who made everything work (even if badly coded). I feel like when I last worked on the prototype in March, I was also lost at the beginning, but I found momentum so maybe in the 10th day onwards everything clicked together. But now I am like at day one again, looking at my day 21′s code in March and not really knowing how I derived at the solution. I made a note to fix some bugs...which turned out not to be bugs, I just didn’t find the function in the file I expected, LOL (yay past self for covering all ground). 

All I really wanted to do is to allow a stack to exist within a stack, which will allow infinite rabbit-holes (see diagram below):

At first I thought all I needed was to implement meta information without a stack’s page head so the URL parser could parse information like title, description, etc. But it turns out it is not trivial implementing meta information in a single-page app that can be scraped by a URL parser/linter. Sigh. I contemplated rewriting the whole thing in Nuxt.js...

So, plan B was to try to get the stack object information from the stack card/page itself so that I can add it as a card in the stack.  Halfway through my implementation I realised I was getting into a convoluted mess, so I decided to stop and write some pseudo code on real paper (haha). I also had to write the object model on paper to see what data I actually needed. My two hour limit was up so I decided to stop working on it, which was very difficult.

Monday 11 Sept 2017

2 days of weekend break in between so I lost a bit of momentum. I had to warm up by staring at the code again, and the pseudo code I wrote last friday. 

So at first I tried to bring up a modal on the stack card that would allow this stack to be added to a parent stack – I thought this was easy because I already have most of the code existing for adding cards to stack – but I realised (slowly) that the card renderer needs the stack to exist as a card object (duh) to render it as a card (my mind hurts), so if I wanted to do what, I’ll have to:

check stack exists as a card

else create stack as new card object

wait for card object to be added before adding it to the parent stack

...which seems like a lot of work. If I wanted to add this stack to 5 other stacks, it would have to check if it exists as a card 5 times (maybe because I am just bad at this).

I also considered could also somehow create a ghost card which simply contains the key to the added stack, and then pull up the meta data in firebase each time the parent stack renders the card, but that’s just inefficient (I think).

So in the end after a lot of trials and errors, I decided that each time you create a stack it also creates a twin card object, which I am naming it in the object model as a boundCard. A stack object contains its boundCard’s key, and its twin card contains a boundStack’s key. I managed to implement:

create a stack which creates its twin card

adding a stack to a parent stack will add its twin card reference key so it will just be like adding any card to a stack, except it references the stack’s slug as a relative URL and carries a card.type = “stack”, so I can render it differently. 

Updating the stack will also update the corresponding card’s meta info.

Tuesday 12 Sept 2017

I have to solve the problem of what happens when we delete a stack.

Delete the bound card

Delete any bound card references in any parent stacks

Delete any child card references to this stack (which has been implemented before but I have to make sure it works with the twin card concept)

Update card count and stack count 

After making sure everything works (which took a very long time because everything makes references to everything else – data denormalization yay), I had to delete all my existing stacks and create new ones so they will now have card references. Also because I have no idea how to do backfilling.

There’s a ton of bugs, but I’ll take the small win.

Coding is really practicing zen. We have to be comfortable with throwing a lot of work away, especially when one is a amateur like me so I lack the experience to plan ahead. I would have saved myself a lot of grief if I thought of the add stack to stack problem when I first started the project...there’s a tradeoff between wanting to prototype quickly to get a feel of how it works versus really scoping it out. 

The reality is as I go along, I’ll probably have to do massive rewrites, so I have to get used to it.

To be honest, I have no idea what I’m doing or if I’m implementing it the ideal way or if this is actually a prototype or I have a wish for it to be usable one day by other people, or at least for myself to create a virtual library. 

Today I woke up thinking I need to have slugs for every individual card so they can be shared individually, but looking at how instagram/pinterest implements urls maybe I could get away with using their firebase keys?  

I am writing these long notes mostly for myself, I have always regretted when i don’t write them down. I have found a lot of amusement and encouragement looking at my past notes. It reminds me that the process is always messy, but somehow there will be clarity.

[experimentalfragments]

It has been a while. I’ve been working to add a stack to a stack – inception!! This will enable rabbit-holing because you can go into a stack, and go into a stack...

I spent like a few days working on how to implement it correctly (and it is only correct as for now). I’ll try to document it tomorrow or something.

[experimentalfragments]

things are shaping up

managed to bind both cards & stacks to a user, they all exist in different objects on Firebase – getting the hang of denormalization. It is a lot of work but it will be much easier for a card to belong to multiple stacks and potentially a stack can have multiple collaborators.

I am taking way shorter time to do more so I think I’m getting better at Firebase and Vue

Some simple styling and transitions + simple mobile layout

Made auto-population of fields better when creating a card – it has a loading indicator, and you can select whether you want an image or a text snippet (see gif)

view prototype

[experimentalfragments]

today I implemented page loaders so there’ll be no weird loading errors or buttons not reacting because the data is still empty. Apart from that I implemented the concept of stacks belonging to users, but it is far from complete, and I look forward to the day I am good enough to refactor the code. It is like spaghetti now.

Now the user has to be signed-in in order to delete stacks/cards (woke up today to discover someone deleted all my stacks :P). 

https://learn-e4341.firebaseapp.com/

[experimentalfragments]

Metaphors for life while learning to code

It has been a few days since I updated this tumblr, mostly because the prototype was in a state of progress that I couldn’t deploy a stable version. The past few days have been both enriching and frustrating, like any learning journey or any process of making anything. 

I spent a few days just trying to get cards to display within stacks – which is easy if the cards are in the same parent stack object, but firebase recommends denormalization, and anyway I want the card instance to be available out of a stack, since cards can belong to multiple stacks. 

So because my javascript is still terrible, I have to figure out how to display two linked objects by their keys. Till now I am still not sure I am doing it the right way, and I think it is made more complicated because the Vue code is all broken down into components, so I can’t use the same Firebase.ref everywhere, so there is a lot of trying to pass data from component to component, while using one js file for functions belonging to a stack and a card each. I feel like I am repeating the same functions everywhere but maybe that is how components work? And I have to call Firebase listeners a lot. 

There are some metaphors for life while trying to do this, such as:

how we know we've leveled up in learning how to code: the moment when we realize we have to refactor most of the existing code

— Winnie Lim (@wynlim)

March 15, 2017

...which I had to do a lot the past few days, because I would do something, learn something new and then realize the previous way I have been doing it is inefficient. I look forward to the day I can refactor whatever I have now, because there must be a better way of doing this.

Life is the same, isn't it?

And then there is this

the thing where we spend the whole day debugging something only to solve it in ten minutes after a break

— Winnie Lim (@wynlim)

March 14, 2017

...which makes me wonder why do I keep repeating the same mistake? The thing with coding and life is that sometimes we fixate on something, only to discover that we've been fixating on the wrong thing; if only we could step back and look at the problem with a wider perspective.

There have been countless times I had spent like 6 hours straight trying to make something work, only to go for a swim or a meal, and the solution magically appears in my head. Sigh.

I'm quite glad to get most of what I want done for the very first micro version:

create card and stack

display cards within stack

delete card and stack

edit card

auto-populating of image using embedly when you paste a url

add/remove card to/from 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

UI messages hahaha

Everything is shitty and poorly done, there are no loading indicators and sometimes there’s weird behaviour because there are no fallbacks or loading provisioning. (And yes, I am ignoring the aesthetics.)

But it works!

I can’t imagine the work that needs to be done to bind the content to a user...

[experimentalfragments]

auto-populating works!

I spent the whole morning trying to get javascript libraries to scrape meta/open-graph tags only to discover that there’s issues running it in the browser versus a server because of cross-domain permissions. Coding is basically a lot of refreshing browsers and frustration, I think people who enjoy it (myself included) are attracted to pain. 

I resigned to using embedly (I hope I’ll never exceed 5000 urls / month for a long, long time), and it took just a short while to get it working. I made it a module so I can use it in different pages.

TLDR: 

We can now paste an URL, wait for a while (sorry haven’t added loaders) and it auto-populates the source, title and image fields!

I’m really glad I got it to work because I think the experience would be radically different if people had to enter 10 things in one card. 

In other news, I also learned to use watchers, so it calls the function only when the URL field changes. It should work both in create and edit. 

Try it!

It is going to be a while before it looks decent, I think I just want to get the basics working first. 

[experimentalfragments]

a quarter-baked app in 3 days

So I did part III of “Building a Google Keep Clone with Vue and Firebase” today, and I managed to get a barely functioning web app done, with user authentication and routing!

I think it is a huge deal for someone who has only been building jquery prototypes.

The hardest thing is to take the concepts I’ve learned and apply it to the rest of the app I want to build out, this time without being able to refer to any example code. I did manage to apply some concepts I’ve learned yesterday to today’s prototype, because the tutorial is not updated for the latest versions of Vue and Firebase – mainly using emitting of events and methods to send data from child to parent elements. Life is not easy without jquery. I’ve also learned to import the Firebase configuration as a module so it doesn’t have weird errors like (the original tutorial had no errors):

Firebase: Firebase App named '[DEFAULT]' already exists

These posts must be really boring for most people to read, but I think it is important for me to document my progress, and maybe one day I'll need to refer to these notes again.

I think the next thing I'll try to work on is to enable creation of learning paths/stacks which are going to be containers for these cards, have them in a separate object and learn (i.e. google very hard and pray) how to link them to the cards and display them linked together. It should look more like my previous prototype. I am also excited to have multiple users enabled! Would be cool to invite friends to try creating some stacks of cards.But I think there's still quite some way to go, it would be nice to figure out auto-populating of fields by just pasting the url (what Facebook does when you want to share a link), instead of having to fill in 10 fields or something.

[experimentalfragments]

learning something new is hard until it is not

So I followed part II of yesterday’s “build a google keep clone with Vue” tutorial and managed to get editing & deleting working (feel free to try it but don’t make like a million entries):  https://learn-e4341.firebaseapp.com/

The tutorial was written using older versions of Vue and Firebase, so it was frustrating at times when it simply didn’t work. I got to learn more by trying to troubleshoot the code though. The main lesson for today is learning how events work in Vue.

As someone who built clunky jquery prototypes and learned Angular enough to make prototypes for one of my previous jobs, trying to learn Vue can be equally fascinating and confusing. Fascinating because it feels so much like Angular, confusing because it is one thing to write code to display variables which is enough to make crude design prototypes; another thing to learn how to build an app properly. 

Before trying to learn Vue I had no idea what were methods, event listeners, or hooks (mounted, created, destroyed, huh??). Making a jquery prototype was just mostly $( document ).ready(function() and we’re ready to go. And then we just wrote functions that called each other and that was it. Data was always available to me, whether it was an engineer’s work or using fake JSON data, so this is the first time I’m learning asynchronous javascript properly with a cloud database. It seems like a huge leap, and I’m barely making it.

Learning to code for me, even markup, has always been like WTF WTF WTF and then one day, there’s a giant click. I remember looking at jquery the first time just to make a carousel and it felt so...hard. 

This repository of memories is serving me well, because whenever I’m about to implode I remember I used to feel like that too, but I have always gotten the hang of it. Always. Okay I remember looking at Objective-C and thinking I’ll never learn it well enough to make my own app. But I got far enough to create prototypes off it.

I’ll just try to make some incremental progress everyday. And maybe someday I’ll write a guide to explain JS syntax for non-engineers.

[experimentalfragments]

learning Vue & Firebase

Well I guess building experimental prototypes means a lot of refactoring – going backwards and forward. I decided to learn Vue properly and along the way, learn how to interact with firebase with it. So I followed this tutorial on how to make a google keep clone with vue and firebase, and adapted it to make cards instead.

Right now it is barebones and it seems I am restarting over from scratch, but it is exciting to make cards in realtime! I’m also impressed with how easy it is to deploy a firebase site. There’s a lot to figure out though, like how to organise these cards into stacks and how I want to structure the data on firebase. There’s also Pt 2 & 3 of the google keep tutorial so I’ll be trying follow along using my cards prototype. Now I am not sure whether I am going to continue with Contentful.

I’ve been working on this everyday from early morning to late afternoon...it reminds me that motivation is not a factor if it is something I’m genuinely interested in pursuing.

[experimentalfragments]

today I tried to play around with Contentful's Content Management API which allows you to create/entries. I spent a few hours thinking I did promises wrong, only to find out that it returns a different type of object compared to the Content Delivery API. I managed to edit a field and publish it through javascript yay! I think I have finally gotten the hang of promises. I became more ambitious so I tried to enable inline editing for the cards, the idea is to have an edit button on each card and clicking it would make the card editable. I got so far as to make all the fields on all cards editable upon clicking any edit button and also getting the ID of the card, but I can't figure out how to get Vue.JS to target the element that is being clicked upon without using jquery (which doesn't play well with Vue it seems). This is what happens when we don't learn something from scratch and attempt a "google-as-we-go" method. I could have continued working on the consumption experience but somehow I'm keen to get the creation experience going because I think it'll make a difference to the experience. In other news I made a unorganised feature list on trello so I can remember what I can work on in case there's a day I'm just lost.

[experimentalfragments]

Click above to see the prototype!! (It’ll look terrible on mobile for now)

Okay, today I worked until 5pm again (I really have to stop doing this because I can feel a migraine coming on). With a 2.5 hour break for a family lunch in between. I did quite a bit:

created a git repo for the prototype.

deployed it to webfaction and used a post-receive webhook for automatic deployment each time I push to git remotely.

decided to brush up my terrible javascript by doing a couple of tutorials on freecodecamp and codeacademy, mostly on API interactions. Apparently it really, really matters to really, really understand javascript syntax (methods, objects, blah). I guess it has been a miracle that I survived building javascript prototypes without truly understanding what it means. I mostly survive until callbacks.

Updated both the content and styling for the prototype. The content and the prototype has to go hand in hand, the jury is still out on the content model: I was trying to get away with *not* using images but it becomes really flat when it comes to referencing a place or a person. I somehow wish I can just enter a url and it’ll automatically grab whatever meaningful metadata according to the source of the link...but I am so far from being able to do something like that. Right now I am manually keying in the data in Contentful’s fields. 

Trying to ask myself uncomfortable questions like: must these be cards?! Can it exist as a page of links? HOW AM I EVER GOING TO GET TO LETTING PEOPLE CLONE, REARRANGE AND MERGE??

Take deep breaths and tell myself I have the rest of my life to learn and do this.

The reality is that I will only get to some clarity once I have some critical mass of content, I need to create a maze of interconnecting paths. I am not sure how far I can go with Contentful but I’ll take it as far as possible. 

[experimentalfragments]

Spruced it up a little with some css and toyed more with the data model:

In other news I spent the morning making a google form and spreadsheet to track how many creative activities I’ve done per day. I wanted to create an app, but I have like 100 apps to create at this point, so I thought: what is the best way to quickly do what I want without making everything an app. So this is the result:

Basically I have a google form that only has one input: “what did I do today”, and the spreadsheet will count how many of those per day, and I have another column tracking how many fixed habits have I completed a day, and then total up the two. Nothing fancy, I just wanted some way to visualise the creative momentum + habit momentum and see if there’s any correlation.

I want to restrict the number of hours I spend doing these things because the last time I didn’t, I ended up with a migraine for 3 days. Today is an exception, but I’ll be not working at all over the weekend.

I’m intentionally doing these daily “mundane” entries because I have found much value on going back in time to understand my thought processes, also it is a way to see how far I’ve come along. Those cards above look different enough from what I had yesterday, right?