Comparative analysis of Front-End Code Playground tools

Mateusz Magier

mateusz.magier@pollub.edu.pl
Institute of Computer Science, Lublin University of Technology, Nadbystrzycka 36B, 20-618 Lublin, Poland (Poland)

Beata Pańczyk


Institute of Computer Science, Lublin University of Technology, Nadbystrzycka 36B, 20-618 Lublin, Poland (Poland)

Abstract

This article contains comparative analysis of selected Front-End Code Playground tools. The included tables were performed on the results of tests of the considered applications and the analysis of their documentation. The comparison was made for several criteria (including: features of code editors, custom modes of creating projects, support for preprocessors and project export methods). The conclusions drawn from the comparison allowed dividing the considered tools into three groups (applications with: high, moderate and low level of advancement).


Keywords:

frontend; web applications; CSS; JavaScript

[1] Stack Overflow Developer Survey 2018, https://insights.stackoverflow.com/survey/2018/#technology [09.09.2018]
[2] 7 of the Best Code Playgrounds — SitePoint, https://www.sitepoint.com/7-code-playgrounds/ [09.09.2018]
[3] 10 Best Code Playgrounds for Developers | Code Geekz, https://codegeekz.com/best-code-playgrounds-for-developers/ [09.09.2018]
[4] 8 Code Playgrounds to Test your JavaScript Applications and Skills | Jscramber Blog, https://blog.jscrambler.com/8-codeplaygrounds-to-test-your-javascript-applications-and-skills/ [09.09.2018]
[5] Comparison of online source code playgrounds - Wikipedia, https://en.wikipedia.org/wiki/Comparison_of_online_source_code_playgrounds#Online_web_clientside_source_code_playgrounds [09.09.2018]
[6] CodePen, https://codepen.io/ [09.09.2018]
[7] HTML5, CSS3, JS Demos, Creations and Experiments |CSSDeck, http://cssdeck.com/ [09.09.2018]
[8] CSSDesk - Online CSS Sandbox, http://www.cssdesk.com/ [09.09.2018]
[9] dabblet.com, http://dabblet.com/ [09.09.2018]
[10] JS Bin - Collaborative JavaScript Debugging, http://jsbin.com/ [09.09.2018]
[11] Create a new fiddle – JSFiddle, https://jsfiddle.net/ [09.09.2018]
[12] Kodnest - Realtime online code editor & playground for Frontend developers, http://kodhus.com/kodnest/ [09.09.2018]
[13] HTML, CSS and JavaScript demo – Liveweave, https://liveweave.com/ [09.09.2018]
[14] Pinocode - Chrome Web Store, https://chrome.google.com/webstore/detail/pinocode/kijgcmknihlnlfollpgdmchlidcplcmp [09.09.2018]
[15] Plunker, http://plnkr.co/ [09.09.2018]
[16] SoloLearn: Learn to Code for Free!, https://www.sololearn.com/ [09.09.2018]
[17] Web Maker - A blazing fast & offline web playground, https://webmakerapp.com/ [09.09.2018]
[18] Auto Updating Previews - CodePen Blog, https://blog.codepen.io/documentation/editor/auto-updatingpreviews/ [09.09.2018]
[19] What is boilerplate and why do we use it? Necessity of coding style guide, https://medium.freecodecamp.org/whatsboilerplate-and-why-do-we-use-it-let-s-check-out-the-codingstyle-guide-ac2b6c814ee7 [09.09.2018] Journal of Computer Sciences Institute 333
[20] Collab Mode - CodePen Blog, https://blog.codepen.io/ documentation/pro-features/collab-mode/ [09.09.2018]
[21] Forks - CodePen Blog, https://blog.codepen.io/documentation/features/forks/ [09.09.2018]
[22] Professor Mode - CodePen Blog, https://blog.codepen.io/documentation/pro-features/professor-mode/ [09.09.2018]
[23] What is codecasting?, https://remysharp.com/2013/11/14/whatis-codecasting/ [09.09.2018]
[24] R. Queirós, A Survey on CSS Preprocessors, 6th Symposium on Languages, Applications and Technologies (SLATE 2017), http://drops.dagstuhl.de/opus/volltexte/2017/7943/pdf/OASIcsSLATE-2017-8.pdf.
Download


Published
2018-12-30

Cited by

Magier, M., & Pańczyk, B. (2018). Comparative analysis of Front-End Code Playground tools. Journal of Computer Sciences Institute, 9, 328–333. https://doi.org/10.35784/jcsi.705

Authors

Mateusz Magier 
mateusz.magier@pollub.edu.pl
Institute of Computer Science, Lublin University of Technology, Nadbystrzycka 36B, 20-618 Lublin, Poland Poland

Authors

Beata Pańczyk 

Institute of Computer Science, Lublin University of Technology, Nadbystrzycka 36B, 20-618 Lublin, Poland Poland

Statistics

Abstract views: 239
PDF downloads: 203