• Почему position: absolute + height 100% в медиазапросе не растягивает заливку background-color на всю ширину экрана?

    body, html { height: 100% } 
    body { position: relative } 
    /* relative - чтобы дочерний элемент знал относительно 
    чего он позиционируется и растягивается */
    .menu_body { height: 100% }
    Ответ написан
    5 комментариев
  • Как правильно работать с Promise?

    Alexandroppolus
    @Alexandroppolus
    кодир
    можно грузить параллельно, если они не зависят друг от друга и последовательность загрузки не важна

    await Promise.all([
        'https://learn.javascript.ru/article/promise-chaining/one.js',
        'https://learn.javascript.ru/article/promise-chaining/two.js',
        'https://learn.javascript.ru/article/promise-chaining/three.js',
    ].map(loadScript));
    
    one();
    two();
    three();
    Ответ написан
    Комментировать
  • Как реализовать поддомены сайта?

    Fragster
    @Fragster
    помогло? отметь решением!
    <VirtualHost *:80>
      DocumentRoot /var/www/app1
      ServerName app1.example.com
    </VirtualHost>
    
    <VirtualHost *:80>
      DocumentRoot /var/www/example
      ServerName example.com
    </VirtualHost>
    
    <VirtualHost *:80>
      DocumentRoot /var/www/wildcard
      ServerName other.example.com
      ServerAlias *.example.com
    </VirtualHost>
    Ответ написан
    Комментировать
  • Как правильно использовать регулярные выражения в VS code?

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

    Строка поиска: src="img/(.+)\.jpg"
    Строка вставки: src="{{asset('/img/colorit/$1.jpg')}}"
    Ответ написан
    Комментировать
  • Как сделать расширяющийся блок на css и наверное js?

    @hulq
    HTML:
    <body>
      <div id="k"></div>
    </body>


    CSS:
    #k {
      position: absolute;
      width: 100%;
      height: 100px;
      bottom: 0;
      background: green;
    }


    JS:
    const object = document.querySelector('#k');
    
    object.onmousedown = function(event) {
    
      let shiftY = event.clientY - object.getBoundingClientRect().height;
    
      object.style.zIndex = 1000;
      document.body.append(object);
    
      moveAt(event.pageY);
    
      function moveAt(pageY) {
        object.style.height = shiftY - pageY + 'px';
      }
    
      function onMouseMove(event) {
        moveAt(event.pageY);
      }
    
      document.addEventListener('mousemove', onMouseMove);
    
      object.onmouseup = function() {
        document.removeEventListener('mousemove', onMouseMove);
        object.onmouseup = null;
      };
    
    };
    
    object.ondragstart = function() {
      return false;
    };


    Как-то так
    Ответ написан
    Комментировать
  • Как использовать select2() в pop-up?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    Сделайте мень z-index для popup или больше для select
    Ответ написан
    1 комментарий
  • Как делается кнопка "скопировать"?

    Maksclub
    @Maksclub
    maksfedorov.ru
    Ответ написан
    Комментировать
  • Где найти задачи по JS от простого к сложному?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    https://www.codewars.com/dashboard

    самые простые - 8q
    самые сложные - 1q

    ЗЫ: самое классное в codewars то, что решив задачу и опубликовав решение вам становятся доступны к просмотру решения данной задачи от других участников, и зачастую эти решения не такие как ваше. Разобрав их - вы узнаете много нового для себя))))
    Ответ написан
    6 комментариев
  • Как разбить массив на части заданного размера?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Можно рассматривать нарезание массива на куски как самостоятельную операцию:

    const chunked = (arr, chunkSize) =>
      arr.reduce((acc, n, i) => (
        (i % chunkSize) || acc.push([]),
        acc.at(-1).push(n),
        acc
      ), []);
    
    
    console.log(chunked([ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ], 3));

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

    const group = (data, key) =>
      Array.prototype.reduce.call(
        data,
        (acc, n, i, a) => ((acc[key(n, i, a)] ??= []).push(n), acc),
        {}
      );
    
    const chunked = (data, chunkSize) =>
      Object.values(group(data, (_, i) => i / chunkSize | 0));
    
    
    console.log(chunked('0123456789', 3));
    console.log(chunked(document.querySelectorAll('img'), 5));

    Если режем на куски не массив, то и кусками тоже могут быть не массивы, а значения исходного типа (если данный тип поддерживает операцию получения куска значения):

    const chunked = (data, chunkSize, slice = data.slice) =>
      Array.from(
        { length: Math.ceil(data.length / chunkSize) },
        function(_, i) {
          return this(i * chunkSize, (i + 1) * chunkSize);
        },
        (slice instanceof Function ? slice : [].slice).bind(data)
      );
    
    
    console.log(chunked('abcdefghij', 4)); // так кусками будут тоже строки
    console.log(chunked('abcdefghij', 4, [].slice)); // а так - массивы
    console.log(chunked($('img'), 5));

    В качестве исходных данных могут выступать не только массивоподобные объекты, но и итерируемые, а саму выдачу кусков можно оформить в виде генератора:

    function* chunked(data, chunkSize) {
      let chunk = [];
    
      for (const n of data) {
        if (chunk.push(n) === chunkSize) {
          yield chunk;
          chunk = [];
        }
      }
    
      if (chunk.length) {
        yield chunk;
      }
    }
    
    
    console.log(Array.from(chunked([ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ], 3)));
    console.log([...chunked(document.querySelectorAll('img'), 5)]);
    for (const n of chunked(Array(10).keys(), 4)) {
      console.log(n);
    }
    Ответ написан
    Комментировать
  • Нужна ли формам семантика?

    @asmodeus13th
    Семантика нужна не только для удобства слепых и любителей TAB клавиши. Почитай статьи, как это влияет на поиск в гугле, восприятие плагинами, дополнениями и ботами. Даже тот же ИИ настраивают под семантику. В эту тему можно нырнуть на очень большое время, но основа (вкратце) - возможность понимать друг друга. Время , потраченное на создание архитектуры проекта, может быть больше, чем на написание кода. Зачем? А это самое интересное! Во- первых, ты уберегаешь себя и коллег от возможных багов и позволяешь легко ориентироваться по файлам, не зависимо от размера и познания в проекте. Хороший код - тот, который можно легко читать. Зачастую приходиться уступать производительностью ради читабельности. Придерживаться семантики - значит писать в едином стиле со всеми разработчиками. Даже если опустить архитектуру, то семантика нужна и для различных ботов. Вот написал я плагин для хрома, который делает мини-навигацию по форме (на самом деле ничего я не писал, просто привожу пример) и ориентируется поиск по тегу с формой, а у тебя на странице такого даже нет и всё, плагин работать не будет. А теперь представь какую фичу ты упускаешь, когда прячешь разметку от гугловских ботов. Любые таблицы, правила, списки и прочие семантические данные выводятся на странице поиска. Попробуй загуглите какую-то страну или инструкцию для, например, убунту. Гугл выведет информацию из Википедии или другого ресурса, не заходя на сайт. Думаешь, Телеграм не использует семантику? Вот весь такой оптимизирован благодаря ей. Посмотри на ютубе семинары от HTML Academy по семантике. Там всё доступно объясняют (что очень большая редкость для онлайн курсов). Понятное дело, что собирая сайт через фреймворки или путем встраивания html из js, боты не увидят эту семантику, а просто один тег с Id=“root”. Если взять в пример Figma, то семантики ты не увидишь, так как это не задумывалось как сайт, а скорее как приложение. Не придумали в html ещё таких тэгов как «рисовать пером» или что-то вроде «шаблон шаблона страницы». В общем семантика должна быть там, где она уместна. Если тебе не нужны привилегии семантической разметки или это соло проект без развития или вообще ты делаешь проект на оте*бись для плохого заказчика за 5$, то можешь не заморачиваться. Но в остальных случаях хорошей практикой, да и просто для себя, будет уместно и очень полезно использование семантики.
    Ответ написан
    1 комментарий
  • С чего начать изучения анимации svg?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    По сути SVG - это почти HTML (ок, нехорошо так говорить, но тем не менее). Дерево из тегов, атрибуты, все дела. Выбираем нужные элементы, меняем атрибуты - вот и вся анимация. Как и с любыми другими элементами на странице. Это не какой-то отдельный и ни на что не похожий тип анимаций.

    Есть три варианта анимирования SVG в рамках фронтенда, два идентичных обычному HTML, и один дополнительный, привнесенный извне:

    1. CSS. Картинку, вставленную в страницу, можно анимировать с помощью CSS в каких-то пределах. Не все так получится сделать, но какие-то простые движения, изменения цветов - вполне можно. Если вы знаете CSS - можно сказать, что уже знаете все, что тут можно сделать.
    2. JS. Все как всегда. Получаем элементы через querySelector, getElementBy... и.т.д., и через setAttribute задаем элементам SVG нужные атрибуты. Обычно удобно добавить какой-то инструмент для интерполяций значений во времени. Из популярного - GSAP и Anime.js. При желании можно что-то свое написать, если задачи совсем простые, в базовом варианте все подобные инструменты строятся примерно по такому принципу. Некоторые инструменты добавляют какие-то еще свои дополнительные возможности, или есть готовые прикольные примеры, сделанные с их использованием, как например у d3.js, но нужны ли они лично вам - нельзя сказать, не зная задач. А инструменты должны выбираться исходя из этих самых задач, а не из моды. Здесь важно лишь понимать, что никакие библиотеки не расширяют сам формат SVG, не привносят никаких принципиально новых возможностей в него, они все больше про организацию скриптов.
    3. Еще есть SMIL. Это древнее зло из миров, далеких фронтенду. Есть хороший туториал на CSS-tricks. Это все "модно-нативно", но иногда сложно синхронизировать с остальными событиями на странице, и сложно отлаживать, т.к. нет адекватной привязки к инструментам разработчика в браузерах.


    Полезно еще познакомиться с вот этой статьей, там отмечены некоторые косяки, связанные с кроссбраузерностью. Да, SVG - это штука, которая вроде бы была с нами всегда, но в контексте анимирования wtf-моментов там все еще достаточно.

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

    Ну и полезно познакомиться с каким-нибудь векторным графическим редактором, чтобы уметь структурировать SVG перед анимированием, удалять мусор, адаптировать контуры для морфинга (не всегда дизайнер будет предоставлять полный набор нужных контуров).
    Ответ написан
    1 комментарий
  • Почему css свойство height не анимируется?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Потому что начальное значение - auto. Нужно указывать конкретные значения в начальном и конечном состоянии для высоты. Тогда будет работать.
    Ответ написан
    3 комментария
  • Как в VS Code сделать пользовательский фрагмент кода только для scss файлов?

    bingo347
    @bingo347
    Crazy on performance...
    Не надо scope писать, назовите файл правильно и положите в правильном месте:
    https://code.visualstudio.com/docs/editor/userdefi...

    Именовать надо согласно language id:
    https://code.visualstudio.com/docs/languages/ident...
    Ответ написан
    1 комментарий
  • Как в VS Code сделать пользовательский фрагмент кода только для scss файлов?

    Ctrl + Shit + P > Configure User Snippet > SCSS
    Или просто переименуйте свой файл сниппета в scss.json. И scope уберите.
    Ответ написан
    1 комментарий
  • Как сделать, чтобы скрипт не влиял на google speed?

    подключай через 5 сек после загрузки страницы
    Ответ написан
    Комментировать
  • Как оживить картинку?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    В Adobe Illustrator нарисовать поверх корпусов контуры и таблички и инфой, сохранить копию как.. SVG. Взять код и вставить в HTML. Отображать поверх растровой картинки.

    Дать id фигурам контуров и табличек. Не перепутать, как это сделал я: таблички вылезают не для тех контуров.

    JS может обращаться по этим id к элементам SVG как к обычным HTML-элементам, и слушать на них события. По наезду мышки подсвечивать контур, показывать табличку ярче:
    Ответ написан
    2 комментария
  • Как оживить картинку?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Насоветуют... Менять бэкграунды - забудьте. HTML area - тоже похоронить.

    Берёте вашу картинку. Поверх зданий создаёте векторный путь (обводите здания).
    Размечаете нарисованные пути как вам удобно, достаточно будет повесить класс для дальнейшей стилизации по ховеру + в дата-атрибуты значимую информацию для тултипа/клика/что там ещё.
    <svg ...>
      <path class="area" data-id="1" d="..." />
      <path class="area" data-id="2" d="..." />
    </svg>


    Инлайните получившуюся конструкцию на страницу. Фон можно в отдельном элементе и карту поверх, можно прямо в SVG зашить - не суть важно.

    По ховеру на путь - через CSS делаете ему полупрозрачную заливку, у вас судя по картинке сплошным цветом просто заполняется при наведении - самый простой вариант.

    По клику на путь - достаёте его `data-id` и выводите какую-либо информацию.

    Вот пример статьи, где описано более подробно.
    https://css-tricks.com/svg-map-rollovers/
    В конце интерактивный пример есть.
    Принципиальная разница с вашей задачей - вам изначально нужны пути без заливки и изображение под ними.
    Ответ написан
    Комментировать
  • Как отловить нажатие клавиши с Bluetooth гарнитуры на JS в браузере?

    Kozack
    @Kozack Куратор тега JavaScript
    Thinking about a11y
    https://web.dev/media-session/
    Вы вешаете обработчик событий play/pause. А эти события вызываются и при клике по системным контроллам в ОС и по нажатию клавиш на гарнитурах и так далее.
    Ответ написан
    Комментировать