Ответы пользователя по тегу JavaScript
  • Задачка с олимпиады, как решать?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    185 = 16A + 17B + 21C, где A, B, C - целые.
    Несложно сообразить также то, что A, B, C - ограничены сверху.
    Далее можно хоть тупым перебором перебрать все возможные варианты - те самые "3 цикла", о которых говорит ваш информатик - и понять, сколько раз равенство будет верным.

    P.S.: Мне кажется, что в таком виде - это не мехмат, это средняя школа.
    Ответ написан
    Комментировать
  • Сделать стирачку (scratch) как на SVG?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Перелопалит весь гугл - пусто.

    Посмотрите примеры из этой статьи. К задаче так и напрашиваются SVG-маски.
    Ответ написан
    Комментировать
  • Как удобнее работать с HTML-кодом используемым для вставки через JS?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Сейчас модно все это делать на фреймворках вроде Vue/React/Angular и им подобных. Но можно использовать и отдельные шаблонизаторы, например handlebars.
    Ответ написан
    Комментировать
  • Как создать свой собственный метод?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    К предыдущему ответу стоит добавить, что при расширении стандартных объектов (вообще любых объектов, но именно со стандартными все обычно про это забывают) существует риск коллизии имен. Если вы добавите свой метод к стандартному массиву и какая-то из ваших библиотек тоже добавит свой метод с таким же названием к массиву, то будет печалька. Как один из вариантов решения вопроса - расширять объекты с использованием символов:

    const sayHello = Symbol('sayHello');
    
    Array.prototype[sayHello] = function() {
        console.log('hello');
    };
    
    // ---
    
    const test = [];
    
    test[sayHello](); // "hello"
    Ответ написан
    Комментировать
  • В чем разница двух кодов js?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Почему один код рабочий, другой нет?

    Потому, что не blur, а onblur.
    Ответ написан
    2 комментария
  • Может ли CSS файл содержать вредоносный код?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Например, если подключить так:
    <link rel="stylesheet" href="http://evil.com/styles.css">


    На CSS можно сделать недокейлоггер, который даст информацию о том, что пользователь начинает вводить (повторы одного и того же символа уже не срабатывают).

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

    Можно издеваться над "отключением" кнопок (pointer-events к примеру поменять) или вообще скрыть какие-то важные блоки и пользователи не смогут нормально пользоваться сайтом. Для какого-нибудь магазина - это полный фейл как вы понимаете. Причем, в отличии от полного дефейса, пользователи могут даже не понять, что что-то не так.
    Ответ написан
    Комментировать
  • Как сделать масштабирование svg по аналогии с background-size: cover;?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Попробуйте добавить preserveAspectRatio="xMidYMid slice" к SVG с этими полигонами.
    Ответ написан
    1 комментарий
  • Что лучше использовать для анимаций css или js? И почему?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    но которую можно реализовать и с помощью css, и с помощью javascript...
    ваше мнение хотел услышать

    Мне самому нравится делать все на CSS, но... Если анимация должна быть интерактивной и нужно ее останавливать в процессе, откатывать в изначальное положение и.т.д., или некоторые ее части зависят от данных (в широком смысле - это и движение по сложной траектории, и построение графиков и.т.д.) и их проще рассчитать скриптом, чем подбирать коэффициенты в CSS keyframes, то JS будет лучшим выбором. Если это последовательность мало связанных между собой изменений, то опять же скрипты почти всегда будет проще реализовать. Если речь идет о CSS-анимациях с фильтрами (особенно SVG-фильтрами), то можно влететь в очень сильные проблемы с производительностью на слабом железе. И никакие хаки с GPU тут не помогут - все равно будет тормозить. В такой ситуации может иметь смысл не просто писать на JS, но и подключить WebGL и все делать руками на шейдерах.

    В остальных случаях стоит смотреть по ситуации - разные :hover / :focus эффекты обычно легко реализуются на CSS, и, если это так, то зачем что-то придумывать? CSS в последнее время очень даже неплох. Но если, например, в проекте вся анимация делается на JS, то может иметь смысл продолжать делать так же, сохраняя единообразие в коде.
    Ответ написан
    Комментировать
  • Как поменять элементы в массиве?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Сделать можно тысячей способов, например так:
    let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    
    [arr[2], arr[5]]  = [arr[5], arr[2]];
    [arr[7], arr[11]] = [arr[11], arr[7]];
    [arr[4], arr[9]]  = [arr[9], arr[4]];
    
    console.log(arr); // [1, 2, 6, 4, 10, 3, 7, 12, 9, 5, 11, 8]
    Ответ написан
    1 комментарий
  • Как сделать glitch эффект в css или JS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Сходите на codepen и посмотрите демки с первых 3-4 страниц по запросу "glitch". Там есть самые разные варианты того, как этот эффект можно сделать.
    Ответ написан
    Комментировать
  • Как сделать такой эффект?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    На событие mousemove повешен обработчик, который добавляет transform: translate нужным элементам. Как в этом примере, но только трансформация применяется к контейнеру с картинками-ссылками, а не к глазам.
    Ответ написан
    Комментировать
  • Генерация аватаров как на Гитхабе?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    К ответу выше добавлю Ucavatar - там аватарки не такие, как на гитхабе, но вдруг тоже пригодится (демо).
    Ответ написан
    1 комментарий
  • Как использовать маску на видео?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Проще всего поверх видео расположить (абсолютным позиционированием) SVG-картинку с прозрачной дыркой в форме этого пятна.
    Ответ написан
    2 комментария
  • Как сделать такую анимацию?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Скорость скролла используется как угловое ускорение для этих объектов. Знак зависит от направления скролла. При этом есть сила трения, которая постоянно уменьшает модуль скорости, тем самым тормозит и останавливает эти штуковины в конечном счете. Формулы из курса кинематики за 9 класс помогают сделать движения более натуральными, плавными и приятными глазу.
    Ответ написан
    Комментировать
  • Как делается такой эффект?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Конкретно у них это реализовано просто кучей квадратных дивов, которым меняется прозрачность при наведении мыши. Ну а спустя некоторый отрезок времени меняется обратно. И буквы в виде картинок (зачем - не понятно).

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    бежит линия (ломаная), добегает до блока - он появляется и бежит дальше вниз по лендингу

    Если я правильно понял вопрос, то вам подойдет пример скролла из этой статьи, только линию нужно будет заменить на свою.
    Ответ написан
    Комментировать
  • Boilerplate для не SPA?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Без vue, react и прочих библиотек. Интересует как писать js компоненты типа табы, модалки и т.п. Как реализовать их взаимодействие. Хочется посмотреть на примеры и реализации.

    Если говорить о наборе компонентов интерфейса, особо не связанных между собой по данным (а в не-spa обычно это так и есть), то можете посмотреть мой велосипед. Там все просто, он сделан как раз для изучения. Убрав компоненты и утилиты получите почти готовый шаблон для сборки.

    для многостраничных сайтов

    Количество страниц не так важно. Основная идея может состоять в том, чтобы делать отдельную коллекцию компонентов (как в велосипеде), по сути мини-фреймворк с фирменным стилем, а потом на нем уже клепать страницы. Особенно хорошо подход заходит, когда у компании несколько сайтов с единым стилем. Может показаться, что будет уходить много времени в начале работы, но на деле это не так, поскольку решение не нужно придумывать каждый раз заново. Копипасту никто не отменял.
    Ответ написан
    1 комментарий
  • Как сделать круглый бордюр не до конца?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    круглый бордюр

    Можно хоть звездочкой его сделать - habr.com/post/349988/.
    Ответ написан
    Комментировать
  • Не броская на первый взгляд сущность – как реализовано это шаманство?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Можно сделать на SVG:
    <svg viewBox="0 0 100 100">
      <defs>
        <filter id="noise">
          <feTurbulence id="js-turbulence" type="fractalNoise" baseFrequency="30" result="noisy"></feTurbulence>
          <feColorMatrix type="saturate" values="0"></feColorMatrix>
          <feBlend in="SourceGraphic" in2="noisy" mode="multiply"></feBlend>
        </filter>
        <clipPath id="the-object">
          <circle cx="50" cy="50" r="50" fill="currentColor"></circle>
        </clipPath>
      </defs>
      <circle cx="50" cy="50" r="50" fill="#5FDDD1" filter="url(#noise)" clip-path="url(#the-object)"></circle>
    </svg>

    Только вместо круга взять path, который вам нужен. Изменяя значение baseFrequency получите "анимированный" шум - codepen.
    Ответ написан
    1 комментарий
  • Как переписать эту лапшу?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    showButton () {
        switch (this.$route.name) {
            case 'new-article':
                return this.article.section &&
                       this.article.title &&
                       this.article.description;
            case 'update-article':
                return this.show &&
                       this.article.section &&
                       this.article.title &&
                       this.article.description;
        }
    }
    Ответ написан
    4 комментария