• Продление сертификата CloudFlare?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Если CloudFlare работает в режиме прокси, то клиенты (посетители сайта) получают сертификат CloudFlare. Но, между CloudFlare и вашим сервером соединение тоже может быть как HTTP, так и HTTPS (рекомендуется HTTPS). Если оно HTTPS - тогда вам нужно обновлять и второй сертификат, установленный на вашем сервере, иначе по истечении его срока действия CloudFlare не сможет общаться с вашим сайтом.

    За это отвечают настройки в разделе SSL/TLS в админке CloudFlare:

    5d9f228f040dc914911349.jpeg

    Впрочем, это необязательно должен быть платный сертификат от reg.ru - вы можете использовать на самом сервере бесплатный от Let's Encrypt или же во вкладке Origin Server сгенерировать сертификат от CloudFlare (и установить на своем сервере), который будет валидным именно для этого звена - связи между CF и вашим сервером по HTTPS:

    5d9f238ccd99f970377260.jpeg

    Лично я предпочитаю Let's Encrypt - бесплатно, автоматическое продление самим сервером. Один раз настроил и забыл - все работает как швейцарские часы.
    Ответ написан
  • Почему не отображаются dots в owl-carousel?

    UnluckySerivelha
    @UnluckySerivelha Автор вопроса
    Как оказалось, ошибка была в том, что нужно было просто добавить к контейнеру класс owl-theme
    Ответ написан
  • Как правильно работать с PSD макетами под ретиной?

    SmthTo
    @SmthTo
    Все перепёлки мира будут оплакивать мою смерть.
    Retina-макетов не бывает. Retina — не более чем маркетинговое название экранов с высоким разрешением (300+ px на дюйм). Retina могут быть только ресурсы, например, картинки, которые будут иметь в несколько раз большее, чем целевой макет, разрешение, чтобы попасть в пиксельную сетку реального разрешения.

    Вы же верстает не под размеры экрана в физических px, а под viewport с его «виртуальными» px, которые получаются из:
    [физическое разрешение] × [масштабирование]

    Чем выше разрешение при равных размерах экрана — тем всё мельче, если масштаб 1:1. Поэтому принято увеличивать масштаб, иначе всё мелкое-мелкое. Таким образом достигается высокая чёткость + адекватные размеры элементов на экране (эффект retina).

    Доп. инфо про правильное масштабирование
    Кстати, если используется масштабирование, то желательно, чтобы масштаб вообще был кратен двум (x2, x4…) для попадания в пиксельную сетку экранов, ибо так получаем меньшее влияния субпиксельного сглаживания, но это задача производителей устройств, а не нас с вами.

    На данный момент в том же iPhone XS используется нечётное масштабирование x3 не потому, что так хорошо, а потому что для нормального масштаба x4 нужно очень сильно увеличить разрешение экрана, а это дорого и не очень энергоэффективно.

    А на OLED-экранах ещё есть богомерзкий PenTile, из-за которого контрастные контуры выглядят пиксельно даже на очень высоком разрешении…

    Так, старый iPhone 6 и iPhone XS имеют одинаковый размер viewport (375px), но реальное разрешение различается очень сильно: 750px против 1125px. Достигается это с помощью масштаба: x2 у iPhone 6 и x3 у iPhone XS.

    Макет должен быть 1:1 к целевому размеру viewport, а не к физическому разрешению экрана. Потому что после всех манипуляций с масштабированием у нас остаётся четкое значение размера viewport, именно на него и надо ориентироваться.

    Наличие или отсутствие retina в этом деле вам совершенно не важно, ибо вы верстает под чёткие размеры viewport, которые могут быть одинаковыми на устройствах с совершенно разными физическими разрешениями: например, ширину viewport 375px (как у iPhone XS) можно достичь на древнем VGA-экране, сжав в нём окно браузера до этих 375px.


    Зачем тогда вообще retina-ресурсы
    Retina-ресурсы по сути бывают только растровыми, ибо векторные картинки, шрифты и вёрстка в целом масштабируются без потери качества. Этого нельзя сказать о всяких JPG'ах, поэтому если вы на iPhone 6 загрузите картинку 375px по ширине — да, она будет равна размеру viewport, но будет выглядеть размыто, потому что физическое разрешение экрана — 750px, а картинка по сути масштабируется в два раза, теряя в визуальном качестве.

    Если у вас в макете текст имеет 15px, то и делайте его 15px. Надеюсь, кстати, что макет вам делал не совсем отбитый дизайнер, который не забыл поставить px вместо pt в макете для текстов. Иначе — либо подгонять на глаз, либо пытаться конвертировать их в px, исходя из выбранном плотности печати в настройках документа макета. Ибо pt — это относительная единица для печати, в web её нет.

    Есть дизайнеры-уникумы, которые делают макеты в два раза больше необходимых размеров, типа, блин, retina x2. А если у меня retina x3 — что мне тогда делать? Или же делают макеты вообще неведомых размеров. Да и в Photoshop'e web-макеты в 2019-м году уже делать не надо, конечно.

    В CSS и HTML есть методы детекции наличия масштаба, чтобы грузить нужный ресурс в зависимости от его степени.
    UPDATE. С макетом полный порядок, тут уже дело в навыках верстки.
    Ответ написан
  • Перенос строки Json?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Мне кажется, вам достаточно поставить к диву css свойство
    white-space: pre-wrap
    Ответ написан
  • Радость дизайнера - боль верстальщика. Межбуквенные отступы - кернинг и трекинг. Как рассчитать их значения для css?

    lukoie
    @lukoie
    Делайте так:
    0 заливаете псд файл в авокод2скетч
    1 заливаете полученный скетч в фигму
    2 смотрите свойства текста там

    Вообще, когда дизайнер шрифта разрабатывает шрифт, он учитывает гармонику и ритм, потому искуственно искривлять дизайн шрифта негоже. Либо раз дизайнер выбрал такое решение, он неправильно подобрал шрифт и его начертание - вполне возможно у шрифта уже имеется монотайп или конденсед версия.
    Если текст имеет одинаковы показатели межстрочного и межбуквенного интервала на всей странице, тогда либо ставите для боди указанные параметры, либо подбираете более подходящий шрифт, потому что шрифты для того и бывают всяко-разные, чтобы не плющить их и кукожить стилями. Ведь дизайнер, скорей всего, рисовал их на большом мониторе, может даже ретине. А смотреть сайт будут на нетбуках, планшетах и телефонах. И если будет плохой результат, кого будут винить(и требовать пофиксить), дизайнера, у которого на жейпеге всё красиво, или Вас, кто сверстал это?
    Если это единичные элементы, которые действительно требовали таких манипуляций, Вы можете найти плагин для своего ИДЕ(у меня в ВС коде есть), который как переводит пиксели в ремы при наборе, и делайте просто визуально подходящим. Или Вас будут проверять на пиксель перфект?
    Смотрите, много лет работая с полиграфией я встречаю подобные приколы от дизайнеров, которые присылают макеты на печать, и там намного чаще используется кернинг и трекинг, из за специфики. Но для вебдизайна это избыточно, и даже наверное укажет на недостаточный профессионализм в вебдизайне.
    Вообще, если есть возможность, просите чтобы дизайны Вам давали уже утвержденными в специализированных программах для прототипирования, типа фигмы или зеплина. В т.ч. для согласования шрифтового решения.
    Ответ написан
  • Как выложить проект на username.github.io?

    @ghostiam
    На Go писатель, серверов пинатель.
    Старый вариант
    Как вариант, могу предложить следующее.
    Создать новый репозиторий и первым коммитом сделать пустой коммит, для того чтобы можно было в разных ветках хранить разные файлы:
    git init && git commit --allow-empty -m "Initial commit"

    дальше в ветку dev коммитите исходники, а в ветку master файлы из директории dist


    UPD. 27.11.2019
    Спустя почти год после ответа на этот вопрос, наткнулся на очень интересный способ с использованием git submodules.
    https://gohugo.io/hosting-and-deployment/hosting-o...

    Суть способа:
    Делаем директорию dist сабмодулем, который ведёт к вашему репозиторию-сайту (сам код сайта храниться в отдельном репозитории)
    git submodule add -b master git@github.com:<USERNAME>/<USERNAME>.github.io.git dist


    После этого сайт заливать/обновлять так:
    # Build the project.
    yarn build
    # npm run build
    
    # Go To dist folder
    cd dist
    
    # Add changes to git.
    git add .
    
    # Commit changes.
    git commit -m "rebuilding site $(date)"
    
    # Push source and build repos.
    git push origin master
    Ответ написан
  • Как будет правильнее сделать (flexbox)?

    Что-то типа такого. https://codepen.io/anon/pen/KxEjxb

    <div class="container">
      <section class="news">
        <div class="news__item">Новость</div>
        <div class="news__item">Новость</div>
        <div class="news__item">Новость</div>
        <div class="news__item">Новость</div>
        <div class="news__item">Новость</div>
      </section>
      <aside class="sideBar">Боковое меню</aside>
    </div>

    .container{
      display: flex;
      max-width: 1200px;
      background: #eee;
      margin: 0 auto;
    }
    
    .news{
      display: flex;
      flex-wrap: wrap;
      flex-grow: 1;
      background: lightgreen;
    }
    
    .news__item{
      flex-basis: 200px;
      flex-grow: 1;
      height: 300px;
      margin: 10px;
      background: lightblue;
    }
    
    .sideBar{
      flex-grow: 1;
      max-width: 400px;
    }
    Ответ написан
  • Нужно ли использовать препроцессоры CSS?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    1) Препроцессоры позволяют вводить переменные и миксины. Но ведь в CSS можно просто создать свойство

    Ну, одно дело добавлять к селектору в css, другое дело захламлять html, а там уже сложнее будет менять класс (т.к. html может генерироваться как угодно).
    2) Валидность CSS.

    Ай, да на это пофиг, есть и другие средства для проверки.
    3) Компилятор из препроцессорного языка в CSS.

    Ну там легкий скриптик выполняется в сборщике автоматом (на webpack, gulp, parcel и.т.д.). Особо ничего не нагружает, на ssd при сохранении файла scss меньше чем за секунду компилируется css.
    4) Удобочитаемость кода, и простой поиск,

    А тут как раз наоборот. Искать по scss гораздо сложнее, т.к. нельзя врубить поиск по целому селектору. Но если стоит Sourcemap (грубо говоря, который учит инструменты разработчика хрома понимать scss), то уже можно спокойно смотреть в хроме номер строки, название классов и.т.д.
    5) Возможность инклюда (include) в препроцессорах.

    Оптимизация. Пока не пришел http 2, все ресурсы желательно склеивать, скрипты, стили и даже картинки в спрайты. Один файл грузится быстрее чем несколько, т.к. достаточно одного http запроса. С приходом http2 будет пофиг.
    6) Вложенность свойств.

    Ну вот смотри, есть у меня такая менюшка
    <nav class="menu">
       <ul class="menu__list">
          <li class="menu__item menu__item_active">
             <a href="#" class="menu__link">Menu 1</a>
          </li>
          <li class="menu__item">
             <a href="#" class="menu__link">Menu 2</a>
          </li>
       </ul>
    </div>

    В css мой код на БЭМ будет выглядеть вот так
    .menu {
    
    }
       .menu__list { }
       .menu__item { }
          .menu__item_active { }
          .menu__item:hover { }
       .menu__link { }

    а на scss вот так

    .menu {
       &__list { }
       &__item { 
          &:hover { }
          &_active { }
       }
       &__link { }
    }

    проще и лаконичнее. Но этой слишком простйо пример. Там еще можно добавлять медиазапросы, дополнительные модификаторы.

    7) На хабре видел в комментариях обсуждение, мол можно даже задавать в препроцессорах - какие браузеры поддерживать. Ахтунг! А зачем писать такие стили, которые не будут работать в старых браузерах?


    Это больше для вендорных префиксов и всяких полифилов. Это по моему в PostCSS юзается через doiuse, точно не знаю, в scss с таким не сталкивался. Обычно пофиг на старые ie.

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

    В маленьких проектах чаще да, если нет готового сборщика, то удобнее сразу писать прототип на css. Но сейчас любой фрейморк в пару команд позволяет добавить поддержку scss.

    Это удобная штука, не нужно ее бояться, не нужно бояться webpack, фреймворки, но и не нужно фанатеть, это просто инструменты.
    Ответ написан
  • Как сверстать такой элемент?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Две больших картинки с object-fit: cover. Одна - нормальная, вторая - только голова и лапа слона, а вокруг нее прозрачное ничего. Голова в центре, при адаптивном изменении пропорций всего этого она никуда не уедет. Картинки одинакового размера. Дальше три слоя с абсолютным позиционированием - нормальная картинка, слой с текстом и картинка с головой. Текст - в виде встроенной SVG, там на него можно будет кроссбраузерно наложить любые градиенты.
    Ответ написан
  • Сколько часов в день нужно уделять, чтобы стать Java Middle?

    @AndrewStr
    Вопрос в корне неверный, как и подход.
    Для начала разработчики джуниор, мидл, сеньор отличаются не столько знанием большого количества технологий, сколько знанием определенных корнер кейсов в каких-то технологиях, так же они отличаются умением построить и спроектировать ту или иную часть системы, или систему целиком, зависит от опыта, который кстати тоже бывает разный.
    Я бы сказал что не менее важны и так называемые софт скиллы, по сути это можно назвать именно опытом. Опытом общения с бизнесом и командой, умением передавать знания новым сотрудникам и так далее. Да и зацикленность на технологии тоже не самая лучшая черта, всё-таки для разных задач есть разные инструменты, и задача действительно опытного разработчика их подобрать, это я вам как человек который пишет именно на Java говорю.
    Суть в том, что большинство этих умений невозможно получить в искуственной среде, ну не сможете вы изобразить давление бизнеса на себя, когда надо сделать какую-то фичу быстро, а лучше "вчера", а в таких ситуация аккурат и появляются различия и сразу видно насколько человек подходит хорошо к написанию кода который он пишет, как ведёт он с другими людьми в такой стрессовой ситуации, ну и так далее.
    Я бы вам советовал уделить обучению год, но уделить крепко и серьезно, а потом искать позицию джуниор разработчика, а дальше уже продолжать обучение (это прийдется делать всегда) ну и получать реальный опыт в реальных условиях.
    Вышло сумбурно, я не писатель, но надеюсь помог.
    Ответ написан
  • Почему блокируют Google из-за telegram?

    А как технически реализовано использование ip адресов гугла телеграмом?

    Это реализовано использованием Телеграмом аппаратных и програмнных ресурсов Гугла, в том числе их вычислительных сетей, вычислительных узлов, и, соотв-но, диапазонов IP-адресов. Рыночное название для этих ресурсов - Google Cloud Platform.
    Ответ написан
  • Почему браузер так считает высоту? Откуда берется белая полоса внизу?

    BelkinVadim
    @BelkinVadim
    Frontend разработчик
    В предыдущем вопросе вам написал, что тут странное поведение в хроме. Почему-то в хроме не получается задать дробные значения для табличных ячеек, он округляет до целых. Ради примера, создайте блок высотой 205.5px и таблицу с одной ячейкой той же высоты - хром округлит до целого высоты таблицы. Хоть вы и делаете на дивах, но имитируете таблицу через table/table-cell по этому будет тот же результат
    Ответ написан
  • Стоит ли разбивать веб-проект на версии desktop и mobile или обойтись адаптивной версткой на единой версии?

    @Mukti
    шестирукий семикрыл, точнее семикрыл(а), сиречь РМ
    а что лучше, дрель или лопата? думаю, зависит от целей.
    Хотя на самом деле в 99,(9)% случаев адаптип лучше мобильной версии.

    - адаптива
    • единственным его недостатком перед последней, является безальтернативность, с мобильной на десктопную и обратно всегда можно перейти, с адаптивом такой номер не прокатит, что выросло, то выросло, и это накладывает дополнительную ответственность на проектировщика интерфейса.
    • Ещё условно можно считать, что адаптивка медленнее грузится, там в любом случае больше кода, НО(!) по факту с нынешними скоростями мобильного интернета и при условии использования сжатия, разница в скоростях будет неумолимо стремиться к нулю, так что этот фактор можно смело игнорировать, при условии, конечно, что вы не мега-монстр с дозагрузкой немыслимо кол-ва виджетов по скроллингу. Но если бы "вы" были мега-монстром, то реализовали бы RESS, а не задавали бы подобные вопросы.

    + адаптива
    • относительная дешевизна (работаем над одной версией, а не над двумя)
    • удобство разработки (по той же причине)
    • один урл, а это (не только 2 кг ценного мяса):
    1. лучше для поискового продвижения с точки зрения роботов
    2. меньше мозголюбства для сеошников
    3. посетители пришедшие с нативного поиска точно не окажутся в ситуации, когда они переходя по ссылке в выдаче , которая была взята с десктоп-версии, окажутся перенаправленными на 404, потому, что в мобильной такой страницы просто не существует

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

    @AlexndrNovikov
    Solution Architect in Spiral Scout
    Такой способ запроса - прямой путь к sql injection
    Правильнее использовать prepared statements ( php.net/manual/ru/pdo.prepared-statements.php )

    $sql= $db->prepare("UPDATE vt SET rc = :value");
    $sql->bindParam(':value',  $js['rc']);
    $sql->execute();
    Ответ написан
  • Как правильно расставить кавычки?

    @SvizzZzy
    $sql = $db->query("UPDATE vt SET rc =". $js['rc']);

    или так:

    $sql = $db->query("UPDATE vt SET rc ='{$js['rc']}' ");
    Ответ написан
  • Как при помощи JQ или JS принудительно вызвать клик на элементе с зажатым Shift?

    orlov0562
    @orlov0562
    I'm cool!
    www.spookandpuff.com/examples/clickSimulation.html

    function simulatedClick(target, options) {
    
      var event = target.ownerDocument.createEvent('MouseEvents'),
          options = options || {},
          opts = { // These are the default values, set up for un-modified left clicks
            type: 'click',
            canBubble: true,
            cancelable: true,
            view: target.ownerDocument.defaultView,
            detail: 1,
            screenX: 0, //The coordinates within the entire page
            screenY: 0,
            clientX: 0, //The coordinates within the viewport
            clientY: 0,
            ctrlKey: false,
            altKey: false,
            shiftKey: false,
            metaKey: false, //I *think* 'meta' is 'Cmd/Apple' on Mac, and 'Windows key' on Win. Not sure, though!
            button: 0, //0 = left, 1 = middle, 2 = right
            relatedTarget: null,
          };
    
      //Merge the options with the defaults
      for (var key in options) {
        if (options.hasOwnProperty(key)) {
          opts[key] = options[key];
        }
      }
    
      //Pass in the options
      event.initMouseEvent(
          opts.type,
          opts.canBubble,
          opts.cancelable,
          opts.view,
          opts.detail,
          opts.screenX,
          opts.screenY,
          opts.clientX,
          opts.clientY,
          opts.ctrlKey,
          opts.altKey,
          opts.shiftKey,
          opts.metaKey,
          opts.button,
          opts.relatedTarget
      );
    
      //Fire the event
      target.dispatchEvent(event);
    }
    Ответ написан