1. JavaScript / Говнокод #25700

    +1

    1. 1
    2. 2
    3. 3
    4. 4
    5. 5
    6. 6
    7. 7
    xhr.upload.addEventListener('progress', function (e) {
      if (e.lengthComputable) {
        let percents = Math.round(e.loaded / e.total * 100)
        $(`#preloader-${preloaderId}`).html(`${percents}%`)
        $(`#preloader-${preloaderId}`).append(`<style>#preloader-${preloaderId}:before{ width: ${percents * 0.94}px;}</style>`);
      }
    }, false);

    Прогрессбар на псевдоэлементах.

    Запостил: mesumev, 05 Июля 2019

    Комментарии (33) RSS

    • Тру-способ - это сделать 100 классов
      .progress-1:before {
         width: 1%;
      }

      и менять только класс
      Ответить
      • > сделать 100 классов
        Гениально! Я думаю, это даже можно считать говнокодом месяца.
        Ответить
        • В вёрстке такое говно стало обычным делом. Чтобы не писа́ть руками, можно использовать LESS или SASS:
          .progess(@percents) {
              &:before {
                  width: @percents * 0.94px;
              }
          }
          
          each(range(0, 100), .(@i) {
              @classname: [email protected];
              @{classname} {
                  .progess(@i);
              }
          })

          Генерирует такой стиль:
          .progress-0:before {
            width: 0px;
          }
          .progress-1:before {
            width: 0.94px;
          }
          .progress-2:before {
            width: 1.88px;
          }
          /* и так далее */
          .progress-99:before {
            width: 93.06px;
          }
          .progress-100:before {
            width: 94px;
          }
          Ответить
          • Вообще не понимаю как можно писать без LESS и без SASS
            Это же почти как без babel
            Ответить
            • Перевёл на SASS (в синтаксисе SCSS), проверь:
              @mixin progess($percents) {
                  &:before {
                      width: $percents * 0.94px;
                  }
              }
              
              @for $i from 0 to 100 {
                  $classname: #{".progress-"$i};
                  #{$classname} {
                      @include progess($i);
                  }
              }

              Получилось больше буков, чем в LESS. С другой стороны, нагляднее. Не холивар «LESS vs SASS»!
              Ответить
              • По количеству используемых закорючек почти не уступает С++
                Ответить
      • А можно и без классов, если использовать data-атрибуты из HTML5. Вставляем такой элемент:
        <span class="progress" data-width="1.88px">2%</span>

        А в CSS так:
        .progress:before {
            width: attr(data-width);
        }
        Ответить
        • Ты проверял? attr() не для всех свойств работает
          Ответить
          • Проверил. attr() вычисляется только для правила content. Какой багор )))

            Значит, без классов не получится.
            Ответить
            • Так собственное свойство заведи и начни течь от наследования!
              Ответить
      • >> Тру-способ - это сделать 100 классов

        Знаете, как делали скруглённые уголки, когда браузеры не поддерживали border-radius? Некоторые накладывали растровую картинку (GIF или PNG с прозрачностью), реже векторную (VML для IE или SVG для остальных браузеров), а особо упоротые накладывали 100500 дивов так, чтобы их углы описывали окружность. Я серьёзно.
        Ответить
        • Я знаю популярный и развивающийся сайт, который и сейчас скругляет картинками.
          Ответить
          • А пачкой плотно разложенных дивов сейчас кто-нибудь скругляет?
            Ответить
            • Мне как-то нужно было делать нестандартное скругление, и при этом чтобы работал "html2canvas". Так вот там не работают скругления, и мне приходилось добавлять пачки дивов. Какой анскилл )))
              Ответить
              • Не знал про такую штуку. Это рендер HTML в растровую графику, написанный на JS?

                >> The script is still in a very experimental state, so I don't recommend using it in a production environment nor start building applications with it yet, as there will be still major changes made.

                Какой багор )))
                Ответить
                • Ага. Я кстати понятия не имею как он работает под капотом, но как-то работает.
                  Ответить
                • При чём если рендерить картинку, которая запрещена "cross origin policy", получим какой багор )))
                  Ответить
    • К доступом к этим псевдоэлементам из JS та ещё ёбля. Поэтому и правда проще <style> запихнуть. Сам так делал.
      Ответить
    • И сколько этих <style> там будет по итогу? Они не будут конфликтовать между собой?
      Ответить
      • Один? .html() же резетит все стили?
        Ответить
        • Но в доме они же останутся?
          Ответить
          • Поэтому я за «курник».
            Ответить
          • А... html() это innerHtml, а style добавляется на сам элемент? И поэтому стили копятся...

            Да ну нахуй этот ваш веб...
            Ответить
            • Какой бред и какой баг мышления!

              Можно было своё собственное свойство для этого завести

              $(`#preloader-${preloaderId}`)
                  .css("--percents", percents)


              Или использовать прогресс бар

              $(`progress#preloader-${preloaderId}`).val(percents)
              Ответить
            • Кстати, jQuery Не нужен
              Ответить
              • Кстати, jQuery 1.x нужен: он позволяет сгладить различия между браузерами, которые не поддерживали document.querySelectorAll и прочие современные методы.

                А зачем нужен jQuery 2.x и более новые, в которых поддержку старых браузеров дропнули, а в тех браузерах, которые он поддерживает, document.querySelectorAll есть из коробки?
                Ответить
      • Последний добавленный будет срабатывать. Какой багор )))
        Ответить
    • https://i.imgur.com/rWddtxo.jpg
      Ответить

    Добавить комментарий