Задать вопрос
  • В чем разница между word-break: break-word и word-wrap: break-word?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Отличная статья про техники разбиения слов. Там можно чуть лучше разобраться со всеми техниками
    Ответ написан
    Комментировать
  • Как в секцию scripts в package.json написать в value значение которое содержит две строки?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Всегда можно использовать одиночные кавычки

    "release-as": "git commit --allow-empty  -m 'chore: release 0.0.1'"


    или экранировать символы
    "release-as": "git commit --allow-empty  -m \\\"chore: release 0.0.1\\\""
    Ответ написан
    5 комментариев
  • Как отобразить зашифрованную картинку через cryptoJS?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    UPD: https://codepen.io/expa/pen/yLQmwGX?editors=0010

    Я поигрался с конвертацией Base64, что-то такое подобное делал в прошлой своей работе. В вашем решении вы использовали encryptedImage.toString() для преобразования объекта encryptedImage в строку. Однако это не преобразует его в Base64.

    Дальше я декодировал Base64 с помощью decryptedBytes.toString(CryptoJS.enc.Utf8)

    Также нашёл в интернетах функцию dataURLtoBlob, которая конвертирует строковых данных в формате Data URL в объект Blob.

    Код получился неказистый, но уже что-то дальше с ним можно делать
    Ответ написан
    Комментировать
  • Как подставить в @media screen переменную из css?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Ждём спецификацию Media Queries Level 5.

    В целом, если хотите включить возможности работы спецификации не имплементированной в браузеры, то можно подключить postcss-плагин PostCSS Custom Media, тогда можно будет использовать кастомные свойства вот так:

    @custom-media --small-viewport (min-width: 768px);
    
    @media (--small-viewport) {
    	/* стили для планшета */
    }
    
    /*  в css получится вот так*/
    
    @media (min-width: 768px) {
    	/* styles for small viewport */
    }
    Ответ написан
    Комментировать
  • Как сделать такое обтекание?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Вам уже подсказали про гриды, что лучше смотреть в эту сторону. Но у меня есть дополнительные вопросы нужен ли адаптив.

    В целом это всё выглядит примерно вот так
    <div class="grid">
      <div class="child">
        Мiсто
        <div>viber</div>
        <div>Telegram</div>
      </div>
      <div class="child">
        Мiсто
        <div>viber</div>
        <div>Telegram</div>
      </div>
      <div class="child">
        Мiсто
        <div>viber</div>
        <div>Telegram</div>
      </div>
      <div class="child">
        Мiсто
        <div>viber</div>
        <div>Telegram</div>
      </div>
      <div class="child">
        Мiсто
        <div>viber</div>
        <div>Telegram</div>
      </div>
      <div class="child">
        Мiсто
        <div>viber</div>
        <div>Telegram</div>
      </div>
      <div class="child">
        Мiсто
        <div>viber</div>
        <div>Telegram</div>
      </div>
      <div class="child">
        Мiсто
        <div>viber</div>
        <div>Telegram</div>
      </div>
    
      <div class="image">картинка</div>
    </div>


    Элемент с картинкой можно поставить вообще в любое место внутри .grid-родителя

    .grid {
      display: grid;
      grid-template-columns: repeat(4, 158px);
      gap: 20px;
    }
    
    .child {
      border: 1px solid #000;
      border-radius: 4px;
    }
    
    .image {
      grid-column: 1 / 3;
      grid-row: 2 / 4;
      border: 1px solid #000;
      border-radius: 4px;
    }


    64d68a5e4ab57221981814.png
    Ответ написан
    3 комментария
  • Как создать условие в mixin на Stylus, чтобы в него можно было передавать не только ValuePx, но и Value?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    У вас логика по сути сводится к отсутствию значения. На это отсутствие и нужно проверять. Если никаких единиц измерения нет, то подставь px, а если единицы измерения передали в функцию, то ничего не делай.

    В styles есть функция, которая отвечает за проверку единиц измерения (unit).

    Осталось написать логику
    padding unit($value) == '' ? ($value)px : $value

    Если передали число без единицы измерения unit($value) == '', то к $value добавь px($value)px
    Если хоть какую единицу измерения передали, то ничего не делай — $value

    Полный миксин
    mixinName($value)
      padding unit($value) == '' ? ($value)px : $value
      margin unit($value) == '' ? ($value)px : $value


    с примером
    body
      mixinName(10);
      
    p 
      mixinName(10px);
      
    b 
      mixinName(10rem);


    компилируется в
    body {
      padding: 10px;
      margin: 10px;
    }
    p {
      padding: 10px;
      margin: 10px;
    }
    b {
      padding: 10rem;
      margin: 10rem;
    }
    Ответ написан
    Комментировать
  • Первый td растягивается на всю ширину, почему?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Таблицы должны иметь одинаковое количество ячеек в каждом ряду.
    1 1 1
    1 1 1
    1 1 1


    Если какой-то ячейки нет в ряду, то вы должны растнуть ячейку на две
    1 1 1
    2   1
    1 1 1


    Если в ряду вообще одна ячейка из трёх, тогда нужно растянуть на 3 ячейки
    1 1 1
    2   1
    3


    В вашем случае нужно заменить первый и последний ряды с

    <tr>
      <td height="50px" width="100%"></td>
    </tr>


    на
    <tr>
      <td height="50px" colspan="5"></td>
    </tr>


    5 — потому что у вас 5 ячеек в втором ряду. Ячейкам во втором ряду вы уже можете указать конкретные ширины
    Ответ написан
    1 комментарий
  • Дефолтная высота контейнера для 'display: grid'?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Shimpanze, https://www.w3.org/TR/css-grid-2/
    по умолчанию высота работает как для простого display: block как в <div>. Так как по сути указывая display: grid, мы указываем display: grid block: будь внутри с гридовым контекстом, а внешее блочным.

    Вы также можете указать display: grid inline, тогда по умолчанию блок схлопнется "по тексту".

    А ещё точнее с учётом бокосовой модели с учётом контента, паддингов, бордеров и марджинов.
    Ответ написан
    1 комментарий
  • Как удалить определенные HTML теги?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    <script>
      // Получаем ссылки (<a>) с помощью querySelectorAll
      const links = document.querySelectorAll('#id a');
    
      // Проходимся по каждой ссылке и удаляем ее с помощью removeChild
      links.forEach(link => link.parentNode.removeChild(link));
    </script>
    Ответ написан
    Комментировать
  • Как реализовать генерацию пар чисел без повторений?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    function generateNumberPairs(min, max, count) {
      if (max - min + 1 < count * 2) {
        console.error('Невозможно создать запрошенное количество пар без повторений в данном диапазоне.');
        return [];
      }
    
      const numbers = [];
      const pairs = [];
    
      // Создаем массив чисел в заданном диапазоне
      for (let i = min; i <= max; i++) {
        numbers.push(i);
      }
    
      // Перемешиваем массив случайным образом
      for (let i = numbers.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [numbers[i], numbers[j]] = [numbers[j], numbers[i]];
      }
    
      // Формируем пары чисел
      for (let i = 0; i < count; i++) {
        const pair = [numbers[i * 2], numbers[i * 2 + 1]];
        pairs.push(pair);
      }
    
      return pairs;
    }
    
    // Пример использования
    const pairs = generateNumberPairs(10, 30, 10);
    console.log(pairs);


    В этом примере функция generateNumberPairs принимает минимальное значение min, максимальное значение max и количество пар чисел count, которое нужно сгенерировать. Если заданный диапазон недостаточно широк для создания запрошенного количества пар без повторений, функция выведет сообщение об ошибке и вернет пустой массив.
    Ответ написан
    Комментировать
  • Не какие расширения не работают, что делать?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Попробуйте обновить VS Code до последней версии, либо удалите ваш VS Code, загрузите заново и установите
    Ответ написан
    3 комментария
  • Как обойти блоки?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    .text-take {
     ...
     pointer-events: none;
    }


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

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Отличный вопрос, так как нужно разобраться с тем в какую категорию входит тег и какой контент он ожидает. И с ссылками не всё так просто.

    Категория: если посмотреть в спецификацию, то <a> входит в категорию потока, фраз, ощутимых элементов. Каждый элемент имеет категории, которые используются при определении контентной модели.

    Контентная модель: прозрачная. И вот тут самый интересный момент, потому что чаще всего элемент ждёт такие же стандартные категории как поток или фраза, а что значит прозрачный не совсем понятно. Если коротко, то прозрачная - зависит от контентной модели родителя. Какой родитель у ссылки такая контентная модель у ссылки.

    То есть на ваш вопрос "будет ли правильно обернуть заголовок h3 в ссылку" ответить нельзя пока мы не узнаем какой родитель у ссылки.

    Вот так нельзя
    <span>
      <a href="">
        <h3>Заголовок</h3>
      </a> 
    </span>


    А вот так уже можно
    <div>
      <a href="">
        <h3>Заголовок</h3>
      </a> 
    </div>


    По поводу "или же лучше ссылку обернуть в заголовок" - можно

    <h3>
      <a href="">Заголовок</a>
    </h3>


    Если у вас ещё проблемы с вкладыванием элементов, то лучше спеки не найти - https://html.spec.whatwg.org/multipage/text-level-...

    Смотрите на:
    1. интерсующий элемент: span, div, button, a
    2. его категорию: flow, phrasing
    3. его контентную модель: flow, phrasing

    Категория - отвечает за тип элемента. Контентная модель - что можно вставить в элемент.
    Ответ написан
    1 комментарий
  • Почему не убирается блок?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    У вас селектор .bg-img:last-child не находит элемент. Поэтому нужно подобрать подходящий селектор.

    Я бы на вашем месте на необходимый элемент добавил дополнительный класс, например bg-img-tablet и уже его скрывал на нужных разрешениях экрана.
    Ответ написан
    4 комментария
  • Как пользоваться live edit в opera(opera GX)?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Мне казалось, что Live Edit уже не работает.

    View -> Open in browser -> выбрать нужный браузер, не оно?

    Как вариант, когда вы открываете с помощью "Live edit" скопировать из урла в Google Chrome и использовать скопированный url в Opera.
    Ответ написан
    Комментировать
  • Как изменять качество видео сохраняя ширину и высоту?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Очень мало контекста. Тут бы пример вашей разметки увидеть.

    Но предположу, что нужно лишь добавить атрибуты размеров

    <video width="960" height="540">
      <source src="...">
    </video>
    Ответ написан
    Комментировать
  • Можно ли писать просто active по BEM?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    БЭМ достаточно гибкая методология и если в вашем проекте будут договорённости, что `active` может быть глобальным модификатором блоков и элементов - можно.

    В некоторых проектах такие модификаторы выделяют в `is_`-комопненты:`is_active`, `is_hover`. Опять же это про договорённости в команде.

    Если по правилам, то `active` у вас блок, а не модификатор. Тут просто нейминг путает других участников проекта. Ожидается одно, а получаешь другое.
    Я бы сначала следовал методологии строго, а потом уже бы модифицировал под проект и команду.
    Ответ написан
    Комментировать
  • Как убрать меню подсказок при выборе даты (jQuery UI datepicker)?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Попробуйте у формы отключить автодополнение:

    <form action="/" method="post" autocomplete="off">
    </form>


    либо у необходимого инпута, если у остальных инпутов нужно оставить
    <form action="/" method="post">
      <input type="text" name="name" placeholder="Иванов Иван" autocomplete="off">
    </form>
    Ответ написан
    1 комментарий
  • Как настроить переход на другие страницы в PUG?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Создаёте PUG-файлы страниц, как с HTML:
    1. index.pug
    2. about.pug
    2. catalog.pug

    В сборке(dev и prod) это будут HTML-страницы
    1. index.html
    2. about.html
    3. catalog.html

    Так как в браузере никакого PUG нет, сборка делает HTML-страницы, то в браузере вы смотрите на HTML-страницы. В связи с этим вам нужно указывать ссылки на эти страницы:

    <ul>
      <li><a href="index.html">Главная</a></li>
      <li><a href="about.html">О нас</a></li>
      <li><a href="catalog.html">Каталог</a></li>
    </ul>
    Ответ написан
  • Как правильно перехватить js событие - нажатие на кнопку слайдера?

    nikolayshabalin
    @nikolayshabalin
    Автор профессиональных курсов в HTML Academy
    Вот там документация. Внутри ищите по слову events. Вы можете прослушивать родные ивенты слайдера, которые он предлагает.
    Ответ написан
    Комментировать