CodePen or Sublime Text? If we talk about web programming, the name of HTML, CSS and JavaScript comes to us right away. There are several ways to get there. Even, if we open a notepad we can get to work writing "html". It is true that to see the result of what you are programming from a pad, you will need a laborious procedure to notice progress.
These sites are the main playgrounds for application developers for users of the day. To learn more about the advantages and disadvantages of these programs, we are going to analyze them deeply in this article (at least, everything we know). As I always say, surely some of you here know the subject more. If so, comment on everything that escapes us here. We will be happy to discuss!
Today we are going to analyze CodePen, JSBin, Plunkr, sublime, CSSDeck, Dabblet, and LiveWeave. Which are the best known and the tools most used in this environment. There are more, of course.
But for all of you who do not know what the FrontEnd or BackEnd is about, let's explain a bit. The Front-End or interface is the visual part that the navigating user will be able to see on the web. The BackEnd will be the part that the site administrator controls. In programming, if you enter code through a tool that simultaneously displays the result, this will be called front-end.
CodePen
For many the most complete tool of all that we speak. Used as a web tool that is the closest thing to a community to show your work. A kind of Youtube from the programmer. In this, you will be able to see the work of the programmers affiliated with the web and contact them in case you have any interest, see their profile, follow them on networks and even subscribe to their channel to view all their future projects.
Presentation of content, support and keyboard shortcuts
The CodePen presentation is the most interestingBecause with just a few clicks, you can work through the process right away. With very well separated lines of html, css and javascript. In addition to the visual part, which you can intersperse up and down to clearly see your progress. Thus helping to differentiate each language well. Something that comes in handy for newer programmers.
Your web support, makes it more bearable when you want to start using something that we don't really know very well. That does not mean that it is better for you, it depends on the needs we have. But yes, to get to know the environment a little better before committing to install anything on the computer of "unknown" origin.
If you are one of those who is used to using almost totally keyboard when working, CodePen will be wonderful for you. Other tools need plugins to be able to use keyboard shortcuts to fill in the environment. This makes the job a little more uncomfortable (although just as effective once installed). CP. integrates as standard a system that will make you fill in the same lines of code that are repeated, as it could be in a list. You write how you want the list to appear and click Tab.
The Pro version also allows many more options for a price of € 9,00 for the basic package to € 29,25 for the “Super” package. Being able to update in several devices simultaneously what we do in one. Also a cooperative mode, a "teacher mode", etc. Benefit if you want here.
JSBin
JSBin is a tool that we could qualify as direct. Since once you go to your web domain, it will be ready to start drawing up your next project, without delay. And although its first staging is not very attractive, it is comfortable.
JSBin is simple, with the basic structure created in html so as not to waste time, you will intersperse between the different languages to complete the work. First there is HTML, then CSS, Javascript and finally your work visually. And although it seems more difficult, you will have the same types of shortcuts without installing anything. Directly from the browser.
However, I have found it more uncomfortable to view the code correctly, once it is hidden due to the subsequent columns. Since, with the laptop, you must give up or down with the trackpad and it's not very fluid.
It only has two installments, free or paid. This is a little more expensive than CodePen, although if you pay it annually, it is more profitable, if you can pay € 120.
CSSDeck
The working environment of CSSDeck is different from the one seen above. Divided into two columns only, visual-code, CSSDeck works with 3 rows down with which it divides the different types of language. With a presentation in the form of a social network and a cleaner work environment in light color. It does seem like a simple tool. Although sometimes, that doesn't mean it's negative.
With more than sixty thousand registered users and more than two hundred and fifty thousand projects created, searching and finding what you want will not be difficult. The language as always, if it can be an inconvenience for those who do not know English, but in this social network The image is very important, so I do not think it is a great challenge.
plunkr
plunkr it is the least attractive tool that I have come across so far. The presentation is agglutinated in messages and lack of images. Loading content is slow and not very useful at first glance. In addition, the ordering by date makes any programming, no matter how simple, can be in the first position. To see something more interesting you should go to the tab that says: «Most Viewed«. That is, if you haven't translated it with Google before.
Also say that according to the web, they are in version 1.0.0. So this explains a little about the design, the presentation and the possible errors that you find when browsing the web.
As an advantage, if you run out of ideas, you will not have to leave or open another tab in Plunkr, since directly from the right sidebar you can walk with other projects and view them instantly. This will make it easier for you to collect quick ideas and apply them to your project at the same time.
dabblet
dabblet it is a simple tool, you go in and create. Although you can register and have your username through GitHub, it is not something that stands out much on the web. With a background in a yellow to red gradient, in the visual part and a white background in the code part (as is normal), the Dabblet project is presented, although you can change it from the CSS tab. For me, it is better to have it blank, since that gradient the only thing that gives is a little Life a
When you are editing, you can configure the tabs you see easily. Even also if you want to switch to columns or rows for comfortable viewing depending on the person who is editing. Changing the font size, saving as anonymous without registering or validating the HTML code are more possibilities that Dabblet offers at first glance. Although it is not the first option that I would choose, it may be to take into account in future versions if they are updated.
One of the things that I liked the least, but that great programmers may like, is that you don't have the option to tabulate a label and have it write itself. That is, put HTML and click on the tab and write "html" and "/ html" automatically. Something that in the other applications if it is done.
liveweave
liveweave It is very similar to the others, it has nothing that the others cannot offer in terms of utility. What we highlight about this project is its design, a dark color similar to CodePen but with a square distribution. Being able to change the size to taste. There is also the clear mode and the «out of line« where the code you edit will not be reflected in the visual, until you activate it. It is not a feature that I find very useful, as a designer, it is important to always see what you edit in real time, but someone will find it some use for sure. And although, as always, you can register, the user does not have a leading role. Since, even if you don't register, you can save your project.
Sublime Text
This tool It is totally different from what you have seen so far in the analysis. Sublime Text is not as a web resource, but as an application. On the one hand, it is surely more useful to have it on the desktop. Especially due to possible internet crashes or freezes due to excess and the possible loss of work. On the other hand, it is not as visual a tool as the previous ones. In addition to not having the possibility of a community to share projects.
Here everything is from scratch. You must create tabs to place the lines of code and rename them to know which one is. If the first is HTML, the second CSS .. or vice versa. It also has no shortcuts for what it will be completely manual, except for the quotes.
Conclusion
All programs are similar with certain personal touches of each company that lead to having pros and cons in them. Each one will choose the one that best suits them, my recommendation is to use CodePen or CSSDeck for the environment and the social network it handles. But, if you liked another one more, leave a comment and explain your reasons, they will surely be useful.