• Блок не прижимается к краю блока?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    .chat__mesage {
      margin-left: auto;
    }


    Но только в этом Вашем случае, потому что там у Вас какой то армагедец в css...
    Ответ написан
    Комментировать
  • Как инвертировать условие в JS?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    У вас Верно написано.
    Скобки не обязательны.
    if ( block1.textContent.includes('Слово1') && !block2.textContent.includes('Заголовок1') )

    Если не срабатывает - разметку block1 и block2 в студию
    Ответ написан
    Комментировать
  • Как изменить шрифт на главной?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Rezonatorrr, Ага.. всё же на мобильной под сайдбаром Вы имеете в виду то, что на десктопе было сайдбаром. Ок. Скрин выше от меня не корректен. Но не суть.
    Откройте разметку и найдите блок с таким id как Вы написали в стилях - penci_block_15_97340195
    Не найдёте.
    Потому что в конце цифры это динамически меняющееся значение.
    В моменте сработает - после перезагрузки страницы - нет, потому что окончание поменяется.
    Не цельтесь по id. Чем Вам класс не подошёл?
    .penci-block_15 .penci__post-title {
        font-size: 16px;
    }
    Ответ написан
    6 комментариев
  • Почему высота Div не по размеру контента внутри него?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    height: 65px;
    Действительно... почему....
    Ответ написан
  • Как я могу вывести в консоль все значения из объекта?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    А какие "все значения"? У Вас в каждом объекте area будет только одно значение под ключом areaText.
    Каждая следующая areaText перезаписывает предыдущую. Название ключа же одинаковое....
    Сделать массивом и перебрать. area.forEach(i => console.log(i))
    {
      img: 'img/explore/1.png',
      title: '2 Bedroom Apartments',
      area: [
        'Suite Area – 1,383 sq.ft',
        'Balcony Area – 886 sq.ft',
        'Total Area – 2,269 sq.ft'
      ]
    }
    Ответ написан
    Комментировать
  • Как быстро добавить такой комментарий?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Не совсем понятно что значит "добавить хот кеем такой комментарий". Не нужен же Вам каждый раз одинакковый окмментарий.
    А так начинаете вводить /** и вс код автоматом справа от курсора поставит ещё одну звёздочку.
    Теперь при нажатии на Enter будут ставиться звёздочки в каждой новой строке.

    Ещё можете посмотреть на плагин Document this или Doxygen Documentation Generator
    Ответ написан
    Комментировать
  • Как сделать что бы блок с жирным текстом не расталкивал соседние блоки?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    парочка более менее вариантов, что пришли сходу:
    1. Использовать подходящий для этих целей шрифт: https://ux.pub/editorial/proportsionalnyie-shrifty...
    2. Сделать хак на псевдоэлементах. По умолчанию текст показывается из элемента, а при наличии класса active устанавливается visibility: hidden, и поверх абсолютно спозиционированный текст в том же месте где и обычный текст из псевдоэлемента, но уже жирный. Чтобы не прописывать для каждого псевдоэлемента свой текст в css можно воспользоваться функцией attr()
    3. Ну и вариант который есть всегда - сказать дизайнеру\заказчику что это не лучший вариант выделения для конкретно данного меню и предложить другой. Например, подчёркивание, а не выделение жирным.
    4. Сделать жирность через text-shadow
    Ответ написан
  • Как из Promise получить данные в отдельную переменную?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Лирическое отступление

    <лирическое отступление>
    <!--
    Читаешь вопрос в общем списке вопросов и думаешь: "ну опять 25...".
    Открываешь вопрос, смотришь на код и думаешь: "а нет, что-то другое".
    Читаешь текст после кода и думаешь: "эх.. а было так близко..."
    -->
    </лирическое отступление>



    Код явно не Вы писали, да?
    Гуглите - асинхронный код javascript. Promises. Async\Await.
    Коротко:
    async function getData(link) {
      const data = await getCategories(link)
      console.log(data)
    }


    Либо дальше работать в цепочке промисов. Без "отдельных" переменных.
    Ответ написан
  • Как разделить функцию кнопки показать/скрыть пароль на отдельные кнопки?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Классическая ошибка не понимания как работают селекторы.
    При нажатии на кнопку нужно не все .password искать, а только те, что "рядом" с элементом, на котором произошло событие. в jQeury можно через .prev, prevAll, или наоборот взять .parent а в нём уже искать .password. Таким образом, будут искаться только те .password, которые на том же уровне что и элемент на котором был клик, либо в том же родителе, а не во всём документе.
    $('body').on('click', '.password__control', function () {
        var $this = $(this)
        var $closestPass = $this.prevAll('.password')
    		if ($closestPass.attr('type') == 'password') {
    			$this.addClass('view');
    			$closestPass.attr('type', 'text');
    		} else {
    			$this.removeClass('view');
    			$closestPass.attr('type', 'password');
    		}
    		return false;
    	});
    Ответ написан
    Комментировать
  • Возможно ли подменить поведение div на button, чтобы работала навигация по клавише Tab?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    Когда нажимаешь на клавишу tab еще раз, то следующаяя ссылка не подсвечивается, но должна.

    А чего это вдруг "должна"?
    Навигация между табами осуществляется стрелочками.
    Вот статья с примерами на основе стандартов доступности:
    https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/

    По табу должно переходит фокус на контент таба, а не на следующий таб.
    Ответ написан
    1 комментарий
  • Как сделать список в списке?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Как сделать список в списке?

    Сделать список в списке.

    А циферки можно с помощью css счётчиков

    https://stackoverflow.com/questions/2729927/number...
    Ответ написан
  • Какую библиотеку использовать для постепенной анимации элемента при скролле страницы?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Ну конкретно такое не сложно сделать и самому - подписаться на скрролл, в зависимости от значения делать transform для слоёв.
    А так часто используют GSAP\ScrollMagic для сайтов с нестандартными анимациями при скроле
    https://greensock.com/scrollmagic/
    Написано только что
    Ответ написан
    Комментировать
  • Как сверстать такой эффект тексту?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    https://css3gen.com/text-shadow/
    text-shadow: -2px 0px 0px rgba(255, 0, 150, 1);
    Ответ написан
    Комментировать
  • Как вложить в тег li изображения и еще список и подзаголовок?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    Тут всё зависит от контекста.
    Если эти 4 блока между собой связаны, то есть демонстрируют некоторое перечисление, и можно их представить в виде плоского списка\перечня элементов, то да, СЕМАНТИЧЕСКИ более правильно сделать это списком.
    Внутри li можно размещать практически какую угодно информацию.
    При этом, на деле очень много кому семантика не важна и сделать дивами - тоже ок. Зависит от требований продукта и степени клиентаориентированности.

    Соответственно, если эти 4 блока никак между собой не связаны, просто 4 слуайных элемента с разной информацией, о разном, никак не объединяются под какую то общую сущность, типа "меню" \ "сегодня в кино" \ "товары" \ "наши особенности" \ "контакты" и так далее - то можно и дивами.

    НО, мне утверждают что это неверно! Что надо эти 4 блока сделать как блок ul, в котором будут 4 элемента li

    Ну и когда Вам кто-то что-то утверждает, то спрашивайте аргументацию, ознакомьтесь с этой аргументацией и сделайте вывод. И только если Вы с ней не согласны, имеете свои контр аргументы, тогда можно пойти и задать вопрос на суд сообщества.
    Ответ написан
    1 комментарий
  • Как обращаться к элементам с указанием строки в css внутри одного блока?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Нет селектора по строкам. Только :first-line и относится он ко всей первой строке текста.
    Что у Вас там за вёрстка не очень понятно.
    А лайфхак - делать отступ в данном случае не слева, а справа, тогда отступ убирать у первого элемента второй строки не нужно будет.

    А если поддержка позволяет, то свойство gap для контейнера вместо маргина на элементах, если это на флексах у Вас.
    Ответ написан
    1 комментарий
  • Объясните, чем здесь является elem.onclick?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    В конструктор передаётся html элемент.
    Ему в onClick назначается одноимённый метод класса Menu.
    то есть в onClick элемента кладётся вот это:
    onClick(event) {
          let action = event.target.dataset.action;
          if (action) {
            this[action]();
          }
        }

    с забинженным контекстом на инстанс класса. Так как по умолчанию в обработчиках событий this равен элементу.
    А вот зачем там в _elemкладётся elem это загадка.
    Ответ написан
    Комментировать
  • В каком порядке будут отрисованы html-элементы на странице (всего 14 строк кода)?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Ну, чтож.. я не то чтобы прям хорошо в этом разбираюсь и браузеры постоянно работают над оптимизацией загрузки ресурсов и отрисовки, но, в целом, примерно так:
    0) html стримится, поэтому всё идёт неким потоком, а не по блокам.
    1) Браузер получил html, встретил в head ссылки на русурсы, пошёл их в параллель получать.
    2) Так как в скриптах может уже выполняться какая-то синхронная работа, то браузер дождётся загрузки и выполнения script1.
    3) Стили могут всё ещё грузиться, а могут и нет.
    4) Начинает строиться DOM. Браузер увидит картинку и пойдёт её загружать в паралель. Так как атрибутов width и height не указано (и если в style.css тоже не указано) то место под картинку зарезервировано не будет.
    5) Увидит script2, начнёт его загружать, пойдёт дальше строить DOM. (Скрипт выполнится как только загрузится и распарсится браузером. Так как стоит async - когда это произойдёт нам не известно. То есть может заблочить дальнейшее построение DOM, а может и нет. )
    6) Увидит script3, так как он без атрибутов, то будет дожидаться загрузки и выполнения в синхронном режиме. Велика вероятность что выполнится раньше script2.
    7) DOM готов, если CSS загрузился, то DOM и CSSOM мержатся в Render Tree -> происходит первичная отрисовка.
    8) DOM Content load
    9) Если под картинку всё же не было указано размера, и она ещё не загрузилась к этому моменту, то по факту её загрузки произойдёт перекомпановка и перерисовка, иначе только перерисовка. (всегда стоит стремиться сводить перекомпановки, известные так же как reflow, к минимуму и вызывать только перерисовки, известные как repaint)

    На деле всё сильно сложнее, браузер как-то там ещё бьёт на токены, но я так глубоко не знаю
    Ответ написан
    Комментировать
  • Как присвоить класс пустой ячейке?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    эм..
    ладно. Начнём с простого.
    Если бы не пустой пробел, то можно было бы через css решить с помощью псевдоселектора :empty.
    По поводу js кода, а что Вы проверяете в условии? Может ли html коллекция быть пустой строкой или строкой с пробелом?

    let cells = document.querySelectorAll('td');
    cells.forEach( cell => {
     if (!cell.textContent.trim()) { // если содержимое ячейки состоит только из пробелов или пустая строка, то добавляем класс active
        cell.classList.add('active')
      }
    })
    Ответ написан
    1 комментарий
  • Не могу написать promise, не работает?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    1. Вы сразу резолвите промис тем, что возвращает функциюя get_organizations.
    2. А функция у Вас ничего не возвращает. Соответственно, вы резолвите свой промис значением undefined.
    3. Что такое organizations в этой строчке result => console.log(organizations)?
    4. у jQuery есть своя система промисов - deferred объекты. На хабре есть статьи с примерами.
    Итого, причешим Ваш код:
    function get_organizations(ajaxurl) {
      var data = {
        action: 'get_organizations',
      }
      return jQuery.post( ajaxurl, data, function( resp ){
        console.log( 'response: ' + resp );
        const organizations = JSON.parse(resp);
        return organizations;
      });
    }
    
    get_organizations('https://some_url').then(organizations => console.log(organizations))
    Ответ написан
  • Как сделать генерацию страницы с результатом сайта на html?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    1. Зачем Вы указали тэг PHP если бэка нет?
    2. Можно создать одну страницу, которая на основе гет параметров будет показывать соответствующую разметку. Например, ?score=10&resultId=2 - соответственно 10 баллов и айди изображения - 2.
    Судя по всему это какой то пет проект. При таком подходе пользователь который понимает хоть чуть чуть в том как работают сайты, в частности адресная строка, легко может подменять гет параметры и видеть любой результат. Если это не проблема - то ок.

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

    Альтернатива - можно всё то же самое зашивать в base64 и передавать в урл одним гет параметром. Порог продвинутости пользователя чтобы посмотреть другие страницы повышается.

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