Каким плагином кроме gulp-sourcemaps можно генерировать sourcemaps?

Dmitry-W, У css-mqpacker есть траблы с сортировкой медиа-запросов. Он их сортирует по первому попавшему. То есть могут быть траблы, если у вас медиа-запросы не в одном файле.
Если он встретит в потоке первым запрос media (max-width: 575px), а потом только media (max-width: 1199px), то будет следующая картина:

@media (max-width: 575px) {
    ...
}

@media (max-width: 1199px) {
    ...
}

Что естественно повлияет на работоспособность.

Однако есть решение. У самого плагина есть опция "sort" https://github.com/hail2u/node-css-mqpacker#sort,
но она поддерживает только запросы с min-width, а max-width обрабатывает по старому.
После поисков альтернативы css-mqpacker'у случайно наткнулся на

Пользовательский метод сортировки (mobile-first / desktop-first) для css-mqpacker или pleeease (который использует css-mqpacker) или, возможно, для чего-то еще ))

https://github.com/dutchenkoOleg/sort-css-media-qu...

Собственно с помощью этого метода сортировки всё становится на свои места. Плюс автор русскоговорящий поэтому есть туториал на русском языке.

В итоге:

.pipe( postcss([
    mqpacker({
        sort: sortCSSmq
    }),
]))

Работа верстальщиком. Тупик в самостоятельном обучении. Что делать и как лучше выстроить обучение и поиск работы?

snap44, Скорее - незнание их отражается на скорости работы. Ну а там уже всё понятно: чем меньше скорость - тем меньше заработаешь(про качество можно ничего не говорить т.к. на выходе и там и там чистый css).

Как упростить такой код?

Exploding: Я так понимаю для details transition не покатит? Нужно keyframe юзать, чтобы анимировать?

Как упростить такой код?

Воспользовался "правильным способом", сократил js до 2 строк))
Спасибо! Отличный способ) Пробегала подобная идея, но меня что-то остановило :)

Как упростить такой код?

$(".faq__question").on("click", function(){
  $(this).toggleClass($(this).data("tgl"));
});

Как это работает?

Как упростить такой код?

Negwereth: Уже в предвкушении)) Сильно не ругайтесь только :D

Как скрыть бордер предыдущего элемента?

Да, я уже так сделал.

Как скрыть бордер предыдущего элемента?

Это вроде работает только для элемента, который после текущего идет. Он не может обратиться к предыдущему.

Как скрыть бордер предыдущего элемента?

Как это работает? Первый раз такой способ вижу просто :)
Надо запомнить. Спасибо большое, то что нужно!

Как скрыть бордер предыдущего элемента?

Можешь на jsfiddle показать? Либо это не работает, либо я не понял)

Как скрыть бордер предыдущего элемента?

Будет разница?)
+ мне нужно чтобы бэкграунд во всю высоту цвет менял, а бордер был в ~высоту букв.
Оборачивать каждый пункт в span/div не вариант.

Плавное сворачивание и разворачивание текста?

Catzo0: Из-за разрешения.. Текст сжимается и высота блока становится больше, а там оверфлов хидден задан и жёстко высота выставлена в скрипте.
https://jsfiddle.net/2kwda4q9/6/

Плавное сворачивание и разворачивание текста?

Catzo0: о, найс, то, что надо. Теперь почти идеально :) Slice немного грязновато работает, но в целов всё найс.
https://jsfiddle.net/2kwda4q9/4/

Спасибо за помощь.
Если хочешь пиши ответ, я отмечу как решение :)

Плавное сворачивание и разворачивание текста?

Catzo0: Я вот почти довёл до ума твой вариант, но при сворачивании не могу сообразить как выставить задержку)
Чтобы сначала высота изменялась, а потом он уже slice делал и текст more менял. Если поставить setTimeout, то он не может из data() достать текст и выбивает ошибку на slice т.к. нечего вырезать. Может я туплю просто?

https://jsfiddle.net/2kwda4q9/2/

$('.reviews__text').each(function() {
		if ($(this).text().length > 391) {
			$(this).parent('.reviews__wrapper').data('height', $(this).parent('.reviews__wrapper').height());
			$(this).data('full', $(this).text());
			$(this).text($(this).text().slice(0, 391) + '...');
			$(this).parent('.reviews__wrapper').css('height', '303px');
			$(this).after("<span class='reviews__more'>Развернуть</span>");
		}
	});

	$('.reviews__more').click(function() {
		var trigger = $(this); // Кнопка свернуть/развернуть
		var feedback_text = trigger.siblings('.reviews__text').data('full'); //Текст отзыва
		var feedback_container = trigger.siblings('.reviews__text'); //Контейнер текста
		var feedback_container_wrapper = trigger.parent('.reviews__wrapper'); //Обёртка для контейнера

		if (trigger.text() == 'Развернуть') {
			feedback_container_wrapper.animate({height: feedback_container_wrapper.data('height') + 23 }, 400);
			feedback_container.text(feedback_text);
			trigger.text('Свернуть');

		} else {
			feedback_container_wrapper.animate({height: '303px'}, 400);
			feedback_container.text( feedback_text.slice(0, 391) + '...' );
			trigger.text('Развернуть');
		}
	});

"+ 23" - Эт я прибавляю высоту .reviews__more

Плавное сворачивание и разворачивание текста?

EVAS: Не совсем понял зачем animate :) + многоточие не удаляется при разворачивании и анимация тупит(и с animate и так, как я переделал).

$('.reviews__text').each(function() {
		if ($(this).text().length > 391) {
			$(this).data('full', $(this).text() );
			$(this).html($(this).text().slice(0, 391) + '... <span class="volt">'+$(this).text().slice(391, 99999)+'</span>' );
			$(".volt").hide()
			$(this).after("<span class='reviews__more'>Развернуть</span>");
		}
	});

	$('.reviews__more').click(function() {
		if ($(this).text() == 'Развернуть') {
			$(this).siblings('.reviews__text').find('.volt').slideDown();
			$(this).text('Свернуть');
		} else {
			$(this).siblings('.reviews__text').find('.volt').slideUp();
			$(this).text('Развернуть');
		}
	});

Спасибо за вариант, возможно что-то подцеплю :)

+ разворачивались все айтемы при клике на любой из, я пофиксил.

Плавное сворачивание и разворачивание текста?

Catzo0: Спасибо, завтра гляну.

Пока вот такую бессовщину накидал :D

$('.reviews__text').each(function() {
		if ($(this).height() > 288) {
			$(this).data('height', $(this).height());
			$(this).css('height', '288px');
			$(this).after("<span class='reviews__more'>Развернуть</span>");
		}

		if ($(this).text().length > 424) {
			$(this).data('full', $(this).text());
			$(this).text( $(this).text().slice(0, 424) + '...' );
		}
	});

	$('.reviews__more').click(function() {
		if( $(this).text() == 'Развернуть' ) {
			$(this).siblings('.reviews__text').animate({height: $(this).siblings('.reviews__text').data('height') }, 424);
			$(this).siblings('.reviews__text').text( $(this).siblings('.reviews__text').data('full') );
			$(this).text('Свернуть');
		} else {
			$(this).siblings('.reviews__text').animate({height: '288px'}, 200);
			$(this).siblings('.reviews__text').text( $(this).siblings('.reviews__text').text().slice(0, 424) + '...' );
			$(this).text('Развернуть');
		}
	});

Очень криво, так что вернусь пока на предыдущий вариант с max-height. Завтра гляну Multiline ellipsis может что выйдет, надеюсь не дерьмо) Хотя лучше дерьмо, чем ничего или лучше ничего, чем дерьмо?) Пора спать крч)

Плавное сворачивание и разворачивание текста?

Catzo0: Я изначально и отталкивался от высоты, но потом решил делать через вырезание т.к. при простом изменении высоты нельзя выставить многоточие в конце текста. Есть идеи как можно скомбинировать?

Спасибо. Переделал пока так

$('.reviews__text').each(function() {
		if ($(this).height() > 288) {
			$(this).data('height', $(this).height());
			$(this).css('maxHeight', '288px');
			$(this).after("<span class='reviews__more'>Развернуть</span>");
		}
	});

	$('.reviews__more').click(function() {
		if( $(this).text() == 'Развернуть' ) {
			$(this).siblings('.reviews__text').animate({maxHeight: $(this).siblings('.reviews__text').data('height') }, 400);
			$(this).text('Свернуть');
		} else {
			$(this).siblings('.reviews__text').animate({maxHeight: '288px'}, 400);
			$(this).text('Развернуть');
		}
	});

Но хочется всё же многоточие в конце. Попробую ещё скомбинировать эти два способа, мб чё выйдет.

Почему imagemin-pngquant не дает результат?

Хельг Волков Спасибо за mozjpeg! Теперь всё работает нормально.

Вот так жмёт jpegtran, который встроен в gulp-imagemin


А вот так mozjpeg


В параметрах у обоих стояло только progressive: true

Поможете разобраться с Auto-Hide Sticky Header?

Ankhena W: До меня дошло))

Как сделать спойлер закрытым по умолчанию?

Максим Кононов: всё работает https://jsfiddle.net/fbopdyLm/

Может вешаешь display: none на spoiler_bg?