Задать вопрос
  • Как использовать BEM+JADE+GULP?

    eruditecat
    @eruditecat
    Красноглазик
    Попробуйте это:

    const pug = require('pug');
    const pbem = require('pbem');
    
    const scope = pbem({
      blocksDir: __dirname + 'views/blocks'
    }).precompile();
    
    const separateTemplate = pug.compileFile(__dirname + 'views/page.pug');
    
    let renderedSeparateTemplate = separateTemplate({
      block: scope.createBlock
    });

    В шаблонах:

    index.pug:
    != block('block-name').local('varName', 'varValue')

    blocks/block-name/block-name.pug:
    div&attributes( attributes() )
    != element('element-name').local('varName', varName)


    https://github.com/bigslycat/pbem
    Ответ написан
    Комментировать
  • Как скрыть блок DIV при уменьшении ширины родительского блока?

    eruditecat
    @eruditecat
    Красноглазик
    Если ширина родительского блока изменяется дискретно, то каждое дискретное значение должно задаваться своим классом. Тогда можно будет сделать так:
    .mixplat__relative_compact .mixplat__operators {
      display: none;
    }
    Ответ написан
    Комментировать
  • Как реализовать БЭМ блоки для jade (pug), stylus?

    eruditecat
    @eruditecat
    Красноглазик
    Я столкнулся с тем же вопросом, касаемо Jade (ныне Pug). Пришлось писать свою библиотеку. Недавно выложил на Гитхаб, подключайтесь к разработке. https://github.com/bigslycat/pbem
    Ответ написан
    3 комментария
  • Как правильно сделать идеальную структуру less или scss файлов в случае больших адаптивных проектов?

    eruditecat
    @eruditecat
    Красноглазик
    Методология БЭМ придётся Вам по вкусу. Но, я так понимаю, в Вашем текущем проекте — уже поздно. Тем не менее, на текущем этапе разработки Вам будет полезно использовать эти принципы. Изучите вопрос. А Ваша проблема решается так:

    @mobile: (max-width: 460px);
    @tablet:  (min-width: 461px) and (max-width: 970px);
    @desktop: (min-width: 971px);
    
    // Значения придуманы от балды
    
    .selector {
      @media @mobile {
        // ...
      }
      @media @tablet {
        // ...
      }
      @media @desktop {
        // ...
      }
    }


    Чтобы не было лапши, избегайте каскадов. CSS и LESS дают нам очень много гибких фич, но это не значит, что мы должны использовать все и сразу. У Вас должны быть очень веские основания, чтобы использовать что-либо из этого.

    Тем временем, где-то в идеальном мире:

    /* Файл /bem/block/block.less */
    .block {
      @media @mobile {
        // ...
      }
      @media @tablet {
        // ...
      }
      @media @desktop {
        // ...
      }
    }
    
    /* Файл /bem/block/__element/block__element.less */
    .block {
      &__element {
        @media @mobile {
          // ...
        }
        @media @tablet {
          // ...
        }
        @media @desktop {
          // ...
        }
      }
    }
    Ответ написан
    Комментировать
  • Какой шрифт используется на скриншоте?

    eruditecat
    @eruditecat Автор вопроса
    Красноглазик
    Из диалога на discuss.atom.io стало ясно, что сейчас данной темой используется Fira Mono, а на момент скриншота использовался OS X Menlo font. В общем-то, это почти DejaVu Sans Mono, но если очень хочется, то можно поставить Meslo.
    Ответ написан
    Комментировать
  • Лучший способ обучения?

    eruditecat
    @eruditecat
    Красноглазик
    1. Прочтите учебник.
    2. Поставьте перед собой простую, но конкретную задачу и решайте её, обращаясь к учебнику. Начинайте с самых азов и элементарных вещей.
    3. Если задача оказалась слишком сложной, поставьте по-проще или прибегните к её декомпозиции.
    4. Не стыдитесь пользоваться шпаргалками. То, что Вы пишите, рано или поздно, отложится у Вас в голове. Практика важнее зубрёжки, т.к. развивает соответствующий образ мышления и прививает правильное понимание.
    Ответ написан
    Комментировать
  • Как сделать запрос синхронным?

    eruditecat
    @eruditecat
    Красноглазик
    Изучите, пожалуйста, Promise вот здесь и здесь. Не поленитесь вникнуть в это от и до. Скорей всего, этот инструмент решит Вашу проблему на корню.
    Ответ написан
  • Нужно ли мне подключать шрифты через font-face если я установлю шрифты на свой vps?

    eruditecat
    @eruditecat
    Красноглазик
    Не важно, где лежат шрифты — они отобразятся лишь в том случае, если нужный шрифт установлен на клиенте, или они подключены через @font-face. Браузер обработает это примерно так:
    1. Опа, а у меня нет такого шрифта.
    2. Где же мне его взять?..
    3. О, вот — в @font-face указано, где он лежит.
    4. Загружаю.

    На самом деле последовательность немного другая — здесь показана логика на человеческом языке. Вам бы разобраться с пониманием основ, уделите внимание этому.
    Ответ написан
    Комментировать
  • Как сделать что бы меню фиксировалось более плавно?

    eruditecat
    @eruditecat
    Красноглазик
    Объявляем в CSS класс sticky:
    .menu {
      background-color: blue;
      width: 10%;
      height: 600px;
      
      position: absolute; /* а transition нам не нужен */
    }
    
    .menu.sticky {
      top: 0;
      position: fixed;
    }

    JavaScript:
    $(document).ready(function() {
      var menu = $('.menu');
    	var menuPosition = menu.offset().top;
      
      $(window).scroll(function () {
    		if ($(window).scrollTop() > menuPosition){
    			menu.addClass('sticky');
    		} else {
    			menu.removeClass('sticky');
    		}
    	});
    });


    Всё работает.
    Ответ написан
  • Как семантически правильно уложить тег address и копирайт внутри footer?

    eruditecat
    @eruditecat Автор вопроса
    Красноглазик
    Спасибо за внимание к моему вопросу. Разобрался. Решение придётся показать в контексте упрощённого общего шаблона. Возможно, это поможет кому-нибудь в построении своей структуры документа.

    <header class="header">
      <!-- Название сайта -->
      {% if page.layout == 'page' %}
      <p class="title">Вася Пупкин</p>
      {% elsif page.layout == 'intro' %}
      <h1 class="title">Вася Пупкин</h1>
      {% endif %}
    
      <p class="description">Кто такой Вася</p>
    </header>
    
    <main>
      <!-- Название страницы -->
      {% if page.layout == 'page' %}
      <h1 class="title">Заголовок страницы</h1>
      {% elsif page.layout == 'intro' %}
      <h2 class="title">Портфолио</h2>
      {% endif %}
    
      {{ content }}
    </main>
    
    <footer class="footer">
      <div class="contacts">
        {% if page.layout == 'page' %}
        <h1 class="title">Вася Пупкин</h1>
        {% elsif page.layout == 'intro' %}
        <h2 class="title">Контакты</h2>
        {% endif %}
    
        <!-- Кстати да, в <address> нельзя помещать заголовки и секционные элементы -->
        <address>
          <ul>...</ul>
        </address>
      </div>
      <div class="copy">
        <h1 class="title">Авторские права</h1>
        <p>&copy; Вася Пупкин</p>
        <p>И ещё чьи-то права</p>
      </div>
    </footer>

    Тогда при page.layout == 'page' W3C валидатор генерирует следующий outline:

    - Заголовок страницы (h1)
        - Раздел1 (h2)
            - Подраздел1 (h3)
            - Подраздел2 (h3)
        - Раздел2 (h2)
    - Вася Пупкин (h1)
    - Авторские права (h1)

    А если page.layout == 'intro', то:

    - Вася Пупкин (h1)
        - Портфолио (h2)
            - Раздел1 (h3)
            - Раздел2 (h3)
        - Контакты (h2)
    - Авторские права (h1)


    Для Сергей Сунцев:
    А по поводу злоупотребления <section> уже писали на Хабре, и в данном случае я думаю, что <footer> внутри <section> — это взаимоисключающие вещи. И, более того, тэг <section> априори подразумевает вложенность. То есть контент внутри него не может быть верхнего уровня. Даже валидатор напрягается по поводу присутствия <h1> внутри <section>, а в outline отображает такой заголовок как вложенный.
    Ответ написан
    1 комментарий
  • Как составить исключающую регулярку?

    eruditecat
    @eruditecat
    Красноглазик
    UPD: Прошу прощения, первая редакция ответа неверна — поленился разобраться. Вот код Вашего решения:

    // Если просто регулярка, то:
    
    var botLoginReg = /^(?!(login1|login2|login3)$)[a-z\d_]{5,16}$/i;
    
    // Если есть массив с логинами (наверняка есть):
    
    var botsLoginsArray = [
        'login1',
        'login2',
        'login3'
    ];
    
    var botLoginReg = new RegExp(`^(?!(${botsLoginsArray.join('|')})$)[a-zA-Z\d_]{5,16}`, 'i');
    Ответ написан
    Комментировать
  • Как внутри callback перезаписать свойство объекта this, переданного с помощью bind()?

    eruditecat
    @eruditecat Автор вопроса
    Красноглазик
    Всё оказалось банально: вызов AJAX-запроса - асинхронный. Всё прекрасно работает, если добавить async: false в параметры запроса. Но синхронный AJAX - это не очень хорошо, поэтому порядок вызова методов нужно перестроить.
    Ответ написан
    Комментировать
  • В чём причина падения скорости Apt после обновления Ubuntu?

    eruditecat
    @eruditecat Автор вопроса
    Красноглазик
    Проблема решена, может быть, кому-нибудь пригодится. Она была актуальна для всех зеркал. Локальная машина у меня за домашним роутером. После долгих мучений я начал подозревать своего провайдера в грязных делишках, и, выполнив
    wget 'http://mirror.yandex.ru/ubuntu/dists/wily/main/binary-amd64/Packages.gz'
    на удалённом сервере, увидел, что скорость до зеркала очень даже ничего. Позвонил провайдеру, мне сказали, что виноват роутер. Подключил кабель провайдера напрямую — получил скорость по тарифу. Скачал файл. Подключился обратно через роутер — скачал тот же файл с той же скоростью, а новый файл — снова медленно. Я так понимаю, как и догадывался Влад Животнев, у них там кеширующий прокси, но изначально причина не в этом. Оператор сказал мне, что проблема может быть в том, что сервер зеркала сам режет скорость, отвечая на серый IP, и что сейчас они назначат мне белый IP, мол это всё, что они могут для меня сделать.
    wget 'http://mirror.yandex.ru/ubuntu/dists/wily/Contents-amd64.gz';
    wget 'http://archive.ubuntu.com/ubuntu/dists/wily/Contents-amd64.gz';
    
    # Скорость отличная.
    Ответ написан
    Комментировать
  • Как упростить работу с Bitbucket (кейс моего использования внутри)?

    eruditecat
    @eruditecat
    Красноглазик
    Но у Вас же есть рабочая development-версия сайта, верно? И тестируете работоспособность Вы именно на ней? Если так, толкать новый код в продакшн придётся не так уж и часто. Ну, например, поводом для этого могут служить только новая фича или багфикс. А лучше серия оных. При этом все изменения целостные и логически завершённые. Ну и часто ли? Раз в день? ИМХО, время, потраченное на запрашиваемую Вами оптимизацию, не окупится. А ели уж очень хочется, то самое простое решение можно написать самому и положить в ~/bin/.
    Ответ написан
    1 комментарий
  • Как научиться решать задачи?

    eruditecat
    @eruditecat
    Красноглазик
    Этот вопрос относится скорее к твоему отношению к жизни, нежели к какой-либо конкретной деятельности.
    1. Самое важное — быть верным себе.
    2. Но только после того, как ты определишься, что тебе надо от этой жизни. Каждому — своё, это верно. Уже выбрал? Следуй первому правилу. Нет? Хорошенько подумай.
    3. Практикуйся. Способность быстро разбираться в незнакомой ситуации — это тоже навык. Кто-то может сутки напролёт красноглазить за монитором, ковыряя (говно-)код, кто-то сутки напролёт не вылазит из под любимой тачки. Им нравится. А тебе? Будь упорным.
    4. Развивай кругозор, регулярно пополняй знания и впечатления об этом мире. Литература, туризм, экстрим, приключения, общение с разными людьми. Ты никогда не будешь слишком умён.
    Ответ написан
    Комментировать
  • Как настроить сайт чтобы его было видно только во внутренней сети?

    eruditecat
    @eruditecat
    Красноглазик
    Поднимите локальный DNS, и пусть он поддерживает ваш поддомен.
    Ответ написан
  • Как отправить данные в MySQL с помощью PHP?

    eruditecat
    @eruditecat
    Красноглазик
    Сервер MySQL возвращает интерпретатору сообщение об ошибке — разберитесь, как его вывести. Используйте возможности PDO. Изучите, оно того стоит.

    Помимо всего прочего,
    if(isset($_POST['submit']))        // у Вас по данному условию выполняется только
       $address = $_POST['address'];   // это
    
    // А вот всё следующее выполняется В ЛЮБОМ СЛУЧАЕ:
    
    $IP = $_POST['IP'];
    $sql = 'INSERT INTO table(address, IP, Login, TV, Terminal, monitoring) '
        . 'VALUES("'.$address.'", "'.$IP.'", "'.$IP.'", "'.$IP.'", "'.$IP.'", "'.$IP.'")';
    
    // проверка
    if(!mysql_query($sql)) {
        echo '<center><p><b>Ошибка при добавлении данных!</b></p></center>';
    } else {
        echo '<center><p><b>Данные добавлены!</b></p></center>';
    }
    Ответ написан
    Комментировать
  • Почему в семантичной верстке html порядок тегов table thead, tfoot, tbody?

    eruditecat
    @eruditecat
    Красноглазик
    Семантика здесь не при чём. Сначала загружаются верхние и нижние заголовки таблицы, а потом уже — между ними её тело.
    Ответ написан
    Комментировать