Привет! Сегодня я хочу рассказать об одном полезном инструменте – jsfiddle .
Сегодня мало кто из разработчиков не знает о его существовании, поскольку jsfiddle очень прост в использовании и достаточно функционален.
Но, возможно, некоторые из вас откроют для себя что-то новое после прочтения этой статьи.
Будем знакомы.
jsFiddle — одна из самых популярных платформ веб-разработки (работающая в веб-браузере), которая позволяет редактировать и запускать код, написанный на HTML, JavaScript и CSS, который будет называться «скрипкой».Можно использовать библиотеки JavaScript, такие как jQuery. Одним из популярных вариантов использования jsFiddle является вставка фрагмента кода в блоги, обмен кодом через социальные сети и совместная работа над кодом.
Рабочие пространства
Интерфейс сайта за годы работы несколько раз претерпевал изменения и на данный момент выглядит так:
Редактирование макета.
Настройка области Рабочая область jsFiddle разделена на четыре части, размеры которых можно менять по своему усмотрению: HTML , CSS , JavaScript И Результат .
Если вам по-прежнему не хватает области просмотра при изменении размера, вы можете воспользоваться редактором макетов в настройках.
В самом низу открывшегося блока вы можете увидеть пункт Макет редактора и выберите там удобную для вас планировку.
05.06.2018 В JSFiddle добавлен еще один макет, позволяющий оформить рабочее пространство в виде вкладок.
Об этом ранее Оскар упомянул в твоем Твиттере.
HTML
При создании нашего проекта мы не можем трогать поле html, так как по умолчанию оно содержит текущую версию, на данный момент это HTML5. Но дальше лучше.
CSS
Область css позволяет указать стили нашего будущего проекта.Большим преимуществом этого инструмента является то, что при добавлении тега автоматически расставляются открывающие и закрывающие скобки.
Точно так же, как и отступ при переходе на новую строку.
Нам просто нужно нажать Enter, чтобы продолжить написание кода.
Если вы эстет и ваш код случайно затерялся, не спешите паниковать.
Вы можете нажать кнопку в любое время Аккуратный на верхней панели и автоматически выровняйте все строки.
Для более продвинутых разработчиков есть возможность переключиться с css на scss и активировать css-файл.
css , который обеспечивает HTML-элементам улучшенный кросс-браузерный стиль по умолчанию.
Это означает, что вам не нужно беспокоиться о правильном отображении вашего проекта в разных браузерах.
Этот файл сделает все за вас.
JavaScript
Здесь еще круче.Помимо набора стандартного JavaScript, вы можете использовать популярные js-библиотеки, такие как React. Для этого вам необходимо нажать на ссылку в области JavaScript и выбрать язык в первом раскрывающемся списке.
Если вы все сделаете правильно, выбранный язык появится в заголовке этой ссылки.
Значение по умолчанию: JavaScript + отсутствие библиотеки (чистый JS) .
Второй раскрывающийся список — это js-фреймворки и расширения.
Здесь есть почти все, что вам нужно.
Обычно я использую его только для включения jQuery (теперь 3.3.1).
Бродя по проектам других пользователей, я заметил, что третий и четвертый списки практически никем не используются.
Практически! Так что вы тоже можете их пропустить, если не знаете, для чего они нужны.
На вертикальной панели слева от области редактирования есть строка Ресурсы – URL-адрес cdnjs .
В нем вы можете размещать прямые ссылки на css и js файлы из сторонних источников.
Например, добавьте шрифты потрясающий
Результат
И так, допустим, мы с вами создали интересный проект. Для того чтобы его просмотреть нам нужно нажать кнопку «Выполнить» на верхней панели.Поле «Результат» покажет нам, что мы сделали.
Не забудьте выбрать удобный для просмотра макет и порекомендовать его пользователям.
Вам может быть полезно здесь Рекомендуемые макеты JSFiddle — это проект с открытым исходным кодом, который предоставляет макеты (сетки) внутри вашего проекта.
Их можно использовать как вспомогательный инструмент для пользователей, которые в поисках необходимого материала попадают на страницу вашей разработки.
Сохранение, размещение и публикация JSFiddle
Сохранение проекта
И теперь у нас есть крутой проект, которым мы хотим поделиться с друзьями или просто разместить его на нашем сайте.Для этого идем в левый верхний угол, где у нас есть вертикальное меню.
Теперь нас интересует момент Мета скрипки .
В этих двух строках мы укажем название и описание проекта, которые будут отображаться как у вас внутри вашего профиля, так и у всех пользователей в поисковой выдаче.
Введите данные.
Затем поднимитесь чуть выше, на верхнюю панель сайта и нажмите кнопку Сохранять .
После первого сохранения она превратится в кнопку Обновлять .
Ура! Ваша первая скрипка готова.
Публикация проекта
Итак, давайте разместим наш проект на сайте.Опять же на верхней панели после сохранения проекта у нас есть возможность поделиться им.
Для этого найдите новую кнопку Встроить .
В открывшемся окне удалите ненужные вкладки (Tabs), выберите цвет темы, текста, фона или оставьте настройки по умолчанию.
Далее нажмите в поле Код для вставки и скопируйте скрипт на свой сайт. Готовый! Есть еще один альтернативный вариант размещения – с помощью рамки.
Чтобы использовать его, нажмите ссылку «Предпочитаете iframeЭ» и скопируйте iframe. В нем вы также можете настроить высоту и ширину в соответствии с вашими потребностями.
Если удалить все ненужные вкладки (поля в области редактирования) и оставить только результат, то на сайте будет отображаться только он.
Вот и все! Если у вас есть вопросы или предложения, пишите в комментариях.
Источник: https://madeas.ru Теги: #CSS #JavaScript #HTML #веб-дизайн #jsfiddle
-
Лучшая Альтернатива Microsoft Steadystate
19 Oct, 24 -
Новые Угрозы Коммунальным Scada-Системам
19 Oct, 24 -
Идеальный Тихий Убийца – Хамелеон
19 Oct, 24
