Если коротко, сайт Codepen позволяет писать и публиковать рабочие фрагменты кода (то, что иногда называют "сниппеты") вместе с результатом их выполнения. Главной фишкой Codepen является наглядность. Это выражено настолько, что в списке опубликованных сниппетов вместо описаний выложены миниатюры страниц, отрисовывающихся прямо в момент вывода списка. Некоторые примеры буквально завораживают далёких от компьютеров людей.

Страница отдельного документа на сайте Codepen содержит три небольших окна с кодом (HTML, CSS и Javascript соответственно), а основную часть страницы занимает результат выполнения кода - предпросмотр страницы с применёнными стилями и запущенными скриптами. Все изменения в коде сразу же отражаются на странице-результате. Нет никакой необходимости долго писать код и думать, как он будет работать, когда запустится в браузере. Можно почти мгновенно видеть результат изменения любого символа в коде.

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

Таким образом сайт Codepen - это отличный способ оперативно обсудить код прямо в процессе написания. Кроме того, это удобное и универсальное учебное пособие для начинающих веб-разработчиков.

Также профили на сайте Codepen можно рассматривать, как предельно наглядные заменители резюме для веб-кодеров, желающих произвести впечатление на потенциального работодатели или инвестора:

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

В долгосрочной перспективе о многом говорит облако тегов сайта:

Обидно, что это чудо пока только для Javascript. Было бы круто, если бы так можно было выкладывать код на ассемблере, C++ или Erlang. Но когда-то и это было фантастикой. Возможно лет через десять я напишу на очередной день программиста про сайт, который будет поддерживать сотню-другую языков программирования с такой же лёгкостью, как Codepen поддерживает Javascript.

Кстати, это уже третья статья в "Сайтах дня" на Ferra.ru, которая посвящена Дню программиста. Первые две можно прочитать тут и тут.

Источник: http://www.ferra.ru/ru/techlife/news/20 … softheday/