3,2
рейтинг
15 августа 2013 в 19:59

Разработка → Несколько интересностей и полезностей для веб-разработчика

Всем доброго времени суток. Как-то так получилось, за последнее время я увидел много интересных и полезных инструментов/библиотек/событий, которыми я хотел поделиться на Хабре. Все эти темы по отдельности, на мой взгляд, не заслуживали целой статьи. Но каждая из них достойна внимания и может кому нибудь пригодиться. В итоге получился небольшой дайджест:

Prepros



Великолепное приложение препроцессор для CSS, JS. Компилирует файлы следующих типов: LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml. Минифицирует JS на лету, при каждом изменении файла. Оптимизирует изображения. Доступен для Windows и Mac, а также как расширение для Chrome. Плюс ко всему создает HTTP сервер, для тестирования сайта на разный устройствах. Бесплатная замена CodeKit'у и Ghostlab'у вместе взятых, что в сумме позволит Вам сэкономить $75.


Dimensionsapp

Говоря о тестировании отображения веб приложений на разных экранах, хочется сказать про онлайн сервис Dimensionsapp.

Brackets


Open source редактор от Adobe написанный на JavaScript специально для веб-разработчиков. Приятный дизайн, встроенное обновление страницы без перезагрузки (аналоги: Emmet LiveStyle и LiveReload), просмотр стилей для HTML элементов из редактора по Cmd/Ctrl + E и множество плагинов, которых будет еще больше.


VerbalExpressions


Кто не любит писать регулярные выражения? Что если проверка на URL в JS будет выглядеть следующим образом:
// Create an example of how to test for correctly formed URLs
var tester = VerEx()
            .startOfLine()
            .then( "http" )
            .maybe( "s" )
            .then( "://" )
            .maybe( "www." )
            .anythingBut( " " )
            .endOfLine();

// Create an example URL
var testMe = "https://www.google.com";

// Use RegExp object's native test() function
if( tester.test( testMe ) ) alert( "We have a correct URL "); // This output will fire
else alert( "The URL is incorrect" );

Библиотека также существует для: Ruby, C#, Python, Java, Groovy, PHP, Haskell, C++, Objective-C.
GitHub

HTML.js


Относительно недавно я рассказал на Хабре про Voyeur.js с очень приятным синтаксисом для работы с DOM. HTML.js это форк Voyeur'а с рядом новых методов: .each(), remove(), ify(), ._other(), _fn()
image
GitHub

LiveScript


LiveScript — это «язык, который компилируется в JavaScript, косвенный потомок CoffeeScript». Синтаксис, возможно, не очень привлекательный на первый взгляд, зато сам LiveScript очень и очень функциональный:
LiveScript

take = (n, [x, ...xs]:list) -->
  | n <= 0     => []
  | empty list => []
  | otherwise  => [x] ++ take n - 1, xs

take 2, [1 2 3 4 5] #=> [1, 2]

take-three = take 3
take-three [3 to 8] #=> [3, 4, 5]

# Function composition, 'reverse' from prelude.ls
last-three = reverse >> take-three >> reverse
last-three [1 to 8] #=> [6, 7, 8]

А вот сколько бы нам с Вами понадобилось JS кода
var take, takeThree, lastThree, slice$ = [].slice;
take = curry$(function(n, list){
  var x, xs;
  x = list[0], xs = slice$.call(list, 1);
  switch (false) {
  case !(n <= 0):
    return [];
  case !empty(list):
    return [];
  default:
    return [x].concat(take(n - 1, xs));
  }
});
take(2, [1, 2, 3, 4, 5]);
takeThree = take(3);
takeThree([3, 4, 5, 6, 7, 8]);


lastThree = function(){
  return reverse(takeThree(reverse.apply(this, arguments)));
};
lastThree([1, 2, 3, 4, 5, 6, 7, 8]);
function curry$(f, bound){
  var context,
  _curry = function(args) {
    return f.length > 1 ? function(){
      var params = args ? args.concat() : [];
      context = bound ? context || this : this;
      return params.push.apply(params, arguments) <
          f.length && arguments.length ?
        _curry.call(context, params) : f.apply(context, params);
    } : f;
  };
  return _curry();
}



git-html5.js


Реализация git на JavaScript в вашем браузере. Применение я вижу только в примере работы вышеописанного Brackets (на JavaScript) как расширения для Chrome, но уверен, что это полезная штука для настоящих гиков.

GitHub
Демо-страничка с демонстрацией Commit, Push, Pull и Branching

Краудфандинг: Ghost — Just a Blogging Platform


Насколько я знаю, это первая CMS, которая будет разработана силами краудфандинга. Автор проекта John O'Nolan собрал уже $400 000 на Kickstarter, что составляет 785% требуемой суммы. Ghost — это открытый проект, замечательный дизайн и очень удобный адаптивный интерфейс.


Infogram



Инфографика способна не только организовать большие объёмы информации, но и более наглядно показать соотношение предметов и фактов во времени и пространстве, а также продемонстрировать тенденции. Inforgram — очень простой инструмент для создания инфографики. Возможность импортировать данные в форматах XLS, XLSX и CSV. Если я не ошибаюсь, то это единственный сервис для создания интерактивной инфографики. Добавляйте диаграммы, карты, фото, видео. Сервис выполнен в формате социальной сети. Делитесь, шарьте, используйте embed code для своих сайтов.

                                                          Следующая подборка (Выпуск 2)
Понравилась ли Вам подборка?

Проголосовало 1236 человек. Воздержалось 323 человека.

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

Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (23)

  • +8
    Набор инструментов довольно интересный, но многим из перечисленных есть более функциональные альтернативы или у них есть значительные недостатки.

    Preprocess — хорошая бесплатная альтернатива CodeKit, но Grunt.js куда более функционален и позволяет писать конфигурационный файл к самому проекту.

    VerbalExpressions — интересен из-за простоты в использовании, но его производительность и функциональность такого решения уступает regexp. Также является дополнительной зависимостью к проекту и требуется изучить команды самой библиотеки.

    HTML.js — заинтересовался пару недель назад Voyeur.js, но сами разработчики говорят о большой проблеме производительности библиотеки из-за, которой ее категорически не рекомендуют использовать на production. Очень надеюсь, что HTML.js являясь fork'ом Voyeur.js смог избавиться от этой проблемы.

    Подборка довольно хорошая, но нужно делать обзор всех качеств новых технологий и библиотек перед тем, как использовать в живом проекте.
  • –2
    Под мак лучше coda пока ни чего не нашел
    • +10
      WebStorm
      • +1
        IDEA
        • 0
          Согласен, при всей моей многолетней любви к Coda и Coda 2, я в итоге променял ее на PhpStorm, а сейчас думаю об апгрейде до IDEA.
    • 0
      А я вот, наоборот, ищу что-то пофункциональнее, так как Coda хорошо умеет работать только с html/css, а вот с тем же javascript все не так как хотелось бы. Понравился Sublime, понравился WebStorm (да чего еще у этих ребят может не нравится то, TeamCity спас в свое время). Но все как-то не то, попробовал сыроватый Brackets и вроде бы понравился, но пока оставил все 3 и буду еще день-два смотреть где мне удобнее.
    • 0
      Sublime 3
  • +1
    Brackets от Adobe — штука желанная, но пока сырая до ужаса, имел опыт трех подходов к снаряду с перерывом 4-5 месяцев между подходами. Русский язык пока так нормально и не запилили, механизм настройки внешнего вида через одно место, да и вообще с настройками пока туговато.
    Кода как-то не пошла, поэтому пока только TextWrangler, но периодически посматриваю в сторону Sublime, который с каждым разом все больше радует, но пока не решаюсь пересесть на него.
    • 0
      А я как-то поставил Sublime, и уже без него не могу. Главное — запомнить кнопки, в этом хорошо помогает шпаргалка. Ну и Emmet, куда ж без него. Любовь с первого взгляда.
  • +1
    Из всего этого заинтересовал только html.js. Ну и может быть git-html5.js.

    Про Ghost, мне кажется, совсем не в тему. Как это может быть полезно для меня как разработчика?
    • 0
      Как раз ради Ghost я добавил в название слово «интересность». Мне очень понравился этот проект и его успех на Kickstarter
      • +1
        Да, наконец то на рынок старых ленивых брендов выйдет современный движок.
      • 0
        С самого начала кампании на кикстартере слежу за Ghost. Как раз мне на день рождения подарок будет, если они конечно обещание релиза к концу лета сдержат.
      • 0
        А расскажите чем этот движок настолько крут что собрал такую сумму? Я вот не увидел никаких киллер фич. Или это просто адаптивный дизайн добрался до CMS из коробки и такой фурор навел среди блогеров без знания IT?
        • 0
          Я тоже вчера вдохновился этим Ghost-ом, а сегодня, на свежую голову почитал про него.

          Итак:
          Основатель — бывший сотрудник Вордпресса по дизайну / юзабилити, не технарь.
          Сделан на Node.js (!) коллективом, которому, по сути, проект был отдан на аутсорс.
          Поддерживает разработку плагинов и тем, но непонятно как плагины и темы будут вписываться в его строгий интерфейс и минималистичный дизайн. То-есть хороший дизайн — это тот к которому нельзя ничего добавить, и нельзя ничего убрать. А у Ghost хороший дизайн.
          Комментирование не поддерживается самим движком — типа используйте сторонние решения вроде Дискуса, он классный. (!)

          По мне — совсем так не айс. Имхо эстетическая привлекательность продукта не позволила верно оценить его техническую сторону, которая очень важна и для разработчиков и для юзеров.
          • 0
            Комментирование есть у социальных сетей, многие этой возможностью пользуются вместо коробочного решения.
            Для тем наверняка будет простая шаблонизация (очень надеюсь). Плагины скорее всего будут расширять возможности дашборда и добавлять недостающий функционал вроде подключения комментирования, рекламных блоков и прочего. Также надеюсь, что с разработкой плагинов все будет просто.
        • 0
          Ну во-первых редактирование с live preview (слева текст, форматированный с помощью Markdown и справа превьюшка). В нижней панели можно проставить теги с автозаполнением и установить статус записи (черновик, опубликовано и так далее).
          Во-вторых дашборд с шикарным представлением статистики.
          В-третьих интеграция с социальными сервисами из коробки.
          В-четвертых простая шаблонизация (насколько я понял).
          В-пятых краудсорсинговый информационный портал, в пример приводят mashable.com (тут я мог не так выразить мысль).
          Ну и наконец это просто блоггинг-платформа, не предназначенная ни для чего другого.
    • 0
      Спич прекрасен: чётко, убедительно, from heart

      В движке, как я посмотрел, ничего революционного

      Ничего, кроме того, сколько он собрал на краудфандинге :)
  • 0
    В избранное!
    • 0
      В мемориз!
  • +1
    Спасибо за ссылку на TypeScript. Смеёмся всем офисом уже минут 15. Подумываем в наказание за проступки давать разработчикам дебажить прогу на этом языке.
    • 0
      Опечатка? LiveScript? :) Или я что-то пропустил?

      Такую же реакцию вызвала вчера новость про новый язык Zephir между C и PHP
      • 0
        LiveScript, ага. Язык-ад: через два месяца разработки код можно будет выкидывать

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