Начало работы
Слева видим кнопку закрытия панели шаблонов. Правее находится целое поле выбора шаблонов с определенными библиотеками JS (jQuery, Vue, React, React + JSX, Preact, TypeScript, CoffeeScript) и CSS (SCSS, CSS Grid (responsive), Bootstrap, PostCSS). Надпись над ними «Start with a boilerplate» означает — Начать работу с шаблоном. Ниже поля выбора библиотек находится кнопка «Show boilerplate bar less often?» — «Показывать панель шаблонов пореже?». Клик по ней приведет к закрытию панели шаблонов и для зарегистрированных пользователей, вошедших в систему, она перестанет появляться при каждом включении.
Правее поля выбора библиотек, по центру панели шаблонов показаны ссылки (Links) на разные полезные ресурсы:
. or just your humble code playground (или просто тихая площадка для скромных экспериментов с кодом).
What is JSFiddle? Guide
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
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 and 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 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.
On the vertical panel, to the left of the editing area, there is a line 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.
Read also:
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.
The panel opens and closes by clicking on the JSFiddle logo-cloud.
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.
Тестируем и пишем вместе с jsFiddle
На сегодняшний день в области онлайн инструментов можно найти массу интересных и что немало важно полезных вещей. Начиная от самых банальных калькуляторов и заканчивая офисными приложениями и специализированными программами.
Несомненно, для нас как для пользователей интернета онлайн инструменты очень полезны, ведь они не требуют установки, использовать их можно с любого компьютера с доступом к интернету, некоторые дают возможность командной работы над проектом, одним словом возможности велики.
В сегодняшней статье мы рассмотрим такой онлайн инструмент, как jsFiddle
Кому он полезен?
Всем кто работает с библиотеками JavaScript, такими, как jQuery, MooTools , Dojo и т.д.
Очень удобная вещь, которая позволяет быстро проверить работоспособность скрипта или определенной функции.
Я думаю, что с такой необходимостью сталкивался каждый. И как обычно мы поступаем в таком случае? Да, банально создаем новый документ в который кидаем необходимые участки кода, сохраняем и запускаем в браузере, знакомо не правда ли?
Теперь это в прошлом. jsFiddle позволит быстро и без лишних движений протестировать или написать работоспособный код.
Рассмотрим интерфейс jsFiddle подробнее
Данный инструмент в своем интерфейсе имеет боковую панель и основную область, разделенную на четыре экрана и верхнее меню.
В боковой панели можно выбрать библиотеку javascript с которой вы хотите работать. Добавить ссылки на внешние стили и скрипты, что очень удобно при тестировании сайта в интернете.
Основная область
Как я уже и писал выше, основная область разделена на четыре части, каждая из которых имеет свое конкретное предназначение.
Верхняя левая область предназначена для написания в ней HTML кода, нижняя левая для JavaScript, верхняя правая для CSS(SCSS) стилей, а в последней области выводится результат работы, своеобразный вариант окна браузера.
Верхнее меню
С помощью верхнего меню можно получить результат нажав на кнопку Run, можно также сохранить версию документа или поделится своим кодом с другими людьми. 
Выводы
Подводя итоги обзора думаю, что данный инструмент поможет многим ускорить свою работу и поделится результатами с другими участниками своей команды.
JSFiddle — новая версия
Сегодня, я хочу поговорить об одном полезном инструменте — jsfiddle. Сейчас мало кто из разработчиков не знает о его существовании, поскольку jsfiddle очень прост в использовании и достаточно функционален. Но, возможно, кто-то из вас откроет для себя что-то новое, прочитав эту статью. Давайте знакомиться.
jsFiddle — одна из самых популярных сред веб-разработки (работающая в веб-браузере), позволяющая редактировать и запускать код, написанный на HTML, JavaScript и CSS, который будет называться «фиддлом». Есть возможность использовать библиотеки для JavaScript, такие как jQuery.
Одно из популярных применений jsFiddle — вставка фрагмента кода в блоги, возможность делиться кодом через социальные сети и совместная работа над кодом.
Рабочие области
Интерфейс сайта за годы работы претерпевал изменения несколько раз и на данный момент он выглядит так:
Редактирование макета. Настройка области
Рабочая область jsFiddle поделена на четыре части, размеры которых можно менять по своему усмотрению: HTML, CSS, JavaScript и Result. Если при изменении размера вам все равно не хватает области для просмотра, вы можете воспользоваться редактором макетов в настройках. В самом низу открывшегося блока вы можете увидеть пункт Editor layout и выбрать там удобный для вас макет.
05.06.2018 JSFiddle добавил еще один макет, который позволяет выстроить рабочую область в виде вкладок. Об этом ранее упомянул Оскар в своем твиттере.
При создании своего проекта, мы можем не трогать поле html, поскольку по умолчанию в нем стоит актуальная версия, на данный момент это HTML5. А вот дальше — лучше.
Область css позволяет прописывать стили нашего будущего проекта. Большой плюс этого инструмента в том, что при добавлении тега, открывающие и закрывающие скобки ставятся автоматически. Ровно как и отступы при переходе на новую строку. Нам достаточно нажать enter для перехода и продолжить писать код.
Если вы эстет и у вас случайно сбился код, не спешите паниковать. Вы можете в любой момент нажать кнопку Tidy на верхней панели и выровнять все строки автоматически.
Для более продвинутых разработчиков предусмотрена возможность перехода с css на scss и активация css-файла normalize.css, который обеспечивает для HTML-элементов лучшую кроссбраузерность в стилях по умолчанию. Это значит, что вам не придется переживать за правильность отображения вашего проекта в различных браузерах. За вас все сделает этот файл.
JavaScript
Здесь все еще круче. Помимо ввода стандартного javascript, вы можете использовать популярные js-библиотеки, например React. Для этого, вам нужно нажать на ссылку в области JavaScript и в первом выпадающем списке выбрать язык. Если вы сделаете все правильно, выбранный язык будет отображаться в названии этой ссылки. По умолчанию стоит JavaScript + No-Library (pure JS).
Второй выпадающий список — это js-фреймворки и расширения. Здесь практически все что нужно. Я обычно использую его только для включения jQuery (ныне 3.3.1).
Блуждая по проектам других пользователей, я заметил, что третий и четвертый списки практически никем не используются. Практически! Так что вы тоже можете их пропустить, если не знаете для чего они.
На вертикальное панели, слева от области редактирования, есть строчка Resources — URL cdnjs. В ней вы можете разместить прямые ссылки на css и js файлы со сторонних источников. Например, добавить шрифты fontawesome
Result
И так, допустим, мы создали с вами интересный проект. Для того, чтобы его просмотреть, нам необходимо нажать на верхней панели кнопку Run. Поле Result покажет нам то, что мы натворили. Не забудьте выбрать удобный макет для просмотра и порекомендовать его пользователям.
Здесь вам может пригодиться JSFiddle Recommended Layouts — это проект с открытым исходным кодом, который представляет собой макеты (сетки) внутри вашего проекта. Они могут быть использованы как вспомогательный инструмент для пользователей, которые в поисках нужного материала попадут на страничку вашей разработки.
Сохранение, размещение и публикация JSFiddle
Сохранение проекта
И вот у нас теперь есть классный проект, которым мы хотим поделиться с друзьями или просто разместить его на своем сайте. Для этого переходим в левый верхний угол, где у нас размещается вертикальное меню. Сейчас нас интересует в нем пункт Fiddle meta. В этих двух строчках мы укажем название проекта и описание, которое будет отображаться как для вас, внутри вашего профиля, так и для всех пользователей в SERP. Вводим данные. Затем, поднимаемся чуть выше, к верхней панели сайта и нажимаем кнопку Save. После первого сохранения она превратится в кнопку Update.
Ура! Ваш первый фиддл готов.
Публикация проекта
И так, давайте разместим наш проект на сайте.
Опять же, на верхней панели, после сохранения проекта, у нас появилась возможность поделиться им. Для этого, найдите новую кнопку Embed.
В открывшемся окне уберите ненужные вкладки (Tabs), выберите цвет темы, текста, фона или оставьте настройки по умолчанию. Далее щелкните в поле Embed code и скопируйте скрипт на свой сайт. Готово!
Существует еще альтернативный вариант размещения — при помощи фрейма. Чтобы им воспользоваться нажмите там же на ссылку Prefer iframe? и скопируйте iframe. В нем вы также можете настраивать высоту и ширину по своему усмотрению. Если вы уберете все ненужные вкладки (поля в области редактирования) и оставите только результат, то на сайте у вас будет отображаться только он.