• Как избавиться от lodash?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Открыть документацию lodash, разобраться, что делают используемые в представленном коде методы, переписать код без их использования.

    Как видите, всё довольно просто.
    Ответ написан
    Комментировать
  • Для чего нужен грид в 24 колонки?

    neuotq
    @neuotq
    Прокрастинация
    Чаще всего используют 12 колонок. Причина в сравнении с красивыми 10 проста - большее количество вариаций делений при относительно небольшом числе колонок, учитывая исходные что ширина бОльшей часть экранов кратно 8. Поэтому может вернее будет назвать эту систему системой 8-пиксельной, тк шаг в 8 пикселей для большинства размеров(при хард сетке всё кратно 8, при софт только расстояния между элементами). Таким образом легко быстро выстраивается модульная сетка с приятным ритмом.
    Поэтому многие системы/фреймворки по умолчанию настроены на 12 колонок.
    24 колонки - можно условно считать вариацией для любителей чуть большей вариативности и тонкостей с шириной/расстоянием между колонками и шага в 4 пикселя и тонкой настройки золотого сечения на странице.
    Отдельно стоят любители 16 колонок(относительно популярный вариант), это, как другие менее популярные, уже частные случаи сетки и дизайна, где все в ручную подбирается, либо изначально допускается меньшая вариативность размещения элементов/колонок/модулей. Поэтому прям зацикливаться не стоит, исходите из своих задач и требований, полёта фантазии дизайнера.
    Ответ написан
    Комментировать
  • Как реализовать функцию,принимающую неограниченное кол-во объектов и возвращает новый объект,содержащий все поля со всех объектов?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    раз хочется именно с reduce() – то можно редьюсить массив аргументов до одного результирующего объекта:
    const mergeObjects = (...args) => args.reduce((acc, c) => Object.assign(acc, c));

    Использование:
    mergeObjects({a: 'A'}, {b: 'B'}, {c: 'C', a: 'AAA'})
    // { a: "AAA", b: "B", c: "C" }


    Или так, чуть почище, чтобы не менять первый исходный объект:
    const mergeObjects = (...args) => args.reduce((acc, c) => ({...acc, ...c}), {});
    Ответ написан
    7 комментариев
  • Как подсчитать сколько раз использовался символ?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Строку по буквам можно перебрать циклом for .. of:
    let n = 0;
    for (const c of 'Moloko') {
      if (c === 'o') n++;
    }
    n // 3


    <Offtopic> не первый раз замечаю, что русскоязычная версия документации на MDN чуть хуже англоязычной. Например, явно String упоминается в английской, но не в русской версии описания for .. of
    Теории заговора welcome в комменты : )
    Ответ написан
    1 комментарий
  • Как вытащить видео с сайта?

    @timursarsembayev
    ОТВЕТ 2020 ГОДА

    Привет, из 2020 :)

    Решение для Linux (у меня Linux Mint):
    1. Откройте страницу с видео роликом, видео не включайте
    2. Открываете инспектор, вкладку Network
    3. Включаете воспроизведение видео
    4. В инспекторе в строке поиска вбиваете m3u8 и находите данный файл плейлиста (он обычно только один)
    5. Скачиваете плейлист файл с расширением m3u8
    6. Отдельно сохраните ссылку на m3u8, она будет примерно такой:
    https://cs9-4v4.vkuservideo.net/video/hls/p2/3ebb0cd8afd8/index-f3-v1-a1.m3u8?extra=hkhc5u2Cz0VxVRI1gf8Zw_p-K1zG5eCCK_-AKvw8v0tBNO4CmLZSO8j5PKdHBSebK_Ph_sY7PqEDwFNzHJt-eXnOKPj1QRZD0ahfqy24z6ZIdGKqvRnHuE-PhoocuvBqMpKPAI46LFv4juflt6hO6mO4Elc

    Отсюда нужно вычленить название самого файла и параметры после него, останется только это:
    https://cs9-4v4.vkuservideo.net/video/hls/p2/3ebb0cd8afd8/

    (у вас ссылка будет отличаться, это просто пример)
    7. Откройте скачанный файл m3u8 в редакторе, например, Sublime Text
    8. Откройте поиск по содержимому файла, включите режим регулярных выражений (regular expression), от строки поиска слева это кнопка .* или кликните по строке поиска и нажмите Alt+R
    9. Введите в строку поиска #EXT.* и нажмите на кнопку Найти всё (Find All) и нажмите Backspace
    10. Скопируйте полученный урл из 6 шага
    11. Введите в строку поиска символ ^ (на англ.раскладке клавиатуры нажмите Shift+6) и нажмите Найти всё (Find All)
    12. Вставьте скопированный урл (нажмите Ctrl+V) и сохраните изменения в файле
    13. Откройте uGet (если не установлено, то установите его), перейдите в File -> Batch Downloads -> Text file import и выберите файл плейлиста m3u8, начнется скачивание отдельных файлов формата .ts в вашу домашнюю папку /home/username где username это имя вашей учетной записи
    14. По окончании скачивания снова откройте файл плейлист в редакторе Sublime Text
    15. В строку поиска вставьте скопированный урл из 6 шага и нажмите Найти всё (Find All), нажмите Backspace и сразу же напишите file ' ( слово file, пробел и одинарная кавычка ' )
    16. В строку поиска введите ?extra.* ( если у вас включен режим регулярок, то введите \?extra.* ), нажмите клавишу Backspace, а затем клавишу ' (одинарная кавычка)
    17. В итоге вы получите файл со списком что-то вроде этого:
    file 'seg-1-f3-v1-a1.ts'
    file 'seg-2-f3-v1-a1.ts'
    file 'seg-3-f3-v1-a1.ts'
    и так далее...
    18. Переименуйте файл плейлиста и измените его расширение, например так:
    dwl_local.txt
    19. Переместите файл dwl_local.txt в домашнюю папку /home/username куда были скачаны все файлы .ts
    20. Откройте терминал в домашней папке и введите в нём следующее:
    ffmpeg -f concat -i dwn_local.txt -c copy output.ts
    или скопируйте эту строку и вставьте в терминал путем Shift+Ctrl+V
    где dwn_local.txt это название файла со списком файлов
    output.ts это название конечного файла

    Если по каким-то причинам у вас не установлен ffmpeg, то установите его через терминал:
    sudo apt install ffmpeg

    Решение для Windows:
    Всё то же самое, что и для Linux с 1 по 12 шаги
    13. Нужен Download Master, также импортируйте файл плейлиста со ссылками, возможно нужно будет его переименовать сразу и поменять расширение, например, на dwn_local.txt
    Дальше шаги с 14 по 18 повторите как в инструкции для Linux
    19. Переместите файл dwn_local.txt в папку с загруженными файлами, возможно это папка Downloads (Загрузки)
    20. Откройте командную строку Windows (найдите её в меню Start или Пуск) или нажмите клавиши Win+R и введите cmd, затем клавишу Enter
    В командной строке введите следующее:
    ffmpeg -f concat -i dwn_local.txt -c copy output.ts
    где dwn_local.txt это список файлов
    output.ts это конечный объединенный файл

    Таким образом вы получаете объединенный файл .ts из нескольких фрагментов .ts
    Сконвертировать в другие форматы можно при помощи VLC плеера или других программ
    Файл .ts можно загружать себе на YouTube канал без конвертаций
    Ответ написан
    4 комментария
  • Как вычленить максимальные значения из массива объектов?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Object.values(arr.reduce((max, n) => (
      max[n.group] = max[n.group]?.score > n.score ? max[n.group] : n,
      max
    ), {}))
    Ответ написан
    Комментировать
  • Как вычислить виновника из-за которого отваливается интернет с какой-то периодичностью в маленькой сети?

    trapwalker
    @trapwalker
    Программист, энтузиаст
    Такого рода проблемы все и всегда решаются однотипно.
    1. Необходимо сформулировать критерии наличия проблемы.
    Как именно пропадает интернет, насколько часто, как надолго. Это нужно для диагностики. поиска причины и определения ушла ли проблема после принятия каких либо мер.
    2. Делить проблему на части и проверять части по отдельности.
    Самый эффективный способ делить - это пополам. Отсекаем часть сети и проверяем наличие проблемы в обеих частях (если есть возможность) или в одной из частей.
    3. Когда найден минимальный проблемный участок, который уже нельзя или бессмысленно делить - заменяем его.
    4. Помним, что чаще всего сложные проблемы - это композиция нескольких более простых. которые по отдельности могут не проявляться. В вашем случае может быть проблема, связанная с нагрузкой на роутер, например, которую создает один из услов из-за плохого контакта обжима и большого объёма биттых пакетов. Устранив одну из причин, вы, может быть, сделаете проявления проблемы реже, но не устраните её полностью. К примеру, если замените ротуер, битые пакеты будут всё равно будут нагружать вашу сеть и портить ее производительность, но это будет не так очевидно. Переобжав коннектор вы избавитесь от части нагрузки, но еслив ваш ротуер работал на переделе, то лишний вафай-клиент или тяжелый видос в сети сможет его снова нагрузить до критического снижения производительности.

    Итак, пробежимся по перечисленным пунктам сначала.
    1. Критерии. Поиск критериев - это часть решения. Обычно в этом случае нуно сорать необходимую статистику. Есть куча софта, который это умеет делать, но пинг есть всегда под рукой.
    Для этой тулзы есть две полезных опции: ключ для бесконечного пинга и размер пакета.
    В разных ОС эти ключи немного разные, поэтому ищите их отдельно, у меня нет винды под рукой, поэтому не стану на этом заострять.
    Скаж лишь, что пинговать лучше большими пакетами, жалетально превышающими размер TTL, прописанный в роутере. Тогда такой пинг будет реже проскакивать в периоды хорошей связи, то есть выловит больше пролблем.
    Пинговать нужно в отдельных окнах сразу несколько хостов:
    - ya.ru - этот хост всегда отвечает на пинги и выявит проблемы с DNS
    - 8.8.8.8 - это гугловый DNS-сервер, тоже всегда отвечает на пинги, покажет, что связь с инетом есть даже если DNS, прописанныйна компе не правильно работает.
    - 192.168.0.1 - или какой там IP у вашего роутера. Нужно. чтбы отделить проблемы с инетом от проблем с внутренней связностью до роутера
    - 192.168.0.x - ip одного из компов в сети. Я обычно пингую несколько компов, доступных через баксимальное число потенциально проблемных узлов - ethernet-розеток, свичей, вайфай-соединений... Этот пинг поможет понять где проблема, во внутрисетевой связности или в последней миле.

    Учтите, что проблемы часто бывают комбинированные и каждое сочетание симптомов будет свидетельствовать о раных проблемах.
    Да, тревожным принаком может служить не только пропадание пакетов, но и скачки в длительности их возврата, особенно если такие длительности достигают 500мс и выше. Но и скачки от 3мс до 250мс тоже будут свидетельствовать о каких-то проблемах.

    Запускать пинг на всех компах лучше одновременно и на некоторое время. Например минут на 20. Потом по статистике будет видно сколько где пакетов пропало.

    2. Если критерии наличия проблемы позволяют, то можно попробовать отрубать части сети и смотреть наличие проблемы. Это я в том смысле, что если проблема происходит в среднем раз в пару-тройку часов, то отрубать на многие часы части сети при диагностикем ожет быть неприемлемым.
    Редкеи пробемы дольше отлавливать. Но напоминаю, что критерии можно детализировать, ведь если пакеты у вас пропадат относительно редко, то скачки времени их возврата могут случаться чаще и подсвечивать проблему. Также можно сделать рамер пакета близким к максимальному, это должно тоже в некоторых случаях участить проявление проблемы.
    Иногда не мешает нагрузить сеть комированием по локалке большого файла. В линуксе можнно с помощью утилиты tc послать большой поток рандомных байт на любой сокет..
    3. Плавающие проблемы случаются из-за плохого обжима, перебитого жверью кабеля, перегрызенного UTP в плинтусе, из-за умиращих конденсаторов в блоке питания роутера (БП может не выдавать необходимого при нагрузках тока, но вольтметром такая неисправность не будет различима без нагрузки). Вообще старые (да и не только) роутеры могут страдать поплывшими электролитическими конденсаторами не только в блоках питания.
    Хорошо, когда можно подменить роутер.
    4. ну с четвертым пунктом ничего не пососветуешь, только разделать и тестировать все по отедльности и в разных сочетания и да поможет нам ктулху.

    А для тех, кто дочитал этот опус до конйа - интересная задачка. Что пингуют эти команды, как и почему?
    ping 1.1
    ping 2130706433

    Тех, кто знает, попрошу не спойлерить=)
    Пусть для кого-то будет сюрпризом этот дивный мир=)

    UPD. Простите за адское количество опечаток в тексте. Писал в спешке и с непривычной клавиатуры. Исправлю всё попозже. Не ожидал, что многим ответ придётся по душе. Вроде ж накапитанил как мог.
    Ответ написан
    5 комментариев
  • Что дальше учить?

    Kentavr16
    @Kentavr16
    long cold winter
    То что в темах - обязательная база JS. React это просто дополнительный инструмент в руках разработчика, это не другой язык, не другой принцип построения веб-сайтов. Обязательно все указанное учить. Все и с самого начала. Я сам пробовал "начинать учиться" с реакта. Глупость полная. Это как попытка начать залезать на лестницу сразу с 10-й ступеньки. Не выйдет.
    Ответ написан
    Комментировать
  • Что дальше учить?

    Коротко - да, надо всё. Не надо только если тебе фронтенд не интересен - тогда и React можно не учить.
    Раз ты не можешь сам оценить нужность этих тем для тебя - значит уровень знаний у тебя сейчас околонулевой.

    Длинно - пройдись по каждой теме по порядку:
    - Если можешь ответить конкретно на вопрос "что я получу, если изучу эту тему", то решай сам.

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

    Зря боишься потратить время зря - оно будет потрачено зря только если ты совсем решишь отказаться от фронтенда и уйти в радикально другую сферу.


    для чего они нужны?

    Ты ожидаешь, что тебе сейчас все 20 пунктов распишут?
    Не ленись - прочитай предисловие к каждому сам.
    Ответ написан
    3 комментария
  • Git что-то говорит, как убрать?

    sergey-kuznetsov
    @sergey-kuznetsov Куратор тега Git
    Автоматизатор
    Гит не просто «что-то говорит», а конкретно сообщает что вы находитесь в состоянии незаконченного перебазирования и сообщает «как убрать».
    Вы должны либо продолжить и довести перебазирование до конца
    git rebase --continue
    Либо отменить процесс через
    git rebase --abort

    Я бы на вашем месте как раз отменил, так как вы делаете что-то странное. Сначала дропнули из истории один коммит, потом попытались применить его отмену и скорее всего получили сложный конфликт. Что вообще пытаетесь добиться?

    Если вы, не осознав что rebase ещё не закончился, продолжили добавлять новые коммиты, то тогда завершите rebase. А потом смотрите что получилось.
    Ответ написан
  • Где взять wysiwyg редактор?

    vicodin
    @vicodin
    Имею некоторый опыт
    Мне понравился Slate. Но у них апи часто меняется, они позиционируют себя как бета. При этом достойных аналогов не нашёл. Но его нужно собирать, я сам удивился, что на рынке нет готового адекватного решения, хорошо, что у Slate есть много примеров, и классная документация.
    Ответ написан
    1 комментарий
  • Где взять wysiwyg редактор?

    lazalu68
    @lazalu68
    Salmon
    Вот целый список действующих wysiwyg-редакторов: https://github.com/JefMari/awesome-wysiwyg
    Ответ написан
    Комментировать
  • На каком движке лучше создавать личный кабинет?

    sergey-gornostaev
    @sergey-gornostaev
    Седой и строгий
    Делать надо на том, что лучше знаешь.
    Ответ написан
    Комментировать
  • Делегирование vs цикл, что лучше в целом и какие плюсы и минус?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    События так и так «катаются» по всему документу:
    ныряют от window через document, body и все родительские элементы, до кликнутого элемента
    и всплывают всю дорогу обратно до window. Почему бы не ловить их один раз, выше дна?

    Ещё один плюс: динамическое добавление новых дочерних элементов, на которых клики тоже понадобится обрабатывать. С делегированием не придётся дополнительно вешать обработчик: клик по новичкам будет обработан.
    Ответ написан
    2 комментария
  • Как скрыть пароль в php-коде?

    @humoured
    Вы всё на свете найдёте в коробке с карандашами
    Пароль нужно выносить из кода в отдельный файл конфигурации. Dotenv, например.
    Такой файл добавляется в .gitignore, не коммитится в общую кодовую базу и каждый разработчик будет наполнять его своими (или общими) данными. Ваш личный пароль не попадёт в чужие руки.
    Ответ написан
    31 комментарий
  • Как правильно выводить данные из дата атрибутов родителей в дочерние элементы в определенном порядке?

    0xD34F
    @0xD34F Куратор тега JavaScript
    document.addEventListener('click', updateCounter);
    document.addEventListener('input', updateCounter);
    
    document.querySelectorAll('.tariff__counter').forEach(n => {
      const max = n.dataset.seats;
      n.querySelectorAll('.tariff__counter-max').forEach(m => m.innerText = max);
      n.querySelectorAll('.amount').forEach(m => m.max = max);
      n.querySelectorAll('button').forEach(m => m.dataset.change = m.innerText === '+' ? 1 : -1);
    });
    
    function updateCounter({ target: t }) {
      const input = t.closest('.tariff__counter-block')?.querySelector('.amount');
      if (input) {
        const { min, max, value } = input;
        input.value = Math.max(min, Math.min(max, (value | 0) + (t.dataset.change | 0)));
      }
    }
    Ответ написан
    1 комментарий
  • Как сверстать блок с частью скрытого изображения?

    Starina_js
    @Starina_js
    full-stack web dev
    Не пробовал с видео, но с картинками точно работает .

    Допустим так
    clip-path: polygon(53% 0, 100% 0, 100% 49%, 100% 100%, 53% 100%, 52% 49%, 0 49%, 0 0);


    потыкать тут
    63b48f9c7a7e4557279691.png
    Ответ написан
    5 комментариев
  • Проблема с подключением Swipper, как устранить?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Ошибки вида

    ... MIME type (‘text/html’) is not Executable ...

    или

    ... MIME type ('text/html') is not a supported stylesheet MIME type ...

    появляются обычно или если сервер путает типы данных (маловероятно, если до подключения этих файлов все работало, хотя бывает), или если у нас неправильные пути к файлам (более вероятно). Вполне возможно, что сервер отдает 404 страницы, которые по очевидным причинам не являются стилями или скриптом, который можно выполнить. Проверьте, что по этим ссылкам вообще есть эти стили и скрипты. Скорее всего пути к файлам неверные.
    Ответ написан
    Комментировать