Hayaku — пишем CSS быстрее

[LeeMiller]

Всё хорошо, всё удобно, но если ты пишешь только CSS.
Когда пытаешься использовать похожие модули для php/html/js/wp. У которых свои взгляды на сокращения, — голова начинает сходить с ума, и думается, что лучше уже продолжать писать в plain :)

[TheBits]

В смысле какие похожие модули? Дайте пример.

[kizu]

Идея Хаяку во многом именно в том, что, как таковых, сокращений-то и нет. Есть набор алгоритмов, разбирающих аббревиатуры и подбирщих наиболее подходящую пару свойство-значение из словаря.

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

[huze]

Плагины (пакеты в терминах ST2) и сниппеты завязываются на тип файлов. Так что сокращения в CSS и PHP неплохо уживаются вместе.

[snater]

Спасибо, попробую. Иногда напрягает, что в пустом файле ST2 не понимает с полуслова.

[ualinker]

Зачем еще один Дзен-Кодинг? code.google.com/p/zen-coding/
К тому же ZC реализован почти везде (в виде плагинов или нативно), где только можно.

[ualinker]

Спасибо, не знал. В *Storm он до сих пор называется Zen, хотя у них там своя реализация, не дословная.

[modernstyle]

в саблайме пушат сообщение что поддержка Дзена остановлена, и предлагают скачать Эмметт (он, кстати, весьма силен в CSS)

[sprite]

Лично я использую Emmet (ex ZenCoding) для HTML, но вот для CSS больше понравился Hayaku. Главное его отличие: нечеткая логика подстановок. Там, где в Emmet/ZC нужно точно помнить все правила (это как раз характерно для многочисленных CSS-правил) или пользоваться шпаргалками, в хайаку (все время хочется написать хуяку ^_^) можно просто написать то, что тебе кажется подходящим и оно (чаще всего) сработает как ожидаешь.

[PavlovM]

Да ну, бросьте. До Emmet использовал схожую «систему» собственной разработки, поставил Emmet, за пару дней верстки выучил все нужные сокращения назубок. Там все логично и просто.

[TheBits]

Для хаяку надо просто знать что такое свойство есть в CSS. По-этому любое свойство доступно пользователю как короткая аббревиатура.

Например есть свойство pointer-events. Попробуйте сказать, не заглядывая в cheat-sheet, какая аббревиатура у этого свойства в emmet?

В хаяку можно написать piev, pevs, point-even или так как вам удобно написать сокращённо это свойство.

[chikuyonok]

Ну, раз уж на то пошло, то у Hayaku тоже есть проблемы.

Например, я хочу получить свойство font-style, пишу аббревиатуру fs, однако получаю font-size. Или хочу получить border-radius: пишу bdr, а получаю border-right.

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

К тому же, в ST2 уже есть fuzzy search по вводимым CSS-свойствам (который Hayaku зачем-то удаляет) с визульным фидбэком, чтобы пользователь всегда видел, что сейчас появится.

[kizu]

Конечно, есть проблемы, это же первая публичная альфа всего лишь :) если возникнет необходимость изменить какую-то аббрвиатуру, заменив её на статичную — такая возможность в будущем будет. Но у нас задача сделать такой алгоритм, который бы без хардкожа максимально «угадывал» то, чего хочет пользователь. И, конечно, без телепатии всем не угодишь :)

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

И да — Хаяку не претендует на идеальность, это всего лишь ещё один способ быстро писать CSS. Если кого-то он не устроит — всегда есть как минимум несколько альтернатив. Конкуренция — это хорошо.

[chikuyonok]

Да я не против конкуренции, я просто свой продукт защищаю :)

[TheBits]

Хорошие примеры с аббревиатурами fs и bdr. Статические аббревиатуры от них тоже не спасают, когда пользователь ощущает что свойство в аббревиатуру на самом деле надо было сокращать по другому.

Я собрал статистику по частоте использования свойств вебмастерами, font-size — 1.72% вхождений, font-style — 0.06%. При ранжировании лучшую оценку получает font-size. В естественных языках наиболее употребимые слова короткие и что для короткой аббревиатуры будет раскрываться более частое свойство кажется очевидным. Для bdr стоит статическое исключение, по алгоритму оно раскрывается в border-radius (из-за частоты 0.77 против 0.29 у border-right).

«Угадай что появится» есть первые 10 минут работы. Это как поисковый запрос, если пользователь не нашёл что искал — он дополняет запрос, конкретизирует. Второй раз уже пишет сразу работающий вариант.

Не понял про встроенный fuzzy search в ST2. Вам не хватает выпадающего списка?

[chikuyonok]

Я собрал статистику по частоте использования свойств вебмастерами, font-size — 1.72% вхождений, font-style — 0.06%.

А как эти данные должны мне помочь получить желаемый результат? :)

Для bdr стоит статическое исключение, по алгоритму оно раскрывается в border-radius (из-за частоты 0.77 против 0.29 у border-right).

Но почему тогда bdr сейчас раскрывается в border-right: 1px solid;?

«Угадай что появится» есть первые 10 минут работы.

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

Не понял про встроенный fuzzy search в ST2. Вам не хватает выпадающего списка?

Да, чтобы я мог сразу видеть, что получится в итоге.

[TheBits]

bdl -> border-left,
bdr -> border-right

Буду очень благодарен если Вы покажите примеры последовательности поиска нужной аббревиатуры и примеры неуклюжих аббревиатур. За всё время этой первый раз когда я получаю отзыв о плохих аббревиатурах.

[chikuyonok]

ОК, вот примеры:

bdra (border-radius) вместо bdrs (border-right-style)

trnsform (transform) вместо trf (transition-timing-function)

bsha (box-shadow) вместо bsh (border-style:hidden;)

con (content) вместо cn (cursor:none;)

anam (animation-name) вместо an (animation:none)

piev (pointer-events) вместо poi (position)

и т.д.

[TheBits]

Спасибо. Буду смотреть.

[CyberAP]

Всё гораздо круче, ведь можно написать просто pe. В большинстве случаев достаточно вводить первую букву из словосочетаний свойств. То есть к примеру нужно задать background-position-x и вводим только первые буквы из трёх слов, bpx. Но как уже выше отметили не со всеми свойствами это работает.

[PavlovM]

Положа руку на сердце, как часто вам доводилось использовать свойство pointer-events? :) Подобное, при случае, можно и руками набрать.

Как уже отметили, статические аббревиатуры имеют свои преимущества. В конце концов, CSS тоже не разрешает нам писать podding, poding, pading и padding, хотя, может быть, это кому-то бы и упростило жизнь.

Но вообще, безусловно, пусть засыхают сто цветов и так далее. Конкуренция — это отлично, как и богатый выбор инструментов. Успехов Хаяке :)

[CyberAP]

Fuzzy typing, вот зачем.

[xamelion]

А чем zen-coding не устраивает. Работает под большинство IDE и текстовые редакторы поддерживающие плагины. И ускоряет работу не только в CSS но и HTML. Например ul>li*5->a[href='#']{Ссылка номер $} Создаст список из пяти элементов с ссылками и нумерованным текстом.

[Carduelis]

Вполне можно автоматизировать это через ctrl+D в том же notepad++

[TheBits]

Вы можете использовать zen-coding для html и hayaku для css.

[Dimox]

Попробовал так и сделать. Поставил Emmet и Hayaku. В настройках Emmet указал «не работать в CSS-файлах», однако Hayaku «не заводится» — сокращения не срабатывают. Может быть подскажете, как это сделать?

[Dimox]

Разобрался. Hayaku почему-то попал в опцию «ignored_packages».

[prefrontalCortex]

Святые небеса, какое милое название :)

Скрытый текст

«Хаяку», яп. 早く — «быстрее», «поторопись»

[Athari]

Вы неправильно произносите. Надо так:

Хайййййй-аку! — и всё готово.

[garex]

Во-во! Я сначала на него внимание обратил. Теперь вот ещё статью заодно почитаю. Афтар — хитрец! Знает, как народ то завлечь :)

[prefrontalCortex]

Я сначала на него внимание обратил.

Я, признаться честно, тоже :)

[repsak]

извините за прямолинейность, НО: ** ап стену.

[CyberAP]

Кстати, в статье забыли упомянуть ещё одну хорошую фичу как Ctrl+Enter после написания селектора, который добавит фигурные скобки и перекинет курсор сразу на написание свойств.

[XimikS]

Добавил. Приятно, что даже со Stylus'ом работает адекватно :)

[chikuyonok]

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

github.com/sergeche/emmet-sublime/issues/78#issuecomment-9738519

[Dimox]

Подскажите, пожалуйста, как быть в следующей ситуации. У меня настроены свои сокращения, к примеру:

{ "trigger": "bcol", "contents": "border-collapse: collapse;" }

Однако, после установки Hayaku при вводе bcol я получаю border-color: #FFF; вместо border-collapse: collapse;. То есть совпадающие сокращения в Hayaku имеют больший приоритет.

Как поменять приоритет на мои сокращения?

[CyberAP]

Писать как bcc, мне помогло.

[Dimox]

Такое решение не подходит. Мне нужно сохранить мое сокращение.

[Dimox]

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

[kizu]

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

[Dimox]

Спасибо за ответ. Буду ждать такой возможности.

[kizu]

Спасибо за обзор!

Пара замечаний:

1. Префиксы поддерживаются не только для вебкита, просто для разных свойств вставляются разные префиксы. Это определяется в словаре и в одной из ближайших версий будет возможность переопределять подобные вещи через настройки саблайма.

2. Хочется уточнить про значения по умолчанию: они не просто вставляются, а вставляются с выделением — оставляя возможность продолжить написание своего значения. Сейчас в посте это не совсем очевидно написано.

[XimikS]

Добавил.

[YKapodastr]

У меня почему то не работают сокращения так, как описано в статье. Posrel — не реагирует вовсе, w10 — тоже, wdt превращается в webkit-search-decoration, а pr в pull-right. Ну и так далее, может я что-то не так сделал?

Mac OS X Mountain Lion, Sublime Text 2 и Hayaku последних версий.

[XimikS]

Наверно конфликтует с каким-нибудь ZenCoding'ом? Посмотрите в плагины.

[YKapodastr]

Нет, Emmet отключен.

[YKapodastr]

FIXED. Сам дурак :)

[asfd]

Hayaku в переводе с японского: «быстрее», «поторапливайся» или типа того.

[Chesheer]

Спасибо, за перевод, избавился от дурного. А то у меня до этого момента только один нецензурный русский вариант близкий по звучанию в голове крутился… :)

[levapz]

Подскажите, а для таких файлов как style.css.sass он подхватывает настройки как для sass или css?

[kizu]

Должен как для sass — за это отвечает сам ST2 — какой синтаксис он подхватит, тот и будет использоваться.

[levapz]

синтаксис sass берется, но при написании стилей подставляются ";" что не нужно

[kizu]

Попробуйте перезапустить Саблайм — сейчас проверил — почему-то после установке через package control саблайм не подхватывает настройки для отдельных синтаксисов пока его не перезагрузишь :(

В дальнейшем попробую перенести настрйоки прямо в код, чтобы не зависеть от подобного поведения саблайма/пакетов.