Комментариев нет

Привет, дорогие читатели!

Сегодня, я хочу поговорить о JSFiddle и разобрать вместе с вами этот пусть и в не новый, но весьма интересный и полезный инструмент — jsfiddle. Данная инструкция самая актуальная в интернете. Она поможет разобраться в том, как пользоваться jsfiddle, как использовать ее функции и какие возможности она может дать юным веб-мастерам. Сейчас мало кто из разработчиков не знает о его существовании, поскольку jsfiddle очень прост в использовании и достаточно функционален. Но, возможно, кто-то из вас откроет для себя что-то новое, прочитав эту статью.

Давайте знакомиться.

jsFiddle — одна из самых популярных сред веб-разработки (работающая в веб-браузере), позволяющая редактировать и запускать код, написанный на HTML, JavaScript и CSS, который будет называться «фиддлом». Есть возможность использовать библиотеки для JavaScript, такие как jQuery. Одно из популярных применений jsFiddle — вставка фрагмента кода в блоги, возможность делиться кодом через социальные сети и совместная работа над кодом.

Рабочие области jsFiddle

Интерфейс сайта за годы работы претерпевал изменения несколько раз и на данный момент он выглядит так

Смотреть

JSFiddle

[свернуть]

Редактирование макета. Настройка области.

Рабочая область jsFiddle поделена на четыре части, размеры которых можно менять по своему усмотрению: HTML, CSS, JavaScript и Result. Если при изменении размера вам все равно не хватает области для просмотра, вы можете воспользоваться редактором макетов в настройках. В самом низу открывшегося блока вы можете увидеть пункт Editor layout и выбрать там удобный для вас макет.

В июне этого года был добавлен ​​новый макет — табы.

HTML

Вы эстет и любите любоваться разложенным по полочкам кодом? Случайно сбилась разметка? Не можете найти нужные теги в груде различных символов? Не спешите паниковать. Вы можете в любой момент нажать кнопку Tidy на верхней панели и выровнять все строки автоматически.

При создании своего проекта, мы можем не трогать поле html, поскольку по умолчанию в нем стоит актуальная версия, на данный момент это HTML5. А вот дальше — лучше.

CSS

Область css позволяет прописывать стили нашего будущего проекта. Большой плюс этого инструмента в том, что при добавлении тега, открывающие и закрывающие скобки ставятся автоматически. Ровно как и отступы при переходе на новую строку. Нам достаточно нажать enter для перехода и продолжить писать код.

Для более продвинутых разработчиков предусмотрена возможность перехода с css на scss и активация css-файла normalize.css, который обеспечивает для HTML-элементов лучшую кроссбраузерность в стилях по умолчанию. Это значит, что вам не придется переживать за правильность отображения вашего проекта в различных браузерах. За вас все сделает этот файл.

JavaScript

Здесь все еще круче. Помимо ввода стандартного javascript, вы можете использовать популярные js-библиотеки, например React. Для этого, вам нужно нажать на ссылку в области JavaScript и в первом выпадающем списке выбрать язык. Если вы сделаете все правильно, выбранный язык будет отображаться в названии этой ссылки. По умолчанию стоит JavaScript + No-Library (pure JS).

Второй выпадающий список — это js-фреймворки и расширения. Здесь практически все что нужно. Я обычно использую его только для включения jQuery (ныне 3.3.1).

Блуждая по проектам других пользователей, я заметил, что третий и четвертый списки практически никем не используются. Практически! Так что вы тоже можете их пропустить, если не знаете для чего они.

Также, поле Resources можно использовать для быстрого поиска нужных библиотек. Просто начните вводить нужное слово и вам автоматически будут предложены варианты. Выбирайте нужный и жмите плюсик.

Result

И так, допустим, мы создали с вами интересный проект. Для того, чтобы его просмотреть, нам необходимо нажать на верхней панели кнопку Run. Поле Result покажет нам то, что мы натворили. Не забудьте выбрать удобный макет для просмотра и порекомендовать его пользователям.

Сохранение, размещение и публикация JSFiddle

Сохранение проекта

И вот у нас теперь есть классный проект, которым мы хотим поделиться с друзьями или просто разместить его на своем сайте. Для этого переходим в левый верхний угол, где у нас размещается вертикальное меню. Сейчас нас интересует в нем пункт Fiddle meta. В этих двух строчках мы укажем название проекта и описание, которое будет отображаться как для вас, внутри вашего профиля, так и для всех пользователей в SERP. Вводим данные. Затем, поднимаемся чуть выше, к верхней панели сайта и нажимаем кнопку Save. После первого сохранения она превратится в кнопку Update.

Ура! Ваш первый фиддл готов.

Публикация проекта

И так, давайте разместим наш проект на сайте.

Опять же, на верхней панели, после сохранения проекта, у нас появилась возможность поделиться им. Для этого, найдите новую кнопку Embed.

В открывшемся окне уберите ненужные вкладки (Tabs), выберите цвет темы, текста, фона или оставьте настройки по умолчанию. Далее щелкните в поле Embed code и скопируйте скрипт на свой сайт. Готово! Существует еще альтернативный вариант размещения — при помощи фрейма. Чтобы им воспользоваться нажмите там же на ссылку Prefer iframe? и скопируйте iframe. В нем вы также можете настраивать высоту и ширину по своему усмотрению. Если вы уберете все ненужные вкладки (поля в области редактирования) и оставите только результат, то на сайте у вас будет отображаться только он.

Пример.

Еще, на верхней панели есть полезная кнопка Fork. Благодаря ей, мы можем плодить бесконечное множество наших проектов, не создавая новых вкладок. Или же, она может пригодиться эстетам, которым не нравятся смотреть на количество правок. Например: JSFiddle Recommended Layout #35 is the latest version. Создали чистенький — удалили тот что с правками.

Бонус

Совсем недавно, для использования фреймворков, таких как Bootstrap, приходилось загружать ссылки на все необходимые файлы в Resources бокового меню. С недавнего времени эта необходимость пропала. При создании нового проекта, в верхней части сайта всплывает надоедливая панелька, которая предлагает воспользоваться одним из предложенных шаблонов.

В ней мы можем создать чистый проект или начать работу с уже подключенными стилями и скриптами, которые нам нужны. По-моему, это весьма неплохой баф.

Общие настройки. Отображение.

В правом верхнем углу находится ваш профиль, нажав на который вы можете отредактировать данные и посмотреть все свои проекты (фиддлы). Рядом с профилем находится еще одно интересное меню, о котором мы упоминали ранее. Оно позволяет нам редактировать:

  • цвет темы (темная — светлая)
  • убрать/добавить нумерацию в коде
  • вкл./выкл. перенос строк
  • увеличивать отступы
  • менять размер шрифта

А так же, автоматически обновлять и сохранять результат после каждого ввода новых данных (написано бета, но работает нормально), автоматически закрывать теги, включать и отключать выравнивание кода, и выделять соответствующие ярлыки (например, при наведении на открывающую скобку тега, у вас автоматически подчеркивается закрывающая). Так вы сможете видеть начало и конец кода.

Здесь же, мы можем отключить надоедливое окошко, упомянутое выше, активировав — Boilerplates Show boilerplates bar less often.

Чтобы ускорить процесс написания вашего проекта, вы можете использовать горячие клавиши и полезные функции.

Например:

  • 1. Чтобы создать готовую страницу, просто нажмите ! и кнопку tab на клавиатуре
  • 2. Чтобы создать навигацию по списку, вам не нужно писать весь код
<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>

Достаточно просто написать в одной строке nav#navbar>ul.#nav_ul>li.nav_li*6>a.nav_link-$>{link text $} и нажать Tab

Еще одна полезная функция — показ проекта на весь экран. Да! Для демонстрации результата, вы можете к своей ссылке на проект добавить в адресную строку /show/. Тогда пользователи, которые будут переходить по вашей ссылке увидят только результат, да еще и на весь экран. Вот наглядный пример.

Вот мы и разобрали основные функции этого простого и весьма полезного инструмента. Надеюсь, материал вам пригодится. Если вам понравилась статья или остались вопросы, оставьте свой комментарий ниже и вы обязательно получите на него ответ.

Автор: Андрей Шарапов
Источник: madeas.ru

Возможно Вас также заинтересует…