6 Useful Web Development tools

In the past few years, a lot of web development tools have sprung up, most of them are more attractive and convenient for our work. We can learn these new things and broaden our mind in a short time (PHP100 recommended: Learn 10 minutes and change your programmer career). These apps allow us to edit and preview the client code in real time: Html,css and JavaScript. More importantly, they are basically open source, and you can use them for free to teach or Debug programs.

Personally, these easy-to-use development tools helped me tremendously, and when I was stuck with JavaScript or CSS code, I could share my code in the environment and ask other developer friends to help me out. These platforms are fun and interactive, especially for beginners. Here, to give you a list of 6 useful platform environment, you can try.

1. Codepen

Codepen should be one of the most popular development environments in the world. Chris Coyier, author of CSS techniques, is one of Codepen's co-founders, which is why the app looks so luxurious. In addition to visually excellent effects, it can vividly show previews, and when you modify the code, you can see the effect, making it easier for you to find the changes.

Codepen for CSS include Scss, sass,less, and stylus, which have coffeescript and livescript for JS, including Haml, Markdown, Slim, and Jade for HTML. In addition, it contains 8 built-in JS libraries that are available. Codepen cooperation and private "pens" are available for a fee. "Go to Codepen"

2. Jsfiddle

Jsfiddle can be said to be a popular development environment, it is the first and most famous platform. Jsfiddle has more than 30 ready-to-use JavaScript libraries, and you can easily add external files. In preprocessing, it has the scss for CSS, the coffeescript for JS, and the simple vanilla for HTML.

If you are working with other developers, I strongly recommend that you use Jsfiddle. In all development environments, Jsfiddle's collaboration features are the best in the same type of application, and, unlike Codepen, it's a feature that is simple and free to use.

But Jsfiddle is not a preview feature, you need to manually refresh the page. Jsfiddle is really slow compared to other development platforms. Another disadvantage of jsfiddle is that its execution keys are not very sensitive and sometimes require several clicks to execute code. "Go to Jsfiddle"

3. JS Bin

JS Bin was created by the JavaScript development guru Remy Sharp, who has a Web development company focused on JavaScript and HTML5. JS bin JS preprocessor includes Coffeescript, TypeScript, Traceur, JSX, and more than 40 JS libraries available for use. You can also add external files, but you must do so manually on the editor. and the preprocessor for CSS, which provides less.

The difference between JS bin and the previous development platform is that it allows you to download files to your computer, which is a good feature for developers, especially programmers who debug code offline. You can also create a private bin space, but you'll need to pay for it. In addition, JS bin does not support collaboration features. "Go to JS Bin"

4. Cssdeck

Cssdeck has been around for some years, but its influence doesn't seem to be great. However, because of its simplicity, it is worth paying attention to. If you don't need the complex features of other platforms, then Cssdeck should be your choice.

Cssdeck's preprocessor includes Haml, Markdown, Slim, and Jade for HTML, less, Stylus, sass, and scss for CSS, and coffeescript for JS. It also has several CSS and JavaScript libraries available, and for those that don't, you just need to add them manually to the list of libraries to use.

Cssdeck Although very concise, but it has a surprise to me the feature is that it supports the user to change the font size, this is a simple but practical function. So, if you're looking for a development platform with a lot of awesome features, Cssdeck might not be right for you. Its simplicity makes you more focused on the most important things, which is also its biggest feature. "Go to Cssdeck"

5. Dabblet

When I was still using the hex color code, I was surprised by the Dabblet's feature, and its color previews were actually displayed next to the code, which is the first time I've seen such a setting. Although I am not sure if this is a useful feature, it still leaves a deep impression on me about its cleanliness.

Now, the best part of Dabblet is that it allows users to preview with 5 different perspectives, namely CSS Editor and effects, HTML editor and effects, CSS and HTML editor and effects, JavaScript and running results, all in a comprehensive effect. These features are not in most development environments.

It also has shortcomings, first, that Dabblet lacks HTML and CSS preprocessor, which is confusing. Second, it doesn't have a built-in JavaScript library, but you can fix it by manually inserting JavaScript libraries. Thirdly, the size of each plate is fixed and cannot be adjusted, which is the same as the traditional debug platform before. Four, it lacks a palette for demonstrating the work of other users. "Go to Dabblet"

6. Liveweave

Liveweave is a very versatile development platform, such as a real-time preview that can be turned off. You can also turn on night mode to darken all the screens in order to protect your eyesight. Liveweave provides more than 20 JavaScript libraries, and even supports SVG. Its built-in rulers make measurements more precise and more aesthetically correct.

It also has a place to catch my eye, which is its collaborative function. If you have used TeamViewer in the past, you will find that they are similar. The only thing you need to do is click the collaboration link and you can share the link from your weave.

You can even download your weave file and save it as a separate HTML file or as a ZIP archive containing separate HTML, CSS, and JS files. By the Liveweave, there is also a built-in Lorem ipsum generator. "Go to Liveweave"

Conclusion

Of course, every platform and tool has its own features that will help you and will make you fall in love with programming (PHP100: Why I am obsessed with programming). I hope you can finish this article and choose the right tool for you as needed. If you have other platform recommendations, please share them in the comments.



Original: http://www.hongkiat.com/blog/coding-playgrounds/
Translation: http://www.php100.com/html/it/focus/2014/1104/7706.html
(translation: php100_zeroing)

6 useful web development tools