• Реализация объектра затемнения?

    RAX7
    @RAX7
    Ответ написан
    Комментировать
  • Как сверстать такой треугольник с градиентом у border?

    RAX7
    @RAX7
    Первый вариант svg mask.
    плюсы: не требует js
    минусы: нельзя применить backdrop-filter


    Второй вариант svg clip-path.
    плюсы: можно применить backdrop-filter
    минусы: требует js и желательно ResizeObserver
    Ответ написан
    Комментировать
  • Как сделать такой список?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    Ответ написан
    Комментировать
  • Как создать подобный слайдер?

    alex_shevch
    @alex_shevch
    Frontend Developer
    Вот интересная тулза для создания разных форм с помощью border-radius - https://9elements.github.io/fancy-border-radius/fu...
    Ответ написан
    Комментировать
  • Как написать большое приложение на Vue.js и не умереть?

    Как-то странно у вас webpack настроен. У нас на проекте весьма большая сборка (~100 ui компонентов + ~300 view файлов), собирается на холодную порядка 10 секунд, на горячую 1-2 секунды. При этом весьма большие store и система роутов.

    Конфиг: windows 10, 16bg, i7 7-го поколения

    PS
    Если вам не хватает БЭМ'а, что очень странно, используйте scope style и всё
    Ответ написан
    Комментировать
  • Лучшее решение для генерации документации из markdown файлов?

    eduardtibet
    @eduardtibet
    Technical Writer / Documentation Engineer
    Можно выбрать тут.
    Ответ написан
    Комментировать
  • Как сделать точное вычисление физики гравитации на javascript в canvas методом Верле?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    elleremo, ускорение которое получают планеты пролетая вблизи других планет не является ошибкой!!!

    Этот эффект называется "гравитационный маневр для ускорения объекта" или же "гравитационная праща"

    Swingby_acc_anim.gifГравитационный манёвр для ускорения объекта (гравитационная праща)

    Не стал делать "точную имитацию" гравитации. Пошел по пути:
    1. каждый объект имеет массу равную объему объекта умноженному на плотность объекта
    2. каждый объект влияет на каждый динамический объект
    3. влияние пошагово рассчитывается по формуле (почти) :
    V = сумма(F); // суммарный вектор сил
    F = k*M/D; // сила влияния (расчитывается для каждого объекта оказывающего влияние на текущий)
    M - масса объекта
    D - квадрат расстояния между центрами масс объектов
    k - коэффициент для подгона скоростей (выполняет роль гравитационной постоянной)

    Алгоритм расчета (пошагово):
    1. Для каждого динамического объекта происходит расчет новых координат (сумма текущих координат и вектора скорости, рассчитанного на предыдущей итерации цикла симуляции)
    2. Каждый динамический объект сверяется с каждым объектом на предмет столкновения. Если расстояние между центрами 2х сравниваемых объектов меньше суммы их радиусов то происходит слияние. Если объединяются статичный и динамический объекты, то динамический удаляется а его масса добавляется к статическому с перерасчетом плотности, радиуса и объема. Если объединяются 2 динамических объекта то к первому добавляется масса второго с перерасчетом плотности, радиуса и объема, координаты и вектора скоростей пересчитываются как взвешеная сумма координат и векторов скоростей обоих объектов. После второй объект удаляется.
    3. Для каждого динамического объекта расчитывается сумма векторов силы влияния притяжения всех объектов. Затем данная сумма и вектор скорости текущего объекта суммируются
    4. Переход к новой итерации цикла симуляции.

    Вся реализация расчета тут (в конце скрипта). Все формулы вынесены в класс Calc.

    видеодемонстрация
    демонстрация (масштабируется колесиком мышки, перетаскивается с помощью ЛКМ)

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

    5bbd21b57da99316097769.png
    Добавил настройки:
    • параметры отображения
      • отображать сетку - вкл/выкл отображение координатной сетки
      • отображать источники - вкл/выкл отображение объектов, генерирующих планеты
      • отображать шлейф - вкл/выкл отображение траектории планет

    • Настройки физических величин - позволяют задаь минимальные и максимальные значения для размеров и плотности статических и динамических объектов
    • Управление симуляцией
      • шаг симуляции - экспериментальная величина регулирующая точность расчетов
      • скорость источников - изменяет скорость, с которой источники генерируют планеты
      • включить источники - вкл/выкл генерацию планет источниками



    Доработал механизм расчета влияния гравитации, теперь у каждого объекта масса считается исходя из объема и плотности.
    Ввел изменение в процесс генерации новых планет, теперь они выставляются на лист с рассчитанной первой космической скоростью относительно центрального статичного объекта.
    Установил статичным объектам повышенную плотность, что существенно увеличило их массу (можно менять на панели настроек)
    Установил динамическим объектам пониженную плотность, что существенно уменьшило их массу и взаимовлияние (можно менять на панели настроек)

    5bbd22bc10be0483291405.png
    Ответ написан
    2 комментария
  • Nginx и чужие домены на моем IP, как запретить им доступ?

    @leaderDR Автор вопроса
    Решил проблему, оказалось проще чем думал. Всего-то нужно было настроить конфиг по умолчанию. Оставлю ссылку на ветку с общими решениями по данному вопросу, может кому пригодится) https://stackoverflow.com/questions/9824328/why-is...

    server {
        listen 80 default_server;
        listen 443 ssl http2 default_server;
        server_name _;
        ssl_certificate <path to cert>
        ssl_certificate_key <path to key>
        return 444;
    }
    Ответ написан
    Комментировать
  • Почему наши топ веб-студии не считают Wordpress серьезной CMS, а американские топовые студии делают на нем 50% сайтов?

    link_web
    @link_web
    Magento, Laravel, Zend, Shopify, Prestashop, WP
    Я работаю в компании которая находится в США и это правда - 90% сайтов у нас на вп, только интернет-магазины мы делаем на magento. Проект менеджеры аргументируют это тем , что вордпресс для нас очень хорош своим комьюнити ( почти на любую задачу найдёшь плагин ) , простота администрирования для клиентов , не нуждается в мощных серверах , и самое главное , что наши фронтэндеры когда берут проект , то сразу начинают верстку на skilleton тему вордпресса, а для компании важно не делать двойную работу !
    Ответ написан
    4 комментария
  • Как делать такие условные заголовки?

    Taraflex
    @Taraflex
    Ищу работу. Контакты в профиле.
    Белый или черный
    https://github.com/Taraflex/Brackets-Color-Highlig...
    https://github.com/Taraflex/Brackets-Color-Highlig...
    Цвет из картинки лучше вычислить заранее на сервере, ибо на клиенте не выйдет отобразить цветную карточку до загрузки картинки
    https://github.com/ksubileau/color-thief-php
    https://github.com/thephpleague/color-extractor
    https://github.com/brianmcdo/ImagePalette
    https://www.phpclasses.org/package/3370-PHP-Extrac...
    ну и еще можно нагуглить

    UPD
    Градиентный блур на js
    https://jsfiddle.net/8ujmn5zs/62/
    Ответ написан
    Комментировать
  • Какую библиотеку webrtc для javascript выбрать?

    @Levhav
    Возьмусь за разработку проектов любой сложности.
    Могу предложить своё решение для видео чатов https://comet-server.com/wiki/doku.php/comet:video... это обёртка на jssip на стороне клиента и FreeSwitch в связке с CppComet для работы с видео звонками и конференциями на серверной стороне.

    Все компоненты этого решения есть в опенсорсе.
    Ответ написан
    Комментировать
  • Как сделать эффекты как на сайте примере?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Что ж вас всех так тянет к этому канвасу? (риторический вопрос)

    1. Анимации буквы под ней фото. Как это делается? Подозреваю что canvas используется

    Если вы про большие "прозрачные" буквы, через которые видны фотографии, то никакой канвас там не нужен. Это делается на svg-масках - просто и производительно. Соответственно при перемещении мышки добавляется transform:translate для маски. Задача тривиальная, но оставлю пример для ознакомления. Переход между слайдами делается аналогично.

    2. Листание мышкой (зажимаешь появляются направляющие вверх-вниз, вправо-влево).

    На нажатие мышки вешаете обработчик, показывающий эти элементы (думаю не стоит говорить о том, как поменять им opacity). Далее точно так же - на событие "перетаскивания" добавляете transform:translate для всех этих линий и transform:scale для кружков. При переходе между слайдами добавляете еще больше трансформаций по вкусу.

    Остальные эффекты тоже интересуют. Понятно что css3, js, canvas

    Для рисования линий можно опять взять svg и..... Это вообще мощный прием, много куда его можно приткнуть. Появление надписей можно сделать на CSS-анимациях. Вариантов много, можно начать с вот этого примера (только делать все в обратную сторону) или поиграть с размерами псевдоэлементов, положенных поверх текстов. Еще там есть постраничный скролл, но это легко загуглить.
    Ответ написан
    5 комментариев
  • Как правильно построить логику для поиска по массивам?

    LaRN
    @LaRN
    Senior Developer
    Если отсортировать по идентификатору, то потом можно просто идти по двум спискам от начала к концу и сверять их по идентификаторам товаров.
    Если в свежем списке есть идентификатор, а в старом нет, то продуктов добавился, если наоборот то удалился. За счёт того что массивы отсортированы сравнение можно выполнить за один проход.
    Ответ написан
    Комментировать
  • Как правильно обрабатывать события в JavaScript?

    bubandos
    @bubandos
    bash'у, javascript'ую, php'лю, css'аю, html'каю
    Почитайте про всплытие событий и паттерн "behavior".
    Суть проста: на родительский блок вешается обработчик всплывающего события, в котором проверяется target/currentTarget и на основании их значений уже выполняются нужные действия.

    https://learn.javascript.ru/behavior
    Ответ написан
    1 комментарий
  • Похожий вертикальный слайдер как на этом сайте?

    @igix Автор вопроса
    Нашел. Всем спасибо.
    https://github.com/alvarotrigo/fullPage.js
    Ответ написан
    Комментировать
  • Меню из двух колонок с разделителем между ними?

    iiiBird
    @iiiBird Куратор тега CSS
    Пока ты спишь - твой конкурент совершенствуется
    как вариант картинку разделитель засунуть в один из li и стилизовать. тобишь у тебя идут ul>li - тот li который для картинки - задаешь класс и стилизуешь как тебе угодно.
    Ответ написан
    2 комментария
  • AUTOINCREMENT в SQLite3

    difiso
    @difiso
    В параллельной вселенной я космонавт
    Вот такой запрос работает.
    CREATE TABLE IF NOT EXISTS `tbl` (
      `id` INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL ,
      `name` varchar(255) NOT NULL);
    


    Небольшой рецепт на будущее для решения подобных проблем: создаете визардом таблицу нужного вида и смотрите на скрипт создания.
    Ответ написан
    1 комментарий
  • Вопрос к PERL программистам

    Нет, неправильно. Браузер посылает серверу не просто строку, а HTTP-запрос, состоящий из нескольких строк. Пока все их не прочитаешь, браузер входящие данные принимать не начнёт, а в приведённом коде считывается только первая строка запроса.

    Кстати, избавиться от зомбей можно проще:
    $SIG{CHLD} = 'IGNORE';

    И ещё: если после демонизации происходит ошибка, то выдача сообщения может выглядеть весьма необычно (от терминала-то отвязались). Правильнее пользоваться системным логом или вести свой лог-файл.
    Ответ написан
    Комментировать