html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Онлайн-площадки для написания html, css и js

Написание кода порой занимает немало времени. Но случается, что совсем не хочется открывать блокнот, а нужно просто проверить какую-то сумасшедшую идею, пришедшую в голову в три часа ночи или же сразу поделиться своим результатом с другими людьми. Веб-редакторы в режиме онлайн решают эту проблему и мгновенно предоставляют вам готовую среду для создания кода, где вы можете сразу же начать экспериментировать. Эти инструменты позволяют объединить CSS, HTML и JavaScript, часто даже создавать и совместно использовать примеры кодирования. Сегодня мы рассмотрим 6 фаворитов, у которых есть свои плюсы и минусы.

 

1.CSSDesk

Мы начали с CSSDesk потому, что он один из старейших в нашем списке. Это очень простой в понимании онлайн-инструмент для написания HTML и CSS.

Плюсы:

Несомненно, у этого инструмента большое количество плюсов. Он очень удобен в пользовании. Есть три основных раздела: HTML, CSS и предварительный просмотр, размеры которых могут быть легко оптимизированы одним щелчком. Сразу виден результат вашего кода. Всё очень просто: откройте сайт и начните создавать.

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

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

Минусы

Честно говоря, их очень мало. Самым большим недостатком для хардкор-кодеров является отсутствие поддержки JavaScript. Если это вас смущает, попробуйте один из других вариантов.

2. JS Bin

JS Bin является еще одним популярным местом, где можно возиться с вашим кодом. Дизайн этого приложения достаточно минимальной и действительно позволяет сосредоточиться на коде. Здесь есть 3 раздела: для просмотра html,  js и пенель предварительного просмотра. Вы можете оставить только те панели, которые вам нужны.

Плюсы

Есть немало приятных функций в JS Bin. Первое, что обновления страницы не уничтожает вашу работу. Предварительный просмотр обновляется автоматически, но для тех редких случаев, когда вам нужно обновиться в ручную, приятно, что ваш основной инстинкт (Ctrl-R) не приводит к случайной гибели кода и не заставляет вас заново всё мастерить.

Как и в CSSDesk, можно сохраниться, поделиться своей работой и загрузить её.  Вы можете создать свой собственный JS или подключить библиотеку вроде JQuery.

Другой интересной особенностью является возможность контролировать, какие панели вы видите, манипулируя URL. Например, “http://jsbin.com/#javascript,html,live” позволит вам видеть 3 раздела, в то время, как  “http://jsbin.com/#html,live”  — только два.

Минусы

Это неплохой инструмент, но ему определенно не хватает шарма других. Нет специального раздела для CSS и нужно вставлять его в HTML.

3.jsFiddle

jsFiddle является самым популярным вариантом в этом списке на данный момент. И не зря, ведь это удивительное приложение. Давайте посмотрим правде в глаза: когда вы начнете копаться в jsFiddle, вы больше никогда не взглянете на любые другие варианты.

Плюсы

Есть множество причин, почему вы должны использовать jsFiddle. Во-первых, он очень удобен в использовании. Здесь присутствуют четыре панели (HTML, CSS, JavaScript и панель просмотра) и большое количество настроек.

Вы можете настроить CSS и JavaScript панели и использовать ваши любимые инструменты.  Вы найдете здесь поддержку синтаксиса Sass SCSS и CoffeeScript.

jsFiddle позволяет авторизироваться и просматривать ваши прошлые сохраненные работы. Есть возможность автоматически убирать грязный код.

Можно быстро подключить любую библиотеку Java Script (JQuery, MooTools и т.д. ).

Ещё одной приятной особенностью является то, что вы можете вставлять скрипты в веб-страницы.

Минусы

Главным минусом jsFiddle является отсутствие опции автоматического обновления для предварительного просмотра. Если вы уже протестили все другие варианты из этого списка, вам будет трудно трудно смириться с тем, что постоянно нужно обновляться вручную. Горячие клавиши, конечно, могут немного ускорить этот процесс, но всё же...

4.Dabblet

Dabblet -  новичок в этом жанре. Как CSSDesk, он сосредоточен только на HTML и CSS. Тем не менее, он приносит некоторые серьезные инновации, которые вы не найдете ни в одном другом редакторе.

Плюсы

По умолчанию Dabblet делится на четыре вкладки: CSS и результат, HTML и результат, все вкладки и просто результат. Это обеспечивает гибкость и внимание, позволяя вам всегда следить за результатом.

Вы можете изменить положение блоков, как показано ниже. Расположение разделов может быть вертикальным, горизонтальным или на весь экран с наложенной областью с кодом. Обратите внимание, есть также сообщения об использовании prefix-free. Это означает, что вы не должны использовать префиксы всех браузеров.

Dabblet имеет много вариантов для сохранения, например, можно «сохранить анонимность.»

Ещё одна замечательная  функция Dabblet -  это потрясающий эффект при наведении в CSS. Его легче показать, чем описать. Вот несколько примеров:

Вы можете получить предварительный просмотр шрифтов, цветов, размеров, и даже изображений.

Минусы

Dabblet немного причудливый с визуальной точки зрения.

5.Tinkerbin

Tinkerbin очень похож на jsFiddle.  Хотя здесь есть не все функции, которые доступны в jsFiddle, он имеет несколько собственных хороших функций.

Плюсы

Удобный интерфейс. HTML, CSS и JavaScript разделены вкладками, которые позволяют вам сосредоточиться только на одном из них.

Кроме того, Tinkerbin поддерживает еще более альтернативный синтаксис вариантов, чем jsFiddle. Вы можете выбрать HTML или HAML, CSS, SCSS (с Compass), старый синтаксис SASS или LESS, JavaScript  или CoffeeScript. Разумеется, если вы работаете с препроцессорами — этот вариант лучший для вас.

Tinkerbin это единственный вариант, который позволяет увидеть весь ваш код при помощи окна «View Source».

Минусы

Хочется поиграть с настройками и сделать область предварительного просмотра шире.

Нет учетной записи, интеграции в GitHub , и т.д. Вы просто сохраняете свои эксперименты на сокращенный URL-адрес.

6.Codepen

Codepen — нашумевший проект Криса Койера. Больше узнать о нём вы можете посмотрев следующее видео:

Заключение

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

А какими инструментами вы пользуетесь? Какой из них ваш любимый и почему?

По материалам designshack

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

4

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • sobeninaolga
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции