Writing code sometimes takes a long time. But sometimes that does not want to open notepad, and you just need to check out some crazy idea that came to a head in three in the morning or immediately share their results with others. The Web editors online solve this problem and immediately provide you with a ready environment for the creation of code, where you can immediately begin to experiment. These tools allow you to combine CSS, HTML and JavaScript, often even create and share examples of coding. Today we look at six favorites, who have their pluses and minuses.
1.CSSDesk
We started with CSSDesk because he is one of the oldest on our list. It is very easy to understand online tool for writing HTML and CSS.
Pros:
Sure, this tool a lot of pluses. It is very easy to use. There are three main sections: HTML, CSS and preview, the dimensions of which can be easily optimized with one click. Immediately see the result of your code. It's very simple: open the site and start building.
Among the pluses and syntax highlighting. And as such a simple feature (which is not often meet in such instruments) as the line numbers are also present.
Excellent panel functions with some settings that you simply will not find elsewhere. Not only can you share the result, but you also have to download something that you just built. In addition, you can choose any background, including backgrounds with grids.
Cons
Frankly, very few of them. The biggest drawback for hardcore coders is no support for JavaScript. If this confuses you, try one of the other options.
Two. JS Bin
JS Bin is another popular place where you can mess with your code. The design of this application is really quite minimal and lets you focus on your code. There are three sections: to view the html, js and penele preview. You can leave only the panels you need.
Pros
There are a lot of nice features in the JS Bin. The first thing you refresh the page does not destroy your work. Preview updated automatically, but for those rare occasions when you need to update manually, it's nice that your basic instinct (Ctrl-R) does not lead to the accidental loss of the code and makes you re all the tinkering.
As in CSSDesk, you can continue to share their work and upload it. You can create your own JS or connect the library like JQuery.
Another interesting feature is the ability to control which panel you can see by manipulating the URL. For example, "http://jsbin.com/ # javascript, html, live" will allow you to see 3 sections at a time when "http://jsbin.com/ # html, live" - only two.
Cons
This is a good tool, but it certainly lacks the charm of others. There is a special section for CSS and the need to embed it into HTML.
3.jsFiddle
jsFiddle is the most popular option in the list at the moment. And no wonder, because it is an amazing application. Let's face it: when you start digging into jsFiddle, you'll never look at other options.
Pros
There are many reasons why you should use jsFiddle. First, it is very easy to use. There are four panels (HTML, CSS, JavaScript and the panel view) and a large number of settings.
You can customize the CSS and JavaScript panel and use your favorite tools. Here you will find support and syntax Sass SCSS CoffeeScript.
jsFiddle allows you to log in and view your past work saved. It is possible to automatically clean the dirty code.
You can quickly connect any library Java Script (JQuery, MooTools, etc).
Another nice feature is that you can embed scripts in Web pages.
Cons
The main drawback is the lack of jsFiddle automatic update option to preview. If you already have protests all other options from this list, you will be hard to hard to reconcile with the fact that constantly need to update manually. Hot keys can certainly speed up the process a little bit, but still ...
4.Dabblet
Dabblet - new to this genre. How CSSDesk, it focuses only on HTML and CSS. Nevertheless, he brings some serious innovation that you will not find in any other editor.
Pros
By default, Dabblet divided into four tabs: CSS and the result, HTML, and the result, all the tabs and just result. This provides flexibility and attention, allowing you to always monitor the results.
You can change the position of blocks, as shown below. Location of partitions can be vertical, horizontal, or the whole screen with the overlay area code. Please note, there are also reports on the use of prefix-free. This means that you should not use prefixes of all browsers.
Dabblet has many options for saving, for example, you can "remain anonymous."
Another great feature Dabblet - a stunning effect when you hover in the CSS. Its easier to show than describe. Here are some examples:
You can get a preview of the fonts, colors, sizes, and even images.
Cons
Dabblet bit bizarre from a visual standpoint.
5.Tinkerbin
Tinkerbin very similar to jsFiddle. Although there are not all the features available in jsFiddle, he has some good features of their own.
Pros
User-friendly interface. HTML, CSS and JavaScript are separated by tabs, which allow you to focus on only one of them.
In addition, Tinkerbin supports more alternative syntax options than jsFiddle. You can select HTML or HAML, CSS, SCSS (with Compass), the old syntax, or SASS LESS, JavaScript, or CoffeeScript. Of course, if you're working with preprocessors - This option is best for you.
Tinkerbin is the only option that allows you to see all your code using windows «View Source».
Cons
I want to play with the settings and make the preview pane wider.
No account of integration into GitHub, etc. You just keep their experiments on a shortened URL-address.
6.Codepen
Codepen - Chris Koyera sensational project. To learn more about it you can watch the following videos:
Conclusion
I hope this review helps you to look into the details of each of these solutions. Now you need to know not only what each option does, but also their advantages and disadvantages.
And what tools do you use? Which one is your favorite and why?
0 comments:
Post a Comment