Many developers, if not most developers who use JavaScript, know what is JSFiddle. Now very few developers know about its existence, as it is very simple to use and functional enough. But, perhaps, one of you will discover something new by reading this article.
Let me share with you what I know, and be sure to add a comment if I forgot something or added a new feature.

Today, I want to analyze together with you not a new, but very interesting and useful tool — jsfiddle.

Let’s get acquainted.

jsFiddle is one of the most popular web development environments (working in a web browser) that allows you to edit and run code written in HTML, JavaScript and CSS, which will be called a «fiddle». It is possible to use a JavaScript library, such as jQuery.
One of the popular uses of jsFiddle is the insertion of code snippets into blogs, the ability to share through social networks and work together on code.

What is JSFiddle? Guide

JSFiddle Workspaces

The interface of the site for years of work has undergone several changes and at the moment it looks like this
What is JSFiddle

Editing the layout. Customize the area

The jsFiddle workspace is divided into four parts, the sizes of which can be changed at their discretion: HTML, CSS, JavaScript и Result. If you still do not have enough space for viewing when changing the size, you can use the layout editor in the settings. At the very bottom of the block that opens, you can see the Editor layout item and choose a convenient layout for you.

HTML

When creating your project, we can not touch the html field, because by default it has the current version, at the moment it’s HTML5. But further — better.

CSS

The css area allows you to prescribe the styles of our future project. A big plus of this tool is that when you add a tag, opening and closing brackets are automatically placed. Exactly the same as indents when changing to a new line. We just need to press enter to go and continue to write the code.

If you are an esthete and you accidentally lost the code, do not rush to panic. You can press the Tidy button on the top panel at any time and align all the lines automatically.

For more advanced developers, it is possible to switch from css to scss and activate the css file normalize.css, which provides better cross-browser compatibility for HTML elements in default styles. This means that you do not have to worry about the correctness of displaying your project in different browsers. For you everything will make this file.

JavaScript

It’s still steeper here. In addition to entering standard javascript, you can use popular js-libraries, for example React. To do this, you need to click on the link in the JavaScript area and select the language in the first drop-down list. If you do it right, the selected language will be displayed in the title of this link. The default is JavaScript + No-Library (pure JS).

The second drop-down list is js-frameworks and extensions. Here, almost everything you need. I usually use it only to include jQuery (now 3.3.1).

Wandering on the projects of other users, I noticed that the third and fourth lists are practically useless. Practically! So you can also skip them if you do not know what they are for.

Result

And so, let’s say, we created an interesting project with you. In order to view it, we need to click the Run button on the top panel. The Result field will show us what we’ve done)). Do not forget to choose a convenient layout for viewing and recommend it to users.

Saving and publishing the JSFiddle project

Save the project

And now we have a cool project that we want to share with friends or just post it on our website. To do this, go to the upper left corner, where we have a vertical menu. Now we are interested in him the point Fiddle meta. In these two lines we will indicate the name of the project and a description that will be displayed both for you, inside your profile, and for all users in SERP. We enter the data. Then, rise a little higher, to the top of the site and click the Save button. After the first save, it will turn into the Update button.

Hooray! Your first fiddle is ready.

Publication of the project

And so, let’s post our project on the site.
Again, on the top panel, after saving the project, we had the opportunity to share it. To do this, find the new Embed button.

In the opened window, remove unnecessary tabs (Tabs), select the color of the theme, text, background or leave the default settings. Next, click in the Embed code field and copy the script to your site. Done! There is also an alternative variant of placement — with the help of a frame. To use it, click the Prefer iframe? link there and copy the iframe. In it you can also adjust the height and width at your own discretion. If you remove all unnecessary tabs (fields in the editing area) and leave only the result, then on the site you will only see it.
Example.

Also, there is a useful Fork button on the top panel. Thanks to her, we can produce an infinite number of our projects without creating new tabs. Or, it can be useful to aesthetes who do not like to look at the number of edits. For example: JSFiddle Recommended Layout #35 is the latest version. We created a clean one — deleted the one with the corrections.

Bonus

More recently, to use frameworks such as Bootstrap, you had to download links to all the necessary files in the Resources sidebar. Since recently, this need has disappeared. When creating a new project, an annoying panel pops up at the top of the site, which suggests using one of the suggested templates.

In it, we can create a clean project or start working with the already connected styles and scripts that we need. In my opinion, this is a very good buff.

General settings. Display

In the upper right corner is your profile, clicking on which you can edit the data and see all your projects (fiddles). Next to the profile is another interesting menu, which we mentioned earlier. It allows us to edit:

  • theme color (dark — light)
  • remove / add numbering in the code
  • on off. line wrapping
  • indent
  • change font size

And also, automatically update and save the result after each input of new data (written beta, but it works fine), automatically close the tags, enable and disable code alignment, and select the appropriate shortcuts (for example, if you hover over the opening parenthesis of the tag, you automatically underlined closing). So you can see the beginning and end of the code.

Here, we can turn off the annoying window mentioned above by activating — Boilerplates Show boilerplates bar less often.

That’s all! So we dismantled the basic functions of this simple and very useful tool. I hope the material will be useful to you. Comments, wishes or words of thanks you can leave below in the comments. I wish you creative success.

Author: Andrej Sharapov