последние записи — Tom Adler’s blog

javascript ide

недавно вышла IDE WebStorm специально для веб-разработчиков. Я скачал её на попробовать, впечатлился, и даже подумал купить её. Но как же обойтись без небольшого исследования перед приобретением важного рабочего инструмента? : )

последний раз я сравнивал IDE пару лет назад, и не нашёл ничего достаточно хорошего. Все они приблизительно одинаково не подходили под мои требования. В итоге я остановился на Komodo Edit, который хотя бы тормозит меньше, чем остальные. Но порой за два года многое меняется. Итак, вот мои претенденты.

Eclipse — классная среда. В ней очень умно и удобно сделано почти всё. Собственно, именно её я использовал, когда работал преимущественно не с js. Однако поддержка яваскрипта в ней всегда хромала. Под эклипс есть несколько плагинов, поддерживающих яваскрипт, и все они почти блокнотного уровня. JSEclipse выкуплен и убит Адобом. Spket ничем особенным себя не проявляет. WebTools, хотя и сменил версию с 1.5 на 3, по-прежнему примитивен.

Aptana я пущу отдельным абзацем, хотя это тоже перелицованный эклипс. Хвалят её, конечно, и даже тормозить она перестала (странно было: эклипс не тормозит, а аптана еле шевелится). Но в плане яваскрипта ушла недалеко.

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

Visual Studio я не рассматривал по понятным причинам ; )

в чём же обломались все перечисленные IDE? В примитиве. Go to definition работает, только если функция определена в этом же файле. Это смешно для любого хоть сколько-то крупного проекта. Даже Komodo иногда справлялся с этой задачей.

в общем, пока что я попробую остановиться на WebStorm, благо демка у него на 45 дней.

да, на всякий случай скажу, что между набором простых утилит и gui я выбираю gui

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

но программирование серьёзных вещей целиком построено на абстракциях. Ты абстрагируешься, отвлекаешься от частностей, чтобы сосредоточиться на более высоком уровне сложности. И в силу сложности задачи получается развесистое дерево, которое целиком загрузить в голову невозможно. Поэтому зачастую становишься исследователем чужого, а порой и своего кода. А для исследования как раз лучше всего gui.

кстати, мой любимчик — highlight selected. Поставил курсор на слово, и оно подсветилось во всём тексте. Для этого нужно нажать ноль клавиш.

javascript, software, tools

удобная работа с классами

в спеке html5 есть удобный интерфейс classList для работы с классами (и другими подобными строками из разделённых пробелами слов). Естественно, он базируется на том, что яваскрипт-библиотеки давно уже сделали удобным и привычным, поэтому переходник сделать очень легко в качестве развлечения на пять минут:

Element.addMethods({
  getClassList: function(element) {
    element = $(element);
    return element.classList || (element.classList = {
      has:    attach('has'),
      add:    attach('add'),
      remove: attach('remove'),
      toggle: attach('toggle')
    });
    function attach(name) {
      return element[name + 'ClassName'].bind(element);
    }
  }
});

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

  item:   function(index){ return element.classNames()[index]; },
  length: function(){ return element.classNames().length; },

в целом, конечно, это очень похоже на переходник к не менее удобному dataset, который я делал пару лет назад.

extend.js, prototype.js, standards

webfinger для вашего емейла

обновление от 2014-11-16: всё стало по-другому

в свете недавнего подключения гуглом поддержки webfinger для всех публичных профилей я решил сделать то же самое для своего емейла me@arty.name. Как выяснилось, это очень просто.

в document root домена я создал папку .well-known
в эту папку я положил файлы host-meta, me@arty.name, acct:me@arty.name, .htaccess

в файле host-meta я написал:

<?xml version='1.0' encoding='UTF-8'?>
<XRD xmlns='http://docs.oasis-open.org/ns/xri/xrd-1.0'
  xmlns:hm='http://host-meta.net/xrd/1.0'>
  <hm:Host>arty.name</hm:Host>
  <Link rel='lrdd'
    template='http://arty.name/.well-known/{uri}'>
    <Title>Resource Descriptor</Title>
  </Link>
</XRD>

в файлах me@arty.name и acct:me@arty.name я написал:

<XRD xmlns="http://docs.oasis-open.org/ns/xri/xrd-1.0">
  <Subject>acct:me@arty.name</Subject>
  <Alias>http://arty.name/</Alias>
  <Link rel="http://webfinger.net/rel/profile-page"
    href="http://arty.name/" type="text/html"/>
  <Link rel="http://microformats.org/profile/hcard"
    href="http://arty.name/" type="text/html"/>
  <Link rel="http://gmpg.org/xfn/11"
    href="http://arty.name/" type="text/html"/>
  <Link rel="http://specs.openid.net/auth/2.0/provider"
    href="http://arty.name/"/>
  <Link rel="describedby" href="http://arty.name/"
    type="text/html"/>
</XRD>

для того, чтобы все эти файлы отдавались с правильным Content-Type, в .htaccess я добавил строчку
```
DefaultType application/xrd+xml
```

вуаля! теперь можно идти на webfinger demo client и пробовать там адрес me@arty.name

что касается двух одинаковых файлов: нынешний черновик спецификации webfinger предполагает, что URI будет начинаться с acct:. Однако демо-клиент, видимо, был написан ещё до этого решения, и не только не добавляет эту схему к емейлам, но даже удаляет её, если она указана явно.

standards

open google reader

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

работает он как юзерскрипт на домене GR, получая таким образом доступ к GR API. На всю полноту функций папочки не претендует, при необходимости даёт к нему доступ

некоторые фичи:

принудительное обновление всех фидов (если читать больше нечего)
пользовательские фильтры от нежелательных тем и криво оформленных постов (прощайте iPad и бессмысленные заголовки)
решена проблема «нажмите обновить, чтобы прочитать остальные 5 записей»
подтянутый интерфейс
настраиваемые хоткеи (даже в русской раскладке)
моментальная загрузка даже на слабых наладонниках
ссылки открываются в фоновых табах, чтобы реже переключаться туда-обратно
хоткей «открыть первую ссылку в записи» для новостных блогов
добавление тега одним кликом
умная прокрутка пробелом
favicons!
автолайкание при расшаривании
настройте насколько угодно агрессивную предзагрузку
в посте много больших картинок? теперь их удобно смотреть!
в записи показываются те теги, что назначил ей автор
количество непрочитанных записей стоит в начале заголовка таба

пока что у проекта один пользователь — я, и о других способах использования ридера я думал (и знал) мало. Из этого следуют «баги»:

мало тестировалось в браузерах, отличных от оперы, поэтому вещи типа «открыть в фоновом табе» в них могут глючить
только expanded view (знаете яваскрипт? час работы)
сортировка указывается в коде, а не переключается в интерфейсе
нет списка подписок для чтения их по одной
отметка прочитанным при скролле отключается в коде
и вообще все настройки — в коде : )

для установки на странице проекта кликните по ссылке для своего браузера

и да поможет запуску пятница!

javascript, open-google-reader, tools, usability, userjs

о новомодных кодеках и поддержке html5 video

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

для начала: если кто-то вдруг этого ещё не знает, во флеш встроена поддержка кодека H.264. То есть, условно говоря, плеер для такого видео делается на флеше за пять минут. Этим пользуются ютюб и вимео, храня петабайты своего видео именно в этом формате. С их серверов эти готовые файлы напрямую отдаются флеш-плееру на вашем компьютере.

итак, очевидное: к этому моменту всё, что сделали ютюб и вимео — потратили один день программиста и неделю тестировщика, чтобы по желанию юзера вместо embed на странице оказывался тег video. Всё. Это вся «поддержка html5 video». Соотношение затрат и позитивной реакции на это событие очень впечатляет, так что шаг умный, не спорю. Меня удивляет скорее радость юзеров: чему тут радоваться?

а вот чего не сделал ни один из этих сайтов (но давно уже сделал dailymotion) — это перекодирования имеющегося архива видео в открытый и бесплатный Ogg Theora. Поэтому если за спиной вашего браузера не стоит богатейшая компания типа Google или Apple, способная заплатить до $5.000.000 за право встраивать в свои продукты кодек H.264, если вы пользуетесь собранным энтузиастами браузером Chromium или Firefox, то вам остаётся тормозной флеш или разные ухищрения.

естественно, перекодирование таких объёмов требует огромных ресурсов. Поэтому ютюб не будет этим заниматься сейчас. Нет, пока что они соберут хорошую карму за упоминание html 5 и потестируют фичу на широких массах юзеров. А вот через полгода-год, если не через два, возможно, начнётся конвертация. Если всё будет хорошо.

впрочем, спору нет, для сообщества веб-разработчиков и производителей браузеров это был очень полезный шаг. Заодно и patent awareness вырастет.

standards