• Как исправить отображение slick-slider в magnific-popup окне?

    При клике на кнопку popup вызовите метод .slick('refresh') либо .slick('reInit')
    А если уж совсем точно, то вот так:
    var slick = $('.slider').slick({
          //Тут параметры	
       });
    
      //Теперь по клику на изображение magnific-popup реинициализируем слайдер
       $('.img').click(function() {
          slick.slick('refresh');
       });
    Ответ написан
    1 комментарий
  • Когда использовать в pug mixins, когда block, когда include?

    alvvi
    @alvvi
    export default apathy;
    1. Внутри миксина чтобы получить детей которых вы ему передаете
    2. Внутри темплейта который в будущем будет extend-ить другой темплейт, чтобы получить детей из темплейта, который extend-ит этот темплейт.
    3. Внутри темплейта, который extend-ит чтобы передать детей
    Примеры 2 и 3 здесь: https://pugjs.org/language/inheritance.html

    А вот пример для 1
    mixin foo()
      div.bar
        block
    
    +foo()
      div.foo Hello world

    На выходе получим
    <div class="bar">
      <div class="foo">Hello world</div>
    </div>

    ну или тоже есть в доках, но чуть сложнее: https://pugjs.org/language/mixins.html
    Ответ написан
    Комментировать
  • Как узнать, что прокрутка остановилась?

    @GreatRash
    var timer = null;
    
    $(window).on('scroll', function() {
      clearTimeout(timer);
      
      timer = setTimeout(function() {
        alert('прокрутка прекратилась');
      }, 100);
    });
    Ответ написан
    1 комментарий
  • Синхронный и асинхронный код, почему так называется?

    MarcusAurelius
    @MarcusAurelius
    автор Impress Application Server для Node.js
    А сам код синхронным не называется, это его по ошибке или для упрощения так называют. Синхронным и асинхронным называется только API ввода-вывода, т.е. операции, прерывающие исполнение кода и требующие от системы обратиться к внешнему устройству, работающему не синхронно с центральным процессором. Операции ввода-выдвода, каковые есть: работа с дисками, портами, контроллерами, периферийными устройствами, как клава, мыша, тачскрин, разные датчики, вебкамера, сетевые карты, блютузы и другие радиомодули, принтеры, видеокарты и прочее. Все они получают задание от программы, и исполняют его отдельно, своими мощностями. Потом внешние устройства присылают программе сигнал о статусе исполнения и, возможно, полученные данные. Программа все это время может ждать (если у нее синхронное API, т.е. блокирующее) или что-то делать (если асинхронное, т.е. не блокирующее). Если программа ждет, не переходит к выполнению следующего действия, то это синхронный ввод-вывод, потому, что осуществляется процесс синхронизации программы с внешним устройством. Внешне устройство посылает прерывание, которое обрабатывает операционная система и через несколько слоев драйверов оно попадает в программу, обычно в виде колбека или события. Если программа ждала, то вызов API не завершался, она все время слушала, когда придет событие о завершении операции ввода вывода, а получив его API отдает ответ и управление переходит к следующей команде, что и называется, синхронизацией с периферийным устройством. Если программа не ждала, то вызов API сразу завершается и не блокирует поток выполнения программ, это называется асинхронным API, потому, что процесс синхронизации не происходит явно, а ответы возвращаются через события.
    Ответ написан
    3 комментария
  • RESTful API и MVC — что это?

    Основной посыл использования RESTful API - применение основной идеи Паутины для взаимодействия автоматических агентов (приложений), а не только людей.
    Основная идея Паутины - построение распределенной информационной системы путем публикации неких абстрактных ресурсов, выдачи им идентификаторов (в сегодняшнем вебе - иерархических), определения ряда простых и широко известных операций над ними, не зависящих от содержимого ресурса (те самые GET, POST, PUT и т.д.), и связывания этих ресурсов ссылками (это называется гипермедиа, и в частности, гипертекст, если речь идет о текстовой информации).
    Как люди с появления Веба публикуют информацию в нем для потребления другими людьми, так и RESTful веб-сервисы публикуют иерархически структурированные ресурсы для потребления клиентами. Разница только в представлении - для людей это plaintext/HTML, для автоматических агентов - это JSON/XML/прочие форматы, которые удобно обрабатывать.
    Таким образом, если вы хотите какую-то информацию опубликовать как RESTful API, вам необходимо представить ее как набор ресурсов, а все операции над этой информацией выразить через набор предопределенных операций. Фишка в том, что во многих задачах этих предпопределенных операций вполне достаточно, главное правильно определить ресурсы.
    Важно понимать, что "ресурс" это обычно некоторая сущность, "существительное". Как правильно заметил Антон Жуков , ресурс /getItems хоть и может существовать в принципе, говорит о неудачно спроектированном API (действие представлено как ресурс).

    Есть и другие подходы к архитектуре распределенных приложений, например архитектуры, основанные на RPC (удаленный вызов процедур). Информация в таких архитектурах также представлена в виде некоторого набора сущностей, однако операции над ними определяются конкретной задачей, и для каждой сущности будет свой набор. Это больше соотвествует классическому ООП-подходу. Таким образом, RESTful следует подходу много сущностей (ресурсов) - мало операций (и эти операции известны заранее), а RPC - немного сущностей, но много операций над ними.

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

    Сама архитектура REST не привязана к конкретным технологиям и протоколам, но в реалиях современного Веб, построение RESTful API почти всегда подразумевает использование HTTP и каких-либо распространенных форматов представления ресурсов, например JSON, или, менее популярного сегодня, XML.

    Смысл использования REST в том, что принципы, хорошо показавшие себя в "человеческом" веб и позволившие построить самую большую распределенную ИС, применяют и для "веба машин".

    Ответ длинноват, но как короче объяснить, чтобы не исказить понимание, не представляю. Если что непонятно - спрашивайте.
    Ответ написан
    7 комментариев
  • Где скачать книгу "Разработка Backbone.js приложений"?

    iusfof
    @iusfof
    Front-end developer
    в вк в документах есть дофига книг, в том числе та, которую вы ищите
    Ответ написан
    Комментировать
  • Какие есть полезные и современные книги, посвященные frontend разработке?

    dpigo
    @dpigo
    Front-end developer
    Наиболее систематизированная информация, но не все по фронтэнду:
    habrahabr.ru/post/77179/

    По мелочам:
    habrahabr.ru/qa/25989/
    habrahabr.ru/qa/11259/
    habrahabr.ru/qa/2850/
    habrahabr.ru/qa/21058/
    habrahabr.ru/qa/8852/
    habrahabr.ru/company/piter/blog/155275/
    habrahabr.ru/post/149082/
    Ответ написан
    Комментировать
  • Как "зафиксировать" ширину блока при присвоении position: fixed; и контролировать его поведение?

    alvvi
    @alvvi
    export default apathy;
    Вообще поведение полностью логичное. Вы сами пишите
    что, в принципе, естественно, т.к. отчет от экрана, и с этим можно бороться

    относительный размер (как у вас) тоже будет считаться от экрана.
    Насколько я понимаю эту проблему призван решить position: sticky, (поправьте, если нет) но работает он пока что далеко не везде.

    1. В любом решении без JS необходимо будет какое-то фиксированное значение, один из вариантов: добавить контейнеру фиксированный max-width, а блоку
    width: inherit;
    max-width: inherit;

    Таким образом блок унаследует max-width контейнера и не будет выходить за его пределы.

    2. Как контролировать поведение и сделать плавное "скольжение" блока без прыжков на старте?

    "Прыжок" в вашем случае это премещение на 12px от края экрана, поскольку вы добавляете класс с
    position: fixed 
    top: 12px
    только когда scrollTop становится равен offsetTop, а после этого он естественно отпрыгивает вниз на 12px. Чтобы избежать этого надо добавлять класс когда scrollTop равен (offsetTop - 12px), потому что в этом случае блок при добавлении будет уже в "нужном" месте.

    https://codepen.io/Alvvi/pen/MEXeaV
    Ответ написан
    Комментировать
  • Как определить что элемент скрылся за пределами экрана?

    DeLaVega
    @DeLaVega
    Верстаю, фронтэндю =)
    var el = $(el).offset().top + $(el),height();
    $(window).on("scroll", function(){
    if ( $(window).scrollTop() > el  ){
    что то сделать...
    }
    })
    Ответ написан
    Комментировать
  • Как определить что элемент скрылся за пределами экрана?

    iiil
    @iiil
    Инженер и вэб-дизайнер, рисую.
    codepen.io/iiil/pen/gKpyk
    В примере начните скроллить.
    Ответ написан
    Комментировать
  • Как сделать индикатор прокрутки страницы?

    А что мешает делать ширину ползунка равной отношению текущей прокрутки на всю длину страницы?
    $(window).scroll(function(){
        var ratio = $(document).scrollTop()/(($(document).height() - $(window).height()) / 100);
        $("#progress").width(ratio+"%");
    });

    Демо
    Ответ написан
    1 комментарий
  • Как сделать индикатор прокрутки страницы?

    FAT
    @FAT
    Developer
    Недавно реализовывал что-то подобное тут. Справа по мере прокрутки страницы прокручивается валик с краской. То что нужно? Вот исходный код скрипта:
    $(document).ready(function(e) {
    	var os = (function() {
    		var ua = navigator.userAgent.toLowerCase();
    		//console.log(ua);
    		return {
    			isWin: /windows/.test(ua),
    			isWin2K: /windows nt 5.0/.test(ua),
    			isXP: /windows nt 5.1/.test(ua),
    			isVista: /windows nt 6.0/.test(ua),
    			isWin7: /windows nt 6.1/.test(ua),
    			isWin8: /windows nt 6.2/.test(ua),
    			isMac: /macintosh/.test(ua)
    		};
    	}());
    	var animateSpeed = 500;
    	if(os.isMac) {
    		animateSpeed = 600;
    	}
    	
    	/*Валик*/
    	var rollHPos = 0,
    	scrollTopPosition = $(document).scrollTop(),
    	docHeight = $(document).height(),
    	winHeight = $(window).height(),
    	rollWinStep = Math.floor(winHeight / (Math.floor(docHeight / winHeight)));
    	//console.log(docHeight);
    	//Движение за мышкой
    	/*$(this).mousemove(function(e){
    		if( e.pageY > 0 && e.pageY < docHeight ) goRoll(e.pageY, true);		
    	});*/
    	//Движение по скролу
    	$(document).scroll(function(){
    		goRoll($(document).scrollTop(), false);		
    	});
    	
    	$("#roll").click(function(){
    		goRoll(0, false);
    		$("html, body").animate({ scrollTop: 0 }, 500);
    		
    	});
    	$(document).mousemove(function(e){
    		//console.log($(this).height() + " : " + e.pageY);		
    	});
    	function goRoll( STP, mousemove ){
    		docHeight = $(document).height();
    		winHeight = $(window).height();
    		if( mousemove ) animateSpeed = 0;
    		//console.log(docHeight)
    		//Крутим валик вниз
    		if( scrollTopPosition > $(document).scrollTop() ){
    			if( rollHPos == 0 ) rollHPos = -946;
    			else rollHPos += 86;
    		}
    		//Крутим валик вверх
    		else{
    			if( rollHPos == -946 ) rollHPos =  0;
    			else rollHPos -= 86;
    		}
    		//Запоминаем позицию скролла относительно верха страницы
    		scrollTopPosition = STP;
    		rollCorrectPos = STP == (docHeight - winHeight) ? 90 : 0;
    		//Визуализируем
    		$("#roll").css({"background-position-y": (rollHPos).toString() + "px"});
    		perOfDocScroll = Math.floor(scrollTopPosition/((docHeight - winHeight) / 100));
    		//setTimeout(function(){
    		if( !mousemove ){
    			//console.log(docHeight);
    			$("#roll").stop().animate({"margin-top": + Math.floor(((winHeight) / 100 * perOfDocScroll)) - 1 + "px", "top" : (scrollTopPosition - rollCorrectPos) + "px"}, animateSpeed);
    			$("#paint-line").stop().animate({height: + Math.floor(((winHeight) / 100 * perOfDocScroll)) + (scrollTopPosition - rollCorrectPos) + "px"}, animateSpeed);
    		}
    		else{
    			$("#roll").stop().animate({"top" : (scrollTopPosition - rollCorrectPos - 90) + "px"}, animateSpeed);
    			$("#paint-line").stop().animate({height: (scrollTopPosition - rollCorrectPos - 90 + 1) + "px"}, animateSpeed);
    		}
    			
    		
    		//}, 100);
    
    	}
    	/*Валик*/
    	
    });
    Ответ написан
    Комментировать
  • Расскажите о профессии верстальщик (в офисе)?

    Judixel
    @Judixel
    Front-end Engineer
    1. Примерно такая же что вы написали, просто верстальщиком много не заработаешь.
    2. Зависит от места, где вы работаете. Но по своему опыту скажу что никто не работает 8 часов подярд, даже в офисе. Мне ближе цифры 4-6.
    3. Не всегда будет удаваться обучаться чему-либо на работе, хотя бы потому что вокруг фоновый шум, а так же коллеги с которыми нужно контактирровать или хот-фикс внезапно прилетит.
    4. Рост будет (причем значительный) когда вы перейдете с верстальщиков во фронты.
    5. Прокачивайте то, что уже умеете делать, со временем сами будете понимать что нужно изучать и куда двигаться.
    Ответ написан
    1 комментарий
  • Как повлиять на стили контента внутри кастомного маркера яндекс карт?

    @Makito Автор вопроса
    В общем нарыл таки ответ. Раз идет такая кастомизация то лучше использовать фабрику создания макетов из шаблонов templateLayoutFactory.
    Через этот конструктор устанавливаем шаблон вывода контента для метки

    var commonContent = ymaps.templateLayoutFactory.createClass('<div class="icn_content">$[properties.iconContent]</div>');
    


    а для ситуации с наведением мыши немного модифицируем шаблон, добавив класс к hover обертке

    var hoverContent = ymaps.templateLayoutFactory.createClass('<div class="icn_content hover">$[properties.iconContent]</div>');
    


    затем эти шаблоны применяем к стилевому оформлению наших кастомных маркеров, через свойство iconContentLayout

    Получаем нужный результат — можем стилизовать контент внутри маркера как угодно, и при программном вызове событий стили на маркерах отрабатываются корректно.
    Ответ написан
    Комментировать
  • Как использовать один определенный tv на других страницах сайта?

    ruslan_aleev
    @ruslan_aleev
    MODX с cat-Art.ru
    Здравствуйте, для таких целей есть специальный компонент - https://modx.com/extras/package/clientconfig (где-то видел, что он на новых версиях MODX не работает).
    Так же можно использовать pdoField https://docs.modx.pro/components/pdotools/snippets... (в нем работает и синтаксис fastField, т.е. можно выводить телефон в нужном месте так - [[#20.phone]] , тут 20 - id страницы, в которой забито TV phone) ну или использовать свой синтаксис pdoField.
    Ответ написан
    1 комментарий
  • Натягивание верстки на wordpress или как обойтись без visual composer?

    deniscopro
    @deniscopro Куратор тега WordPress
    WordPress-разработчик, denisco.pro
    1. Advanced Custom Fields. Создать шаблон для страницы, добавить поля в админке и вывести их в шаблоне в нужных местах.
    2. Customizer
    3. Advanced Custom Fields Pro. В частности Flexible Content.
    4. Ещё можно создать сайдбары и использовать виджеты. Не знаю на сколько это будет удобно, но этот вариант схож с механизмом модулей и позиций в Joomla.
    Ответ написан
    Комментировать
  • Как тут нужно называть классы по БЭМу?

    советую использовать миксы. таким образом:
    <div class="advantages__wrap clearfix">
    
      <div class="advantages__item advantage">
        <div class="advantage__image-wrap">
          <img class="advantage__image" src="img/advantages/1.png" alt="image">
        </div>
        <div class="advantage__content">
          <h3 class="advantage__head">Опыт работы</h3>
          <p class="advantage__text">Более 8 лет мы занимаемся архитектурной подсветкой зданий</p>
        </div>
      </div>
    </div>
    Ответ написан
    Комментировать
  • C помощью каких плагинов делаются такие сайты http://www.teamexos.com/?

    В основном scrollr используют для анимации при прокрутке.
    prinzhorn.github.io/skrollr
    Есть куча аналогов, например:
    scrollmagic.io
    Ответ написан
    Комментировать