• Как устанавливать фокус по клику на кнопку?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Господи прости за jQuery.
    Подключите jQuery. Вызов обработчика повешайте на document.ready.
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    
    <script>
      jQuery(function($) {
        $("#button").click(function() {
          $('#input').focus();
        });
      })
    </script>
    Ответ написан
    Комментировать
  • Как отдельной кнопкой отправить форму через общий скрипт XMLHttpRequest и не потерять контекст у формы?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Привязанное событие "submit" не вызывается, если мы руками триггерим "form.submit()".

    Как вариант решения - в каждую форму добавить скрытую кнопку, и чтобы стриггерить submit, тыкать эту кнопку вместо прямого вызова .submit()

    У меня, честно говоря, нет ощущения, что это идеальное решение - костыль какой-то, но этот костыль определённо лучше того, что предлагает сам автор.

    Ответ написан
    2 комментария
  • Плохо ли задавать стили прямо к img?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Плохо.
    Категорически не рекомендую задавать какие-то стили напрямую тегам, если это не reset/normalize - не сейчас, так попозже отстрелите себе ногу с таким подходом.

    Если уж очень хочется, то оберните в свой контейнер и задавайте
    .your-block img {
      // styles
    }

    Как можно отстрелить ногу?
    Самый банальный пример - вставили какой-нибудь виджет, который рисуется не в айфрейме - там есть img - виджет поехал.
    Ответ написан
    Комментировать
  • Неравномернный padding / css?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Вам нужно уложить в голове, как рассчитывается ширина блока. Вот тут про блочную модель, например.

    В вашем случае - можно либо убрать width у section (блочные элементы по умолчанию на всю ширину тянутся, ширина задана как auto), либо задать ему box-sizing: border-box, чтобы значение padding включалось в ширину блока.
    Ответ написан
    2 комментария
  • Ошибка DOM. Как получить элемент из iframe?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Здравствуйте!
    Вы никак не сможете получить контент айфрейма, если он расположен на другом домене. То, что у вас есть - это максимум.
    Айфреймы могут общаться посредством postMessage, но это не ваш случай, Vimeo вам ничего не отправит.
    Ответ написан
  • Как переключить активный класс?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    При клике на кнопку перед toggleClass убирайте класс со всех кнопок, просто же.
    Господи прости за jQ и такие подходы.
    $('.prices-slider-header-button').on('click',function (e) { 
      e.preventDefault();
      $('.prices-slider-header-button').removeClass('prices-slider-header-button-clicked');
      $(this).toggleClass("prices-slider-header-button-clicked");
    });
    Ответ написан
  • Как сверстать ссылку с текстом по центру?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Вот и появилось поколение людей, которые из ссылок будут делать гриды...
    Ваша задача не решается при таких вводных никак.

    Мы можем выровнять текстовый контент внутри по центру (1), но при переполнении он и останется по центру (2).

    Если есть возможность добавить внутрь вложенный элемент, то задача решается (3 и 4).



    ---

    Когда-нибудь это будет решаться так:
    .flex {
      align-items: safe center;
    }

    Но эта штука уже два года в черновиках и движений в эту сторону нет особо.
    Ответ написан
    3 комментария
  • Почему Pug конвертирует div в span, если добавить его внутри ссылки?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Pug не даёт вам совершить ошибку - блочный элемент нельзя вкладывать в инлайновый (строчный).
    Нужно поведение как у блочного элемента внутри строчного - задавайте ему тип через стили.
    <a href="/" class="link">
      <span>Link text</span>
    </a>

    .link span {
      display: block;
    }


    UPD:
    Как я стар... Внезапно, HTML5 этого не запрещает и это не считается ошибкой. Раньше нельзя было.
    Но ИМХО, это как с определением рода слова "кофе" - по нынешним меркам можно и в мужском, и в среднем, но тем не менее в приличном обществе "кофе" в среднем роде услышать сложно.

    Новый ответ на вопрос (bemto позволяет делать так):
    +b.A.test(href="#")
      +e.DIV.content
    Ответ написан
    Комментировать
  • Как правильно сделать адаптивную шапку на сайте с точки зрения SEO?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Здравствуйте.
    Конечно, идеальный вариант - обойтись одной разметкой и для десктопа, и для мобильных устройств. Но в ряде случаев это невозможно.

    Тут встаёт выбор, чем нам пожертвовать:
    • можно принести на алтарь скорость разработки, сложность дальнейшей поддержки и UX, с помощью JS отслеживая размер экрана и на лету перестраивая шапку из одной разметки в другую;
      • Поисковики довольны - есть один контент;
      • Пользователи не очень довольны - они эти перестроения могут заметить, либо дольше ждут загрузки;
      • Разработчики очень недовольны (особенно когда год спустя клиент приходит и говорит "а давайте сюда вот добавим вот такой блок" и надо вспомнить логику всех этих хитрых переставлений).

    • можно пожертвовать потенциальным удобством поисковиков и сделать полный дубль блока для мобильных устройств.
      • Поисковики, вероятно, смотрят с недоверием;
      • Пользователи довольны - никаких перестроений на лету они не видят;
      • Разработчики довольны - получается структура, которую легко можно понять и поддерживать.


    Какой эффект это оказывает на СЕО? Какой-то, вероятно, оказывает, но практически нулевой.
    На сайтах часто отображают логотип дважды - в шапке и в подвале. Также меню дублируют. И телефоны. И ещё бывает повторяющийся контент. И ничего, нормально продвигается.

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

    Делайте как вам и пользователям удобнее, у поисковиков есть проблемы гораздо более серьёзные, чем дважды повторённый логотип в соседних блоках.
    Ответ написан
    3 комментария
  • Почему шаблон, подключенный через get_template_part не имеет доступа к родительским переменным?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Работают require и include следующим образом: просто вставляют содержимое файла из переданного пути в то место, где его вызвали. Таким образом, подключаемый файл получает контекст файла, который его вставил. Это просто перенос кода из одного места в другое.

    Когда вы вызываете функцию - создаётся новый контекст, в котором нет явного доступа к родительскому контексту (области видимости).
    $testVar = 123;
    function testFunc() {
      var_dump($testVar); // будет undefined
    }
    testFunc();


    Можно получить доступ к конкретным вещам из глобального контекста с помощью global [...vars]
    $testVar = 123;
    $anotherVar = 123;
    function testFunc() {
      global $testVar;
      var_dump($testVar); // будет 123
      var_dump($anotherVar); // будет undefined
    }
    testFunc();


    А теперь посмотрим на код функции load_template.
    Видите что-то знакомое, похожее на предыдущий пример?

    То есть, простой ответ на вопрос: потому что вы вызываете require в контексте файла, в котором объявлены переменные, а get_template_part вызывает require в контексте, где доступа к этим переменным нет.
    Ответ написан
  • Advanced Custom Fields. Какое значение выбрать для post_object?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Задача решается как-то странно - тут вообще ACF ни к чему.
    У вас есть кастомный тип постов (watch-page), создайте и привяжите к нему кастомную таксономию (например watch-page__tax), создайте нужные категории.
    Если всё сделано верно, то в админ-панели при создании поста справа можно будет указать нужную категорию (или несколько).

    Ну а дальше
    $query = new WP_Query([
    	'post_type' => 'watch-page',
    	'tax_query' => [
    		[
    			'taxonomy' => 'watch-page__tax',
    			'field'    => 'name',
    			'terms'    => 'Название категории'
    		]
    	]
    ]);
    Ответ написан
    Комментировать
  • Возможно подружить gulp sass и postcss плагин?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Поставьте вызов postcss до вызова gulp-sass в своей задаче - gulp-sass естественно эту жесть переварить не может.

    P.S. А вообще - лучше такие штуки не использовать - оверинжиниринг это жуткий, не стоит так сильно отклоняться от "ванильного" CSS, будете в команде работать - вам спасибо скажут те, кто после вас будет разбираться, как это всё работает.
    Ответ написан
    Комментировать
  • Что будет, если использовать много элементов html? С технической точки зрения?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Увеличение количества DOM-узлов отрицательно сказывается на производительности.
    Ну и работать с этим менее удобно, если вы на эту разметку в редакторе смотрите.

    Только надо понимать, что чтобы именно это стало реально узким местом - надо каждое слово на большой странице так разбить. От того, что вы в одном месте вместо одного узла вставите десять - ничего не будет, браузеры работают с тысячами узлов, это капля в море.

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

    Руками подобную разбивку делать - лишнее чаще всего, есть автоматизированные решения.
    На JS есть charming, на серверной стороне как-то никогда не приходилось таким заниматься, сами найдёте.

    Говорите, здравого смысла нет? Есть ряд задач, которые только так и решаются... Всему своё место.

    some-test-image.gif
    Ответ написан
    Комментировать
  • Можно ли подогнать ширину строки под размер контейнера?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    CSS - декларативная штука, а мы не знаем количество символов в строке и соответственно не можем задать нужный размер текста.
    Так что нет, без JS задача не решается. Когда мне крайний раз надо было - использовал fitty, работает без нареканий.
    Ответ написан
    Комментировать
  • Как добавить meta description использя Advanced Custom Fields?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Здравствуйте! А в чём проблема-то?
    Вы можете совершенно спокойно ровно этот же код использовать в header.php (ну или где там у вас лежит meta description).

    // предположим, header.php
    // какое-то содержание
    // ...
    <?php 
    $acfFields = get_fields();
    $metaDescriptionValue = $acfFields['about'] ? $acfFields['about'] : 'Meta Description по умолчанию';
    ?>
    <meta name="description" content="<?= $metaDescriptionValue; ?>">
    // ...
    // остальное содержание


    get_field и get_fields замечательно работают даже вне loop.
    Ответ написан
    Комментировать
  • Как автоматически улучшать стиль CSS перед коммитом?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Prettier не умеет расставлять порядок свойств. Это вообще очень простой инструмент, который заботится только о базовом форматировании.

    То, что вам нужно, реализуется средствами stylelint и его плагина stylelint-order.
    Вот очень толковая статья, после прочтения которой вопросов не должно остаться.
    Ответ написан
    7 комментариев