• Это эффект параллакса из одной фотографии? Как это сделано?

    v3shin
    @v3shin
    Веб-шаман
    Это canvas.
    613b7b9541552074271078.png
    Ответ написан
    Комментировать
  • Где найти задачи по JS от простого к сложному?

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

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

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

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    for (var i = 10; i <= 70; i++) if (!/5/.test(i)) console.log(i);

    for (var i = 10; i <= 70; i++) !/5/.test(i) && console.log(i);

    for (var i = 10; i <= 70; i++) /5/.test(i) || console.log(i);
    Ответ написан
    3 комментария
  • Не опухнет ли web worker от JSONP?

    kellas
    @kellas
    веб-разработчик
    Чтобы воркер не рос, я в своем проекте создаю для каждого jsonp запроса отдельный воркер и потом убиваю его. Норм работает, там по 3 запроса в секунду к ВК улетает.

    function getJSONP (script_url, callback) {
        // Создаём веб-воркер, который импортирует нам скрипт с коллбэком(jsonp)
        const worker = new Worker(window.URL.createObjectURL(new Blob([
          'let cb=function(val){postMessage(val)};' +
          'importScripts(\'' + script_url + '&callback=cb\');'],
        { type: 'text/javascript' }
        )))
    
        // Слушаем ответ от воркера
        worker.onmessage = (e) => {
          worker.terminate()
          callback(e.data)
        }
    
        // Убиваем воркер  если долго нет ответа 
        setTimeout(() => { worker.terminate() },10000)
    }
    Ответ написан
    1 комментарий
  • Как скопировать текст при нажатии на кнопку?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Комментировать
  • Как понять цифры хэмминга на пальцах?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    Не 2i3j5k, а 2i×3j×5k
    Это означает, что при разложении числа на простые множители мы получим только 2, 3 и 5.
    1 = 20×30×50
    3 = 20×31×50
    15 = 20×31×51
    30 = 21×31×51
    60 = 22×31×51
    90 = 21×32×51
    и т.д.
    Ответ написан
    3 комментария
  • Как нарисовать прямоугольник с дырками внутри?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Ответ написан
    Комментировать
  • Как сделать более 1 слайдера до/после на странице?

    @MEDIOFF
    Python Developer
    "Ух, я неделю уже учу js html css пора и заказы брать"
    Почему вы считаете что кто то будет за вас писать код за который вы берете деньги? Вам за него заплатили, сами разгребайте и ищите инфу, за ту работу за которую вам платят как специалисту, либо пишите что вы не можете и возвращайте деньги
    Ответ написан
    6 комментариев
  • Как получить скользящее значение для дискретных данных?

    @Akina
    Сетевой и системный админ, SQL-программист.
    Пример с линейной интерполяцией.

    WITH 
    cte1 AS ( SELECT t1.ts, t1.val,
                     t2.ts ts_before, t2.val val_before,
                     t3.ts ts_after, t3.val val_after
              FROM test t1
              JOIN test t2 ON t1.ts >= TIMESTAMP(t2.ts, @delta)
              JOIN test t3 ON t1.ts <= TIMESTAMP(t3.ts, @delta) ),
    cte2 AS ( SELECT *, 
                     ROW_NUMBER() OVER (PARTITION BY ts ORDER BY ts_before DESC) rn_before, 
                     ROW_NUMBER() OVER (PARTITION BY ts ORDER BY ts_after ASC) rn_after
              FROM cte1 )
    SELECT ts,
           val,
           ts_before,
           val_before,
           ts_after,
           val_after,
           CASE WHEN val_after = val_before
                THEN val_before
                ELSE val_before + (val_after - val_before) / TIMESTAMPDIFF(SECOND, ts_after, ts_before) * TIMESTAMPDIFF(SECOND, ts, TIMESTAMP(ts_before, @delta)) 
                END val_approximated
    FROM cte2 
    WHERE ts > '2021-01-02'
          AND rn_before = 1
          AND rn_after = 1


    DEMO fiddle с некоторыми пояснениями.

    Тормозить, конечно, на большом массиве будет нещадно - так что неплохо бы ещё в первом CTE по всем трём копиям задать вменяемые границы от и до...

    Не имел дела раньше с оконными функциями в MySQL.

    А придётся. И не просто "иметь дело", а хорошо изучить, до полного понимания.
    Ответ написан
    2 комментария
  • Как создать такую таблицу?

    Awilum
    @Awilum
    Частный разработчик, ментор и преподаватель курсов
    2 комментария
  • С чего начать изучения анимации 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 комментарий
  • Как именно React Router осуществляет свою работу без перезагрузки страниц?

    E1ON
    @E1ON Куратор тега JavaScript
    Programming, Gamedev, VR
    Ответ написан
    Комментировать
  • Как при сравнении == строка преобразовывается в число?

    Lynn
    @Lynn
    nginx, js, css
    Получается, то сравнение
    'hello' == '123'
    это
    parseInt('hello') == parseInt('123')
    так?

    Нет. Оба операнда строки и никакого приведения типов не будет.

    И [] == {} аналогично parseInt([]) == parseInt({})?

    Нет. Оба операнда объекты — приведения не будет.

    https://262.ecma-international.org/10.0/#sec-abstr...

    Строка преобразовывается в число когда вы сравниваете строку и число (пп. 4 и 5 из описания алгоритма выше).

    Например 'hello' == 123 приведёт строку к числу ToNumber('hello') == 123 и получится NaN == 123 → сравниваем два числа и получаем false.

    Тут ToNumber это такая специальная операция, можно считать что это то же самое что вызов функции Number.
    Ответ написан
    6 комментариев
  • Алгоритм поиска минимального количества ходов, требуемых для приведения всех элементов к одному числу (Python)?

    @twistfire92
    Python backend developer
    Ищите медиану вашего набора чисел. Это и будет отправная точка, до которой нужно будет добивать все числа.
    А дальше просто суммируете модули разности каждого элемента набора с этим числом.
    Если нужно более подробно - скажите

    P.S. Перечитал второй ответ - в принципе то же самое.
    Ответ написан
    3 комментария
  • Как Dockerfile RUN одной из команд передать многострочный аргумент?

    karabanov
    @karabanov Куратор тега Docker
    Системный администратор
    У тебя пробел между "<" и "(",а надо "<("

    И sh не умеет "<( some command )"

    Dockerfile:
    FROM ubuntu:latest
    
    RUN apt update && apt install -y openssl
    
    RUN mkdir -p /etc/cert
    
    RUN /bin/bash -c "openssl req -x509 \
        -newkey rsa:2048 -nodes -sha256 \
        -out /etc/cert/localhost.crt  \
        -keyout /etc/cert/localhost.key \
        -subj '/CN=localhost' \
        -extensions EXT \
        -config <( \
          printf '[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth')"


    docker build .
    
    Sending build context to Docker daemon  2.048kB
    Step 1/4 : FROM ubuntu:latest
     ---> 1318b700e415
    Step 2/4 : RUN apt update && apt install -y openssl
     ---> Using cache
     ---> e608bba6cb59
    Step 3/4 : RUN mkdir -p /etc/cert
     ---> Using cache
     ---> b89d4c7495a3
    Step 4/4 : RUN /bin/bash -c "openssl req -x509     -newkey rsa:2048 -nodes -sha256     -out /etc/cert/localhost.crt      -keyout /etc/cert/localhost.key     -subj '/CN=localhost'     -extensions EXT     -config <(       printf '[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth')"
     ---> Running in a4012f6c4893
    Generating a RSA private key
    ................................................+++++
    ..+++++
    writing new private key to '/etc/cert/localhost.key'
    -----
    Removing intermediate container a4012f6c4893
     ---> 6ea49c8d9ada
    Successfully built 6ea49c8d9ada
    Ответ написан
    Комментировать
  • Телеграм стал очень долго обновляться/синхронизироваться. В чем может быть проблема?

    @unknowndeal Автор вопроса
    Нашел приложение Telegram Lite в сторе, похоже это Qt'шная версия приложения, которая делается для винды и линукса. С ним у меня проблем не было. Попробуем, поглядим.
    Также есть версия версия телеграма dmg, с официального сайта. Тоже попробую. Если не забуду, напишу как полет.
    Ответ написан
    1 комментарий
  • Самый короткий способ обработать каждый элемент массива?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега PHP
    Профессионалы, например, понимают, что присвоение $value здесь бессмысленно и не пишут его. И вот я сэкономил вам целых 9 символов - потратьте их с умом.
    Ещё профессоналы понимают, что в коде важна читаемость, а не краткость. И именно умение писать понятный код является показателем квалификации.

    Ну а прям профессиональные профессионалы решают эту задачу исключительно вот так:
    Посмотреть профессиональный код

    <?php
    declare(strict_types=1);
    
    class Ellipsis
    {
        private string $char;
        private int $count;
    
        /**
         * @param string $char
         * @param int $count
         */
        public function __construct(string $char, int $count)
        {
            $this->char = $char;
            $this->count = $count;
        }
    
        /**
         * @return string
         */
        public function getChar(): string
        {
            return $this->char;
        }
    
        /**
         * @return int
         */
        public function getCount(): int
        {
            return $this->count;
        }
    }
    
    class Ellipsisist
    {
        private Ellipsis $ellipsis;
    
        /**
         * @param Ellipsis $ellipsis
         */
        public function __construct(Ellipsis $ellipsis)
        {
            $this->ellipsis = $ellipsis;
        }
    
        /**
         * @param string $value
         * @return string
         */
        public function __invoke(string $value): string
        {
            return str_pad($value, mb_strlen($value) + $this->ellipsis->getCount(), $this->ellipsis->getChar(), STR_PAD_LEFT);
        }
    }
    
    class EllipsisistFactory
    {
        /**
         * @param string $char
         * @param int $count
         * @return Ellipsisist
         */
        public static function make(string $char, int $count): Ellipsisist
        {
            return new Ellipsisist(new Ellipsis($char, $count));
        }
    }
    
    $arr = ['foo', 'bar', 'baz'];
    
    $ellipsisiatedArr = array_map(
        EllipsisistFactory::make('.', 3),
        $arr
    );
    
    var_dump($ellipsisiatedArr);

    Ответ написан
    4 комментария
  • Как подойти к разработке данного проекта?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    Можно и с файлами, но тогда надо самому заботиться о состоянии гонки и блокировках.
    Представьте простую ситуацию, практически одновременно приходят два запроса, изменяющих один и тот же файл. Может получиться следующая ситуация:
    - скрипт A читает файл
    - скрипт B читает файл
    - скрипт A записывает изменения в файл
    - скрипт B записывает изменения в файл, изменения, сделанные скриптом A, затёрты.
    В базах данных с этим проще, есть атомарные изменения, транзакции и блокировки строк/таблиц. В файловой системе вы можете только заблокировать файл целиком на время работы с ним скрипта.
    Ответ написан
    3 комментария
  • Почему ломаются события в javascript после перерисовки html?

    @writer_2159
    Жуть... просто жуть...
    К вышесказанному (о повторном навешивании) могу добавить:
    делегирование событий. тоесть навешиваем событие на родителя, который не перерисовывается (да хоть на document), а в событии проверять что событие отработало при взаимодействии с нужным элементом.
    Ответ написан
    Комментировать