Current Tech Stack – Nov 2019

Holly stratton jN1C3 edaro unsplash

I have recently found myself sharing again a link from Nov 2017 about some of the prototypes back then, so it become apparent I need to provide an update on the tech stack being used now within my project, without the need to dive into the code itself.

The stack is now Vue.js with Vuex connected to CouchDB via PouchDB. The resulting information is rendered in html using a number of components and standard SVG elements to create interactive views. The use of additional plug ins has been removed unless necessary, this helps keep the project inline with the GNU Licence.

The biggest change is to move to CouchDB and PouchDB this has replaced my previous use of deepstreamHub which initially looked like a great open source alternative to Google’s Firebase however the deepstreamHub which was a cloud instance of deepstream stopped working and hasn’t been updated in a long time. I made a number of attempts to run my own deepstream, which was one of the reasons for picking the platform, the open source server tech, but trying to get this running in the same way the hub version worked proved to be fruitless.

It become very apparent this was a major block in the project. I reached out to a developer friend of mine to see what else he could also locate out there, we chatted over the general project aims, realtime nature, the vue.js json style structure and had been useful within firebase, we also discussed the ownership of the data so he went off to think about what could provide the underpinning structure I wanted.

He came back with the suggestion of CouchDB and subsequently PouchDB which would also answer my need for local storage and offline capabilities. After making the changes to the project to use PouchDB and CouchDB I also was pointed towards an interesting article from ink and switch looking at the development of local first software and the concept of owning your data, in spite of the cloud, which chimed very much with my research 1 and although they seemed to rule out CouchDB, due to some concerns over conflict resolution and its ability to do realtime, I have not hit those kinds of issue and have realtime collaborative capabilities working.

A little gif showcasing nodenogg.in’s use of realtime collaboration.

Realtime couch
Header image from Unsplash
unsplash-logoEaters Collective


  1. They have very recently released PUSHPIN which is a collaborative spatial interface tool.

No log ins please!

I was keen to eliminate the need for any type of log in, as storing usernames and passwords would be problematic, this is due in part to one of the privacy design principles for nodenogg.in in that the system must only store data it needs to know and then any said data should be encrypted and decrypted to the owner of that contribution. Also this would require the process of signing up, which would drastically slow down the ability to just point a group of designers/makers to a URL and start working together, this would also rub up against one of the other principles of delightful design, signing up and saving passwords even with 1Password is not really delightful.

nodenogg.in does however need a way to identify contributions and so it uses the value attached to the device name (client id), this is decided by the contributor when they arrive at the initial URL for the first time, this is then used as the name of each document1. When you decide on a device name this creates the new document which is the data structure for contributions. Clustering contributions into documents to a device enables differences in read / write access to said data and enables the contributor to easily remove, export and single out their own contributions. Other data such as positions and connections are stored as separate documents to simplify the way to create and manage shared views.

Screenshot 2019 11 13 at 22 04 40
Screenshot 2019 11 13 at 22 05 02

I had specifically been looking at the process that was used within micro.blog and I had used to some degree before back in my PHP coding days, that of using a URL with a token appended, this URL is then emailed to you https://example.com/?mytokenstring. This would negate the need to store usernames or passwords but would require a way to email said URLs from the server, which I was not keen on, although Sendy2 could have possibly done this and has many options to not track, however this felt overly complicated for what I required.

IMG 0322B3E11A3A 1

During some of this researching I was reading around using Javascript Object Notation (JSON) Web Tokens (JWT), which led me to web storage. I soon realised that I could use web storage to store the device name within localStorage 3 so that after the initial ‘log in’ vue.js could check on any arrival if this storage was in place and redirect the visitor straight to making contributions on said instance, thus “logging” them in.

When you first visit the URL you are requested to input a “device name” this is then stored on your browsers local storage and enables you to “log in” without the need for a username and password. When you next load the page this token is looked for and if found connects you to the correct document store. Deleting the local storage would require that you enter a device name again, however specifying the same device name would basically connect you to the same document store.

Screenshot 2019 11 20 at 19 35 14
This approach worked really well in the end. In testing students could all quickly grasp the idea of naming their device and would quickly assume pseudo names. I would like some feedback on changing the wording of “device name” to something the seems to be less technical as this could be a bit of a barrier to the intuitive nature of getting up and running, I think it causes a huh moment, a pause and thus a break in user 4 flow as each time we have tested I have always said “put in a device name it can be anything you want it to be.”


  1. CouchDB’s data structure uses documents instead of tables and is formatted as Javascript Object Notation (JSON) which also easily matches vue.js’s data structure.

  2. Sendy is a self hosted email newsletter application that lets you send emails via Amazon Simple Email Service (SES).

  3. localStorage is a persistent storage kept in browsers until the user chooses to remove it

  4. I really dont like using the term user but just replacing it with human is odd, I might start using designer/maker

Milestones

I plan to post more updates to researchnot.es going forward with some more details on the project milestones as we ramp towards the end game, the schedule and thoughts. Although I highly recommend following my micro.blog discursive and specifically the PhD category, you could use NetNewsWire to do this as I document ongoing thoughts and things related to this project in much more casual and regular basis. Here the posts will be milestone documentation. The Official research documents will be on manifold.soton.ac.uk. All feedback welcome at discourse, each post here will have a specific option to pull in comments as well. Also I started using MarsEdit to post to the blog so that should make things much easier.

23rd October – Connections Test

Clint adair BW0vK FA3eg unsplash
Even with the simplest additions to nodenogg.in testing with people is crucial, I know this is obvious but with a tool that has multiuser capabilities testing on your own is impossible, which means you cant fall to often into the trap of assuming things will be used in a specific way. After the previous testing I wanted to get the ability to make connections up and running as fast as possible in nodenogg.in. So I focused on adding this ability. I then added a number of buttons and keyboard shortcuts to also speed up the process of moving in-between interactions, create, finish, connect and zooming. I took the updated version to a team of 4 to see how create nodes and create connections I could see that they did some unexpected things. Firstly I had mapped the controls to CTRL but these conflicted with the browsers default, I had been using macOS, 3 of them had Windows. So I quickly changed that to Shift, which of course introduced an issue with Capital letters triggering the shortcut by mistake, also CMD is not considered a modifier key so I couldn’t have macOS style shortcuts. I am not sure on the best way to solve this yet.

Screenshot 2019 12 03 at 14 45 00

Once I had the shortcuts working what I was not expecting was when a person went into connection mode they might then start dragging nodes around again, I was expecting them to be just interested in connecting nodes. This was easily fixed by turning off connection mode if someone started dragging icons.

Main take aways

  • Popping into the studio to quickly test a small function is very useful
  • Providing specific tasks can help direct testing
  • Need to do more ad-hoc testing

Header Photo Unsplash – unsplash-logoClint Adair

Student Testing 4th June 2019

In June nodenogg.in was first tested within a design studio setting specifically with a group of final year BA (Hons) Games Design & Art students. The basic parts of the system where in place with the realtime sync between Vuex, PouchDB and CouchDB working as I had planned.

The main workflow is to enter an instance, there was a pre-made instance1 for this testing session. To join and contribute to this instance the students had to specify a device name, this can be any name you like, students used this as a chance to create fun names and to some degree instantly make their contributions anonymous.

Screenshot 2019 11 13 at 22 04 40

In previous work using Etherpad2to do a simular process, I had found students really liked the ability to contribute with pseudo-names, they felt freer to comment and less conscious on being ‘judged’ on their contributions.

So students visited the alpha URL, typed in a “device name” and where asked to basically comment on concerns they had around there the final week. At this stage the only view of the realtime data was a single column text view updating as people typed. Most students didn’t create new notes for each idea they created longer notes and made there own bullet lists or spacing, which was interesting to see, there was no formatting options avalible to them either.

Screenshot from Nodenogg.in testing session

I had my Macbook plugged into the presentation screen as well. Students looked at there device for typing and tended to refer to my screen to see all the data appearing live. This suggests a present view could be really useful.

As students saw people typing up concerns the pace of contributions speed up as everyone become more confident, there was also moments of realisation as students released everyone in the room, teams or not had the same types of concerns and the feedback was this made them feel much more confident heading towards hand in and less “bad” about where they where at with the project. I was able to unpack some of the comments with the group aswell.

Main takeaways

  • Realtime was appreciated
  • Big Screen view mode could be added
  • Anonymous input
  • Supported cohort concerns (made students feel better)

  1. instance is the term used to denote independence, so groups can work on their own instance of data within nodenogg.in

  2. Etherpad is an open source, web-based collaborative real-time editor, allowing authors to simultaneously edit a text document, and see all of the participants’ edits in real-time, with the ability to display each author’s text in their own color.

What is project nodenoggin ?

In a recent inkubator podcast I talked to Doug Belshaw. In this episode he tried to help me unpack the question “What is project nodenoggin?” We recorded the episode shortly after I made the project code public and his series of questions and the discussion really helped me think about a few specific points. One neat question he posed was if you could describe the project with current products what would they be?

A great question as it allows you to situate your own concept quickly and helps overcome the hurdle of the unknown.

What is your PhD?

A way I have tackled this type of question when asked previously (and to some degree its the same question, but in a broader context) “What is your PhD?” I would often reply in a joking manner;

Well the worst way to describe it quickly is “it’s a better Blackboard” 1

People would then agree this would be a positive move. However it’s actually a bad answer for a number of reasons, mainly because it’s not useful as it gives completely the wrong picture. In fact it goes against the ethos of my project.

True, the project nodenoggin is a digital tool to support teaching and learning. But that’s the only connection to a product like Blackboard, so any of the other thoughts one might have about Blackboard will potentially ruin, in your mind at least, what the project is.

My project argues why the Learning Management System (LMS) is and probably has always been outdated. A key point is that the paradigm used by current tools we use is wrong and we need something else – a different paradigm.

I was also reminded this week of the app Notion and it’s about page. Please quickly visit and come back…

Ok so that’s an very awesome, fantastically illustrated, neat summary of some of the topics I am trying to tackle and they are certainly doing some good work. So now you have some clues as to why we need new types of tools. 2.

So lets get back to the main question, what is project nodenoggin?

Following the approach of ‘describe it in the context of other products’ I am going to suggest it is :

Ulysses + Deckset + Ember + Milanote + a Community of practice.

What!!! That doesn’t help!! I hear you cry. Fair point, so here is a little more of an explanation.

Ulysses

Ulysses is a Markdown 3 editor with a great user interface (UI) and great looking previews of said markdown text. All your sheets are stored in groups on the left pane and can be connected together to structure longer writing. The main UI in the middle is the markdown editor itself. The far right pane lets you add attachments, notes and meta data such as word count targets to each sheet to support your writing. You can also quickly share (save) the sheet in a rendered view, which makes it look nice. This output can be done in a variety of ways very quickly. Its a pretty complex app but the core aspect is you can take plain text4 and you can render the content to look great in a variety of outputs (which can be customised).

Deckset

Deckset uses a Markdown file to create and present slide decks. Using again a plaintext document with markdown syntax Deckset creates wonderful looking slides from templates (which can be customised) and has a fully fledged presenter mode. Think same formatting as within the main Ulysses UI (markdown) but with the output being slides and a presenter mode not documents.

Ember (from RealMacsoftware)

Ember was a macOS app (Littlesnapper 2 effectively) for quickly collecting and organising images and visuals for any project. It was pitched as a digital scrap book it was intuitive and very friendly to use, it included a built in RSS reader for connecting and viewing feeds of visual inspiration. You could add your own annotations and quickly snap (import) and share (export). It worked really well but unfortunately was sunset a number of years ago. Consequently I have included the original YouTube trailer to give you an idea of the app. I do have the application somewhere on an older Mac but haven’t dare launch it in a while.

Milanote

Milanote is a tool where you can start to arrange and organise objects into a spatial arrangement and make connections between those objects. I would define this for now as a spatial hypertext tool. There are a few other similar tools such as Tinderbox from Eastgate that do similar things, but Milanote seems to one of the more delightful looking approaches.

Community of Practice

The final piece of the puzzle is not another app but the concept of a community of practice.

Lave and Wenger (1991, p. 98) defined this as ‘a system of relationships between people, activities, and the world; developing with time.’ They argue that these relationships are essential for learning. Wenger (1998, 2000) made a link between situated practice and learning to three dimensions of ‘community’ – mutual engagement, sense of joint enterprise, and a shared repertoire of communal resources.  He proposed these as sources of learning  based on individuals doing things together, developing a sense of place, purpose and common identity and thus creating a dynamic learning environment within said community. (Roberts, 2008)

The Answer

So aspects from each of these will inform project nodenoggin. Ultimately nodenoggin will be a spatial knowledge building collaborative digital tool that points towards a new category of tools that augment learning for a community of practice, specifically design practice. It will be free (as in libre), human, humane, delightful, intuitive, shared, decentralised, digitally native and an extension to physical shared knowledge working design thinking practice!

Well that’s the answer for now. I hope it’s helpful or at least provokes some thoughts and reactions. If you find it interesting, debate on my discourse, contribute the code at my gitlab and chat with me via micro.blog.

In a follow up post I will outline how I envision workflows within this tool.


  1. Blackboard Learn (previously the Blackboard Learning Management System) is a  learning management system developed by Blackboard Inc. 

  2. If you would like more in-depth details now on why we need a new paradigm and that this is not just a new clever tool check out https://manifold.soton.ac.uk

  3. Markdown is a simple way to structure the inner workings of a document, the semantic structure of a document. Headings, Paragraphs, quotes etc. are all indicated via simple characters such as hash , angle bracket and the asterisk

  4. plaintext is highly portable and can be opened on any device that supports text, even if the markdown syntax is not understood due to the syntax being plaintext there are no issues.

WordPress Migration

I have migrated this site researchnot.es from my custom GoLang Markdown blog to wordpress, this means I am able to make more changes and keep things working. Will be ironing out broken links and images asap. Shout if anything is going very weird for you.

Edutech Data Collection

In the virtual learning environment and generally the Edutech space many digital tools have suffered from a focus on the functional, reliable and usable and have often become very feature driven. This can make them unusually unhelpful interfaces.

The LMS, the VLE, is a piece of administrative software — there’s that word “management” in there that sort of gives it away for us in the US at least — software that purports to address questions about teaching and learning but often circumscribing pedagogical possibilities. You can see its Dot Com roots too in the VLE functionality and in its interface. I mean, some VLEs still look like software from the year 2000! The VLE acts as an Internet portal to the student information system, and much like the old portals of the Dot Com era, much like AOL for example, it cautions you when you try to venture outside of it. (Watters, 2014) 1

As outlined our current tools in general do not empower teaching and learning and often support administrative process over the enhancement of student or staff experience. Educators are indeed frustrated. Design Educators even more so. However this has seen a rise in interest from technologies companies that see a new market “ripe for disruption”.

Higher education is ripe for “disruption”—to use Clayton Christensen’s theory of “disruptive innovation”—because there is a real, systemic crisis in higher education, one that offers no apparent or immanent solution. (Bady, 2013)

In a UK report, From Bricks to Clicks: The Potential of Data and Analytics in Higher Education (2016) Sarah Porter co-chair of the report2suggested that those education providers utilising technology to gather data on students could leave traditional campus-based institutions lagging behind.

Universities need to engage with data tools now so they can understand their power.(Swain, 2016)

The report argues that all UK higher education institutions should be considering using learning analytics – the measurement, collection, analysis and reporting of data about learners – to improve student support and achieve strategic goals. Such data could be used to support the recent system that ranks Universities, The Teaching Excellence Framework. The report imagines a system in which students at risk of failure can be identified from their first day at university.

In 2014 Bainbridge published in the Journal of Learning Development in Higher Education this warning about data gathering;

I make the case that digital technologies are being imposed upon formal learning environments, particularly focused within HE and often associated with the ‘student experience’ agenda. This imposition often reflects what amounts to a thoughtless approach to teaching and learning, in which pedagogy is side-lined by neo-liberal practices of efficiency and surveillance (Bainbridge, 2014)

Some of the largest tech organisations have been looking to seize the education market and advance an ambition to provide a delightful experience within Education. They also come armed with lots of data and the ability to undertake sophisticated data mining.

In 2015 Facebook founder Mark Zuckerberg announced in an open letter to his new born daughter, that part of his new philanthropic company, bankrolled by Facebook Shares was a commitment to providing personalised learning;

technology that understands how you learn best and where you need to focus. (Zuckerberg, 2015)

Facebook’s data model transformed from selling users goods to showing you what to learn and when

While Facebook may feel like a modern town square, the company determines, according to its own interests, what we see and learn (O’Neil, 2016)

Not to be outdone, Google Classroom has been adding features and growing its install base over the last few years in numerous education sectors. Recently Google have committed a further $50 million in “supporting education and economic opportunity” (Fuller, 2017). Part of this initiative is to of course sell Chromebooks into Education. Chromebooks require a Google log in where every click and action is tracked 3

Google is ground zero for a wholly new subspecies of capitalism in which profits derive from the unilateral surveillance and modification of human behaviour (Zuboff, 2016)

Microsoft in its own bid to catch up with Chromebook’s dominance and sell their own hardware into education announced Intune for Education.

Now Windows 10 devices offer the power, performance and security schools need at the same price as Chromebooks, with none of the compromises.

Windows 10 by default also reduced users privacy as set out in terms and conditions you have to agree to in order to use the device ;

We will access, disclose and preserve personal data, including your content (such as the content of your emails, other private communications or files in private folders), when we have a good faith belief that doing so is necessary to protect our customers or enforce the terms governing the use of the services (Microsoft, 2015)

Fair enough with Microsoft, you can opt out of these default settings but this requires navigating 13 different screens and a separate website.

There is clearly a demand for technology in education which is coupled with a data driven agenda driving both how we measure education quality and how we understand and support student learning. The business model of Silicon Valley is by building technology that is based on gathering as much data as possible for ad revenue.

So with such powerful data gathering systems would it not be possible too identifies a student’s chance of going to University from their first day of Primary school. Toby Young was appointed (2018) as the UK Universities watchdog and subsequently resigned under public pressure could have suggested that with this type of data those children could be offered free school ‘milk’.

My proposal is this: once this technology (genetically engineered intelligence) becomes available, why not offer it free of charge to parents on low incomes with below-average IQs? Provided there is sufficient take-up, it could help to address the problem of flat-lining inter-generational social mobility and serve as a counterweight to the tendency for the meritocratic elite to become a hereditary elite. (Young, 2015)

To provide a delightful experience a key factor is intrinsically knowing your users at any given time and supporting their work. This means intelligently understanding a variety of contexts and being as sophisticated as possible with this information whilst providing a seamless and transparent experience.

Of course the technology companies can do just this and have a wealth of overarching user experience knowledge, they have been iterating and gathering a user base at a fantastic rate. The question is should they be allowed to and if not how do we counter this? So can higher education galvanise to provide something else. Should we provide something else?

I would be keen to hear your thoughts via my discourse, embedded below.


  1. Worth noting the AOL model is exactly what Facebook currently do, Facebook is the portal to the web for a lot of users

  2. The report was created by The Higher Education Commission who are an independent body made up of leaders from the education sector, the business community and the major political parties. The Commission is funded by UPP, they design and develop high quality, affordable, student accommodation, academic infrastructure and support services. Make of that what you will.

  3. Google say they do not collect data for advertising via Google Classroom.

Prototypes Nov 2017

This blog post outlines some detail on the tools I am now using to build my prototypes, including why I am using them, and concludes with a recent app example combining Snap.svg and Vue.js to connect data in real time with deepstreamHub.

SVG + Snap.svg

The choice for using Scalable Vector Graphics (SVG) and Snap.svg is very simple, it’s to support the visualisation of the data. In my instance, this data is learning objects. (documents, links, slides etc.) The aim is to take this data into artifacts that can then be manipulated via a spatial interface. Move, connect and combine.

SVG allows the concept I have of relationships, distances and zoomability that I want to experiment with.

The SVG format by default ensures device indifference and thus scalability and visibility options on small, large and mobile screens are easier to accommodate.

SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM. – snapsvg.io

Mobile screens are everywhere alongside large format screens and projection within our teaching studios. The accessibility and usability of any tool has to be built into its defaults. Choosing good defaults is a major design consideration that I will be working hard to get right, such as by default accessible and responsive.

Vue.js

Vue.js was found after a series of conversations and previous considerations around my choices for the programming language I wished to settle on.

I initially starting my investigations with Go (golang) and then moved to Swift before ending up with Vue.js.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

I initially looked at Go (this blog is running on Go in fact) because the details I understood about the way the programming language was designed and the integration of front end and server side technology sounded great. It was also a web focussed technology and my thoughts have always focussed on the web due to its open standards and ethos. However, Google created Go and this certainly contradicts the ethical ethos the project will take on data, which I felt was problematic. Go also didn’t really progress where I had hoped in terms of front end abilities. Then finally after attending a UK golang conference, I found I was so confused with the details in part I think due to the fact Go was much further into Computer Science and large scale application design than I am or was prepared to deal with.

Another choice that started to emerge at a similar time was Swift. Again the background to the language was exciting. Another decision in this project is to be design-led and thus adhere to design principles within the manifesto. Principles such as those you can associate with the design ethos at Apple. Apple created Swift for its own development purposes and could perhaps thus help support this aim. Apple have good, detailed Human Interface Guidelines and make a number of design affordances I certainly consider as best practice. So much like with Go I played and built a few Swift prototypes both for macOS and iOS which in fact went very well. I also invested in the latest Paintcode app which can take UI elements directly into the latest Swift Code using a Sketch app like interface.

However, Swift was not without a number of concerns. Although Swift was made open source, the platform for deployment iOS and macOS is not open. At some point, I had convinced myself that the implementation of my tool on macOS and iOS would work as an exemplar of my manifesto. And I felt that as my exemplar used a design-led platform, iOS and macOS, others could just follow this lead and read the manifesto for conversion to other platforms.

However another major issue arose in our studios, the fact that many students I would work with to test my tool use Windows and Android in general. So, my ability to test my tool, my exemplar, in the live education studio would be very limited if built in Swift. This was a bad decision: the project is human centred and making my tool much more intuitive and delightful but not being able to robustly test choices in depth would in the end hamper my design decisions.

The final nail in the Swift coffin was the rejection 1 from the App Store of my Swift App “SaveIT”.

This was a clear indication that the gate keeper of the App Store, Apple, may have future issues with my design choices and may not leave me free to dictate “delightful” design choices, another area my research is focussed on investigating and defining.

This further cemented the fact I hadn’t reconciled my desire for an open project and open platform and so the web came calling back. I know and have much more experience on web tech and coding than I do in “real programming”. And alongside a host of websites, web based tools I have made numerous web “apps”. Why had I not stayed on this course!

However, I was wary, as web apps are problematic; at the very least they are not native. I have tried in the past most known tools, like Titanium and Apache Cordova but was never that happy with them. They also tended to limit design to mobile and try to ape a native app and thus have structures and features that would be odd and possibly inaccessible on a desktop browser. I did however keep thinking about Javascript. But I knew I didn’t want JQuery or JQuery Mobile, I’d been there before.

So, I started scouting around for newer web tech with my project in mind, at some point in discussing a number of the above processes and choices it was recommended I look at Angular and React. Both had moved on since I had last viewed them and had matured significantly. I was not totally sure but a good test for me is “how quick can I get something up and running…”

To be brutally honest I was totally confused and got nowhere fast. Using Angular and React seemed a much higher barrier to entry than Swift or even Go had been. Yet in this futile attempt and scouting exercise I in fact stumbled into Vue.js and as an aside (for now) Electron.

Vue.js was so quick to understand and the more I read reviews and discussed it the more excited I became. My previous blog post which showed a markdown editor I built from a Vue.js example was so fast to get up and running and tweakable I was pleasantly surprised. This also revealed to me that the data could be formatted towards JSON. This is major. If my tool is to be decentralised again dictated by my manifesto I needed a highly portable, lightweight data structure. My previous considerations of local sync with MYSQL via blockchain style methods such as Syncthing or Etherium disappeared as a concern. This is a complicated technology and with Swift I had even considered to just not implement the blockchain part of my exemplar hoping someone might fill that gap as time went on, another poor choice. Go had at least offered flat data files as a nice light weight option and I did get 3 party sync working with IPFS but it was far from easy.

Vue.js just started to make total sense.

  • Web Tech (HTML,CSS, JS)
  • Easy to use
  • JSON style Data

A number of things lined up and so then I looked at how I could network the JSON style data from Vue.js across devices, which is when I located deepstreamHub.

next generation realtime deepstreamHub enables enterprises to sync persistent data between millions of devices within milliseconds

This sounded good. The data was also in JSON and there was another great tutorial on Vue.js showing how to connect to deepstreamHub. I hooked up my Vue.js app to the deepstreamHub and was able again quickly to take my previous single device markdown prototype and store and sync the data with deepstreamHub across multiple devices!

deepstream is an open source server inspired by concepts behind financial trading technology.

Although I was testing on the deepstreamHub cloud and it just worked, knowing that deepstream itself was also open source and could run on a standard web server added to the excitement.

Finally the Demo

I know I need to experiment with a spatial interface. My research into spatial hypertext and other conversations, at places like The Future of Text conference, have solidified this. With the initial simple demo up and running it became obvious that I should be able to take position data from objects and store this as JSON in real time with Vue.js and deepstreamHub.

So this brings us right back to SVG and Snap.svg as I was able to use this with Vue.js to create an artefact that I could drag around.2.

I could then take the position data of this SVG object into deepstreamHub.

But not only the position for the artefact it could contain the owner, the title, the actual markdown text of the artefact and in fact any associated connections, relationships or tags that could be needed to make this a truly networkable learning object. I could even add data to the object after if there was a need to add in additional functions.

I am pretty excited about getting to where I am with a practical demo this quickly around some of my initial ideas. However, I did get a little stuck in the final pieces of the data puzzle and may need to rethink exactly how best to store and real time sync the data but I have the tools that I believe will offer the answer, so long as my skills can match up to the challenge. The good news is that so far, that seems to be the case!

Please join the conversation about this below and feel free to examine all my code here.

A lot of the thinking work I undertake for all of this is recorded as scribbles in OneNote and via conversations with others. Here are some of the more recent scribbles to give you a little sneak peek into this part of the process.


  1. Why was SaveIT Rejected?

    SaveIT is a very simple app designed to allow you to really quickly capture thoughts. The app uses iOS and Mac OS Reminders as the default store to capture your ideas and then you can do what you like with them.

    Use SaveIT to capture thoughts in a fast none intrusive and delightful manner.

    Apple Rejected my app based on the guidelines 4.2 which in essence is;

    Your app should include features, content, and UI that elevate it beyond a repackaged website. If your app is not particularly useful, unique, or “app-like,” it doesn’t belong on the App Store. – Apple Guidelines

    The rejection email asked for a new app concept.

    Design – 4.2

    We found that the usefulness of your app is limited by the minimal amount of content or features it includes.

    Next Steps

    We encourage you to review your app concept and incorporate different content and features that are in compliance with the App Store Review Guidelines. – Apple

    I replied to justify my design choices.

    Please can you reconsider my app. The app is minimal yes however this is a major design decision. The concept is based on the experience of when ideas come to mind or you are prompted with something you need to do later. I want and I believe others do need a distraction free way to get this thought / to do into a reliable system that you can process later. This concept is based on the “Get Things Done” principle to get these things out of your head and into a system.

    The Reminders app on iOS and Mac does provide a similar function. However there are two distractions. Instantly one is the list of other things you have in the system. This cognitively shouldn’t be under estimated, and may distract the thought you are having and the same action in Reminders versus Save It is 3 steps not 1. There is an app Later within the store that provides a similar ethos however it uses a proprietary storage system where as I felt that using the iCloud eco system made much more sense. So I would also argue that their app provides less functionality as it requires a 3rd party subscription.

    I could not have made this as a web app to connect to the iCloud calendar store.

    The interface is designed to be unobtrusive and provide the user with a moment of delight through simplification.

    This was met with a shorter rejection.

    In order for us to continue the review of your app, it would be appropriate to consider the 4.2 App Store Review guideline and resubmit a new binary. – Apple

    Not so good.

  2. Accessible web player from http://ind.ie

Markdown Prototype v0.4

Early days

Below is an image from my Marvel prototype I was playing with at the end of last academic term followed by a very early prototype built this past week in vue.js around the markdown entry system my app will need.

Accessible web player from http://ind.ie