Machines must suffer - Morning@Lohika

Oleksandr Pavlyshch – Front-end developer @ Astound Commerce.

Machines
must
suffer!

Всем привет!

my-photo
gally_workers

Agenda


PostCSS

Plugins

autoprefixer_demo
@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


BackstopJS

BackstopJS

Catch CSS curve balls.

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

Зачем?

¯_| ಠ ∧ ಠ |_/¯

Возможности

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

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

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

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

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

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

bakstop_test_example

Настройка

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  };

DEMO

А еще варианты?

BackstopJS


Bookmarklet Script

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

Advanced REST client

arc

Perfect Pixel

perfect_pixel

Fontface Ninja

fonface_ninja

Давайте напишем своё

manifest.json

manifest_json

background.js

background_js

cagefy.js

cagefy_js

Chrome Extentions


Google Script



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


Console

Переход между панелям


Cmd+Ctrl + [ ]

или

Ctrl + [ ]





Подсветка елементов к которым применен класс

console.table


console.table

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


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

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

Устроится на работу О_о

booking

Стилизованный console.log

color_console_log

Fork me on GitHub