Machines must suffer - Morning@Lohika

@custom-selector :--button button, .button;@custom-media --small-viewport (max-width: 30em) :root {  --mainColor: red;}.foo, :--button {  background-color: gray(85);  color: color( var(--mainColor) blackness(20%));}

С чего начать ?

Создать папку в node_modules

postcss-Имя_плагина

Инициализировать её как модуль

npm init --yes

Создать файл index.js

Добавить в index.js

var postcss = require('postcss');module.exports = postcss.plugin('mypluginName',
  unction myplugin(options) {
    return function (css) {
    options = options || {};
      /*Magic*/
    }
});

PostCSS

• Разбивает файл на AST
• Вся магия происходит в плагинах
• Плагины написаны на JavaScript
• Логика отделена от представления
• Все плагины это репозитории на GitHub

BackstopJS

Catch CSS curve balls.

CLI инструмент для автоматизации тестирования визуальных регресий.

• Phantom JS (Slimer JS)
• Resemble JS
• Casper JS

Зачем?

¯_| ಠ ∧ ಠ |_/¯

• У сайта много страниц и состояний для разных устройств
• Большая команда и много новичков
• Что-то поправил Back-end разработчик
• Несколько файлов CSS на один сайт
• Один CSS файл на несколько сайтов ( и такое бывает) (o_O)
• Вы ведете курсы Front-End разработчиков

Возможности

• Можно настроить за пять минут
• Тестирование отдельных блоков
• Удаление или скрытие элементов со страницы
• Детальные отчеты в браузере и CLI
• CI интеграция с JUnit отчетами
• Возможность использовать глобально или интегрировать с npm и Gulp

Использование

$ npm install -g backstopjs - установка

$ backstop genConfig - создание базового конфига

$ backstop reference - создание эталонной картинки

$ backstop test - запуск теста

$ backstop approve - замена эталона тестируемой картинкой

backstop.json

{  "id": "prod_test",  "viewports": [...]  "scenarios": [...]  "paths": {...}  "engine": "phantomjs", //- "slimerjs"  "report": ["browser"], //- "CI"  "debug": false}

Viewports

"viewports": [  {    "name": "desktop_mdpi",    "width": 1280,    "height": 800  },  ...]

Scenarios

"scenarios": [  {    "url": "website.com",    "referenceUrl": "stage.website.com",    //--    "url": "..local_folder/index.html",    ...  },

Scenarios

"hideSelectors": [".hide_on_test"],"removeSelectors": [".remove_on_test"],"selectors": [  ".hero",  ".portfolio",  ".newsletter",],

Scenarios

    "readyEvent": null, // or some event    "delay": 500,    "misMatchThreshold" : 0.1,    "onBeforeScript": "onBefore.js",    "onReadyScript": "onReady.js"  }]

Paths

"paths": {  "bitmaps_reference": "backstop/bitmaps_ref",  "bitmaps_test": "backstop/bitmaps_test",  "casper_scripts": "backstop/casper_scripts",  "html_report": "backstop/html_report",  "ci_report": "backstop/ci_report"},

onBeforeScript, onReadyScript

module.exports = function(casper, scenario, vp) {  // casper – Casper instance  // scenario object  // vp – viewport obj  };

BackstopJS

• Быстро настраивается
• Тестирование отдельных блоков
• Выполнение сценариев пользователя через Casper JS
• CI интеграция

javascript:(  function(){    /*You magic code*/    var $body = window.document.body;    $body.style.transition="transform 1s ease";    $body.style.transform = "scaleX(-1)"  })();)();

Bookmarklet Script

• Позволяет выполнить рутинное действие в консоли одним кликом
• Не требует публикации

Chrome Extentions

• Работают с даными страницы
• Работают с сервером
• Имеют хорошую экосистему
• Достаточно трех файлов чтоб написать свое )

function getData() {  var sheet = SpreadsheetApp.getActiveSheet(),  data = sheet.getDataRange().getValues();  return data;}

function onOpen() {  var ui = SpreadsheetApp.getUi();  ui.createMenu('Export Products')    .addItem('Export to XML', 'exportToXML')    .addToUi();}function exportToXML() {  var data = getData();  /*Magic*/}

Google Script

• Кастомная логика в сервисах Google
• Можно написать их взаимодействие
• Можно отдать как готовый инструмент клиенту

Выбор элементов DOM

$(‘tagName’), $(‘.class’), $(‘#id’)- первый элемент DOM, соответствующий селектору

$0 - DOM элемент, выделенный в инспекторе