Что еще изучить верстальщику?

Question

[nikolaypetrov]

Здравствуйте.

Умею писать валидный кроссбраузерный семантический html5/css3, умею pixel-perfect верстать из PSD, умею адаптив-респонсив и все плюшки.

Умею делать разные простые и не очень анимации на jQuery, но предпочитаю coffeescript. Если немножко напрячься, с грехом гуглом пополам, могу писать что-то на нативном JS. Простое. И не очень.

Умею рисовать несложные иконки и клипарт в иллюстраторе, умею делать темы для вордпресса.

Но тут одно но. В последнее время ищу новую работу, и столкнулся с проблемой — если для верстальщика требуются знания less/sass/slim/haml, с которыми я хотя бы немного работал, то для фронтэндера — знание grunt, react/angular/backbone и прочих неведомых мне вещей.

Немного в фоновом режиме изучаю руби он рэйлс, а о существовании перечисленных даже не в курсе. Что, теперь хтмл/цсс никому не нужны, и нужно изучать кучу дополнительных инструментов?

Что из перечисленного (и не перечисленного) следовало бы изучить верстальщику с задатками фронтэндера, чтобы быть востребованным и высокооплачиваемым? Что в первую очередь, что во вторую? Что вызывает наибольшие трудности? Нужна литература, или хватит мануалов и how-to с хабра?

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

Answer 1

[Антон Бережков]

Ну вот смотри:

HTML/CSS - это как математика за 5ый класс, да на неё срать, потому что мы все это умеем.
Но SCSS/SASS без CSS ничто. А что такое SCSS? -30% CSS кода.
Согласись, что такое писать в 1000 раз красивее:

@mixin flatFormBaseColorizer($a, $b, $c, $d) {
  border-color: $a;
  color: $c;
  
  &:focus {
    border-color: $b;
    color: $d;
  }
}

@mixin flatFormBase() {
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  background-color: white;
  font-size: 15px;
  padding: 5px 7px;
  
  @include flatFormBaseColorizer(join($colorsGray, ($fontColor, $fontColor))...);
  
  &.partial {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
  }
}

.flatForm {
  input {
    @include flatFormBase();
    
    &[type="text"], &[type="password"] {
      &.blue {
        @include flatFormBaseColorizer(join($colorsBlue, ($fontColor, $fontColor))...);
      }
    }
    
    &[type="checkbox"] {
      margin-right: 8px;
      
      & + label {
        font-size: 14px;
        font-weight: bold;
        text-align: left;
      }
    }
  }
  
  textarea {
    @include flatFormBase();
    
    &.blue {
      @include flatFormBaseColorizer(join($colorsBlue, ($fontColor, $fontColor))...);
    }
    
    &.green {
      @include flatFormBaseColorizer(join($colorsGreen, ($fontColor, $fontColor))...);
    }
  }
  
  select {
    @include flatFormBase();
  }
  
  input[type="submit"], input[type="reset"], button {
    @include flatFormButtonColorizer($colorsGray...);
    
    &.blue {
      @include flatFormButtonColorizer($colorsBlue...);
    }
    
    &.green {
      @include flatFormButtonColorizer($colorsGreen...);
    }
    
    &.red {
      @include flatFormButtonColorizer($colorsRed...);
    }
  }
}

То же самое и с JS; Angular, react и т.д. дают тебе большую скорость/удобность, но без JS ты не сможешь реально адаптировать решение для задачи.

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

Итого мы получаем вывод:
1. Хочу быть "крутым верстальщиком": css-tricks, фреймворки, типография
2. Хочу быть "веб-мастером": подучи rails/php, но ВМ часто уходят в создание своих сайтов и бизнеса.
3. Хочу быть программистом: забиваешь на вёрстку, ныряешь в JS/PHP/Ruby

ИМХО: Лучше быть профессиональным мего-крутейшим верстальщиком знающим angular, sass, react, все браузеры, и никогда не говорить заказчику "нет". В этом случае, они будут подсиживаться на тебя ;)

Answer 2

[Сергей]

Изучи все по очереди начиная с грунта