How to simplify development for a coder/front-end developer in a web studio?

Question

HTML

I am the only full-time layout designer / front-end developer in the studio with various projects (landing pages, online stores, etc.).
Because a quick result of the work is required, it turns out a govnokod, govnovistka (personal perception). Often I have to write calculators in baskets, timers, form validators, sliders (usually bxslider), animations (I try to get by with css transition).
I already use less, coffeescript (due to a lot of jquery code I somehow didn’t feel its benefit), emmet. Learning to use Git. Due to design features, it is not always possible to use a ready-made grid. Which also affects the speed.
Sometimes it takes several days to make the main pages. One week for the whole project. It seems to be long.
What do you advise? How to optimize the process of work, speed it up? Which layout methodology is better to take: bam or mcss or something else?

Answer 1

BEM is a css implementation of the shadow tree (Shadow DOM), if you look closely. So it's better to use it now, before there are full web components. I don't really like BEM in its purest form, so I use my own modification, plus, it's better to use SASS / LESS for this, since the selectors are quite plump.
With layout, look towards jade (js) or slim (ruby), they allow you to reuse the code and accumulate n-options for solving each problem, then you will simply substitute and finish, and write only a new one and a script.
Study more serious projects (angular, amber), where you can learn the latest trends in UI development. The stage at which you are now involves the study of the maximum number of options, most likely the right one will be born by itself in the porridge of knowledge.
When you earn money, it starts to annoy, every comma in the code and the worst way to deal with it is to try to put things in order at work - rest more, let the brain miss your favorite business, then it will work more efficiently. Changing the programming language helps me a lot to find new ways to solve seemingly unsolvable problems (literally today I closed as many as 3 tasks that I could not solve separately for a very long time), only because I switched from js to ruby.
Pay attention to design patterns in general. Start writing code on paper, designing helps to avoid artistic searches in the process, and therefore makes your code subordinate to logic, not aesthetics, as a result, satisfaction with the result increases by an average of 100-150%, according to personal feelings, so your numbers may differ .
PS Now I'm working on a product for UI developers, in the comments, describe with what difficulties/routine tasks, etc. you face every day. Perhaps I can make your work much more comfortable.

Answer 2

1. Use snippets.
2. Use the IDE and its features. ( WebStorm )
3. Rest. With a fresh mind, you can solve problems much faster and better.
4. In conjunction with git, you can try gitflow to automate commands.
5. Use Developer tools . I recommend taking this course.
6. Do interesting tasks.
7. Watch how other programmers solve a similar problem.
8. Use Live edit
9. Get a second monitor if it's useful.
10. Accelerate in layout , webinar by Yuri Artyukh

Answer 3

Sometimes it takes several days to make the main pages.

Good layout designers sometimes take a month.
You would give code examples, we would say whether it is shit code or not.

Answer 4

function cart() {
  var oneGoodCount, oneGoodPrice, allGoodCount, allGoodPrice, target, changer;
  changer = $('.cart_good_count_changer');
  target = $('.ordered');
  oneGoodCount = 0;
  oneGoodPrice = 0;
  allGoodCount = 0;
  allGoodPrice = 0;
  changer.children(".minus").on("click", function(){
    var curVal = parseInt($(this).parent().children('input').val());
    if(curVal<=0) {
      curVal = 0;
      return false;
    }
    $(this).parent().children('input').val(parseInt(curVal-1));
    $(this).closest(".custom_form").find("input").each(function(i){
      oneGoodCount = oneGoodCount + parseInt($(this).val());
      if(parseInt($(this).val()) > 0) {
        oneGoodPrice = oneGoodPrice + parseInt($(this).val()) * parseInt($(this).data('price'));
      }
      console.log(oneGoodCount);
      console.log(oneGoodPrice);
    });
    $(this).closest("tr").find(".cart_one_good_count").text(oneGoodCount);
    $(this).closest("tr").find(".cart_one_good_price").text(oneGoodPrice);
    oneGoodCount = 0;
    oneGoodPrice = 0;
    $('.cart_one_good_count').each(function(){
      allGoodCount = allGoodCount+parseInt($(this).html());
    });
    $(".cart_one_good_price").each(function(){
      allGoodPrice = allGoodPrice+parseInt($(this).html());
    });
    target.find('.cart_all_good_count').html(allGoodCount);
    target.find('.cart_all_good_price').html(allGoodPrice);
    $("[name=cart_all_good_count]").val(allGoodCount);
    $("[name=cart_all_good_price]").val(allGoodPrice);
    allGoodCount = 0;
    allGoodPrice = 0;
  });
  changer.children(".plus").on("click", function(){
    var curVal = parseInt($(this).parent().children('input').val());
    $(this).parent().children('input').val(parseInt(curVal+1));
    $(this).closest(".custom_form").find("input").each(function(i){
      oneGoodCount = oneGoodCount + parseInt($(this).val());
      if(parseInt($(this).val()) > 0) {
        oneGoodPrice = oneGoodPrice + parseInt($(this).val()) * parseInt($(this).data('price'));
      }
      console.log(oneGoodCount);
      console.log(oneGoodPrice);
    });
    $(this).closest("tr").find(".cart_one_good_count").text(oneGoodCount);
    $(this).closest("tr").find(".cart_one_good_price").text(oneGoodPrice);
    oneGoodCount = 0;
    oneGoodPrice = 0;
    $('.cart_one_good_count').each(function(){
      allGoodCount = allGoodCount+parseInt($(this).html());
    });
    $(".cart_one_good_price").each(function(){
      allGoodPrice = allGoodPrice+parseInt($(this).html());
    });
    target.find('.cart_all_good_count').html(allGoodCount);
    target.find('.cart_all_good_price').html(allGoodPrice);
    $("[name=cart_all_good_count]").val(allGoodCount);
    $("[name=cart_all_good_price]").val(allGoodPrice);
    allGoodCount = 0;
    allGoodPrice = 0;
  });
  $('.button_clear_cart').on("click", function(){
    var removedCount = $(".cart_table_check input:checked").closest("tr").find(".cart_one_good_count").html();
    var removedPrice = $(".cart_table_check input:checked").closest("tr").find(".cart_one_good_price").html();
    var allCount = target.find('.cart_all_good_count').html();
    var allPrice = target.find('.cart_all_good_price').html();
    target.find('.cart_all_good_count').html(parseInt(allCount - removedCount));
    target.find('.cart_all_good_price').html(parseInt(allPrice - removedPrice));
    $(".cart_table_check input:checked").closest("tr").remove();
  });
}

Layout

<table class="cart_table">
  <thead>
    <tr>
      <th></th>
      <th>Наименование и количество товара</th>
      <th>Сумма</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="cart_table_check">
        <input type="checkbox" class="cart_good" id="check1">
        <label class="custom_checkbox" for="check1"></label>
      </td>
      <td>
        <div class="cart_good_detail">
          <div class="img">
            <img src="img/good.png">
          </div>
          <div class="custom">
            <div class="custom_title">английский флаг</div>
            <div class="custom_form">
              <div class="custom_form_field">
                <label>
                  <em>IPhone 4</em>
                  <span class="cart_good_count_changer">
                    <input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
                    <span class="minus"></span>
                    <span class="plus"></span>
                  </span>
                </label>
              </div>
              <div class="custom_form_field right">
                <label>
                  <em>IPhone 4</em>
                  <span class="cart_good_count_changer">
                    <input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
                    <span class="minus"></span>
                    <span class="plus"></span>
                  </span>
                </label>
              </div>
              <div class="custom_form_field">
                <label>
                  <em>IPhone 4</em>
                  <span class="cart_good_count_changer">
                    <input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
                    <span class="minus"></span>
                    <span class="plus"></span>
                  </span>
                </label>
              </div>
              <div class="custom_form_field right">
                <label>
                  <em>IPhone 4</em>
                  <span class="cart_good_count_changer">
                    <input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
                    <span class="minus"></span>
                    <span class="plus"></span>
                  </span>
                </label>
              </div>
              <div class="custom_form_field">
                <label>
                  <em>IPhone 4</em>
                  <span class="cart_good_count_changer">
                    <input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
                    <span class="minus"></span>
                    <span class="plus"></span>
                  </span>
                </label>
              </div>
              <div class="custom_form_field right">
                <label>
                  <em>IPhone 4</em>
                  <span class="cart_good_count_changer">
                    <input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
                    <span class="minus"></span>
                    <span class="plus"></span>
                  </span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </td>
      <td class="cart_table_price">
        <span class="cart_one_good_count">0</span> чехлов<br/> на <em><span class="cart_one_good_price">0</span> рублей</em>
      </td>
    </tr>
    <tr>
      <td class="cart_table_check">
        <input type="checkbox" class="cart_good" id="check2">
        <label class="custom_checkbox" for="check2"></label>
      </td>
      <td>
        <div class="cart_good_detail">
          <div class="img">
            <img src="img/good.png">
          </div>
          <div class="custom">
            <div class="custom_title">английский флаг</div>
            <div class="custom_form">
              <div class="custom_form_field">
                <label>
                  <em>IPhone 4</em>
                  <span class="cart_good_count_changer">
                    <input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
                    <span class="minus"></span>
                    <span class="plus"></span>
                  </span>
                </label>
              </div>
              <div class="custom_form_field right">
                <label>
                  <em>IPhone 4</em>
                  <span class="cart_good_count_changer">
                    <input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
                    <span class="minus"></span>
                    <span class="plus"></span>
                  </span>
                </label>
              </div>
              <div class="custom_form_field">
                <label>
                  <em>IPhone 4</em>
                  <span class="cart_good_count_changer">
                    <input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
                    <span class="minus"></span>
                    <span class="plus"></span>
                  </span>
                </label>
              </div>
              <div class="custom_form_field right">
                <label>
                  <em>IPhone 4</em>
                  <span class="cart_good_count_changer">
                    <input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
                    <span class="minus"></span>
                    <span class="plus"></span>
                  </span>
                </label>
              </div>
              <div class="custom_form_field">
                <label>
                  <em>IPhone 4</em>
                  <span class="cart_good_count_changer">
                    <input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
                    <span class="minus"></span>
                    <span class="plus"></span>
                  </span>
                </label>
              </div>
              <div class="custom_form_field right">
                <label>
                  <em>IPhone 4</em>
                  <span class="cart_good_count_changer">
                    <input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
                    <span class="minus"></span>
                    <span class="plus"></span>
                  </span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </td>
      <td class="cart_table_price">
        <span class="cart_one_good_count">0</span> чехлов<br/> на <em><span class="cart_one_good_price">0</span> рублей</em>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3" class="ordered">
        Итого <span class="cart_all_good_count">0</span> чехлов на сумму: <strong><span class="cart_all_good_price">0</span> рублей</strong>
        <input type="hidden" name="cart_all_good_count">
        <input type="hidden" name="cart_all_good_price">
      </td>
    </tr>
  </tfoot>
</table>

Answer 5

PS The designer still needs to be kicked in the ass.

Answer 6

To me, you're wasting your time. If your projects are all unique, then, accordingly, everything is from scratch. If there was a pipeline, then half of the code would go from project to project.