Все сервисы Хабра

Сообщество IT-специалистов

Ответы на любые вопросы об IT

Профессиональное развитие в IT

Удаленная работа для IT-специалистов

Войти на сайт
  • Все вопросы
  • Все теги
  • Пользователи

Хабр Q&A — вопросы и ответы для IT-специалистов

Получайте ответы на вопросы по любой теме из области IT от специалистов в этой теме.

Узнать больше
другие проекты хабра
  • Хабр
  • Карьера
  • Фриланс
Задать вопрос
RAX7

RAX7

  • 1231
    вклад
  • 0
    вопросов
  • 817
    ответов
  • 91%
    решений
Ответы
  • Информация
  • Ответы
  • Вопросы
  • Комментарии
  • Подписки
  • Нравится
  • Достижения
  • Как изменить выражение в :nth-child с помощью JavaScript?

    RAX7
    RAX7 @RAX7
    Ответ написан 07 янв.
    1 комментарий
    1 комментарий
  • Как задать задержку для fetch при скачивании более 4000 фото?

    RAX7
    RAX7 @RAX7
    Помимо случайной задержки нужно еще ограничить количество одновременных запросов, примерно так:
    function randomDelay(min = 250, max = 750) {
      return new Promise((resolve) => {
        const ms = Math.random() * (max - min) + min;
        setTimeout(resolve, ms);
      });
    }
    
    function downloadAll(urls, limit = 4) {
      return new Promise((resolveAll, rejectAll) => {
        const result = [];
        const iter = urls.entries();
        let fulfilled = 0;
    
        const next = () => {
          const { done, value } = iter.next();
    
          if (done) {
            if (fulfilled === urls.length) {
              resolveAll(result);
              return;
            }
    
            return;
          }
    
          const [index, url] = value;
          const onFulfilled = (val) => {
            result[index] = val;
            fulfilled += 1;
            next();
          };
    
          randomDelay()
            .then(() => fetch(url))
            .then(onFulfilled, rejectAll);
        };
    
        for (let i = 0, l = Math.min(limit, urls.length); i < l; i++) {
          next();
        }
      });
    }
    
    const urls = Array.from(
      { length: 100 },
      (_, i) => `https://jsonplaceholder.typicode.com/todos/${i + 1}`
    );
    
    (async () => {
      const responses = await downloadAll(urls, 2);
      const data = await Promise.all(responses.map((r) => r.json()));
      console.log(data);
    })();
    Ответ написан 17 дек. 2022
    1 комментарий
    1 комментарий
  • Как обновить такой код переписав на промисы?

    RAX7
    RAX7 @RAX7
    first()
      .then(() => {
        return second()
      })
      .then(() => {
        third('3')
      })
    Ответ написан 12 дек. 2022
    3 комментария
    3 комментария
  • Как смотреть иерархию JS классов в браузере?

    RAX7
    RAX7 @RAX7
    function printProtoChain(obj) {
      const chain = [];
    
      while ((obj = Object.getPrototypeOf(obj))) {
        chain.push(obj.constructor.name);
      }
    
      console.table(chain);
    }
    
    printProtoChain(document.body);

    (index) | Value
    0	'HTMLBodyElement'
    1	'HTMLElement'
    2	'Element'
    3	'Node'
    4	'EventTarget'
    5	'Object'



    дополнительно необходимо просматривать установленные поля родительских классов

    просто используй console.dir(document.body), все унаследованные поля будут лежать в самом объекте.
    Ответ написан 10 дек. 2022
    Комментировать
    Комментировать
  • Как игнорировать дыры при загрузке полигона?

    RAX7
    RAX7 @RAX7
    function pairwise(array) {
      const result = [];
    
      for (let i = 0; i < array.length; i += 2) {
        result.push({ x: array[i], y: array[i + 1] });
      }
    
      return result;
    }
    
    const polydata = 'MULTIPOLYGON(((-61.2811499892424 -51.8650394644694,-61.3156095883879 -51.84003983505,-61.3451180293736 -51.836359409781,-61.345979 -51.8243193384298,-61.2230287013809 -51.8586600606699,-61.2380183615625 -51.8776,-61.2792595470359 -51.8659093831693,-61.2811499892424 -51.8650394644694)),((-59.6938009153582 -52.2130104476997,-59.6697 -52.2216295490501,-59.6888996395972 -52.2286288414282,-59.6929605766079 -52.2129007110094,-59.6938009153582 -52.2130104476997),(-59.7427025342573 -52.2157144418542,-59.7402989592584 -52.226169308217,-59.7414397191119 -52.2143487582055,-59.7427025342573 -52.2157144418542)),((-58.4328292075227 -52.102969,-58.4668596645304 -52.094089483711,-58.444380216144 -52.0871892532998,-58.4332186231022 -52.1024482278935,-58.4328292075227 -52.102969)))';
    
    const polystr = polydata.replace(/MULTIPOLYGON|\(|\)|\s+|\.-/g, (ch) => {
      if (ch === 'MULTIPOLYGON') return '';
      else if (ch === '.-') return '.0,-';
      else if (ch === '(') return '[';
      else if (ch === ')') return ']';
      else if (ch[0] === ' ') return ',';
    });
    
    const polyarray = JSON.parse(polystr).map(arr => arr.map(a => pairwise(a)));
    
    const { shapes, holes } = polyarray.reduce((acc, val) => {
      if (val.length === 1) {
        acc.shapes.push(...val[0]);
      }
      else if (val.length > 1) {
        acc.holes.push(...val[0]);
        acc.shapes.push(...val.slice(1).flat());
      }
    
      return acc;
    }, { shapes: [], holes: [] });
    
    console.log('shapes =>', shapes);
    console.log('holes =>', holes);
    Ответ написан 08 дек. 2022
    2 комментария
    2 комментария
  • Массовая замена в файлах. Регулярки или скрипт?

    RAX7
    RAX7 @RAX7
    replace-title.js

    // replace-title.js
    const fs = require('fs');
    const path = require('path');
    const { default: render } = require('dom-serializer');
    const htmlparser2 = require('htmlparser2');
    const { findOne, textContent } = htmlparser2.DomUtils;
    
    const isTargetFile = (filePath) => /\.html/i.test(filePath);
    
    const srcDir = path.resolve(__dirname, process.argv[2]);
    const dstDir = path.resolve(__dirname, process.argv[3]);
    
    function processFile(srcFilePath, dstFilePath) {
      const inHtmlString = fs.readFileSync(srcFilePath, { encoding: 'utf8' });
      const dom = htmlparser2.parseDocument(inHtmlString);
    
      const titleElement = findOne((node) => node.type === 'tag' && node.name === 'title', dom.childNodes, true);
      const h1Element = findOne((node) => node.type === 'tag' && node.name === 'h1', dom.childNodes, true);
    
      if (titleElement) {
        const titleText = textContent(titleElement).trim();
        const h1Text = h1Element ? textContent(h1Element).trim() : '';
    
        const titleTextNode = titleElement.childNodes[0];
    
        if (titleTextNode) {
          titleTextNode.data = h1Text ? `${titleText} | ${h1Text}` : titleText;
        }
    
        const outHtmlString = render(dom, { encodeEntities: 'utf8' });
        fs.writeFileSync(dstFilePath, outHtmlString);
      }
    }
    
    function processDir(dirPath) {
      const files = fs.readdirSync(dirPath);
    
      for (const file of files) {
        const absFilePath = path.join(dirPath, file);
    
        if (fs.statSync(absFilePath).isDirectory()) {
          processDir(absFilePath);
        } else if (isTargetFile(absFilePath)) {
          const relPath = path.relative(srcDir, absFilePath);
          const dstFilePath = path.join(dstDir, relPath);
    
          const targetDir = path.dirname(dstFilePath);
    
          if (!fs.existsSync(targetDir)) {
            fs.mkdirSync(targetDir, { recursive: true });
          }
    
          processFile(absFilePath, dstFilePath);
        }
      }
    }
    processDir(srcDir);


    package.json

    {
      "name": "replace-title",
      "version": "1.0.0",
      "description": "",
      "main": "replace-title.js",
      "license": "ISC",
      "dependencies": {
        "dom-serializer": "^2.0.0",
        "htmlparser2": "^8.0.1"
      }
    }


    Проще скриптом
    npm install
    node ./replace-title.js ./src ./dst

    сконвертирует все html файлы в папке ./src и положит в папку ./dst
    перед запуском желательно сделать бэкап
    Ответ написан 05 дек. 2022
    2 комментария
    2 комментария
  • Возможно ли сверстать такое без Javascript?

    RAX7
    RAX7 @RAX7
    .grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(240px, 1fr));
      grid-auto-flow: dense;
      grid-gap: 0 17px;
    }
    
    .grid-item {
      display: contents;
    }
    
    .grid-item:nth-child(n + 4) .grid-item-top {
      margin-top: 30px;
    }
    
    .grid-item:nth-child(3n + 1) .grid-item-top,
    .grid-item:nth-child(3n + 1) .grid-item-bottom {
      grid-column: 1;
    }
    
    .grid-item:nth-child(3n + 2) .grid-item-top,
    .grid-item:nth-child(3n + 2) .grid-item-bottom {
      grid-column: 2;
    }
    
    .grid-item:nth-child(3n + 3) .grid-item-top,
    .grid-item:nth-child(3n + 3) .grid-item-bottom {
      grid-column: 3;
    }
    Ответ написан 05 дек. 2022
    3 комментария
    3 комментария
  • Как остановить функцию в js при определенном условии?

    RAX7
    RAX7 @RAX7
    function headerScroll() {
      let headerTop = null;
      let headerSubstrate = null;
      let lastScrollTop = 0;
    
      function onScroll() {
        let scrollDistance = window.scrollY;
    
        if (scrollDistance > lastScrollTop) {
          headerTop.classList.remove('header__top-active');
          headerSubstrate.style.top = '-200px';
        } else {
          headerTop.classList.add('header__top-active');
          headerSubstrate.style.top = '0px';
        }
    
        lastScrollTop = scrollDistance;
      }
    
      function init() {
        destroy();
        headerTop = document.querySelector('.header__top');
        headerSubstrate = document.querySelector('.header__substrate');
        lastScrollTop = 0;
        window.addEventListener('scroll', onScroll);
      }
    
      function destroy() {
        window.removeEventListener('scroll', onScroll);
      }
    
      return { init, destroy };
    }
    
    const { init: initStickyHeader, destroy: destroyStickyHeader } = headerScroll();
    
    const mediaQuery = window.matchMedia('(min-width: 768px)');
    
    mediaQuery.addEventListener('change', (event) => {
      if (event.matches) {
        initStickyHeader();
      } else {
        destroyStickyHeader();
      }
    });

    https://developer.mozilla.org/en-US/docs/Web/API/M...
    Ответ написан 26 нояб. 2022
    Комментировать
    Комментировать
  • Откуда берётся запятая при выводе?

    RAX7
    RAX7 @RAX7
    - 26:  return `<div class="lots">${lotsData.map((lotData) => Lot(lotData))}</div>`;
    + 26:  return `<div class="lots">${lotsData.map((lotData) => Lot(lotData)).join('')}</div>`;
    Ответ написан 23 нояб. 2022
    1 комментарий
    1 комментарий
  • Логика для скрытия элементов в списке при недостаточной ширины контейнера?

    RAX7
    RAX7 @RAX7
    Если используется нативный скрол, то можно повешать Intersection Observer
    Ответ написан 23 нояб. 2022
    Комментировать
    Комментировать
  • Как решить данную задачу?

    RAX7
    RAX7 @RAX7
    function generateChart(data) {
      const entries = Object.entries(data);
      const sum = entries.reduce((s, [_k, v]) => (s += v), 0);
      entries.forEach((ent) => (ent[1] = (360 * ent[1]) / sum));
      return Object.fromEntries(entries);
    }
    Ответ написан 19 нояб. 2022
    Комментировать
    Комментировать
  • Как нарисовать div с углом поворота n описывающий заданные div?

    RAX7
    RAX7 @RAX7
    Ответ написан 19 нояб. 2022
    1 комментарий
    1 комментарий
  • Гриды так умеют?

    RAX7
    RAX7 @RAX7
    Ответ написан 19 нояб. 2022
    2 комментария
    2 комментария
  • Как получить ссылку через this?

    RAX7
    RAX7 @RAX7
    const isObject = (val) =>
      Object.prototype.toString.call(val) === "[object Object]";
    
    function linkRoot(root, obj = root) {
      function link(obj) {
        const descriptors = Object.values(Object.getOwnPropertyDescriptors(obj));
        descriptors.forEach((desc) => isObject(desc.value) && link(desc.value));
        obj.root = root;
      }
    
      isObject(root) && link(root);
      return root;
    }
    
    const store = [
      linkRoot({
        template: {
          data: ["hello", "world"]
        },
        settings: {
          get render() {
            console.log(this.root.template.data);
          }
        }
      })
    ];
    
    store[0].settings.render;
    Ответ написан 16 нояб. 2022
    Комментировать
    Комментировать
  • Как массив строк превратить в объект?

    RAX7
    RAX7 @RAX7
    const arr = ['utmTerm0=java', 'utmTerm1=javascript', 'utmTerm2=swift']
    const obj = Object.fromEntries(arr.map(str => str.split('=', 2)));
    Ответ написан 14 нояб. 2022
    Комментировать
    Комментировать
  • Как правильно построить html разметку нумерованного списка в две колонки?

    RAX7
    RAX7 @RAX7

    Сходите с дизайнером на прием к семейному психологу, у вас явные проблемы со взаимопониманием
    Ответ написан 08 нояб. 2022
    Комментировать
    Комментировать
  • Как добавить в ESlint проверку на существование свойства объекта?

    RAX7
    RAX7 @RAX7
    1. устанавливаем typescript npm install typescript -D
    2. создаем конфиг файл npx tsc --init
    3. в .tsconfig.json включаем allowJs и
    checkJs

    6368e86f6688e135506591.png
    https://www.typescriptlang.org/docs/handbook/type-...
    Ответ написан 07 нояб. 2022
    Комментировать
    Комментировать
  • Прозрачный текст без размытия на filter: blur() родителе?

    RAX7
    RAX7 @RAX7
    Ответ написан 07 нояб. 2022
    1 комментарий
    1 комментарий
  • Баг с свайпером, как решить?

    RAX7
    RAX7 @RAX7
    Для самого слайдера нужно задать класс swiper, для кнопок swiper-button-prev и swiper-button-next
    Ответ написан 04 нояб. 2022
    2 комментария
    2 комментария
  • Как использовать внешнюю переменную и аргумент с одинаковым именем?

    RAX7
    RAX7 @RAX7
    let err = "global error";
    
    function foo(err) {
      if (err) {
        console.log("error:", err);
      }
    
      err = new Function("return err")();
      if (err) {
        console.log("global:", err);
      }
    }
    
    foo("argument error");

    Делать так ни в коем случае не нужно
    Ответ написан 01 нояб. 2022
    Комментировать
    Комментировать
Оценили как «Нравится»
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • Следующие →
Самые активные сегодня
  • CityCat4
    CityCat4
    • 8 ответов
    • 0 вопросов
  • mayton2019
    • 7 ответов
    • 1 вопрос
  • firedragon
    Владимир Коротенко
    • 7 ответов
    • 0 вопросов
  • vabka
    Василий Банников
    • 7 ответов
    • 0 вопросов
  • felony13twelve
    felony13twelve
    • 5 ответов
    • 1 вопрос
  • AlexVWill
    • 5 ответов
    • 0 вопросов
  • © Habr
  • О сервисе
  • Правила
  • Обратная связь
  • Блог

Войдите на сайт

Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации