109 collaborative coding interfaces webusers.sussex.ac.uk/~thm21/icli_proceedings/2016/... ·...

9
Collaborative coding interfaces on the Web Jakub Fiala, Matthew Yee-King, and Mick Grierson Goldsmiths, University of London [email protected] [email protected] [email protected] Abstract. The recent developments in Web technologies, including full-stack reactive application frameworks, peer-to- peer communication and client-side audiovisual APIs have introduced the possibility of creative collaboration in a number of contexts. Such technologies have the potential to transform the way Internet users interact with code. This paper introduces a theoretical and technical methodology for developing collaborative coding interfaces as web applications, tackling the issues of interactive rendering, user-platform interaction and collaboration. A number of existing interactive programming environments are reviewed, followed by a technical description and evaluation of CodeCircle, a collaborative coding web platform developed at Goldsmiths, University of London. Keywords: Collaboration, Web Applications, Interactive interfaces Introduction In the recent years, the popular definition of the Internet has changed significantly – starting with the introduction of dynamic websites and Ajax (Dutta 2006), reactive web application frameworks such as AngularJS (Darwin 2013), and realtime communication technologies such as WebSockets (Hickson 2012), the Web has been widely accepted and treated as an application platform, not unlike traditional ‘native’ platforms such as Microsoft Windows and OS X. This notion has been further reinforced by the introduction of standardised Web APIs such as Web Audio (Adenot and Wilson 2015), WebGL and the File API (Ranganathan and Sicking 2015), which often match native platforms in terms of performance and potential. JavaScript and CSS have evolved from simple complements to HTML markup, to powerful and popular languages, the former being used on both client- and server-side, on mobile systems (Janczukowicz 2013) and even microcontrollers (Espruino.com 2016). Unlike the static form of Internet content (Web 1.0), and the single user type of native application, the dynamic Web offers the opportunity of sharing and collaboratively creating documents, including directly executable code. This opportunity has been exploited in open-source software projects on platforms such as GitHub (GitHub 2016), ‘pastebin’ tools such as jsFiddle (Jsfiddle.net 2016), and cloud-based Web IDEs such as Cloud9 (Ciortea et al. 2010). Recently, a number of projects have also used Web Audio and Web GL to create audiovisual live coding environments, such as Gibber (Roberts and Kuchera-Morin 2012) and Livecodelab (Della Casa and John 2014). Applications like glslsandbox (Glslsandbox.com 2016) and Shadertoy (Jeremias and Quilez 2014) focus on developing small, self-contained visual pieces reminiscent of the Demoscene. In this paper, we introduce CodeCircle, which is the result of research in Web- based collaborative live coding, combining the elements of Web IDEs and rapid prototyping pastebin apps with real- time collaboration and rendering.

Upload: others

Post on 14-Jul-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 109 Collaborative Coding Interfaces Webusers.sussex.ac.uk/~thm21/ICLI_proceedings/2016/... · JavaScript and CSS libraries that are automatically added to the code before rendering

CollaborativecodinginterfacesontheWebJakubFiala,MatthewYee-King,andMickGrierson

Goldsmiths,[email protected]

[email protected]@gold.ac.uk

Abstract.TherecentdevelopmentsinWebtechnologies,includingfull-stackreactiveapplicationframeworks,peer-to-peer communication and client-side audiovisual APIs have introduced the possibility of creative collaboration in anumberofcontexts.SuchtechnologieshavethepotentialtotransformthewayInternetusersinteractwithcode.Thispaper introduces a theoretical and technical methodology for developing collaborative coding interfaces as webapplications, tackling the issues of interactive rendering, user-platform interaction and collaboration. A number ofexisting interactive programming environments are reviewed, followed by a technical description and evaluation ofCodeCircle,acollaborativecodingwebplatformdevelopedatGoldsmiths,UniversityofLondon.

Keywords:Collaboration,WebApplications,Interactiveinterfaces

Introduction

Intherecentyears,thepopulardefinitionoftheInternethaschangedsignificantly–startingwiththeintroductionofdynamicwebsitesandAjax (Dutta2006), reactivewebapplication frameworkssuchasAngularJS (Darwin2013),andrealtime communication technologies such asWebSockets (Hickson 2012), theWeb has been widely accepted andtreatedasanapplicationplatform,notunliketraditional‘native’platformssuchasMicrosoftWindowsandOSX.Thisnotion has been further reinforced by the introduction of standardisedWeb APIs such asWeb Audio (Adenot andWilson2015),WebGLandtheFileAPI(RanganathanandSicking2015),whichoftenmatchnativeplatformsintermsofperformanceandpotential.JavaScriptandCSShaveevolvedfromsimplecomplementstoHTMLmarkup,topowerfulandpopularlanguages,theformerbeingusedonbothclient-andserver-side,onmobilesystems(Janczukowicz2013)andevenmicrocontrollers(Espruino.com2016).

UnlikethestaticformofInternetcontent(Web1.0),andthesingleusertypeofnativeapplication,thedynamicWeboffers the opportunity of sharing and collaboratively creating documents, including directly executable code. Thisopportunityhasbeenexploitedinopen-sourcesoftwareprojectsonplatformssuchasGitHub(GitHub2016),‘pastebin’toolssuchas jsFiddle (Jsfiddle.net2016),andcloud-basedWeb IDEssuchasCloud9(Ciorteaetal.2010).Recently,anumberof projects have alsousedWebAudio andWebGL to create audiovisual live coding environments, such asGibber (Roberts andKuchera-Morin2012) and Livecodelab (DellaCasaand John2014).Applications like glslsandbox(Glslsandbox.com 2016) and Shadertoy (Jeremias and Quilez 2014) focus on developing small, self-contained visualpiecesreminiscentoftheDemoscene.Inthispaper,weintroduceCodeCircle,whichistheresultofresearchinWeb-basedcollaborative livecoding,combining theelementsofWeb IDEsandrapidprototypingpastebinappswith real-timecollaborationandrendering.

Page 2: 109 Collaborative Coding Interfaces Webusers.sussex.ac.uk/~thm21/ICLI_proceedings/2016/... · JavaScript and CSS libraries that are automatically added to the code before rendering

Researchobjectives

CodeCircleistheresultofourongoing,in-depthresearchindigitalinteractivityandcollaboration.OurprincipalaimsindevelopingCodeCircleareasfollows:

• To design and develop a web-based interface that enables real-time, collaborative, and social coding in acreativecontext.

• To implement an integrated code sharing and collaboration system that enables us to study theprocess ofcollaborative,creativecoding.

• Todevisetheplatforminsuchawaythatmakesitattractiveandaccessibletolearnersandprofessionalsalike,andcanbeusedinavarietyofcontextsincludingcomputingeducation.

Thispaperismainlyconcernedwiththefirstphaseofthisresearch.Inthe‘Existingplatforms’section,wediscusstheexistingweb-basedcodingenvironments,andcomparetheir featuresetswiththedesiredfeaturesof theCodeCircleplatform.Wethenelaborateonthe issuesandrequirementsrelatedtothemain featuresofexistingapplications. Inthe‘Technicaldescription’section,wedescribethevariousdesigndecisionsandsolutionsimplementedinCodeCircle.Finally,wediscussthepotentialusecasesandthefuturedevelopment,aswellasresearch,intheCodeCircleproject.

Existingplatforms

Therearenumerouspubliclyavailablewebbasedcodinginterfaces.However,their intendedusecases,whichinformtheirdesigndecisions,varysignificantly.Throughasurveyofexistingwebbasedcodinginterfaces,wehaveidentifiedthefollowingclasses:

• Pastebin-style applications. These interfaces enable rapid prototyping of simpleweb code, usually allowingHTML,JavaScriptandCSScode,andrenderusingthebrowserastheengine.Theyaredesignedtostorecodeexperimentsandexamples,andareoftenusedas supplements toprogrammingcommunity forumssuchasStack Overflow. Pastebin applications surveyed in our research include jsFiddle, JSBin, CodePen, Codr,Liveweave,dabblet,MozillaThimbleandCSSDeck.

• Liveandcreativecodingandenvironments.Anotherdistinctclassofweb-basedcodingplatformsarecreativecodingapplications.Thesearedesignedspecificallyforlivecodingperformances,education,orbuildingartisticworks.Theyusuallyallowtheusertowrite inone language,andeitheruseusercodetocontrolan internalaudiovisual engine (Livecodelab, Gibber) or inject the code into a pre-built web page (GLSL Sandbox,Shadertoy).

• Web IDEs. These are targeted at software companies and developers, and usually include cloud containerservices, rich asset systems, and complex coding tools. They always require authentication to accessdocuments.Whiletheseapplicationsenabledevelopmentofcomplexclient-serverarchitecturesandpresentthe user with a very large feature set, their document representations are not easily shareable, and theyrequire high skill levels. In our research, we reviewed several Web IDEs, including Cloud9, Koding, andCodeanywhere.

OneoftheprincipalaimsoftheCodeCircleplatformistocombinecertainfeaturesofallwebcodingapplicationclasses to build an environment that supports multiple approaches to writing code on the Web. While it isimportantforsuchaplatformtoprovidethecomfortableuserexperienceofaWebIDE,combinedwiththeeaseofuseand shareabilityofpastebinapps, it is also crucial to leverage the creativeandeducationalpotentialof livecodinginterfaces.Finally,byemphasizingtheaspectofcollaborationandsharingontheplatform,CodeCircleisanattemptatcreatinganenvironmentforrealtimesocialcoding–apracticewhichmayradicallychangethewayweinteractwithcodeandcomputingingeneral.

Page 3: 109 Collaborative Coding Interfaces Webusers.sussex.ac.uk/~thm21/ICLI_proceedings/2016/... · JavaScript and CSS libraries that are automatically added to the code before rendering

Platformtype Features

Platform Livecoding Pastebin IDE Livemode CodeValidation Forking Collaboration Assets Shareable

Gibber x Yes Partial

jsFiddle x Yes Partial Yes

Livecodelab x Yes Yes

CodePen x Yes Yes Partial Yes

GLSLsandbox x x Yes Yes1 Yes

Codr x Yes Yes Yes Yes

Cloud9 x Yes Yes Yes CodeCircle x x x Yes Yes Yes Yes Yes Yes

Table1.Comparisonoffeaturesetsofselectedexistingplatforms

Featurerequirements

Buildingon thesurveyofexistingplatforms,wecanspecifyasetof requirements for theCodeCircleplatformwhichdifferentiateitfrompre-existingplatformandwhichwillimbueitwiththenovelfunctionalityrequiredtoenableustobegin addressing our research objectives. First and foremost, an integrated collaboration system is required whichenablessemanticallysynchronizedreal-timecollaboration,applieddirectlytodocumentcontent.Thisisincontrasttosystems such as TogetherJS, which is used in a number of pastebin-style applications. Second, it is necessary tomaintainahighlevelofinteractivity,i.e.maximizetheintensityofsystemfeedbackandminimizethefeedbackdelay.Many existing platforms, such as CodePen and JSBin include an ‘auto-update’ function, which renders user codeautomaticallyasitchanges.Others,includingjsFiddleandGibber,requireuserinteractiontoperformrendering,whichincreasesfeedbackdelay.Furthermore,manipulatingbinaryassets isacorerequirementforanumberofaudiovisualprogrammingtechniquesincludingsampling,processingandsequencing.Itisoftenimpracticalandlimitingtoworkinan environment without the possibility of using pre-made content. Functional asset systems are currently onlyimplementedinprofessionalWebIDEs(Ciorteaetal.2010)(Koding.com2016).Finally,pastebintoolssuchas jsFiddlehavebeenwidelyadoptedasthestandardwayofsharingcodesnippetsontheWeb.AccordingtoGomézetal.(2013),Stack Overflow contains over 300 000 references to jsFiddle URLs. A simple shareable URL scheme and a forkingfunctioncouldimprovethesocialaspectoftheplatform.

CodeCircle–technicaldescription

InthissectionweprovideatechnicaldescriptionoftheCodeCirclesystemandexplainhowitmeetstherequirementslistedabove.

1Noerrordescription

Page 4: 109 Collaborative Coding Interfaces Webusers.sussex.ac.uk/~thm21/ICLI_proceedings/2016/... · JavaScript and CSS libraries that are automatically added to the code before rendering

Figure2.ScreenshotoftheCodeCircleUI

Theuserinterface(UI)ofCodeCircleaimstomirrortheunderlyingrenderingsystemstructurebysplittingthewindowintotwoparts–first,adismissablesemi-transparenteditorpanelcontainingdocumentsettings,controls,andtheAcecodeeditor.Second,theviewerframe,whichispositionedbehindtheeditorpanelandspanstheentirewindow.Thislayoutparadigmisprevalentinlivecodingenvironmentsthatarebasedonacustomaudiovisualengine,suchasGibberandLivecodelab. It isalsoextremelyuseful inadirect renderingenvironment,because it increases the intensityandimmediacyofvisualfeedbackfromtheapplication.Documentscanbeviewedinaviewer-onlyembeddablemodebyappending/viewtothedocumentURL.CodeCirclealsoincludesanumberofcodingtoolsandfeaturestoimprovetheuser experience. We used the beautify.js library to provide a ‘Tidy code’ function which automatically adjusts lineindentation. By embedding the Ace editor, the UI also benefits from code highlighting, multiple cursors, and codecompletion. Similarly to a number of pastebin-style platforms, each document can be associated with pre-builtJavaScriptandCSSlibrariesthatareautomaticallyaddedtothecodebeforerendering.

Applicationstructure

Real-time collaboration requires reactive content,which stays up to datewithout the need for refreshing the page.Solutionstothisproblemarepartofmanywebframeworks,suchasAngular,React.js,etc.ForCodeCircle,wedecidedtouseMeteor(Meteor.com2016),afull-stackframeworkthatcombinesanumberofJavaScriptlibraries,andaserver-and client-side engine.Meteor has a number of features that help build scalable collaborative applications rapidly.Since its server-side engine is based on node.js andMongoDB, and client engine on Blaze (Meteor.com 2016), theentire app logic is written in JavaScript. Meteor's subscribe/publish model and reactive templates are ideal formanaging complex real-time interactions between collaborating users. The Meteor package library contains usefulpackageswrappingsystemssuchasShareJS,UIlibraries,etc.

TheCodeCircleapplicationlayoutconsistsoftwomainviews,andasetofauxiliaryviews.EachviewisrepresentedasaMeteor template. Meteor's dynamic templates system enables a highly structured approach to web applicationdevelopment,where individual templatescanbereused inamodular fashion.Eachof themainviews isa template,whichiscomposedofoneormoresub-templates.InMeteor,eachtemplateisgivenitsownsetofhelperfunctionsandevent handlers, which allows for even greater flexibility, and ensures that any interactivity is directly bound to itscorrespondingHTMLstructureintheapplication.

Page 5: 109 Collaborative Coding Interfaces Webusers.sussex.ac.uk/~thm21/ICLI_proceedings/2016/... · JavaScript and CSS libraries that are automatically added to the code before rendering

Figure3.CodeCircleclient-sidetemplatestructure

Renderingsystem

In its simplest incarnation, a real-timeweb-basedweb development environment consists of two elements: a codeeditorandaviewer frame, towhich thecode is rendered.Thesemodulesareeasy to implement inHTMLusing the<iframe> tag for the viewer, and the <textarea> element for the editor. With these elements in place, aJavaScriptmechanismisneededtorenderthecontentsofthe<textarea>astheDOM(DocumentObjectModel)ofthe<iframe>.Thisisthecoderenderer,thecoreelementofanybrowser-basedcodingenvironment.

var editor = document.querySelector('textarea'); var viewer = document.querySelector('iframe'); editor.onkeydown = function() { var code = editor.value; viewer.innerHTML = code; }

AsimpleHTMLcoderenderer.

Theabovecodeexecutesaneventhandlerwheneverakeyispressedwhiletheeditorelementisinfocus.Thissolutionseemsperfectlygood forwritingbasicHTMLandCSScode– if theentire"webpage" iswrittenasasingleHTMLfilewithinlineCSS.Onamodernbrowser,changesappearintheiframeelementimmediately.However,severalproblemsarisewhenthissimplesystemis implemented:theforemostbeingthatwhenascripttagis includedinthecode,thebrowserdoesnotexecutetheJavaScriptinside.Furthermore,withenoughcodetorenderandahightypingfrequency,therenderingsystembecomesoverloaded,andtheJavaScriptthreadfreezesorslowsdownsignificantly.However,wecanuseaslightlymorecomplextechniquetorenderscriptcontent,too:

viewer.onload = function () { //write the new DOM viewer.contentDocument.open(); viewer.contentDocument.write(code); viewer.contentDocument.close(); } viewer.src = "";

Writingtoaniframe.contentDocumentstream.

With this technique, we have solved the script issue, as well as another problem arising from rendering a DOMrepeatedly–whenusingcomputationallyheavyAPIs suchas theWebAudioAPI, there isoftena limitednumberof"contexts"onecancreateinasinglewindowinstance.However,acontextneedstobecreatedeverytimeanewDOM

Page 6: 109 Collaborative Coding Interfaces Webusers.sussex.ac.uk/~thm21/ICLI_proceedings/2016/... · JavaScript and CSS libraries that are automatically added to the code before rendering

isrendered,astheoldcontextsfalloutofthenewJavaScriptscope.Afteracertainnumberofrenderingroutines2,newcontextscannotbecreatedanymore.The<iframe>elementneedstosimulateapagereloadinordertoreleasetheexistingcontext(s)andenablethecreationofanewone.Theoneremaining issue is relatedtoexecutionfrequency.SinceCodeCircleisprimarilyenvisionedasacreativeprogrammingplatform,therendererresponseshouldbeascloseaspossibletorealtime.Renderingoneachkeystrokeresults inagreatperformancedecreaseaboveacertaintypingspeedandDOMsize. It isnecessary to findacompromisebetweenrapid renderer responseandefficientexecution.The most useful API for achieving this is requestAnimationFrame (Robinson and McCormack 2015), which alignsJavaScriptexecutionwith thebrowser'sanimation loop.Thecode isexecutedonly if thebrowser is ready to renderanotherframe,avoidingthe‘bottleneck’whichwouldincreasinglyprolongthetimeneededtocontinuerendering.

Codevalidation

Inasecurewebapplication,itisimportanttoensurethatonlyvalid,securecodeisbeingexecutedontheclient.Apartfromtheobvioussecurityandprivacyrationale,codevalidationisalsoimportantforperformancereasons–codethatcauseserrorsatruntimedecreasesJavaScriptperformancesignificantly,resultinginsuboptimaluserexperience.Thereare a number of tools for HTML/CSS/JavaScript validation, the most popular being JSHint (Kovalyov 2010), CSSLint(Csslint.net2016)andHTMLHint(Htmlhint.com2016).Thelatterdependsontheformertwoasplugins.AllofthesearewritteninJavaScript,andcanbeeasilyusedinthebrowser.

InCodeCircle,weuseda customversionofHTMLHint,whichnormally collects JSHintandCSSLintwith the require()function,combiningthethreescriptsintoasinglevalidatorobject.ThevalidatorscriptisexecutedinaWebWorkertoimproveperformance.Whileincreasingexecutiontime,thisapproachalsorelievestheJavaScriptthread,whichresultsin a smoother typing response. Additionally, validation parameters must be set to accept many coding styles, butensurethataslittlecodewithfatalerrorspassesthetestaspossible.Anexampleofthisisrequiringsemicolons–thecodedoesnotrenderuntiltheuserhasfinishedtypingtheline.

Assets

Tosolvetheproblemsofsecureassetloading,wehavedevelopedasystembasedontheCollectionFSMeteorpackage(GitHub2016),whichusesaGridFSfilesystemintheapplication’sdatabase.Whentheuserinsertsafileontheclient,the file is uploaded and associated with the currently opened document. Image, audio and video assets can bepreviewedinamodalwindow.Oncetherendererreceivesnewcodetorender,itreplaceseachoccurrenceoftheassetfilenamewithadataURIrepresentationoftheasset,andtheassetcanbeusedinHTMLsrcattributes.Theserver-sideURLoftheassetisnotexposed,andtheusercanincludeassetsintheircodebysimplyspecifyingtheirfilenames.AnotherproblemariseswhenloadingassetsviaanXMLHttpRequest(XHR),whichisacommonpatternparticularlyinWebAudioapplications.At the timeofwritingof thispaper, thenativeXHRobjectonly supporteddataURIs in theChromebrowser. To enable asset usage in all browsers,we integrated anXHR shimwhichwraps thenative object,detectsdataURIs,anddecodesthemintoarraybufferswithoutcallingthenativeXHRmethods.

2InWebKit-basedbrowsers,themaximumnumberofAudioContextsseemstobearound6

Page 7: 109 Collaborative Coding Interfaces Webusers.sussex.ac.uk/~thm21/ICLI_proceedings/2016/... · JavaScript and CSS libraries that are automatically added to the code before rendering

Figure4.Public,lockedCodeCircledocument–contentisvisible,butonlytheownercaneditit.

Collaborationandsharing

Thecollaboration functionality inCodeCircledraws inspiration fromwebapplications suchasGoogleDocs (BlauandCaspi 2009) and Overleaf (Overleaf.com 2016). Some popular pastebin platforms have implemented collaborativefeatureswith TogetherJS (Mozilla Labs 2016), a client-side library that enables real-time chat and view sharing. Thisapproach does not integrate into the platform structures, and is not extensible or adjustable based on theparticularities of theplatform. Furthermore, TogetherJS shares the entire page view,whichmay result in decreasedperformanceifthepageDOMiscomplex.InCodeCircle,wehaveimplementedareal-timecollaborationsystembasedontheShareJSlibrary,wrappedinthemizzao:sharejspackage.ShareJSisdesignedforcollaborationontextandJSONdata,ratherthanentirewebpages.Thelibraryisbasedontheconceptofops, i.e.highlyspecifiedrepresentationsofchanges to a shared document. Ops enable efficient synchronisation of document views on a number of clientscontrolledbyaserver.Arecordofallopsappliedtoadocumentisstoredinthedatabase,containingmetadatasuchasuserID.InCodeCircle,ShareJSisintegratedinthecodeeditorforeachdocument,providedthattheuserisloggedin.

CodeCircledocumentscanbesharedeitherusingaURLschemeinspiredbycommunityplatformssuchasReddit,orbyembeddinggenerated<iframe>code.ThedocumentURLbeginswiththedomainname,followedbythe‘d/’prefixand the document ID. All public documents are visible and searchable, although the owner may chose to lock adocument,which results in the code editor being created as read-only. Any public document can be forked,whichcreatesacopyofitscode,andassociatestheoriginalassetsandthenewdocument.

Plannedusecasesandfuturework

ThemaingoalofCodeCircle is toprovideasocialcodingplatform,combiningthefeaturesofexistingpastebintools,WebIDEsand livecodingapplications.Therearemanypotentialusecasesfortheplatform:thehighly interactiveUIstyleanddocumentshareabilityofCodeCircle impliesthepossibilityofusingtheplatformasa ‘demoshowcasetool’similartoGLSLSandbox.Thesocialandcollaborativeaspectsoftheapplicationalsoofferthemselvestoeducationaluse–forinstance,CodeCirclemaybeusedbyalecturertoprepareexamplesfortheirclass,andbystudentstosubmitandsharecollaborativelydevelopedcode,withastraightforwardwayofreceivingfeedbackinthecomments.Theplatformisalready inuse inanonlinecreativecodingcourseonKadenze. Inaddition to showcasingandeducational sharing,CodeCirclecansupport ‘codecrowdsourcing’.Becauseoftheopennessofthesystem,whereanyregisteredusercancontribute to other users’ code, users are invited to propose coding ‘problems’ and enable the community tocontributetothesolution.Theownershipofadocumentbecomes less importantasthe importanceofcollaboration

Page 8: 109 Collaborative Coding Interfaces Webusers.sussex.ac.uk/~thm21/ICLI_proceedings/2016/... · JavaScript and CSS libraries that are automatically added to the code before rendering

increases,and theconceptofauthorship isdismissed.Thenext step in thedevelopmentofCodeCircle is to test theeffect of an open collaborative system on the way users interact with code and with each other. Testing shall beperformedbyusingCodeCircleasateachingplatformforbothsmalland largegroupsofstudents,aswellasspecificuserexperiencestudieswithgroupsofusersfromavarietyofbackgrounds.TheintegrationofShareJSenablesdetailedmonitoring of the user-document interaction, and the obtained data may produce interesting insights into thedynamicsofcollaborationincreativecoding.

Conclusion

Technologies for collaborative programming and code sharing on theWeb are a relatively novel, but very powerfuladdition to the Internet. In this paper, we have provided a theoretical framework for analyzing web-based codingenvironments.Next,wediscussedfunctionalrequirementsarisingfromtheirarchitecture, includingcollaborativeandsocialaspects,coderendering,UIdesignandassetsystems.Byanalyzingexistingplatformsandapplications,wehaveidentified solutions to some of these issues. Finally, we have provided an extensive technical description of theCodeCircle platform, which attempts to provide an environment for a fundamentally different, collaboration-drivenwayofdevelopingaudiovisualwebprograms.WhilethepotentialofthesocialcodingconceptcanonlybeassessedbyrigorousstudiesandtestingontheCodeCircleplatform,itisalreadypossibletostatethatbycombiningamodernwebapplicationframeworksuchasMeteorwithanintegratedcollaborationsystem,anopensharingenvironment,asecureasset system and a highly interactive user experience, technical and design-related issues that arise in web-basedcoding platformsmay be addressed effectively. The resultant web environment has a unique feature set thatmayprovide a unique creative coding experience, aswell as newmodes of interactionbetween the community and thedocumentsontheplatform.

References

Adenot,Paul,andChrisWilson.2015."WebAudioAPI".W3.Org.https://www.w3.org/TR/webaudio/.

Blau, Ina, and Avner Caspi. "What type of collaboration helps? Psychological ownership, perceived learning andoutcome quality of collaboration using Google Docs." In Proceedings of the Chais conference on instructionaltechnologiesresearch,vol.12.2009.

Ciortea, Liviu, Cristian Zamfir, Stefan Bucur, Vitaly Chipounov, and George Candea. 2010. "Cloud9". ACM SIGOPSOperatingSystemsReview43(4):5.doi:10.1145/1713254.1713257.

Codepen.io,.2016."Codepen".AccessedFebruary20.http://codepen.io.

Codr.io,.2016."Codr".AccessedFebruary20.http://codr.io.

Csslint.net,.2016."CSSLint".AccessedFebruary20.http://csslint.net.

GitHub,.2016."BuildSoftwareBetter,Together".AccessedFebruary21.http://github.com.

Darwin,PeterBacon,andKozlowski,Pawel.AngularJSwebapplicationdevelopment.PacktPubl.,2013.

DellaCasa,Davide,andGuyJohn.2014."Livecodelab2.0AndItsLanguageLivecodelang".ProceedingsOfThe2NdACMSIGPLAN International Workshop On Functional Art, Music, Modeling & Design - FARM '14.doi:10.1145/2633638.2633650.

Dutta,Sunava.2006."NativeXMLHttpRequestObject|IEblog".Microsoft.com.https://blogs.msdn.microsoft.com/ie/2006/01/23/native-xmlhttprequest-object/.

Page 9: 109 Collaborative Coding Interfaces Webusers.sussex.ac.uk/~thm21/ICLI_proceedings/2016/... · JavaScript and CSS libraries that are automatically added to the code before rendering

Espruino.com,.2016."Espruino-JavascriptForMicrocontrollers".http://www.espruino.com.

GitHub,.2016."Collectionfs".AccessedFebruary20.https://github.com/CollectionFS/Meteor-CollectionFS.

Glslsandbox.com,.2016."GLSLSandboxGallery".AccessedFebruary20.http://glslsandbox.com.

Gómez, Carlos, Brendan Cleary, and Leif Singer. "A study of innovation diffusion through link sharing on stackoverflow."InProceedingsofthe10thWorkingConferenceonMiningSoftwareRepositories,pp.81-84.IEEEPress,2013.

Hickson,Ian.2012."TheWebsocketAPI".W3.Org.http://www.w3.org/TR/websockets/.

Hickson,Ian.2015."WebWorkers".W3.Org.https://www.w3.org/TR/workers/.

Htmlhint.com,.2016."Htmlhint".AccessedFebruary20.http://htmlhint.com.

Janczukowicz,Ewa.FirefoxOSOverview.TelecomBretagneResearchReportRR-2013-04-RSM(November2013),2013.

Jeremias, Pol, and Inigo Quilez. 2014. "Shadertoy". SIGGRAPH Asia 2014 Courses On - SA '14.doi:10.1145/2659467.2659474.

Jsfiddle.net,.2016."Jsfiddle".https://jsfiddle.net.

Koding.com,.2016."KodingForTeams|ConfigureAnyDevelopmentEnvironmentInOneClick".AccessedFebruary20.https://koding.com.

Kovalyov,Anton,W.Kluge,andJ.Perez."JSHint,aJavaScriptCodeQualityTool."(2010).

Meteor.com,.2016."Meteor".http://meteor.com.

MozillaLabs,.2016."MozillaLabs:Togetherjs".AccessedFebruary20.https://togetherjs.com.

Overleaf.com,. 2016. "Overleaf:Real-TimeCollaborativeWritingAndPublishingToolsWith IntegratedPDFPreview".AccessedFebruary20.https://www.overleaf.com.

Ranganathan,Arun,andJonasSicking.2015."FileAPI".W3.Org.https://www.w3.org/TR/FileAPI/.

Roberts,Charlie,andJ.Kuchera-Morin.Gibber:Livecodingaudiointhebrowser.AnnArbor,MI:MichiganPublishing,UniversityofMichiganLibrary,2012.

Robinson, James, and Cameron McCormack. 2015. "Timing Control For Script-Based Animations". W3.Org.https://www.w3.org/TR/animation-timing/.