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? Quick start guide
JSFiddle Workspaces
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: 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.
In June this year, a new tabbed layout was added.
New tabbed layout is live ? pic.twitter.com/QxggiEtiXg
— JSFiddle ☁️ (@jsfiddle)
6 июня 2018 г.
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.
Resources - URL cdnjs
. In it, you can place direct links to css and js files from third-party sources. For example, add fonts fontawesome
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.
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 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. In order to speed up the process of writing your project, you can use hot keys and useful functions.
Examples:
- To create a ready page, just press
!
and thetab
- To create a list navigation, you do not need to enter
<nav id="navbar"> <ul class="" id="nav_ul"> <li class="nav_li"><a href="" class="nav_link-1">link text 1</a></li> <li class="nav_li"><a href="" class="nav_link-2">link text 2</a></li> <li class="nav_li"><a href="" class="nav_link-3">link text 3</a></li> <li class="nav_li"><a href="" class="nav_link-4">link text 4</a></li> <li class="nav_li"><a href="" class="nav_link-5">link text 5</a></li> <li class="nav_li"><a href="" class="nav_link-6">link text 6</a></li> </ul> </nav>
It is enough simply to write in one line nav#navbar>ul.#nav_ul>li.nav_li*6>a.nav_link-$>{link text $}
and press the tab.
Another useful feature is to show the project in full screen mode. Yes! To demonstrate the result, you can add / show /
in your address bar to your project link. Then users who click on your link will only see the result and even the full screen. Here is a good example.
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.