Инструменты, которые вы используете для разработки
 

Этот тред посвящается всему тому, что делает процесс кодинга легче.
Пишем тут какие вы используете редакторы/IDE, плагины, сборщики, пост/препроцессоры(и т.д.) и почему они лучше чем те, что используют другие форумчане. Холливары приветствуются.



Начну с себя.

CSS: stylus
HTML: emmet. Никаких ущербных Jade'ов мне не надо
JS: ничего, потому, что кофе не вкусный и убивает мозг, а тайп с приходом шестёрки уйдёт восвояси
Сборщики: юзаю Gulp, потому, что Grunt уже не моден
Плагины для Галпа:
imagemin, concat, stylus, uglify, rename, csso, jshint
Редактор: саблайм (плагины: Эммет и Лайврелоад)
Разное: одним глазом кошусь на БЭМ

Ну всё таки это разные вещи. Emmet не защитит тебя от XSS, не даст code-reuse... да и вообще это разные инструменты и странно их сравнивать :)

Можно двумя глазами, лишь бы инструменты хорошие были, например в Stylus всё для этого есть.

.b-input {
    &__input {
        &_hover {
            &_true {
                ...
            }
            
            &_false {
                ...
            }
        }

        ...
    }
}

.b-select {
    @extend .b-input;
}

В своём Snakeskin я сделал похожую схему для HTML

- template bInput()
    < .{this.name}
        < input.&__input
            ...

- template bSelect() extends bInput

В JS для БЭМ юзаю свою закрытую либу.

***

По сабжу:

CSS: Stylus + Nib
HTML: Snakeskin
JS: es6-transpiler
Сборщики: grunt или простой jossy
Редактор: WebStorm

kobezzza,
Не-не, я их не сравниваю. Просто для коллекции туда его впихнул)

у меня один глаз..
А вообще в Стайлусе очень много годного. На мой субъективный взгляд он лучше всяких Лесс и СЭСС. Только вот CSSComb'а на него нету, как я понимаю..

Есть мнение, что Грант для стариков не умеющих изучать новое и выходить из зоны комфорта. Что на это скажете, мсье?)

Минусы/плюсы?




Кротаны, а не знаете, можно ли как-то WebStorm на халяву по честному получить?

Он объективно лучше их, но всё равно не идеален, хотя после того как проект перешёл в руки ребят из Яндекса, то он прям вышел из спячки, так что держим кулачки.

Да они одинаковы, только у одного более императивный синтаксис, а у другого более декларативный. Мне по душе более декларативный подход.

Кого именно? es6-transpiler генерит хороший код, почти не глючит, много чего умеет и в отличии от traceur не тянет runtime-либу.

Snakeskin - ОО-шаблонка использующая концепцию шаблон-функция (аля Google Closure Templates). Синтаксис либо классический (GCT, Dust), либо Jade-Like.

Сделать годный опен-сорс проект, а вообще он стоит 50 баксов, для IDE - это копейки.

http://confluence.jetbrains.com/display/WI/WebStorm+EAP
Также
http://confluence.jetbrains.com/disp...Access+Program

Хотя имхо eap глючный и несмотря на киллер фичу, пришлось вернуться на 7-ку.

Сходу батхерт обеспечил


CSS: Stylus + Nib
HTML: хватает автодополнения
JS: coffee
Сборщики: brunch
Редактор: WebStorm, vim

Ты не юзаешь шаблонки?Оо

В гробу видал. Что угодно, только не это.

Юзаю fj (fiji :)) как html конструктор, скоро релиз.

Ну я не использовал, а пока сахарок не получил к нему и не тянет.
Завербуй меня, речами лестными... пожаалуйста:yes:

kobezzza,
Только вот мажорная версия всё ещё 0.х (

Всего)
Про "почти не глючит" можно по подробнее? А то ES6 ждать мне уже невмоготу.

А если сравнивать Змеекожа с Dust от Линкенид. То какие у них -/+ относительно друг друга?

Я студентота, на 50 баксов больше недели проживу и ещё останется. И в моём случае не 50, а $1050. Ноут не потянет это добро.


Я вот раньше слышал про Nib, но не обращал внимание на него. Как я понимаю, он что-то типа автопрефиксера? Тогда чем Ниб лучше Autoprefixer'а? у него тоже можно гибкие настройки под браузеры делать, али ещё какие фичи есть?



Gozar,
по первой "Early Access Program for WebStorm is closed now." ;(
А по второй 30-дневка, про неё я слышал, но это совсем не круто.



-----



Ребят, а есть какое годное средство для перегруза Ноды после сохранения изменений в файлах? Знаю про супервизор, но мб есть ещё что-то? Главное, что бы оно на саблайм шло плагином или ещё как, толстые ИДЕ пока не потяну.

Да и пх :)

Ну время от времени всплывают баги, я их пишу автору и он их фиксит в течении месяца.

Snakeskin объективно лучше по всем параметрам, иначе бы я не тратил на него время :)

:)


Nib - это как Compas в SAAS (т.е. кроме полифилов полезные функции) + немного Autoprefixer.
Autoprefixer - это для Rework и префиксы он ставит лучше, т.к. сам Stulys не умеет некоторые штуки для организации полифилов.

Всякие grunt/gulp-watch и т.д.

Редактор: vim
Сборщик: make
БЭМ во все поля

CSS: stylus + nib без вендорных префиксов (выключаются сменой значения для переменной)
HTML: jade
JS: livescript
Редактор: sublime text
Сборщик: webpack
Тесты: jasmine/mocha + chai
БД: Postgres
Frontend Framework: angular
Backend Framework: sailsjs

Судя по языкам, у меня на клавиатуре нет кнопок со скобками, но это не так))

l-liava-l,
старался)

Gozar,
а что тут такого? HTML ручками быстро и весело пишется, особенно с Эмметом.

и меня тоже тогда.

Да просто нужно выделить день другой на изучение шаблонок и усё :)
Только не стоит тратить время на EJS и компанию, ибо это унылое говно.

такс, вопрос ко всем кто тут есть, вы хоть иногда считаете себя идиотами которые таак мало смыслят в веб разработке и вообще чуть ли не скрипткидди?

kobezzza,
Да? Хмм.. ну ладно. Ох, теперь ещё один фреймворк в очередь на изучение :D Мне так жизни не хватит :/

Не, мне надо, что бы именно сам процесс ноды перезапускало. Для http-сервера, например. Или они тоже так умеют?



ixth,
Но ведь vim для роботов. Не, ну в серьёз, он уж слишком замудрёный.


melky,
Жасмин, моча, чай. Как мне нравится эти слова, когда они в одном предложении)

Нет, нужно лишь посидеть за ним... недельку) а потом еще

Ну а если серьезно то он может решить твою проблему с ide, плагинов море, настраивай как хошь

Я робот и больше ни в чем не могу.

«Мокко». Это читается как «мокко». Я специально проверял.

l-liava-l,
ну не то что бы идиотом, но новичком точно. Почему идиотом-то сразу?)
Вообще, люто бешено сопротивляюсь этим всяким шаблонам и прочим хипстерским поделкам. Не из-за того, что трудно/лень изучать(хотя это тоже немного есть), а из-за любви к велосипедам.
Но из-за всяких кобеззз, мелких, Гозаров, тебя и прочих местных кодо-хипстеров моя воля слабеет не по дням, а по часам.

Жанглирование всеми этими обёртками действительно может превратить в глупого скрипткиди, если не сможешь себя заставить писать/разбирать что-то самостоятельно..

l-liava-l,
И ещё, и ещё..

А как же красота ГУЯ? Я лучше денег накоплю/заработаю на ПК с толстым процессором и жирным ССД)

ixth,
тогда ладно.

тогда ладно. [1]

http://itmages.ru/image/view/1825927/a02ce03a

Там, как видишь, не страшно)

Просто нужно привыкнуть к клавиатурным сокращениям, а не тянуться к мышке)

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

У тебя просто видимо не было горького опыта, но шаблоны - это реально жизненно важная фича. У меня есть правило: если где бы то ни было идёт генерация строки для HTML (не важен её уровень сложности), то всегда нужно юзать только шаблон.

ха. найди 5 отличий. http://i.imgur.com/X0exnh0.png


пам пам пааам :haha: попахивает синдромом NIH (Not invented here)

каждый раз, когда я сажусь за разработку single page webapp, дикая боль моей беспомощности останавливает меня. я достаю крест, молюсь, но angular непреклонен. :cray:

P.S. шучу. angular - аху#@!нная штука, всё-таки. и вопросы производительности там все решаются, ящитаю.

я юзаю nodemon. вот nodemon.json:

{
  "verbose": true,
  "ignore": [".tmp/*", "web_modules/*"],
  "watch": ["api", "config"],
  "ext": "js,ls,coffee"
}

а запускаю приложение так (sails):

nodemon app.js --verbose --debug --no-hooks.sockets --no-hooks.pubsub

норм штука, мне нравится. только жёсткий диск с 5400 RPM даёт о себе знать - хренов тормоз. скоро приедет SSD, должно всё повеселее двигаться

зачем он тебе нужен?

так говорят те, кто его не смог познать

эх .. а у меня с приходом на Windows ушла и консоль, так что вот отличное решение с GUI :
http://i.imgur.com/FNrpiAB.png

Вот напиши на нем бесконечный скроллинг, (такой чтобы на мобилках работал как в вк) и чтобы внутри было что нибудь тяжелое.

Мы это дело решили подключением reactjs, на нем все элементы не вотчатся как в ангуляре, что отлично сказывается на производительности)
Ну и естеесна выгружаем из памяти тоже.

вот тут то ты и попался, серый волк.

l-liava-l,
хм, ну только если мне саблайма будет мало, тогда уж ничего не поделаешь)

Я слышал, что изучение VIM способствует росту бороды :D

kobezzza,
Нет, не было.


Даже если просто экспериментируешь с какой-нибудь новой штукой?

А можешь обьяснить почему? и какой шаблонизатор самый вкусный на данный момент?

melky,
Чот не пойму, NIH, если я правильно понял, это когда нравится велосипедить. А ты выделил "не моден", что соответствует хипстороголичеству.

Ангуляр больше всего недолюбливаю. Но немного учу, т.к. на будущей работе он может быть нужен.

Спасибо, посмотрю.

Стоп. Оно жёсткий мучает?

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

Да. Мозг начал дымиться.

Заблуждение, что шаблоны это что-то сложное (исключение XSLT, в котором без подготовки хрен разберёшся).

Вот пример шаблона Snakeskin

{template helloWorld(name)}
    <h1>
        {if name}
            Hello {name}!
        
        {else}
            <button>Sign in</button>
        {/}
    </h1>
{/}

Шаблон скомпилится в JS функцию и вызов в JS - это вызов функции helloWorld

helloWorld('koba')

1) Шаблон гарантирует защиту от XSS
2) Поддерживать шаблон просто как для прогера, так и для верстальщика
3) Шаблоны легко бить по файлам
4) Решение проблемы code-reuse
5) Отделение логики от представления
6) ???
7) PROFIT

http://screencast.com/t/iU7AgM6jvjaj

Ответил выше.

Тут можно начинать холивар :) Начни с чего-нибудь, а дальше сам решишь.

kobezzza,
Ога, а ещё очки толще и джинсы уже становятся..

l-liava-l,
Ну что за нубский вопрос? Очевидно, что Змеекож!

Не, ну если провести беспристрастный анализ классических шаблонок (т.е. без data-binding), то ответственно заявляю, что готовящийся к релизу Snakeskin 4 объективно лучше всех известных JS аналогов.

kobezzza,
*поставил ЗК чуть выше в списке изучения*

всмысле. как ещё проверить, изменился ли файл? скорее всего по таймауту сверяется дата последнего изменения

{template ЗАНУДА()}

с экранированием понятно, но что делать в заковыристых случаях?

<img src=LOL onerror=alert('XSS')>

это пример, на самом деле есть и намного хуже.

и от XSS в картинках шаблон не защитит ... нужно самому их перелопачивать.

{/template}

"доверяй, но проверяй", как говорится :) или "на шаблонизатор надейся, да сам не плошай"

Чёто я не понял, что здесь не обычного с чем не справится экранирование?

{template foo(val)}
    <img src="{val}" />
{/}

foo('" onerror="alert(\'XSS\')') // всё будет проэкранировано и onerror не будет работать

Гм.. приведи пример, я не понял :)

melky,
ну не знаю, мб там вотчер какой. (Или вотчеры тоже по таймауту?)