Oleksandr Pavlyshch – Front-end developer @ Astound Commerce.
@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
var postcss = require('postcss');
module.exports = postcss.plugin('mypluginName', unction myplugin(options) { return function (css) { options = options || {}; /*Magic*/ } });
Catch CSS curve balls.
CLI инструмент для автоматизации тестирования визуальных регресий.
¯_| ಠ ∧ ಠ |_/¯
$ npm install -g backstopjs - установка
$ backstop genConfig - создание базового конфига
$ backstop reference - создание эталонной картинки
$ backstop test - запуск теста
$ backstop approve - замена эталона тестируемой картинкой
{
"id": "prod_test",
"viewports": [...]
"scenarios": [...]
"paths": {...}
"engine": "phantomjs", //- "slimerjs"
"report": ["browser"], //- "CI"
"debug": false
}
"viewports": [
{
"name": "desktop_mdpi",
"width": 1280,
"height": 800
},
...
]
"scenarios": [
{
"url": "website.com",
"referenceUrl": "stage.website.com",
//--
"url": "..local_folder/index.html",
...
},
"hideSelectors": [".hide_on_test"],
"removeSelectors": [".remove_on_test"],
"selectors": [
".hero",
".portfolio",
".newsletter",
],
"readyEvent": null, // or some event
"delay": 500,
"misMatchThreshold" : 0.1,
"onBeforeScript": "onBefore.js",
"onReadyScript": "onReady.js"
}
]
"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"
},
module.exports = function(casper, scenario, vp) {
// casper – Casper instance
// scenario object
// vp – viewport obj
};
javascript:(
function(){
/*You magic code*/
var $body = window.document.body;
$body.style.transition="transform 1s ease";
$body.style.transform = "scaleX(-1)"
})();
)();
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*/
}
$(‘tagName’), $(‘.class’), $(‘#id’)- первый элемент DOM, соответствующий селектору
$0 - DOM элемент, выделенный в инспекторе
document.body.contentEditable=true