Задать вопрос

kirick

Ответы

  • Как исправить работу StartSSL сертификата в Node.js v4.1.0?

    @kirick Автор вопроса
    Решение нашлось — теперь контент файлов из массива ca надо не отправлять в Node.JS, а прописывать прямо в .crt файл, создавая цепочку. То есть файл /valid/path/to.crt должен содержать сам сертификат, потом в нём же должен идти промежуточный сертификат и корневой. И тогда всё работает.
    Ответ написан
    Комментировать
    Комментировать

  • Каков секрет правильного ajax?

    @kirick
    Я давно решил для себя этот вопрос — и описал его здесь: https://kirick.me/blog/how-to-ajax-sites
    Вкратце: сервер отдаёт страницы "как есть" и ничего не знает, что он, оказывается, аякс-сайт. То есть при открытии сайта с нуля он грузится как обычный. А вот потом при переходе по ссылкам контент грузится через аякс, и клиентский скрипт препарирует получаемый контент:
    1. вычленяет оттуда <body> и заменяет им содержимое страницы;
    2. достаёт из <head> тэг <title>;
    3. достаёт из <head> все скрипты и стили и добавляет в <head> страницы только те, которых там ещё нет.
    Асинхронная подгрузка ресурсов, несомненно, нужна, но это отдельная тема, используйте плагин по вкусу. И, например, пусть этот аякс-загрузчик не вставляет скрипты и стили в страницу, а скармливает их этому плагину, а он уже разбирается.
    И ещё один момент — если на загруженной аяксом странице требуется подключить дополнительный файл стилей, то будет некоторое время каша из элементов, пока стиль подключается. Но решение простое — вставить критические для отображения стили в тэг <style> прямо в страницу — и HTTP-запрос сэкономите, и время загрузки.
    Ответ написан
    Комментировать
    Комментировать

  • Почему вставка svg через data:image не работает в Mozille?

    @kirick
    У меня недавно была такая же проблема, но я работаю через Стайлус.
    Решение вкупе с Галпом оказалось очень простым — в таске Галпа была описана глобальная функция base64(), которую я вызывал из Стайлуса. А вот о том, как добавить свои функции в компилятор Лесс: stackoverflow.com/a/26224903

    Вот примерный Стайлус:
    .element
  background-image unquote("url(data:image/svg+xml;base64," + base64("<svg></svg>") + ")"


    А вот таск в Галпе с дефайном глобальной функции, которая возвращает в компилятор Стайлуса base64 от текста:
    gulp.task('stylus', function(){
  gulp.src([ './css/*.styl', '!./css/_*.styl' ])
  .pipe(stylus({
    define: {
      'base64': function(input){
        return (new Buffer(input.val)).toString('base64');
      }
    }
  }))
  .on('error', console.log)
  .pipe(gulp.dest('./build/css'));
});
    Ответ написан
    2 комментария
    2 комментария

  • Как сделать rotate картинки и scale чтобы захватить максимально отображаемую область?

    @kirick
    Вот чертёж того, как всё выглядит в итоге.
    UnOTUGC1V24.jpg
    Тут:
    • ABCD — ваша картинка после scale
    • A'B'C'D' — ваш контейнер, в котором картинка отображается (например, экран)
    • α — угол поворота картинки


    Собственно, нам надо найти величину s = CD / C'D'. При этом C'D' у нас уже есть — это ширина экрана. Значит, вся задача в том, чтобы найти CD.
    Видим, что CD = CC' + C'D = AA' + C'D. При этом оба слагаемых являются катетами в треугольниках, где мы знаем гипотенузу и угол при одном из катетов (то, что угол поворота картинки α равен углу D'C'D, докажите сами, это несложно).
    Далее простые преобразования:
    sinα = AA' / A'D' <=> AA' = A'D' · sinα = CC'
    cosα = C'D / C'D' <=> C'D = C'D' · cosα
    Таким образом, CD = CC' + C'D = A'D' · sinα + C'D' · cosα
    Значит, величина увеличения равна s = CD / C'D' = (A'D' · sinα + C'D' · cosα) / C'D'.
    То есть, высоту картинки умножаем на синус угла поворота, прибавляем ширину картинки, умноженную на косинус угла поворота и делим это всё на ширину картинки.

    UPD: если у вас соотношение сторон картинки не равно соотношению сторон контейнера, то вам надо будет высчитать scale дважды: один раз для ширины, другой раз для высоты, и выбрать больший scale.
    Ответ написан
    1 комментарий
    1 комментарий