Comparative analysis of Front-End Code Playground tools
Mateusz Magier
mateusz.magier@pollub.edu.plInstitute 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; JavaScriptReferences
[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.
[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.
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 Magiermateusz.magier@pollub.edu.pl
Institute of Computer Science, Lublin University of Technology, Nadbystrzycka 36B, 20-618 Lublin, Poland Poland
Authors
Beata PańczykInstitute of Computer Science, Lublin University of Technology, Nadbystrzycka 36B, 20-618 Lublin, Poland Poland
Statistics
Abstract views: 236PDF downloads: 202
License
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
