• Как сделать пиксельное свечение для текста?

    ixon
    @ixon
    
    Правильней будет реализовать это через css. Добавить тексту свойства:
    text-shadow: 0px 0px 30px ЦветСвечения;
    text-fill-color: transparent;
    background-clip: text;
    background:url(Изображение из размытых точек)

    Если же делать это через js, то нужно будет получить размеры и характеристики текста через canvas, перенести его туда, в цикле перебрать попиксельно и через определённый интервал вставлять изображение из размытых точек в тех местах, где цвет ближе всего к чёрному.
    Но выгодней всего будет заранее нарисовать текст в графическом редакторе и всего лишь вставить его как картинку. Если важно иметь вариативный текст, можно разбить текст на буквы и вставлять каждую заранее нарисованную букву отдельным изображением или помещать её на canvas.
    Ответ написан
    Комментировать
  • Какие минусы в использовании Windows через virtualbox?

    bingo347
    @bingo347
    Crazy on performance...
    Многие графические пакеты от Adobe активно используют видеокарту для вычислений
    из виртуалок более менее адекватно эмулирует видеокарту насколько знаю только VMWare

    Но лучше все таки сделать так:
    1. В качестве хост-ОС поставить гипервизор (например Xen)
    2. Создать в нем 2 виртуалки (под линь и под винду)
    3. настроить, чтоб при старте ПК стратовали обе
    4. разделить между ними оперативу (самому гипервизору хватит 256-512МБ, остальное между виртуалками по нуждам)
    5. на виртуалку с виндой пробросить дескретную видяху
    6. на виртуалку с линем пробросить встройку от i5 (после всех основных настроек гипервизора и открытие ssh сервера в его VNet)
    7. на винде поднимаем VNC сервер и добавляем в автозагрузку
    8. врубаем моник на встройку, виндой управляем через VNC
    Ответ написан
    5 комментариев
  • Как реализовать статусы пользователя online/offline - PHP?

    @rPman
    Пожалуйста, поднимите у себя websocket, ресурсов это много не займет, зато возможности у вас появятся огромные, вы сможете не только точно знать момент, когда пользователь закрыл страницу или отключил интернет, но и сможете со стороны сервера эффективно передавать сигналы клиентам (чат например)
    Ответ написан
    2 комментария
  • ДДос атака на nginx пакетами 1 байт?

    sergey-gornostaev
    @sergey-gornostaev
    Седой и строгий
    500 строк в секунду - это не мощно и, вероятно, даже не DDoS. Если адрес один, то просто закройте ему доступ брандмауэром, а если адреса разные, то настройте лимит запросов в Nginx.

    nginx.conf
    http {
        ...
        limit_req_zone $binary_remote_addr zone=reqlimit:10m rate=30r/s;
        ...
    }

    some_site.conf
    server {
        ...
        location / {
            ...
            limit_req zone=reqlimit burst=10 nodelay;
        }
    }

    После этого запросы с одного ip-адреса начиная с 31-го в секунду будут отбрасываться.

    Как вишенку на торт, можно добавить ещё фильтр для fail2ban:

    nginx-req-limit.conf
    [Definition]
    
    failregex = limiting requests, excess: .* by zone .*, client: <HOST>
    ignoreregex =

    и правило в jail.local
    [nginx-req-limit]
    enabled = true
    port = http,https
    filter = nginx-req-limit
    logpath = /var/www/*/*/logs/error.log # Здесь укажите свой путь к логам виртуального хоста
    findtime = 600
    maxretry = 10
    bantime = 7200

    После этого адреса DoS'еров будут автоматически блокироваться брандмауэром на два часа. Что разгрузит Nginx от обработки паразитного трафика.
    Ответ написан
    11 комментариев
  • Ваш отзыв о надежности Arduino для умного дома?

    Сама по себе Ardurino вполне неплохая платформа, хотя я после работы с AVR на C считаю что без Ardurino можно писать более эффективные программы и использовать более дешевые компоненты. Впрочем, если вещь работает какая разница на чем написана прошивка?

    Как выше уже заметили если схемотехника правильно выстроена, то Ardirino будет работать довольно стабильно. Не зависимо от китайская это плата или оригинал. Но нужно понимать происходящие процессы, проверять питания МК, не перегружать и т.п.

    Что касается умного дома, то я бы прежде чем делать что-то на ардурине подумал, что будет лет через 5-10 когда у вас этот девайз накроется и его надо будет менять. А вам уже будет не интересно ковыряться в ардурине? Или вы будете в командировке, а дома жена? или просто не будет времени на это?

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

    В общем, я бы посоветовал посмотреть на шину RS-485 с Modbus или на ESP8266 (Sonoff). И делать максимально простые устройства вроде Реле на 1,2,4 канала или входы "сухой контакт" и т.п.
    Ответ написан
    Комментировать
  • Существует менеджер конфигурации для одного сервера?

    Sanes
    @Sanes
    Ansible простой, как 3 копейки. Для тиражного развертывания самое то.
    Ответ написан
    Комментировать
  • Существует менеджер конфигурации для одного сервера?

    @rustler2000
    погромист сикраш
    etckeeper же :D
    Ответ написан
    Комментировать
  • Как сделать "фигурный" бордер?

    Самое примитивное: на активный таб с помощью :after накладываешь поверх svg и все
    Ответ написан
    1 комментарий
  • Как получить исходный код JS?

    xmoonlight
    @xmoonlight
    https://sitecoder.blogspot.com
    Вставьте вначале всего кода скрипта и запустите скрипт.
    window.eval = function (str){
      alert('debug: '+JSON.stringify(str));
    }
    Затем, найдите строку в коде.
    Ответ написан
    Комментировать
  • Как найти все экземпляры определенного класса в javascript?

    Negwereth
    @Negwereth
    lvivcss.com.ua
    const instancesOfFoo = new Set();
    class Foo {
      constructor() {
        instancesOfFoo.add(this);
      }
    }
    
    new Foo;
    new Foo;
    new Foo;
    
    console.log([...instancesOfFoo.values()]);


    Set
    Ответ написан
    Комментировать
  • Как быстро верстать сайт по psd/png/jpg эскизам?

    @dmitry_pacification
    Трудности рождают прорыв
    Держи, это самый лучший верстальщик в Украине
    https://www.youtube.com/watch?v=tdRuZfZW99A
    Ответ написан
    Комментировать
  • Почему говорят что jquery не нужен?

    ThunderCat
    @ThunderCat Куратор тега JavaScript
    {PHP, MySql, HTML, JS, CSS} developer
    Скрипач не нужен, родной (с)
    Аргументы против jq:
    - современные браузеры достаточно хорошо поддерживают единый синтаксис современного екмаскрипт(native js)(на самом деле нет).
    - сторонняя библиотека, работает медленнее чем натив и в основном состоит из с-сахара (тоже не совсем правда)
    - тащить еще один ресурс весом от 64 кб до 200 кб, еще и со сторонних ресурсов замедляет загрузку( правда, но бред)
    Аргументы за:
    - Современные браузеры как и всегда один другого "ровнее", всегда есть косяки и "нюансы", на которые еще и попадаешь обычно в самый неподходящий момент, в жк обычно все работает одинаково везде, ну или лучше чем в нативе.
    - В жк реализована куча плюшек в 1 функцию которые в нативе занимают "многабукав", не каждый начинающий напишет их правильно, да и профи не все напишут оптимально, уверен что в большинстве случаев написанный нативом функционал будет хуже аналога из жк.
    - размер мин пакета жк 64 кб, и все они лежат на быстрых цдн серверах. Думаю это последнее что может повлиять на скорость загрузки страницы.
    - есть ОГРОМНОЕ количество скриптов написанных с учетом жк, не использовать их глупо, писать свой велосипед - вообще только в целях обучения(не берем крайние случаи когда плагин писал упоротый пингвин).
    - Синтаксис и краткость записи - вообще вне конкуренции.
    - Старые браузеры никто не отменял, часто заказчик требует чтобы работало в ие8, натив не канает или доставляет море анального удовольствия.
    Вывод: Если ты крут в жс, еще и работаешь в ангуларе/ещечетамдляфронта и тебе нужно сделать 2 действия в очень современных браузерах - jquery не нужен, и ты это сам знаешь. Если слова ангулар, вуе и проч для тебя не больше чем шум листвы за окном, а навесить плагинов и эффектов нужно - jquery наше все.

    UPD: для всех кто там отписался а ля "в связи (...), исчезновением проблемы совместимости со старыми IE (что и было основным назначением jQuery)." - свежачок
    Ответ написан
    4 комментария
  • Как грамотно собрать картинки в проекте?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    В зависимости от задач
    1. gulp.spritesmith - собирает png в один спрайт
    2. gulp-svg-sprite - собирает svg в один спрайт
    3. Вставка svg спрайтов на страницу

    Сейчас возможно уже и не актуально, но к моей практике не прижились
    Фоновые svg (плохая кроссбраузерность, нельзя стилизовать из внешних стилей)
    base64 (Распирает вёрстку, изменилась картинка - во всех местах везде надо менять картинку, использую крайне редко)

    Вставку svg спрайтов на страницу, делаю по такой практике:
    На странице делаю контейнер куда группирую все спрайты
    <div data-ui="resources" style="display: none;">
       <svg data-ui="icon-pack">
          <g id="svg-search"><path d="M61.8,56.6l-15.1-15C50,37.2,52,31.8,52,26C52,11.7,40.3,0,26,0C11.7,0,0,11.7,0,26c0,14.3,11.7,26,26,26 c6,0,11.5-2,15.9-5.4l15,15L61.8,56.6z M26,44.9c-10.5,0-19-8.5-19-19C7,15.5,15.5,7,26,7c10.5,0,19,8.5,19,19 C45,36.4,36.4,44.9,26,44.9z"></path></g>
          <g id="svg-img"><path d="M0.8,0C0.4,0,0,0.4,0,0.8v22.9c0,0.4,0.4,0.8,0.8,0.8h24.7c1.2,1.5,3,2.5,5,2.5c3.5,0,6.4-2.9,6.4-6.5c0-2.7-1.7-5.1-4-6.1V0.8C33,0.4,32.6,0,32.2,0H0.8z M1.6,1.6h29.8V14c-0.3,0-0.5-0.1-0.8-0.1c-1.2,0-2.3,0.4-3.3,0.9l-3-3.2c-0.2-0.2-0.4-0.3-0.7-0.2 c-0.2,0-0.3,0.1-0.5,0.2l-5.7,5.1l-7.2-8.3c-0.2-0.2-0.5-0.3-0.7-0.3c-0.2,0-0.3,0.1-0.5,0.2l-7.5,7.9V1.6z M17.7,3.3 c-1.8,0-3.2,1.5-3.2,3.3c0,1.8,1.4,3.3,3.2,3.3c1.8,0,3.2-1.5,3.2-3.3C20.9,4.7,19.5,3.3,17.7,3.3z M17.7,4.9 c0.9,0,1.6,0.7,1.6,1.6c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6C16.1,5.6,16.8,4.9,17.7,4.9z M9.6,10.2l11.1,12.7H1.6v-4.2 L9.6,10.2z M23.7,13.4l2.3,2.5c-1.1,1.2-1.9,2.8-1.9,4.6c0,0.9,0.2,1.7,0.5,2.5h-1.7L18.6,18L23.7,13.4z M30.6,15.5 c2.7,0,4.8,2.2,4.8,4.9c0,2.7-2.2,4.9-4.8,4.9s-4.8-2.2-4.8-4.9C25.7,17.7,27.9,15.5,30.6,15.5z M30.6,16.8c-0.4,0-0.8,0.4-0.8,0.8 v2h-2c-0.4,0-0.8,0.4-0.8,0.8c0,0.5,0.4,0.8,0.8,0.8h2v2c0,0.5,0.4,0.8,0.8,0.8c0.4,0,0.8-0.4,0.8-0.8v-2h2c0.4,0,0.8-0.4,0.8-0.8 c0-0.5-0.4-0.8-0.8-0.8h-2v-2C31.4,17.1,31,16.8,30.6,16.8z"></path></g>
          <g id="svg-plus"><path d="M15.6,7.1l-5.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c-0.2,0-0.4-0.2-0.4-0.5l0,0l0-5.1l0-0.3C9.8,0.6,9.2,0,8.5,0 C7.7,0,7.1,0.6,7.1,1.3l0,0.2l0,5.1c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0.3-0.2,0.5-0.5,0.5c0,0,0,0,0,0 c0,0,0,0,0,0l-5,0l-0.3,0C0.6,7.1,0,7.7,0,8.5c0,0.7,0.6,1.4,1.3,1.4h0.2l5.1,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0.3,0,0.5,0.2,0.5,0.5c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0l0,5.1l0,0.2C7.2,16.4,7.8,17,8.5,17 c0.8,0,1.4-0.6,1.4-1.4l0,0l0-5.2c0,0,0,0,0,0c0,0,0,0,0,0c0-0.3,0.2-0.5,0.5-0.5l0,0l5.1,0l0.2,0C16.4,9.9,17,9.2,17,8.5 C17,7.7,16.4,7.1,15.6,7.1L15.6,7.1z"></path></g>
       </svg>
    </div>


    В документе использую так (для svg передаю ид. спрайта в аттрибуте xlink:href="..."):
    <button data-ui="search">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.8 61.5"><use x="0" y="0"  xlink:href="#svg-search"></use></svg>
    </button>


    На счёт раста и dpi, использую 2 вида спрайта для каждой иконки (обычный монитор и ретина).
    Если требуется поддержка 3х и более разновидностей плотности в ход идёт svg.
    Но в основном и для мобильных девайсов (пример 120dpi) использую ретиновские спрайты, проблем с качеством иконки не замечал, единственное объём трафика на иконки повышается до ~5-10%
    Ответ написан
    3 комментария
  • Как создать свой дистрибутив linux для умного дома?

    riky
    @riky
    Laravel
    Тема умных домов конечно интересная, но железки с проприетарным софтом продавать тяжелее и тяжелее. сейчас для этого нужно вбухивать миллионы в рекламу, чтобы пропиариться. просто пока вы делаете свою железку потом ось и тд, какой нибудь гугл выпустит свою платформу на андройде а китайцы наклепают железа/датчиков wifi розеток/выключателей за 5$. в итоге ваши 2-3 года работы коту под хвост. это несомненно интересный опыт, но стоит ли оно того.
    железа и ОС сейчас и так дополна, я бы лучше сосредоточился на написание софта. сделать что-то типа majordomo нативно на андройд ОС например. хотя если у вас есть ресурсы можно и с ОС поразвлекаться, это хотя бы весело и круто.
    Ответ написан
    Комментировать
  • Где здесь утечка памяти?

    dummyman
    @dummyman
    диссидент-схизматик
    Во первых, вы неправильно используете анонимные функции, например
    const startTimer = (){ ... }
    и все остальные.
    Анонимные функции можно использовать только в ситуациях, когда их вызывают "не по имени" для сохранения контекста. Например, аргументом forEach().
    В данной ситуации лучшей синтаксической формы ничего не придумали:
    function startTimer(){ ... }
    Второй момент
    for ( const key in _headers ) {
            if ( {}.hasOwnProperty.call( _headers, key ) ) {
                headers.append( key, _headers[ key ] );
            }
        }

    и конкретно
    if ( {}.hasOwnProperty.call( _headers, key ) )
    Вы в цикле каждой итерацией создаете новый объект, это крайне не рациональное использование метода hasOwnProperty()
    по мне
    if (_headers != null && !!_headers[key] )
    может выглядело бы не так красиво, за то потребляет памяти по-меньше.
    Третий момент
    .catch( console.error )
    Вы можете немного сэкономить памяти использовав как раз по назначению анонимную функцию
    .catch( e => console.error(e) )
    В этом случае интерпритатор не будет искать ссылку на console.error при создании каждого промиса, и будет искать, соответственно, только в исключитальных ситуациях.
    Четвертый момент
    Поменьше пользуйтесь ключевым словом const, особенно, внутри методов и функций. Во-первых, так как они не выгружаются из памяти. Во вторых, const не дает никаких преимуществ в производительности, только лишь накладывает на интерпритатор обязанности следить чтобы ее случайно не перегрузили.
    Ответ написан
  • Как и где можно научиться делать такие сайты?

    Сайт, который грузится 1.5 минуты и лагает при прокрутке на core i5, ммм, ну даже не знаю. Может быть лучше уж видео ?)
    Ответ написан
    2 комментария
  • Как создают анимацию в html5 canvas?

    twobomb
    @twobomb
    Как делаю я. Обычно у меня есть функция основная функция называю ее handler. Она постоянно вызывается. А в ней уже вызываются другие функции. Ну вот мой пример https://jsfiddle.net/twobomb/b05nmjs5/
    Разработка на канвасе у меня обычно начинается со следующего кода
    var canvas, ctxW = 500, ctxH = 500,ctx;
    
    	window.onload = function(){
    		canvas = document.createElement("canvas");
    		canvas.width = ctxW;
    		canvas.height = ctxH;
    		document.body.appendChild(canvas);
    		ctx = canvas.getContext("2d");
    		handler();
    	}
    
    	function handler () {
    		 ctx.clearRect(0,0,ctxW,ctxH);
       //Тут вызов функций и прочие реализации
    
    		 setTimeout(handler,1000/60);
    	}
    Ответ написан
    Комментировать
  • Какой максимально эффективный способ защиты от скачивания изображений с сайта вы знаете?

    Stac
    @Stac
    Опубликуйте на сайте текст лицензии на языка страны сайта и соответствующей законам страны сайта, в которой напишите, что изображения скачивать нельзя.

    Найдете того, кто скачал - предъявляйте претензию или судебный иск, как принято в стране сайта.

    Если найти скачавших и нелегальное использование скачанных изображений не представляется возможным, то и защищаться от этого смысла нет.
    Ответ написан
    Комментировать
  • Как сделать фильтр на JS?

    Immortal_pony
    @Immortal_pony Куратор тега JavaScript
    Для начала select'у присвоить какое-то имя а в value каждого option'а прописать класс необходимого div'а:
    <select name="doctors">
        <option disabled selected>Все специальности</option>
        <option value="pediatric-dentist">Детский стамотолог</option>
        <option value="surgeon">Хирург</option>
    </select>


    Не забудьте и div'ам его прописать.
    <div class="item">
        <div class="doctor surgeon">
            <!-- Дальнейший код карточки -->
        </div>
    </div>


    Потом написать обработчик, который будет отслеживать изменения выпадающего списка и показывать соответствующие блоки.
    $('[name="doctor"]').on('change', function() { 
        var selector = '.' + $(this).val();
        var chosenItems = $(selector).closest('.item');
    
        // Сокрытие всех блоков
        $('.item').hide();
    
        // Показ выбранных блоков
        chosenItems.show();
    });


    Не заметил, что в тэгах нет JQuery. На всякий случай продублирую на чистом JS
    var toggle = document.querySelector('[name="doctors"]');
    
    toggle.addEventListener('change', function() { 
        var chosenClass = this[this.selectedIndex].value;
        var items = document.querySelectorAll('.item');
    
        Array.prototype.forEach.call(items, function(item) {
            var child = item.children[0];
            var childClasses = child.className.split(' ');
    
            if (childClasses.indexOf(chosenClass) === -1) {
                item.style.display='none';
            } else {
                item.style.display='block';
            }
        });
    });


    Пример: https://jsfiddle.net/t3hy7mjr/2/
    Ответ написан
    3 комментария