Как упростить разработку верстальщику/фронтэндщику в веб-студии?

Question

[nurise]

Я единственный штатный верстальщик/фронтэндщик в студии с различными проектами(лэндинги, интернет-магазины и прочее).
Т.к. требуется скорый результат работы, получается говнокод, говноверстка (личное восприятие). Часто приходится писать калькуляторы в корзинах, таймеры, валидаторы форм, слайдеры(обычно bxslider), анимации(стараюсь обходиться css transition).

Уже использую less, coffeescript(из-за много jquery-кода как-то не ощутил его пользу), emmet. Учусь использовать Git. Из-за особенностей дизайна не всегда получается использовать готовую сетку. Что тоже влияет на скорость.

Иногда уходит по несколько дней на верстку главных страниц. Неделя на весь проект. Кажется, что это долго.
Что посоветуете? Как оптимизировать процесс работы, ускорить ее? Какую методологию верстки лучше взять: бэм или mcss или прочее?

Answer 1

[rumkin]

БЭМ-это css-реализация теневого дерева (Shadow DOM), если присмотреться внимателей. Так, что лучше использовать его сейчас, до того, как появятся полноценные веб-компоненты. БЭМ в чистом виде мне не очень нравится, поэтому я использую собственную модификацию, плюс, лучше использовать для этого SASS/LESS так как селекторы получаются достаточно пухлыми.
С версткой смотрите в сторону jade(js) или slim(ruby), они позволяют переиспользовать код и накопить n-вариантов решения каждой задачи, потом будете просто подставлять и допиливать, а писать только новое и скрипт.
Изучите более серьезные проекты (angular, amber), там сможете почерпнуть для себя свежие веяния в UI-разработке. Тот этап, на котором вы сейчас находитесь подразумевает изучение максимального количества вариантов, скорее всего нужный родится сам в каше знаний.
Когда зарабатываешься, то раздражать начинает, каждая запятая в коде и худжший способ разобраться с этим — попытаться навести порядок в работе — больше отдыхайте, давайте мозгу соскучиться по любимому делу, тогда он будет работать более эффективно. Мне смена языка программирования очень помогает найти новые способы решения, казалось бы неразрешимых проблем (буквально сегодня закрыл целых 3 задачи, которые не мог решить по отдельности очень долго), лишь благодаря тому, что переключился с js на ruby.
Обратите внимание на шаблоны проектирования вообще. Начинайте писать код на бумаге, проектирование помогает избежать художественных поисков в процессе, а значит делает ваш код подчинённым логике, а не эстетике, как следствие удовлетворенность результатом увеливается в среднем на 100—150 %, по личным ощущениям, так что у вас цифры могут отличаться.

P.S. Сейчас занимаюсь продуктом для UI-разработчиков, в комментариях опишите, с какими трудностями/рутинными задачами и т.п. сталкиваетесь вы каждый день. Возможно, у меня получится сделать и вашу работу в разы комфортнее.

Answer 2

[Александр Литвинов]

1. Использовать сниппеты.
2. Использовать IDE и ее возможности. (WebStorm)
3. Отдыхать. На свежий ум можно гораздо быстрее и качественнее решать задачи.
4. В связки с git, можно попробывать gitflow для автоматизации команд.
5. Использовать Developer tools . Советую пройти этот курс.
6. Делать интересные задачи.
7. Наблюдать за тем, как другие программисты решают подобную проблему.
8. Использовать Live edit
9. Обзавестись вторым монитором, если он будет полезен.
10. Ускоряемся в вёрстке , вебинар Юрия Артюха

Comments

[nurise]

5. Ну без DevTools никуда. Насчет остального - да, надо подумать. Спасибо.

[Александр Литвинов]

@nurise Вот еще случайно нашел Ускоряемся в вёрстке, вебин...

Answer 3

[Николай Васильчук]

Иногда уходит по несколько дней на верстку главных страниц.

У хороших верстальшиков иногда уходит месяц.

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

Вы бы привели примеры кода, мы бы сказали, говнокод это или нет.

Comments

[nurise]

@Anonym привел пример. Код просто считает суммы и кол-ва товаров. Верстка криво вставилась

Answer 4

[nurise]

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();
	});
}

Верстка

<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>

Comments

[Николай Васильчук]

В js научитесь отделять логику от отображения. Код сразу станет чище.

[Игорь Воротнёв]

HTML код у Вас далек от семантики. Не future-proof. За такое я бы кодера уволил.

[nurise]

@HeadOnFire да, есть проблемы с именованием классов и подбором тегов

Answer 5

[Sanes]

P.S. Дизайнеру всё же надо дать под зад.

Answer 6

[Sanes]

По мне, так вы зря паритесь. Если у вас проекты все уникальные, то соответственно всё с нуля. Если бы был конвеер, то половина кода ходила бы от проекта к проекту.