Комментарии 58
Всё хорошо, всё удобно, но если ты пишешь только CSS.
Когда пытаешься использовать похожие модули для php/html/js/wp. У которых свои взгляды на сокращения, — голова начинает сходить с ума, и думается, что лучше уже продолжать писать в plain :)
Когда пытаешься использовать похожие модули для php/html/js/wp. У которых свои взгляды на сокращения, — голова начинает сходить с ума, и думается, что лучше уже продолжать писать в plain :)
В смысле какие похожие модули? Дайте пример.
Идея Хаяку во многом именно в том, что, как таковых, сокращений-то и нет. Есть набор алгоритмов, разбирающих аббревиатуры и подбирщих наиболее подходящую пару свойство-значение из словаря.
Да, сами алгоритмы могут быть не всегда очевидны и верны. Но зато, из-за нечёткой структуры, всегда можно попробовать найти такую аббревиатуру, которая попадёт под алгоритм. Это быстрее, чем добавление новой статичной аббревиатуры в настройки и лучше запоминается — ведь ты сам экспериментируешь и находишь нужную работающую аббревиатуру.
Да, сами алгоритмы могут быть не всегда очевидны и верны. Но зато, из-за нечёткой структуры, всегда можно попробовать найти такую аббревиатуру, которая попадёт под алгоритм. Это быстрее, чем добавление новой статичной аббревиатуры в настройки и лучше запоминается — ведь ты сам экспериментируешь и находишь нужную работающую аббревиатуру.
Плагины (пакеты в терминах ST2) и сниппеты завязываются на тип файлов. Так что сокращения в CSS и PHP неплохо уживаются вместе.
Спасибо, попробую. Иногда напрягает, что в пустом файле ST2 не понимает с полуслова.
Зачем еще один Дзен-Кодинг? code.google.com/p/zen-coding/
К тому же ZC реализован почти везде (в виде плагинов или нативно), где только можно.
К тому же ZC реализован почти везде (в виде плагинов или нативно), где только можно.
НЛО прилетело и опубликовало эту надпись здесь
Лично я использую Emmet (ex ZenCoding) для HTML, но вот для CSS больше понравился Hayaku. Главное его отличие: нечеткая логика подстановок. Там, где в Emmet/ZC нужно точно помнить все правила (это как раз характерно для многочисленных CSS-правил) или пользоваться шпаргалками, в хайаку (все время хочется написать хуяку ^_^) можно просто написать то, что тебе кажется подходящим и оно (чаще всего) сработает как ожидаешь.
Да ну, бросьте. До Emmet использовал схожую «систему» собственной разработки, поставил Emmet, за пару дней верстки выучил все нужные сокращения назубок. Там все логично и просто.
Для хаяку надо просто знать что такое свойство есть в CSS. По-этому любое свойство доступно пользователю как короткая аббревиатура.
Например есть свойство pointer-events. Попробуйте сказать, не заглядывая в cheat-sheet, какая аббревиатура у этого свойства в emmet?
В хаяку можно написать
Например есть свойство pointer-events. Попробуйте сказать, не заглядывая в cheat-sheet, какая аббревиатура у этого свойства в emmet?
В хаяку можно написать
piev, pevs, point-even или так как вам удобно написать сокращённо это свойство.
Ну, раз уж на то пошло, то у Hayaku тоже есть проблемы.
Например, я хочу получить свойство
В итоге фича «пиши что хочешь» превращается в игру «угадай, что сейчас появится». И в этом плане статические аббревиатуры гораздо лучше, потому что их всегда можно увидеть и они всегда дают однозначный результат.
К тому же, в ST2 уже есть fuzzy search по вводимым CSS-свойствам (который Hayaku зачем-то удаляет) с визульным фидбэком, чтобы пользователь всегда видел, что сейчас появится.
Например, я хочу получить свойство
font-style, пишу аббревиатуру fs, однако получаю font-size. Или хочу получить border-radius: пишу bdr, а получаю border-right.В итоге фича «пиши что хочешь» превращается в игру «угадай, что сейчас появится». И в этом плане статические аббревиатуры гораздо лучше, потому что их всегда можно увидеть и они всегда дают однозначный результат.
К тому же, в ST2 уже есть fuzzy search по вводимым CSS-свойствам (который Hayaku зачем-то удаляет) с визульным фидбэком, чтобы пользователь всегда видел, что сейчас появится.
Конечно, есть проблемы, это же первая публичная альфа всего лишь :) если возникнет необходимость изменить какую-то аббрвиатуру, заменив её на статичную — такая возможность в будущем будет. Но у нас задача сделать такой алгоритм, который бы без хардкожа максимально «угадывал» то, чего хочет пользователь. И, конечно, без телепатии всем не угодишь :)
Стандартный автокомплит пока отключаем, да. Я ещё подумаю насчёт того, чтобы его вернуть, но у меня были причины его отключать.
И да — Хаяку не претендует на идеальность, это всего лишь ещё один способ быстро писать CSS. Если кого-то он не устроит — всегда есть как минимум несколько альтернатив. Конкуренция — это хорошо.
Стандартный автокомплит пока отключаем, да. Я ещё подумаю насчёт того, чтобы его вернуть, но у меня были причины его отключать.
И да — Хаяку не претендует на идеальность, это всего лишь ещё один способ быстро писать CSS. Если кого-то он не устроит — всегда есть как минимум несколько альтернатив. Конкуренция — это хорошо.
Хорошие примеры с аббревиатурами
Я собрал статистику по частоте использования свойств вебмастерами,
«Угадай что появится» есть первые 10 минут работы. Это как поисковый запрос, если пользователь не нашёл что искал — он дополняет запрос, конкретизирует. Второй раз уже пишет сразу работающий вариант.
Не понял про встроенный fuzzy search в ST2. Вам не хватает выпадающего списка?
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. Вам не хватает выпадающего списка?
Я собрал статистику по частоте использования свойств вебмастерами, 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. Вам не хватает выпадающего списка?
Да, чтобы я мог сразу видеть, что получится в итоге.
bdl -> border-left,bdr -> border-rightБуду очень благодарен если Вы покажите примеры последовательности поиска нужной аббревиатуры и примеры неуклюжих аббревиатур. За всё время этой первый раз когда я получаю отзыв о плохих аббревиатурах.
ОК, вот примеры:
и т.д.
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)и т.д.
Всё гораздо круче, ведь можно написать просто
pe. В большинстве случаев достаточно вводить первую букву из словосочетаний свойств. То есть к примеру нужно задать background-position-x и вводим только первые буквы из трёх слов, bpx. Но как уже выше отметили не со всеми свойствами это работает.Положа руку на сердце, как часто вам доводилось использовать свойство pointer-events? :) Подобное, при случае, можно и руками набрать.
Как уже отметили, статические аббревиатуры имеют свои преимущества. В конце концов, CSS тоже не разрешает нам писать podding, poding, pading и padding, хотя, может быть, это кому-то бы и упростило жизнь.
Но вообще, безусловно, пусть засыхают сто цветов и так далее. Конкуренция — это отлично, как и богатый выбор инструментов. Успехов Хаяке :)
Как уже отметили, статические аббревиатуры имеют свои преимущества. В конце концов, CSS тоже не разрешает нам писать podding, poding, pading и padding, хотя, может быть, это кому-то бы и упростило жизнь.
Но вообще, безусловно, пусть засыхают сто цветов и так далее. Конкуренция — это отлично, как и богатый выбор инструментов. Успехов Хаяке :)
Fuzzy typing, вот зачем.
А чем zen-coding не устраивает. Работает под большинство IDE и текстовые редакторы поддерживающие плагины. И ускоряет работу не только в CSS но и HTML. Например ul>li*5->a[href='#']{Ссылка номер $} Создаст список из пяти элементов с ссылками и нумерованным текстом.
Святые небеса, какое милое название :)
Скрытый текст
«Хаяку», яп. 早く — «быстрее», «поторопись»
извините за прямолинейность, НО: ** ап стену.
Кстати, в статье забыли упомянуть ещё одну хорошую фичу как Ctrl+Enter после написания селектора, который добавит фигурные скобки и перекинет курсор сразу на написание свойств.
Добавил. Приятно, что даже со Stylus'ом работает адекватно :)
Сам ST2 можно легко настроить таким образом, чтобы после ввода символа
github.com/sergeche/emmet-sublime/issues/78#issuecomment-9738519
{ после селектора автоматически добавлять закрывающий } с нужным форматированием и позицией курсора: github.com/sergeche/emmet-sublime/issues/78#issuecomment-9738519
Подскажите, пожалуйста, как быть в следующей ситуации. У меня настроены свои сокращения, к примеру:
Однако, после установки Hayaku при вводе bcol я получаю border-color: #FFF; вместо border-collapse: collapse;. То есть совпадающие сокращения в Hayaku имеют больший приоритет.
Как поменять приоритет на мои сокращения?
{ "trigger": "bcol", "contents": "border-collapse: collapse;" }Однако, после установки Hayaku при вводе bcol я получаю border-color: #FFF; вместо border-collapse: collapse;. То есть совпадающие сокращения в Hayaku имеют больший приоритет.
Как поменять приоритет на мои сокращения?
Писать как bcc, мне помогло.
Пока почти никак — но в будущем появится возможность определять в настройках свои сниппеты и статические аббревиатуры, если такая необходимость возникнет. К сожалению, в саблайме нельзя нормально управлять приоритетами сниппетов и команд, так что можно либо использовать только статичные сниппеты, либо что-то более умное, но переопределяющее нажатие на таб.
Спасибо за обзор!
Пара замечаний:
1. Префиксы поддерживаются не только для вебкита, просто для разных свойств вставляются разные префиксы. Это определяется в словаре и в одной из ближайших версий будет возможность переопределять подобные вещи через настройки саблайма.
2. Хочется уточнить про значения по умолчанию: они не просто вставляются, а вставляются с выделением — оставляя возможность продолжить написание своего значения. Сейчас в посте это не совсем очевидно написано.
Пара замечаний:
1. Префиксы поддерживаются не только для вебкита, просто для разных свойств вставляются разные префиксы. Это определяется в словаре и в одной из ближайших версий будет возможность переопределять подобные вещи через настройки саблайма.
2. Хочется уточнить про значения по умолчанию: они не просто вставляются, а вставляются с выделением — оставляя возможность продолжить написание своего значения. Сейчас в посте это не совсем очевидно написано.
У меня почему то не работают сокращения так, как описано в статье. Posrel — не реагирует вовсе, w10 — тоже, wdt превращается в webkit-search-decoration, а pr в pull-right. Ну и так далее, может я что-то не так сделал?
Mac OS X Mountain Lion, Sublime Text 2 и Hayaku последних версий.
Mac OS X Mountain Lion, Sublime Text 2 и Hayaku последних версий.
Hayaku в переводе с японского: «быстрее», «поторапливайся» или типа того.
Подскажите, а для таких файлов как style.css.sass он подхватывает настройки как для sass или css?
Должен как для sass — за это отвечает сам ST2 — какой синтаксис он подхватит, тот и будет использоваться.
синтаксис sass берется, но при написании стилей подставляются ";" что не нужно
Попробуйте перезапустить Саблайм — сейчас проверил — почему-то после установке через package control саблайм не подхватывает настройки для отдельных синтаксисов пока его не перезагрузишь :(
В дальнейшем попробую перенести настрйоки прямо в код, чтобы не зависеть от подобного поведения саблайма/пакетов.
В дальнейшем попробую перенести настрйоки прямо в код, чтобы не зависеть от подобного поведения саблайма/пакетов.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Hayaku — пишем CSS быстрее