Как спрятать «глаз» у поля пароля в IE

В браузерах от Microsoft для поля типа пароль (input type=password) есть возможность посмотреть, что вы ввели. Для этого в поле справа появляется «глаз», когда вы начинаете вводить пароль. При клике на «глаз» вы увидите пароль. Но не всегда этот «глаз» вписывается, в дизайн вашего сайта или приложения. Хочется или спрятать его, или заменить на свой.
Этот элемент — это псевдо-элемент ::-ms-reveal. ? им можно управлять через CSS. Например вот так:

::-ms-reveal {display: none;}

Вращение через CSS transform rotate

Забавная штука. Если вы вращаете элемент через CSS-transform, то вращение в Хроме будет в одну сторону, а в ФФ и ?Е в другую)
Чтобы вращение было в одну сторону надо установить начальное значение для rotate.

Немного боли от angular material (глас вопиющего)

О, создатели
Зачем, зачем, зачем вы делаете вот так?

md-select-menu.md-default-theme md-content md-option:not([disabled]):focus, 
md-select-menu md-content md-option:not([disabled]):focus, 
md-select-menu.md-default-theme md-content md-option:not([disabled]):hover, 
md-select-menu md-content md-option:not([disabled]):hover {
    background: rgb(238,238,238);
}

?ли так:

.md-chips md-chip ._md-chip-remove md-icon {}

Четверная вложенность и элементы в селекторах!
Вот и поди переопредели эти свойства при необходимости :'(

?спользуете ли вы Flexbox? Часть 2-я

В продолжение использования flexbox.
Поскольку в текущем проекте в качестве препроцессора мы используем SASS, то я для пущего удобства набросал миксин для генерации атрибутов со свойствами flexbox.
Выглядит это так. Сначала перечисляем в переменной нужные нам свойства:

$flex-properties: (
    justify-content: (flex-start flex-end center space-between space-around),
    align-items: (flex-start flex-end center baseline stretch),
    align-content: (flex-start flex-end center space-between space-around stretch)
);

Затем циклом перебираем все свойства:

@each $key, $properties in $flex-properties {
    @each $property in $properties {
        [#{$key}="#{$property}"] {
            #{$key}: #{$property};
        }
    }
}

? получаем на выходе вот такой CSS:
Читать далее ?спользуете ли вы Flexbox? Часть 2-я

Firefox, button and flexbox

Как интересно! Если вы хотите красиво расположить внутри кнопки несколько элементов, используя чудную технологию flexbox, то вас может ждать неприятный сюрприз. Внутри элемента button в Firefox 46.0.1 (в других не проверял) flexbox не работает :(
Как это хотелось бы видеть и как это выглядит в Хроме и даже в ?Е11:
flexbox внутри button в Хроме
? как это в Firefox:
flexbox внтури кнопки в Firefox

See the Pen eZqEGy by Sergey Kirichenko (@oknechirik) on CodePen.

P.S. Для себя эту проблему решил, обернув содержимое кнопки div’ом.
P.P.S. ? баг есть такой.

Update: проблема решена в Firefox 52!!!

?спользуете ли вы Flexbox?

Чудесная технология для верстки этот flexbox. Чем больше им пользуюсь, тем больше нравится.
На текущем проекте использую подход, позаимствованный у Angular Material. Angular Material вместо CSS-классов использует атрибуты. Вот и ваш покорный слуга решил использовать этот подход. Для задания свойства display: flex; flex-direction: row; атрибут mo-layout без значения, а для display: flex; flex-direction: column; тот же атрибут но со значением column. Примерно так:

[mo-layout] {
    display: flex;
    flex-direction: row;
}
[mo-layout="column"] {
    display: flex;
    flex-direction: column;
}

Flexbox

Чудесная технология. Позволяет решить практически любую задачу по разметке. ?сключением будет разве что необходимость сверстать грид с табличной гибкой структурой. То есть, когда есть необходимость растяжения колонок на ширину самой широкой ячейки. Но для этого есть display: table;display: table-row;display: table-cell;. Сам я изучил flexbox по простому и исчерпывающему гайду на CSS-Tricks.

Ошибка Error: `libsass` bindings not found

Если при выполнении команды grunt serve вы получаете ошибку

Error: `libsass` bindings not found in C:\Users\Sergey\WebstormProjects\main-links\node_modules\grunt-sass\node_modules\nod
e-sass\vendor\win32-x64-46\binding.node. Try reinstalling `node-sass`?

запустите

npm rebuild node-sass

This command runs the npm build command on the matched folders. This is useful when you install a new version of node, and must recompile all your C++ addons with the new binary.

(Эта команда полезна после обновления nodejs до новой версии).
npm-rebuild

Home и End страницы при помощи мышки

Случайно обнаружил в Chrome на Windows 8, что если зажать на мышке правую кнопку (для правшей), ту, что вызывает контекстное меню, и повернуть колесико мышки, то вы окажетесь в конце или начале страницы, как если бы нажали клавишу End или Home соответственно. Классно, не знал. В Файрфоксе не так. Коллега сказал, что в хроме не убунте не работает так.