Keeping a record

Travis yewell F B7kWlkxDQ unsplash
unsplash-logoPhoto by Travis Yewell

After reviewing some of my explanation videos I realised that I needed to keep a more accurate record of what where the updates to and when they actually occurred. This would help mr to use the clips as reference material to any testing that takes place, so I can see which version was used within testing but also it would enable me ton look back at the project and review and record why changes had been made. My previous Youtube Video’s had been a little haphazard in this regard and I needed a more logical system.

I was listening to Accidental tech podcast and they mentioned the semantic versioning system to better describe updates, so I applied this to my versioning system. I also found some of the built in features within Open Broadcast Studio to stamp on screen the date and time. I am still using the same process to stream the recording live to Twitch and afterwards download the video to be upload to my YouTube channel, there is a seven day window to download from Twitch, which I do need to be aware of. Brent Simmons developer of NetNewsWire whose contribution notes I have taken great inspiration from also mentioned adding a letter to the build to signify its state of play as well, so all versions currently end with the letter d for development. For now the alpha build however is also a mirror of the dev build.

These small changes I hope will help provide a usable level of the documentation of the thoughts and ideas from each version and I expect the explainer videos to get shorter as I just cover updates and why those choices have been made.


  • development is at
  • alpha is at
  • beta is at
  • release will be at

Main take aways

  • Need to automate build process to each URL asap
  • Need to work on safe guarding data in beta and alpha
  • Being organised is important !
  • Need to be consistent (as much as possible)

Student Testing – 4th June 2019

Science in hd lW9W3rQ cEI unsplash

unsplash-logoScience in HD

In June 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 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

  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.

The mis-application of learning technologies within the context of Design Studio-led education

This document is also on my Manifold instance here

Research Problem

Despite the widespread application of digital technologies in higher education there is scant evidence to suggest that these have had a significant impact on student learning. (Bainbridge, 2014, p1)

Educational institutions spend a significant proportion of their budget on learning technologies each year. However, the underlying metaphor on which this technology is based continues to be the filing system.

These technologies often have sharing features added as a ‘bolt-on’ to core functionality, rather than being built for project-based learning. They are designed to be separate from, rather than integrated within, learning spaces.

Sharing is probably the most basic characteristic of education: education is sharing knowledge, insights and information with others, upon which new knowledge, skills, ideas and understanding can be built. (Open Education Consortium,

Some thinkers on learning technologies (Watters, 2014:22) talk of the Learning Management System (‘LMS’) as being a piece of administrative software which “purports to address questions about teaching and learning but often circumscribes pedagogical possibilities”. As Downes (2007) notes, the LMS can over-structure the learning experience, conflicting with research and evidence about how students learn.

Design education is, in particular, a very visual field with a requirement for spatial manipulation. Current learning technologies on offer do not augment the physical studio experience, and push educators and students towards commercial, more generic offerings without a pedagogical underpinning.

Students are used to a more ‘delightful’ experience with this kind of software, as evidenced by the quotations below:

Slack is useful for quick & easy non-distractive communication. It is simple to navigate and provides a direct platform in which to contact peers and lecturers, creating channels and direct messaging groups is ideal for a more tactile approach to a discussion. (link)

Onenote is great as everyone can have their own section to put their own information/images on it when working together.

Etherpad definitely proved helpful as everyone put down questions, films, books and other information that has now given me more starting points to research.

Research Proposition

Project-based learning involves collaboration in physical spaces that often cannot be replicated in digital spaces. Through the creation of a spatial interface, engagement with materials and other learners becomes more dynamic and fluid.

There is a dichotomy between tools that are personally owned and single-user by default, and Learning Management Systems provided by educational institutions. The latter offer top-down static file repository functionality and fixed courses, rather than features that support project-based learning.

As a result, this research will begin by examining the fundamental concepts of spatial design, including mind-mapping and concept mapping. It will consider the influence of the design paradigms provided by Xerox’s PARC institute and investigate the legacy of Human-Computer Interaction (HCI) pioneers such as JCR Linklider, Ivan Sutherland, Ted Nelson, Douglas Englebert, Seymour Papert and Alan Kay.

Some information must be presented simultaneously to all the men, preferably on a common grid, to coordinate their actions.” (Licklider, 1960, p9)

Figure 1: Example Sketch of a spatial interface for learning objects

A spatial interface allows users to take advantage of their visual memory and pattern recognition.” (Shippman F M, Marshall C, 1999)

A number of education theories have been looked at and Connectivism (Siemens, 2004) will be specifically used in consideration around the tool itself

Research Question

Can the spatial elements of a Design Studio be replicated in a digital learning environment to enhance deep engagement and collaboration?


The project will create an interface which will be tested with a group of students over a five week project that will run twice in 2020 and 2021. The tool and the project will be evaluated by measuring the staff and student experience through observation, surveys and outputs.

The entire project process will be captured as it progresses in an open and free software approach and documented at the locations below. The systematic packaging of this process and the application of Design thinking and human centered design will also reveal tool building processes and culminate in a manifesto to design these types of new design led digital tools for enhancing project-based design education.

Current output locations


  • Feb – April – BuildingMVP
  • April – May – TESTING with Year 2/3
  • May – June – ITERATE
  • June – Sept – REFINE
  • Sept – Oct – Testing with Year 2/3
  • Oct – Nov – ITERATE
  • Nov – Dec – REFINE


  • Jan – Feb – REFINE
  • Feb 2020 – Use with specific board project year 1 Games Design Students
  • Feb – March – EVALUATE Testing
  • March – June – ITERATE
  • June – Sept – REFINE
  • Sept – Oct – Testing with Year 2/3
  • Oct – Nov – ITERATE
  • Nov – Dec – REFINE


  • Jan – Feb – Use again with board project year 1 Games Design Students
  • March – July – WRITEUP
  • August – Oct – HAND IN


Bainbridge, A. (2014), Digital technology, human world making and the avoidance of learning. Journal of Learning Development in Higher Education: Special Edition: Digital Technologies, p1.

Licklider, J.C.R. (1960). Man-Computer Symbiosis. IRE Transactions on Human Factors in Electronics HFE-1, pp.4–11.

Open Education Consortium, About Page, [Online], Available at: , [Accessed December 15, 2018].

Shippman F M, Marshall C. (1999), Spatial Hypertext: An Alternative to Navigational and Semantic Links , [Online], Available at: , [Accessed December 15, 2018].

eLearn 2019 Presentaion

My proposal for eLearn 2019 was accepted and I was able to present to a good number of academics and students from across the UK. The conference took place at the University of Southampton, Avenue Campus so it was not far for me to go and I made a number of great contacts within Humanities and staff from other Universities that gave positive comment on the presentation.

You can watch the video of my short talk about my PhD work in progress from eLearn 19 here

Screenshot 2020 01 09 at 00 58 53

The full slide deck can also be reviewed below.1

  1. Note the link at the start of the deck was for an etherpad that people could use to comment on during the session. My self hosted etherpad install is sometimes offline

MPhil to PhD upgrade

As part of the process of a PhD you have to upgrade from the MPhil level to the PhD part. To do so you submit documentation internally. This is then reviewed by your supervisors and in my case two additional academics, I had two as my PhD is within WebScience and thus crosses disciplines. Ian Dawson was my Design/Art internal external and Les Carr was my WebScience internal external. After the documentation has been reviewed you present to the panel of these academics and take questions from the internal external academics, your own supervisors only observe. There is a break and then the internal external academics come back with approval, recommendations or rejection.

Here is the full document I submitted in December all housed on my Manifold instance and below are the set of slides I presented.

I didn’t record my presentation, annoyingly, I had completely planned to but I forgot with the nerves.

The presentation takes the format of a viva, and this was one of the most stressful moments in my life as an academic. I was ‘grilled’ in a number of ways and it was really hard to take some of the criticism. I will not go into detail here however on reflection the critique was well founded, although I still feel a number of my points where not really heard or understood, my presentation was praised as to saving the day and actually making things much clearer to the internal externals, but due to the specific issues they had I didn’t get much chance to explain all the detail as I had to defend and explain some simple concerns. I was scored with recommendations. At the end there was overall excitement about the project but this was certainly held back until after the official paperwork was signed!

I am of course very worried about my final viva which I hope to be Summer 2021. My supervisors however said that this upgrade one had really helped them solidify the cross disciplinary nature of my project and gave them some thoughts on how to package up the written work along side the practical stuff. I must say it will be great to just get on with making next which is what is the encouragement, once I am allowed to progress.

In the end I had some recommendations which ended up in the form of this document to be allowed to progress.

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

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

  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.

eLearn 2019 Conference Presentation Application

Design Led Learning Environments – Spatial Hypertext

  • Procter, Adam
  • Winchester School of Art, University of Southampton


Working within the creative industries knowledge economy you cannot work within a niche closed process but instead you must have the ability to engage and address complex and diverse problems. This process is supported by networking and combining knowledge. Current managed learning environments (think Blackboard) are silos that as evidence suggests provides nothing more than a digital repository. Many are closed, off the shelf products that are inherently inflexible and not adaptable to the needs of future knowledge workers. This presentation will showcase an early prototype platform of a new type of virtual learning environment as part of my practice based web science PhD. This platform has been designed to be open, delightful and built around open sharing and collaborative working practice. The platform is being designed specifically to extend the design thinking processes and knowledge production across both the physical and digital spaces in a collaborative manner. Both the platform and interface will be native to digital culture built on the open web, democratic, human driven, iterative and adaptable. Knowledge production has shifted from being framed as a closed system to being an open system, one that is networked, responsive and expanding. (Vaughan, 2017) An open platform to extend and augment physical design studio practices and enhance this network of creative investigation. This collaborative digital platform is not concerned with data mining and learning analytics but truly extends a network of learning and could provide an excellent digital space for knowledge building. The platform is a visualised and spatial user interface to allow the creation of visible connections, clusters, taxonomy and even serendipity to provide an uniquely innovative, accessible and delightful way to create and decode the wealth of knowledge we now have, this type of intuitive representation of knowledge will empower individuals to connect ideas and build new knowledge within their own communities of practice and move seamlessly from the physical design studio to the digital network. The barrier between physical and digital is disappearing as we become augmented humans, cyborgs, the transformative nature of this augmentation is only just starting. “As knowledge increases amongst mankind, and transactions multiply, it becomes more and more desirable to abbreviate and facilitate the modes of conveying information from one person to another, and from one individual to many.” (Playfair, 1786)

Category: Oral Presentation

Keywords: Spatial, interface, knowledge objects, networked learning
Themes: please select a theme from the conference sub-themes list below by deleting as appropriate.

Area: innovative online learning designs or environments

WordPress Migration

I have migrated this site 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. –

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