Comparative analysis of Front-End Code Playground tools


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


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

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