‘Living on’ nodenogg.in

Article published on: Apr 17th, 2020

Updated on: Jun 3rd, 2020

Estimated Reading Time: 2 minutes

Peter secan kKXBw9Exn30 unsplash

unsplash-logoPeter Secan

As nodenogg.in progresses, I keep seeing flashes of how it would help to organise, or be used in, my own thinking practices, and so I occasionally get frustrated with the speed at which I’m able to advance its capabilities. Still, I have to remind myself that I’m not running a research lab, and that I can only devote so much time to the project in the part-time allocation I have.

Whenever I discuss a concept or an approach to interacting with the nodenogg.in data I know its possible and could be fun yet I cant program as fast as I want, I have never professed to be a coder and whenever asked I always advise I’m not a coder I’m a hacker.1

50% of computer programming is trial and error, the other 50% is copy and paste. – Pawan Sharma

Testing of version 0.0.X with students has been excellent, and the next phase of 0.X.X is all about incorporating the ideas generated and feedback received from that version. So the jump in the semantic versioning as a minor update is in part due to the need to rewrite the code from scratch.

In order to take advantage of the realisation that I could–and should–build with proper semantic HTML in mind, as well as all of the Vue.js learning I’d personally undertaken coupled with a number of excellent conversations with Toby, I felt that a complete re-write was very necessary. This has instantly started bearing a lot of good fruit, as can be seen in these progress videos:

I know that the sooner I can start using nodenogg.in for my own thinking, the more the project will advance with regard to the core principles of delight, whimsy and serendipity.

Of course, the goal is to test this within the design studio thinking process as soon as possible, although the COVID-19 lockdown will negate that to some degree for a while!

Thinking about testing, I was reminded of Ken Kocienda’s book Creative Selection. He was an engineer at Apple who worked on creating Safari for macOS and the touch keyboard for what would become the iPhone (the ‘Purple’ project). It was a revolutionary piece of touch design that could, if gone awry, derail the whole project, as the Apple Newton’s hand recognition software had. When describing working on ‘Purple’, Kocienda mentioned the idea of ‘living on’: the day-to-day routine of using in-progress software as if it were a real product.2

So, as part of our new weekly chats, Toby and I have set aside some drivers to get us ‘living on’ nodenogg.in as soon as possible, which I hope will eventually lead to more people testing the alpha release. Regarding how we’re “living on”, I’m trying to keep the list of drivers as short as possible, as the intent is to release often and iterate. We don’t want to fail quickly, but this is a human-centred design process and thus the more humans involved, the better.

Keep an eye on the main site for the latest alpha alpha build, and please do give any thoughts or feedback any thoughts via the discourse below.

Main take aways

  • ‘living on’ nodenogg.in asap is going to key to pushing forward delightful design choices.
  • Note that trusting software is also important, this needs to be considered.
  • Will people put data into an alpha app (see point 2)

  1. I also really like the term tinkering

  2. Other technology organisations have tended to use the terrible term ‘dogfooding’ for this concept.

Emoji Reactions

Article published on: Apr 7th, 2020

Updated on: Apr 18th, 2020

Estimated Reading Time: < 1 minute

Bernard hermant bSpqe48INMg unsplash

unsplash-logoBernard Hermant

✌️Who doesn’t love emoji ❤️?

These funky Unicode characters were all but unknown until the last decade but long before European embraced the Japanese Emoji. Many of us used a serious a keyboard characters to add emotion to our text messages this was my preferred smile was a semi colon followed the right parentheses 🙂 (which is now auto converted on most systems to the emoji icon) but many used the longer version to include a nose :-). Pictograms have a long history themselves and this blog post would be amiss if I didn’t include some of the work of Otl Aicher.

Otl Aicher was a german Graphic Designer and co-founder of the Ulm Design School. His work on designing the 1972 summer Olympic design language via pictograms for representation and signage has gone on the influence design across the world. These pictograms provide short hand visual representations of more complex information.1

Pictograms provide a shorthand and emojis add in the elements of emotion, play and delight. The history of emoji is embedded in digital technology

We now see emoji reactions being added to numerous platforms as a button to encourage the use of them as a response, some of this is in response to the Like button being initially universally annoying when someone posted of a tragic situation and you did know what to say all you could do to show support was to like the post. So gradually services like Facebook added more options.

In previous testing using etherpad we would use emoji to up vote ideas and comments on presentations.


Article incomplete…

Main take aways

  • ITEM 1
  • ITEM 2

  1. I talk more about Data Visualisation in a previous article

Why PouchDB and CouchDB?

Article published on: Jan 10th, 2020

Updated on: Apr 18th, 2020

Estimated Reading Time: 2 minutes

Inside weather ej3UoXYMaRI unsplash

Inside Weather

Once I was alerted to the fact that CouchDB exsited I was really pleased with how it would fit into the tech stack. Firstly it is Apache Licensed. It is web tech focussed with a focus on local data and although you can run it on a server, they also have a macOS application which means you can run the whole set up with local connections only, this connection to design principles of data ownwership. A group of makers / designers can just “spin up” and instance of nodenogg.in and there is no need for a centralised source of the data, it is stored on all machines with one of the devices managing sync. The data structure is JSON which is a great structure and also human readable, along with being able to almost mirror Vue data structures. I installed CouchDB on a centOS box very easily, the other thing that was great was the document model over tables structure model for the data meaning that you can in fact build the schema as you go, this meant that my first few attempts at data structure wouldn’t cause headaches as this could also interate over time.

PouchDB is a javascript implementation to connect to a CouchDB and the structure as they put it is that its the same as CouchDB. I was also able to quickly use the docs to get a Vue application talking to CouchDB. The main issues for me was simply understanding where to import the library within Vue, there was a bit of time spent on Stack overflow and googling the ways to import libraries, I had some exprience with this previously in my other Vue expreiments but having also moved to use Vue cli via Vue ui this was much easier to do with the web interface to find and add to project. I made a little video about the basic set up of my Vue projects at YouTube.

PouchDB is an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser.

PouchDB was created to help web developers build applications that work as well offline as they do online.

It enables applications to store data locally while offline, then synchronise it with CouchDB and compatible servers when the application is back online, keeping the user’s data in sync no matter where they next login.

Article incomplete…

Main take aways

    Mini Browsers

    Article published on: Jan 9th, 2020

    Updated on: Apr 18th, 2020

    Estimated Reading Time: < 1 minute

    Edu grande 0vY082Un2pk unsplash

    unsplash-logoEdu Grande

    Mini Browsers are everywhere. This 24ways article goes into much more detail on what they are and how to create them so I wont cover that ground.

    Article incomplete

    Main take aways

    • Providing web app expriences that delight involves a lot.
    • I think there is a need for an updated html boilerplate.

    Keyboard shortcuts

    Article published on: Jan 9th, 2020

    Updated on: Apr 17th, 2020

    Estimated Reading Time: 4 minutes

    Juan gomez kt wA0GDFq8 unsplash

    unsplash-logoJuan Gomez

    I knew keyboard shortcuts would always be a really important feature for nodenogg.in, I am a big fan of keyboard shortcuts, maybe that’s due to my macOS usage which always seemed to have a good focus on shortcuts and productivity, much more than Windows ever did. For me the main issue to consider with getting ideas out of your head and into any system is reducing cognitive loads.1.

    Let’s take the post it note as the often default starting point for a design thinking process and as it becomes clearer to me that nodenogg.in is a co-creation2 tool, this mode of quick input followed by then arranging, its becomes more evident the starting mode of rapid entry will benefit from shortcuts the most.3

    Some steps of process – post its

    • Get the system out of the way, Great ideas really fly when in ‘flow’ state.
      Post it notes are a good example to follow.
    • The barrier to use is as low as possible.
      • Post its have an inbuilt character limit4
      • They start as a collection tool.
      • And then can become a spatial tool.

    Keyboard shortcuts would help address this process. However picking the right ones is not as easy as it seems.

    The process is never that linear when making something like nodenogg.in I am just chipping away at little bits of core functionality and I initially saw the needful keyboard shortcuts to allow quick connection and connection delete mode.

    I was mainly thinking about the fact that after one connection was made this mode was turned off, so this would allow 2 handed control of the spatial view using the keyboard and mouse together to rapidly connect nodes and it would help me learn the necessary code for implementing keyboard shortcuts in Vue and Javascript. It was after this that the idea for quick creation would help with the cognitive load concerns I had when testing the initial input mode where students would open one node and just type only into this, the act of finishing and creating via buttons was way to slow and distracting.

    So a purely practical starting point, I decided a good rule of thumb would be to follow the path a person is already familiar with so this would be to use well known shortcuts. On macOS these use the Cmd key followed by a letter so for example Cmd + n would mean new and this is what all macOS apps follow as convention, however to create these and it turns out that the Cmd key is apparently not considered a modifier key or at least it seems now that it is the Meta key which maps to cmd (macOS) and the windows key (Windows). But as nodenogg.in runs in a browser, I would need to disable any default behaviour of the shortcuts, this would be wrong, taking over these commands just because a person is at that specific URL would not be delightful.

    So I proceeded to map to the Ctrl Key, I thought initially that I would use the keys c and v although usually used for Copy and Paste I felt that it might map to faster human interactions,
    this worked well initially in terms of muscle memory, aka my hands where often use to these two commands. A bug then appearing at this stage where I would end up editing the previous data entry, it took me a while to realise what was causing this, I had set the editor text entry to get focus on opening so you could start typing straight away however now the keyboard shortcut was so fast that the editor “heard” the shortcut and started editing the previous entry as the new entry was not yet ready, clicking the button and typing was fine but the shortcut messed this up, so what I did was add a slight delay on the focus so the system was ready for input at the right time, it was a nice distraction and fun hack to deploy.

    Of course I went to test on Windows and stupidly realised that the default key for Windows is Ctrl and so on windows these shortcuts would be conflicting. I next decided to move to the Shift key, why I did this before option or alt I am not sure now. I also decided to stick to c and v and that people would grow accustomed to this and then added z and x as Create and Close, next to c and v as Connections and Delete Connections. Of course I hadn’t considered what would happen when you typed a Capital in the note editor panel, so we did a bit of testing with the rule to not use capitals, if you did use a capital the system would try to perform said shortcuts which would usually close the editor. I also tried a new approach as I wanted to have a universal approach with a modifier key and swapped to Ctrl + 1 /2/3/4 again not considering on Windows this switches tabs in a browser. I then moved to the Option or Alt key. Adding Option plus and minus to zoom in was rather satisfying as it helped resolved the boundaries issue where you could drag something off the edge and quickly added the infinite canvas function I wanted, small win which I hadn’t even considered, this involved a little SVG canvas research.


    I might revisit META + Enter to close the window however I would need to work out how to target windows with another shortcut and this would mean moving between OS would have different actions where as in fact sticking to a universal action Option + Return could make this more useful not only for the people using nodenogg.in but also in explaining how to use nodenogg.in

    Main take aways

    • Sometimes things you think are simple take time.
    • Keep up on the blog (more than you think) !
    • Try and keep notes on even small changes as recalling exact details was hard
    • Git versioning in gitlab can show progress (obviously) maybe something to visualise for PhD write up too.

    1. TO REVIEW: Kalyuga, S. (2015) Instructional guidance: A cognitive load perspective. Charlotte, NC: IAP Information Age Publishing. Available at: http://search.ebscohost.com/login.aspx?direct=true&db=psyh&AN=2015-39583-000&site=eds-live (Accessed: 25 December 2019).

    2. designers and developers will need to learn to co-create cooperatively. This is not the same as collaboration, where small or large teams work on a certain product or outcome. Cooperative work involves multiple individuals and groups working within a common environment or infrastructure, and helping support that network or infrastructure for mutual benefit, while working on different objectives or outcomes.

      Downes, S. (2019). A look at the future of open educational resources. International Journal of Open Educational Resources, Vol. (2).https://www.ijoer.org/a-look-at-the-future-of-open-educational-resources/

    3. A new bucket mode joins the spatial mode as shown in version 0.0.27d, still to be tested and tweaked.

    4. Depending on your hand writing size

    Microcast – Thought Shrapnel

    Article published on: Jan 8th, 2020

    Updated on: Apr 18th, 2020

    Estimated Reading Time: < 1 minute

    Austin distel VCFxt2yT1eQ unsplash
    unsplash-logoAustin Distel

    This morning I was fortunate for Doug Belshaw to give me some time on his microcast thought shrapnel to discuss and talk about the latest iteration of nodenogg.in and the practice based PhD it sits within. Please do take a listen and of course feedback welcome.

    Main take aways

    • Always good to explain what you are doing.
    • Want to do more podcasts talking about project in 2020
    • Found some more bugs

    Collaboration versus Co-creation

    Article published on: Dec 19th, 2019

    Updated on: Apr 18th, 2020

    Estimated Reading Time: < 1 minute

    Kaleidico 26MJGnCM0Wc unsplash


    There are plenty of tools that are designed for collaboration and remote work. However this is not the same as co-creation.

    designers and developers will need to learn to co-create cooperatively. This is not the same as collaboration, where small or large teams work on a certain product or outcome. Cooperative work involves multiple individuals and groups working within a common environment or infrastructure, and helping support that network or infrastructure for mutual benefit, while working on different objectives or outcomes.

    • Downes, S. (2019). A look at the future of open educational resources. International Journal of Open Educational Resources, Vol. (2).https://www.ijoer.org/a-look-at-the-future-of-open-educational-resources/

    Article incomplete

    Main take aways

    • Item1
    • Item2

    Networked Making

    Article published on: Dec 17th, 2019

    Updated on: Apr 16th, 2020

    Estimated Reading Time: < 1 minute

    Marvin meyer SYTO3xs06fU unsplash
    unsplash-logoMarvin Meyer

    nodenogg.in allows you to create and edit notes and attachments with a group of designers / makers in a shared digital space, these notes and attachments can be placed visually in a spatial arrangement and connections draw between them to provide cluster and connected relevance to a problem or research theme you are trying to investigate.

    Web 1920  3 2x

    nodenogg.in is not an online collaborative tool but is being designed to augment the physical design studio and should be used together allowing you to capture collectively the teams thought and research process. The tool is design to support co-creation of resources and thoughts using a design thinking approach. The main initial application is to support project based learning, within a design school enviroment.

    IMG 9284

    All notes and attachments sync to all devices, so once the design session is completed all parties have local copies of the distributed data.

    nodenogg.in was created with design education in mind. If you would like to get involved is using and even contributing visit https://discourse.adamprocter.co.uk to join the discussions and find out more.

    DEWG Testing – 5th Dec

    Article published on: Dec 7th, 2019

    Updated on: Apr 16th, 2020

    Estimated Reading Time: 3 minutes

    Kelly sikkema 1 RZL8BGBM unsplash

    unsplash-logoPhoto by Kelly Sikkema

    I am fortunate to be a member of the Digital Education Working Group (DEWG) at the University of Southampton, although I wont go into too much detail, its worth sketching out the group a little, we are hoping to become a committee one day.

    The group comprises of individuals from across the University in Academic, Research and Professional service roles who have a keen interest and background in technology and learning. I tend to be there to lean on the Humanities side and get us to think about the people using the technology and how we leverage and delight the people in our organisation to better deliver world class education. We as a group try (very hard) not to get sidelined by what technology we should use or deploy but consider the overarching aims of empowerment through technology and how to better support our staff and ultimately our students as they enter a constantly networked and digitally connected world, no matter their core discipline of study. So I tend to be talking about digital literacies and the pitfalls of navigating our information society.

    We meet once a month and initially our work has been quiet reactionary, with thoughts and reflections on the roll out of services like Office 365 and one larger piece of work was providing recommendations to the University Education Committee on what they must be doing to meet the new web accessibility laws as they come into effect for public organisations within the UK.

    However our main task has been to discuss and create a vision for Digital Education at the University of Southampton which would connect to and inform the Universities Education Strategy, we have debated a lot about the word digital as we think everything is digital and this type of thinking should just be inside the Education Strategy however that is something that may take a while to change. For now we need a vision and some factors around what makes a great educator at the University of Southampton.

    So at the last meeting after an update on some of the accessibility work being carried out internally to make our Blackboard Inc. installation more inclusive we where tasked to use either post it notes or a Padlet in groups of 3 to revisit the vision and connected topic, our group was assigned the topic educator.

    It dawned on me why use Padlet when we could use nodenogg.in instead, this would also test my theory around being able to “spin up” an instance easily and to instantly work on an idea in a group. I managed to persuade the group quickly to not use Padlet and test nodenogg.in. Within less than a minute we where all hooked up to a new instance, by following my simple guidance. We started working on co-creating some thoughts on the task at hand. The only blip was Microsoft Edge on a Dell XPS (with touch screen) seemed to have some issues creating or joining an instance, but quickly switching to Chrome seemed to resolve this. Also the Dell machine seemed to have issues with the double clicking to edit as well, which didn’t really matter for the task at hand but was odd. The other member of the group seemed to instantly understand how to use nodenogg.in and very little guidance was needed. I also later made a special direct link to this instance and shared it with the whole digital education working group. We shall see whether anyone else adds to or creates more connections remotely. One of the questions was why use that when we have a Padlet, my initial answer was because nodenogg.in is Free Open Source Software (FOSS), which quickly resolved the argument.

    As an aside I noting afterwards Padlet’s privacy policy which we would be agreeing to just by using it. Here is a quick peak at some high level points it makes, some designed to improve the service but most ultimately connected to adverts. 1

    So by choosing nodenogg.in we kept all the data to ourselves and this was all stored locally on the laptops in the room, this got some approved nodding in the group and we didn’t inadvertently share any of our device details, IP address or provide data for 3rd party advertisers. A small win for nodenogg.in I would say.

    Screenshot 2019 12 06 at 18 37 34

    Main take aways

    • Being able to quick create a shared (private) digital space was as easy asa I hoped
    • Shared digital space inclusive by design, you didnt need an account or must use ‘twitter’
    • Very little explanation was needed, can I / do I need to make thiz zero
    • Edge browser needs checking
    • Edit mode needs checking

      • track behaviour on Padlet
      • show third-party ads
      • we collect your IP address
      • we may also obtain information, including personal information, from third-party sources
      • collect device-specific information such as:
      • device brand, version, and type
      • operating system and version
      • browser type and version
      • screen size and resolution
      • battery and signal strength
      • show ads about Padlet outside of the Service (e.g. on LinkedIn)

    Current Tech Stack – Nov 2019

    Article published on: Dec 2nd, 2019

    Updated on: Apr 16th, 2020

    Estimated Reading Time: 2 minutes

    Holly stratton jN1C3 edaro unsplash

    unsplash-logoPhoto from Eaters Collective

    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

    Main take aways

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