• Тег "а" внутру тега "а"?

    alvvi
    @alvvi
    export default apathy;
    Тег <a> нельзя вкладывать внутрь другого тега <a> исходя из спецификации HTML5. Даже если технически это осуществимо, ваш код будет невалидным.
    Переделайте разметку таким образом, чтобы ссылки в ней располагались независимо друг от друга, e.g.
    <div class="card">
      <a href="/product" class="card__product-link">/* Здесь контент карточки товара */</a>
       <ul class="card__socials socials">
           <li class="socials__item">
              <a href="#" class="socials__link"></a>
           </li> 
       </ul>
    </div>

    а дальше позиционируйте их относительно друг друга с помощью CSS.
    Ответ написан
    Комментировать
  • Как правильно использовать js замыкание в примере?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Про let слышал, но нужно сделать без него

    Не нужно, но варианты есть такие:

    for (var i = 0; i < 10; i++) {
      (function(i) {
        setTimeout(function() { 
          console.log(i);
        }, 1000);
      })(i);
    }

    for (var i = 0; i < 10; i++) {
      setTimeout(function() { 
        console.log(+this);
      }.bind(i), 1000);
    }

    for (var i = 0; i < 10; i++) {
      setTimeout(console.log, 1000, i);
    }

    for (var i = 0; i < 10; i++) {
      setTimeout(new Function(`console.log(${i})`), 1000);
    }

    for (var i = 0; i < 10; i++) {
      setTimeout(function() {
        console.log(10 - i--);
      }, 1000);
    }
    Ответ написан
    Комментировать
  • Блокировка DigitalOcean?

    @ynblpb_spb
    дятел php
    Тоже попал под блокировку в DO

    Выход простой
    Топаете в любого отечественного хостера, покупаете самую дешевую VDS с хорошим каналом и настраиваете reverse proxy на nginx приблизительно с таким конфигом:

    server {
            listen                  80;
            server_name             domain.ru;
            
            location / {
                    proxy_pass http://111.111.111.111:80;
                    proxy_connect_timeout                           60;
                    proxy_send_timeout                                      60;
                    proxy_read_timeout                                      60;
                    proxy_redirect                                          off;
                    proxy_buffer_size                                       4k;
                    proxy_buffers                                           4 32k;
                    proxy_busy_buffers_size                         64k;
                    proxy_temp_file_write_size                      10m;
                    proxy_set_header        Host                    $host;
                    proxy_set_header        X-Real-IP               $remote_addr;
                    proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
            }
    }

    где 111.111.111.111 это IP адрес вашего дроплета в DO

    и для https сайтов

    server {
            listen                  443;
            ssl                     on;
            server_name             domain.ru;
            ssl_certificate      /etc/nginx/ssl/domain.ru.crt;
            ssl_certificate_key  /etc/nginx/ssl/domain.ru.key;
            ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;
            ssl_ciphers  "RC4:HIGH:!aNULL:!MD5:!kEDH";
    
            location / {
                    proxy_pass https://111.111.111:443;
                    proxy_connect_timeout                           60;
                    proxy_send_timeout                                      60;
                    proxy_read_timeout                                      60;
                    proxy_redirect                                          off;
                    proxy_buffer_size                                       4k;
                    proxy_buffers                                           4 32k;
                    proxy_busy_buffers_size                         64k;
                    proxy_temp_file_write_size                      10m;
                    proxy_set_header        Host                    $host;
                    proxy_set_header        X-Real-IP               $remote_addr;
                    proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
            }
    
    }


    такая вот у нас замечательная, страна, конечно...
    Ответ написан
    11 комментариев
  • Почему в верстке иногда используются альтернативный синтаксис управляющих структур php?

    tigroid3
    @tigroid3
    PHP, YII2, SQL, Postgres, Docker, SPHINX, GIT
    ну потому что более читабельнее

    <?php if ($test == 1): ?>
       <div>some text</div>
       <div>some text</div>
       <div>some text</div>
       <div>some text</div>
       <div>some text</div>
       <div>some text</div>
       <div>some text</div>
       <div>some text</div>
       <div>some text</div>
    <?php endif ?>


    чем где, весь контент, надо через echo выводить, для этого либо такая конструкции, либо шаблонизаторы
    <?php if ($test == 1) {
       echo "<div>some text</div>
       <div>some text</div>
       <div>some text</div>
       <div>some text</div>
       <div>some text</div>
       <div>some text</div>
       <div>some text</div>
       <div>some text</div>
       <div>some text</div>";
    }
    
    ?>
    Ответ написан
    10 комментариев
  • Как сайт выводит уведомление, если не открыт?

    @Fixid
    https://habrahabr.ru/post/321924/
    Настольные браузеры спрашивают разрешение на получение уведомлений
    Ответ написан
    Комментировать
  • Какие сборщики проектов сейчас используют?

    if(куча скриптов) use(webpack);
    else use(gulp);

    Для обычной верстки нет ничего лучше, чем старый добрый gulp. Как минимум из-за обилия вылизанных временем плагинов.
    Ответ написан
    4 комментария
  • Какие стратегии повышения зарплаты существуют?

    sergey-gornostaev
    @sergey-gornostaev
    Седой и строгий
    Центральный показатель для бизнеса, а следовательно и руководителей, как людей представляющих интересы этого самого бизнеса - это коэффициент возврата инвестиций (ROI). Соответственно, сотрудник должен приносить компании больше денег, чем потребляет. Естественно, что чем выше разрыв между затратами и прибылью, тем лучше, поэтому фонд оплаты труда руководитель должен держать на том минимальном уровне, который гарантирует бесперебойную работу сотрудников. Один из факторов этой бесперебойности - низкая текучка. Сотрудников терять нежелательно. И чем ценнее для компании сотрудник, чем более он профессионален и/или чем больше на него завязано, тем дороже обходится его потеря. Натурально в деньгах. Придётся затратить больше, чем обычно, денег на поддержание работы без него. Придётся затратить деньги и время (те же деньги) на поиск, найм, введение в работу, возможно, обучение нового сотрудника. При этом он может оказаться совсем неподходящих и цикл придётся повторить. Или может оказаться просто хуже прошлого и эффективность отдела снизится. Поэтому, когда сотрудник приходит просить прибавку, руководитель оценивает может ли этот сотрудник уйти или только блефует, насколько легко его будет заменить, какой урон компании будет нанесён его уходом. Потом руководитель оценивает стоимость расширения ФОТ - есть ли резервы, какой сейчас ROI, будет ли больший ROI от реинвестиции этих средств во что-то другое? Если уход сотрудника будет стоить меньше, чем увеличение ФОТа, сотруднику откажут.

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

    Из этого вывод, стратегия проста - увеличивайте собственный профессиональный уровень на столько, чтобы свободно менять компанию, как только вас что-то перестало устраивать.
    Ответ написан
    4 комментария
  • Как реализовать на css такое окно чата?

    Stimulate
    @Stimulate
    могу
    Ответ написан
    Комментировать
  • Как побороть перфекционизм в короткие сроки?

    longclaps
    @longclaps
    Желание побороть перфекционизм в короткие сроки есть само по себе перфекционизм, так что - никак.
    Ответ написан
    2 комментария
  • Приведенный мною код - одно и то же? Или один работет быстрее / эффективнее, а другой - нет?

    rockon404
    @rockon404
    Frontend Developer
    Да нет особой разницы. Накидал бенчмарк для трех вариантов делегирования:

    p0:
    $('.wrapper').on('click', '.btn', function() { 
      //handler 
    });


    p1:
    $('.wrapper').on('click', function(e) {
      if ($(e.target).hasClass('btn')) {
        //handler 
      }
    });


    p2:
    document.querySelector('.wrapper').addEventListener('click', function(e) {
      if(e.target && e.target.classList.contains('btn')) {
         //handler 
      }
    });


    Результат для каждого это доли от одной тысячной секунды.

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

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

    Так же если у кнопки есть дочерние элементы, то тут лучше использовать вариант p0 , так как он определяет целевой элемент как e.curentTarget, дочерний элемент клика как e.target и делегата на котором будет слушать событие как e.delegateTarget и сработает точно про клику по целевому элементу или его детям. В случаях p1 и p2 клик по дочернему элементу пройдет мимо условий, так как e.target будет дочерним элементом, а не целевым.

    Вот, что точно делать не надо, так это вешать без надобности слушатели на document. Делегировать события надо, по возможности, как можно ближе к целевому элементу. Если вы добавляете кнопки динамически в определенный контейнер, то вешайте обработчик события на него, так слушатель будет срабатывать только по клику внутри контейнера. В вашем же случае он будет срабатывать при каждом клике на любом элементе страницы, создавая тем самым дополнительную нагрузку на браузер.
    Ответ написан
    4 комментария
  • Приведенный мною код - одно и то же? Или один работет быстрее / эффективнее, а другой - нет?

    Exploding
    @Exploding
    wtf?
    Гггг))) Как бы с первого взгляда и одно и то же, но не совсем.
    Если первый вариант юзать на практике - далеко не всегда ваш ".button" будет совпадать с тем, что находится в таргете. Например на кнопке иконка/рисунок/etc. Поэтому вам придется дописывать специализированный костылеподобный изворот типа:
    if ($(e.target).closest('.button').length){
    	//....
    	e.stopPropagation();
    }

    что само по себе уже не совсем тоже самое, как предпогалолась в вопросе.
    К тому же, не будет возможности использовать .trigger() для .button
    Ну и не известно сколько еще потом по вылазит глюков, требующих, чтоб и их подперли чем-то...
    В итоге получится явно не быстрее и не стабильней чем в либе. Там как ни как сидят, почесывая башни изо дня в день, думая как еще оптимизировать и стабилизировать работу методов. Версий то вон уже сколько вышло.

    UPD
    Просто когда жму Event Listeners в chrome - там у каждого элемента оочень много listener'ов

    Во втором варианте слушатель вешается не на кнопку, а на документ. Видимо у вас просто установлен чекбокс на "Ancestors".

    Ну а если вам взбредет в голову все таки писать свою реализацию делегирования, то в лучшем случае, как мне кажется, вы придёте к оригинальной реализации метода jq.
    Ответ написан
    Комментировать
  • Поддерживаете ли вы IE8 в своих проектах?

    ms-dred
    @ms-dred
    Вечно что то не то и что то не так...
    Нет, к чему учитывать интересы пол процентной аудитории глобала? Да и думаю пользователи динозавров уже давно привыкли к корявой верстке и к частично неработающему функционалу сайтов, пусть страдают, чем больше будут страдать, тем быстрее забудем о кроссбраузерности. Я свой выбор сделал, у других может быть отличная от моей точка зрения.
    Ответ написан
    2 комментария
  • Должна ли быть возможность свободного перемещения элемента внутри блока без риска потери каких-то его качеств?

    sim3x
    @sim3x
    Нет

    Если такое требуется - значит елемент уже сам есть блок
    Ответ написан
    Комментировать
  • Что делает эта конструкция в jquery?

    rockon404
    @rockon404
    Frontend Developer
    Такой вариант записи используют в JS, когда надо получить ключ или вызвать функцию с помощью переменной.
    Это возможность самого языка, а не конструкция jquery.
    var foo = {
      bar: 'bar value',
    };
    
    console.log(foo.bar);
    // => bar value
    
    console['log'](foo['bar']);
    // => bar value


    Разберем ваш пример. Такая запись:
    var action = 'addClass';
    
    $('.some-selector')[action]('some-class');

    равносильна такой:
    $('.some-selector').addClass('some-class');

    То же самое для объекта:
    var key = 'name';
    
    var obj = {
      name: 'Tom',
      age: 24,
    };
    
    console.log(obj[key]);
    // => Tom
    
    console.log(obj.name);
    // => Tom
    
    console.log(obj[key] === obj.name);
    // => true
    
    key = 'age';
    
    console.log(obj[key]);
    // => 24


    Так же есть случаи, когда к ключу можно обратиться только таким способом:
    var obj = {
      'three words key': 'value',
    };
    
    console.log(obj['three words key']);
    
    // => value
    Ответ написан
    1 комментарий
  • Что почитать программисту о дизайне?

    По типографике и сеткам Чихольда и Мюллера-Брокманна. По анимации можно погуглить Диснея и «Физика в анимации». Много разного интересного, конкретно увы не вспомню. По UX Якоба Нильсена.
    Ответ написан
    3 комментария
  • ДДос атака на 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 комментариев
  • Vue-шаблон vs верстальщик?

    Делать не так, как нравится верстальщику, а так как правильно с точки зрения организации кода.
    Ответ написан
    Комментировать
  • Где можно консультироваться по JS у профи?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    По реакту/js могу проконсультировать.

    Либо на codementor.io
    ссылка не вставляется нормально:
    https://www.codementor.io/experts?q=javascript&lang=russian


    p.s. неоднократно уже задавался такой вопрос (линк)
    Ответ написан
    Комментировать