• Как тестировать верстку?

    В Яндексе мы разработали два инструмента:
    - gemini для модульного тестирования вёрстки скриншотами; сравниваются отдельные блоки с эталонными изображениями; есть отдельный удобный инструмент для снятия и обновления эталонов — gemini-gui
    - hermione для функционального тестирования

    Оба инструмента используют WebDriver API, при помощи которого ходят в Selenium Server или Appium. Умеют обходить проблемы стабильности (повторное выполнение тестов), запускать тесты максимально параллельно (для скорости; гибко настраивается), строить понятные отчёты.

    Этими инструментами уже тестируются SERP (страница поисковой выдачи), Яндекс Картинки, Яндекс Видео, Яндекс Новости и другие сервисы.
    Ответ написан
    1 комментарий
  • Как тестировать верстку?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    Статья habrahabr.ru/post/114256

    1. Проверка соответствия макету.
      Допускается расхождение до 5px для текста. Разрешены и даже приветствуются правки размеров и расположения криво нарисованных блоков (разница размерах в 1-2px на разных страницах).
      В качестве инструмента можно использовать Pixel Perfect (см. статью).

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

    4. Проверка на всех необходимых устройствах.
      Даже сайты, не адаптированные под мобильное устройство, должны на нем более-менее корректно смотреться. На мобильных устройствах следует проверять хотя бы в двух браузерах.
      Интересный сервис: webmark.com.ua/mobile
      Можно средствами браузера.
      Адаптивная верстка - рекомендую бутстрап, getbootstrap.com

    5. Отсутствие js-ошибок. В консоли браузера не должно выдаваться ошибок.
    6. Валидация html - validator.w3.org/. Наличие предупреждений (Warning) при проверки возможно. Ошибок не должно быть.
    7. Валидация css.
    8. Корректная работа при вбивании реального текста, надёжность вёрстки.
    9. Оптимизация скорости загрузки.
      https://gtmetrix.com/
      https://developers.google.com/speed/pagespeed/insights/

    10. Наличие Win/Mac/Linux-аналогов шрифтов. При использовании нестандартных шрифтов (определить подгрузку таких шрифтов - также в консоли на закладке Network), проверить, что в случае их незагрузки сайт нормально смотрится.
      Как эмулировать их незагрузку? Например, если шрифт грузится с google fonts, закрыть к нему доступ через файл hosts. Сайт будет смотреться иначе, но ничего не должно слишком сильно разваливаться.

    11. Label и input/select должны быть слинкованы
    12. Проверка корректности заполнения форм на JS. В верстке формы должны валидироваться: обязательные поля подсвечиваться, поле email проверяться на корректность и т.п. Поля для ввода телефона должны иметь маску (если телефон, скорее всего, российский), возможно маски на другие поля (дата, время).

    13. Переключение между элементами форм по кнопке tab
    14. Лого на внутренних страницах должно вести на главную страницу (должно быть ссылкой)
    15. Интерактивность соответствующих элементов - реакция на наведение и нажатие
    16. Skype-плагин не должен ломать вёрстку
    17. Ресайз textarea не должен ломать вёрстку
    18. Ссылки на сторонние сайты должны быть с target=”_blank” (открываться в новой вкладке)
    19. Проверка орфографии, в том числе автоматизированными средствами (Word'ом)
    Ответ написан
    1 комментарий
  • Как тестировать верстку?

    @soledar10
    html css3 js jquery
    1. Pixel perfect
    2. Валидность кода
    3. PageSpeed Insights
    4. GTmetrix
    5. Pingdom Website Speed Test
    6. Проверка адаптивности
    7. Проверка для Retina (srcset, svg, иконочные шрифты)
    Ответ написан
    3 комментария
  • Как и для чего инстаграм использует такие классы?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега CSS
    Это похоже на классы, автоматически сгенерированные через CSS-in-JS. Руками их никто не пишет и в коде не использует, поэтому у них такие нечитаемые названия.
    Ответ написан
    Комментировать
  • Есть ли смысл пробовать майнить на cex.io?

    @beduin01
    "Если хотите попробовать навариться, то учитывайте, что из-за роста сложности майнинг будет окупаться больше полугода, если вообще окупиться. По прошествии 6-7 месяцев купленное оборудование теряется свою актуальность из-за роста сложности.
    Причём производители железа для майнинга не заваливают рынок своей продукцией. На их оборудование постоянно стоит очередь. Есть подозрение, что их выпускают ровно столько сколько нужно, чтобы а) поддерживать высокий спрос и стоимость на оборудование, б) не допустить резкого всплеска добычи, а соответственно обвала курса Bitcoin. В общем-то производители оборудования выступают косвенным регулятором рынка, поддерживая в сообществе запах жаренного, который притягивает новичков, а значит и потенциальных покупателей. "

    (с) BitFAQ

    Так что ответ скорее Нет, чем Да.
    Ответ написан
    Комментировать
  • Как сверстать подобное?

    tema_sun
    @tema_sun
    Картинка выглядит векторной. Так чего бы svg не использовать?
    Ответ написан
    Комментировать
  • Как сверстать подобное?

    xmoonlight
    @xmoonlight
    https://sitecoder.blogspot.com
    Правильнее - нарисовать всё в векторе (SVG) и потом уже добавить другие DOM-обекты (или растровые изображения, например, лого).
    Ответ написан
    Комментировать
  • Какими бесплатными стоками вы пользуетесь для поиска иконок, фото и элементов интерфейса?

    https://icons8.com/welovesvg — все опенсорсные иконки: все в векторах и не надо указывать автора

    Минус — удобно только для веба, дается код для установки, а не сам файл

    Апдейт: мы в Icons8 запилили русскую версию. Работа немаленькая:
    • Перевели 8000 уникальных названий иконок (вручную проверили каждый)
    • 70000 тегов (проверили только самые частотные, но они ок)
    • Весь интерфейс (неделя работы)


    Будут ошибки — пишите!
    Ответ написан
    4 комментария
  • Какими бесплатными стоками вы пользуетесь для поиска иконок, фото и элементов интерфейса?

    InboxRu
    @InboxRu
    Фриланс
    Добавлю в копилку: graphicburger.com - мокапы, иконки
    psd-stock.ru - мокапы, иконки, кнопки, UI
    Ответ написан
    Комментировать
  • В двух словах, что такое БЭМ?

    talgautb
    @talgautb
    front-end developer
    Могу в трех - Блок Элемент Модификатор :D
    Ответ написан
    Комментировать
  • Как сделать перебор массива в нескольких инклудах?

    В подключаемом файле делайте обычный ретюрн, который возвращает массив.
    Подключаемый файл записывайте в переменную.

    Например

    $vars = include ('/path/to/yourfile');

    yourfile:
    <?php
      return [...]
    ?>


    А потом $vars перебирайте так, как нужно.

    Кривизна относительная, если к примеру так хранить конфиги/настройки, то удобно, но вот выборку лучше конечно в БД заносить.
    Ответ написан
    Комментировать
  • Как передать значение переменной из php-скрипта в javascript?

    nowm
    @nowm
    Первый способ: Отдельный AJAX-запрос к PHP-файлу, который вернёт что-нибудь вроде JSON-данных, которые потом будут доступны из JS.

    Второй способ: В PHP-файле можно определить какую нибудь переменную во время генерации страницы, а потом из любых скриптов к ней обращаться. Например так:

    PHP-файл:
    <?php
    $a = 'text for js_variable';
    ?>
    <!DOCTYPE html>
    <html>
      <head>
        <script>
          //Определяется переменная, которая будет доступна для 
          // всех JavaScript, подключаемых на данной странице
          var js_variable = '<?php echo $a; ?>';
        </script>
        <!-- 
          В файле /scripts/myscript.js происходит обращение 
          к переменной js_variable 
        -->
        <script src="/scripts/myscript.js"></script>
      </head>
      <body>blah-blah-blah</body>
    </html>


    Файл /scripts/myscript.js:
    // Выскочит алерт с текстом «text for js_variable».
    alert(js_variable);


    Вот. В HEAD-части HTML-страницы вы определяете переменную, которая будет доступна для остального JS-кода. Главное — нужно её определять до того, как будут подключены скрипты, которые будут её использовать.

    Третий способ: Если ваш web-сервер — Apache, то можно добавить в .htaccess в корне сайта такие строки:
    AddType application/x-httpd-php .js
    AddHandler x-httpd-php5 .js
    
    <FilesMatch "\.js$">
    SetHandler application/x-httpd-php
    </FilesMatch>


    Тогда вы сможете прямо в JS-файлах выполнять PHP-код. Но выполняться он будет только в тех JS-файлах, которые находятся в папке с сайтом. Если будут загружаться скрипты со сторонних ресурсов, там PHP-код работать не будет.
    Ответ написан
    Комментировать
  • Как авито блокирует консоль разработчика в браузере Chrome?

    Вот содержимое файла, который это делает: https://gist.github.com/shvchk/69ecde1a5dcb32513814

    Сейчас он имеет адрес https://www.avito.st/s/cc/978f54a4a62b76ad3e84bd5c...

    Можно просто добавить в Adblock/uBlock/etc простое правило для его блокировки:
    https://www.avito.st/s/cc/978f54a4a62b76ad3e84bd5cfad5652d3d907d4e*

    (если адрес изменится, содержимое скрипта выложено выше — ищите его среди используемых скриптов).
    Ответ написан
    Комментировать
  • Нужно ли калибровать iMac?

    VadimSoloviev
    @VadimSoloviev
    Человек из касты создателей
    Вот этот софт используют для калибровки IMac-ов. https://displaycal.net/ Можете протестировать.
    Ответ написан
    Комментировать
  • Как сворачивать дерево ресурсов и списки элементов в MODX по умолчанию?

    ruslan_aleev
    @ruslan_aleev
    MODX с cat-Art.ru
    Здравствуйте, не видел такой настройки для полного сворачивания меню админки. Однако для группирования ресурсов (если их много и грузится админка, можно использовать компонент Collections, см. https://itchief.ru/lessons/modx-revo/modx-extra-co... а для элементов - использовать категории в админке.
    Ответ написан
    Комментировать
  • Почему pdoResources вызывает ошибку 500?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    Ошибка 500 — ошибка на стороне сервера. Причина — тысячи их, простого примера вызова pdoResources недостаточно. Может быть, в каком-то из ресурсов рекурсивно вызывается исходных, шаблонизатор уходит в сингулярность и валится. Попробуй просто сократить условие выборки, например, выставить limit в 10, уточнить parents, отключить шаблон чанка (&tpl=``). В общем, сделать минимально работоспособный вариант, а уже его «усугублять».
    Ответ написан
    Комментировать
  • Почему pdoResources не показывает TV modx 2.4.2?

    Marduh-Top
    @Marduh-Top
    SEO-специалист, сайты на Modx Revo
    Попробуйте такой вызов (взял с рабочего проекта и переписал для вас)
    [[pdoResources?
        			&parents=`44`
        			&depth=`0`
        			&tpl=`img-item`
        			&includeTVs=`imges-item`
    			]]

    так же интересует содержимое чанка "img-item"
    и так совет лучше используйте нижнее подчеркивание.
    Ответ написан
    Комментировать
  • Почему после переноса сайта некоторые приложения не работают (MODX Revo)?

    Realetive
    @Realetive
    MODX Ambassador России, самозванный БЭМ-евангелист
    При установке приложений в MODX Revolution некоторые переменные окружения сервера используются для работы. Это создает ошибки при переносе, но по сути проблемой не является — это про… поведение, условно защищающее, например, от копирования платных расширений. Более плавный перенос с одного сервера на другой лучше сделать с помощью одного из специальных инструментов:

    Последний больше подходит для начального уровня подготовки, т. к. позволяет сделать «бекап» прямо из админки исходного сайта. Потом делаете чистую установку MODX на новом сервере и устанавливаете полученный «бекап» как обычный пакет. Желательно перед всеми манипуляциями очищать кэш.
    Ответ написан
    3 комментария
  • Как найти причины, из-за которых MODX грузит сервер?

    zooks
    @zooks
    Frontend
    Вывести время рендеринга, затем поочередно отключать сниппеты.
    Ответ написан
    Комментировать