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.
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
The interface of the site for years of work has undergone several changes and at the moment it looks like this
Editing the layout. Customize the area
The jsFiddle workspace is divided into four parts, the sizes of which can be changed at their discretion:
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.
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.
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
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.
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.
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.
JSFiddle Recommended Layouts — is an open source project that represents mockups (grids) within your project. They can be used as an auxiliary tool for users who will search for the necessary material on the page of your development.
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
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
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.
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.
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
- 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.