19 CodePen modern analogs
Editing the article by Vadim Tsvid about Ruby on Rails and DataTables plug-in we again encountered our main article-design-problem – the code. Because when you try to make the code visible in your article in a relevant way, you want to take less effort and not editing every single line of it. Especially if you have up to a hundred code lines in a single tutorial! Vadim created great posts, but we know that the code could be presented better: with the color, highlights and so on. We could have been using CodePen for that, but it doesn’t support Ruby… That is why today we decided to write about 19 CodePen modern analogs! That somehow could help us with presenting our frontend and backend code in the future articles. We know that most of them neither support Ruby by now, but we have to find out as many good CodePen alternatives as we can. Most of you know that CodePen is a great development environment for frontend designers and developers that enables you to share your working code on social resources, blogs, site etc. As web developers, we know that this resource is one of the best available. But as skeptics, we have to take the other variants into account. So we spend quite a lot of time trying to find the alternative ways for sharing your frontend code. And here are the results!
19 CodePen modern analogs 1. JSFiddle is a cloud JS editor designed for developers who want to tweak and test blocks of JS, CSS and HTML code. Technically it is not really an IDE, but with the help of JSFiddle you can easily edit small blocks of code in the cloud. It supports a wide variety of frameworks and extensions. JSFiddle can switch to selection of frameworks and extensions including jQuery, Angular.js, Reactive.js, D3 from a dropdown. In addition to supporting JavaScript and CSS, it allows switching language settings to CoffeeScript and SCSS. Also, JSFiddle allows collaboration – it makes it easy to save the code snippets and send the link to others who can view and edit the code. Despite it might be looking a little basic today, it offers advanced functionality such as Ajax simulation. 2. StackBlitz is fast online IDE for web applications that is powered by Visual Studio Code. It provides TypeScript autocompletion. Also, with StackBlitz you can keep editing your code even if you’re offline. 3. CSS Deck is a fully-fledged HTML, CSS and JavaScript playground with social and collaboration features. It’s similar to CodePen and quite comfortable to use. 4. PaizaCloud IDE is a flexible browser-based web development environment. You can choose between Floating window mode (like desktop OS), or Tab window mode. You can run File manager, Editor, Terminal to develop web or other applications. On PaizaCloud, you can freely
install additional packages or start services using root access. We haven’t heard of it before but became surprised with what it can. For example, PaizaCloud launches new development environment server just in 3 seconds and provides HTTP/HTTPS access to almost any ports. What is good for our Asian readers, PaizaCloud’s Editor or Terminal fully support non-ASCII languages like Japanese or Chinese. 5. JS Bin is a simple environment that concentrates on the basics and handles them exceedingly well. It also offers a handy JavaScript console. Officially, it is a collaborative JavaScript debugging app. 6. Codiad is another web-based IDE framework with a small footprint and minimal requirements and many plug-ins, from Terminal and Git to Collaboration and Emmet… Plugins can be installed by using the web interface, or by manually extracting files to the right directory. In addition, the number of its ‘benefits for the outstanding user experience is overwhelming: 40+ languages support, advanced searching tools, over 20 syntax color themes, Quick-Download backups, i18n language support and more. 7. Dabblet is basically an interactive playground for testing snippets of CSS and HTML code. It uses -prefix-free, so you don’t need to add any prefixes in your CSS code. You can save your work in Github gists, embed it in other websites and share it with others. 8. Plunker is an online community for creating, collaborating on and sharing your web development ideas, that is designed to load in under 2 seconds. With Plunker you can create working demos, also in collaboration with other devs, and share your work. Also, it provides a full-sized web page like a preview. 9. Jupyter exists to create and share documents that contain live code, equations, visualizations and narrative text, to develop open-source software, open standards, and services for interactive computing across dozens of programming languages (it supports over 40 programming languages, including Python, R, Julia, and Scala). Jupiter is a web app that can be used on almost any device. What is interesting, this interactive editor is able to display complex equations, charts, graphs, and so on that makes it well-regarded with data scientists. 10. CodeTasty is a new real-time IDE that supports all major languages and up to a hundred thousand lines of code in a single file. 11. Web-Maker lets you work offline. This tool can be called a playground for your web experiments. Its features include all creations import and export, multiple editor themes & other configurable settings, multiple layouts to choose from and editing in CodePen. 12. Koding is another modern tool that lets your organization create and share fully automated dev environments on any infrastructure for modern distributed applications, micro-services, and containers. Most of the languages, databases, and command-line tools are supported. It provides real-time code and terminal collaboration with integrated chat abilities. Most machines are already set up with web project basics like Apache, PHP, MySQL, Ruby (yes, please!), Node.js, Perl, and Python and anything else can be installed via the SSH root access. 13. ICEcoder is a browser-based code editor. It allows you to code directly within the web browser, online or offline, and you only need your browser to develop sites. With the help of ICEcoder, you’re able to maintain the website. And guess what? ICEcoder also supports Ruby! (And over 60 other languages). 14. Goorm IDE has support for C, C++, Java, Js, python, ruby, node express, jquery, angular, and bootstrap. It even supports a web server and integrated debugger. 15. Codeply is a web-based HTML/CSS/JavaScript editor that’s integrated with top frameworks like Bootstrap, Foundation, Materialize, UIkit and Skeleton. Instead of trawling through docs, or searching for code examples, you now pick layouts, snippets, and elements right from the editor. 16. Codenvy has a fast, secure browser-based editor that supports syntax highlighting, code completion, refactoring and more. It can be used to edit, build, run and debug projects. It even has multi-cursor support. The layout will be familiar to the most developers, especially those experienced with Eclipse, with a file explorer on the left, code on the right and tabs for builders, runners, terminal and events at the bottom. 17. Codeanywhere allows connecting and pulling development files from a Dropbox or a Google Drive account, making it easy to sync development files across devices. 18. Eclipse Che is a quite famous developer workspace server and cloud IDE built for teams and organizations. It allows anyone to contribute to a project without installing software. Che defines a new type of workspace that is composed of projects and runtimes, making its state
distributable, portable and versionable. We use VMs, containers, and Web services to bring repeatability, consistency, and performance to workspaces. 19. Neutron Drive is an open-source, cross-platform code editor that syncs editor preferences between computers. Collaborating with Neutron Docs works similar to Google Docs. You can invite a friend/coworker for pair program or assistance.
There are many other interesting and new options to collaborate on your project’s code and share it in a neat way. Some of them are free and the others are paid, but most of them allow to sign in in 2 seconds with your GitHub account. We hope that this material was useful for you!