Рубрика: Разработка

Прогресс в CSS нагнал и меня

Сколько бы я не сопротивлялся, прогресс в CSS нагнал и меня. Когда я пришел на нынешнее место работы, SASS, который тут использовали, показался мне громоздким и неудобным. Но со временем, изучив его возможности, я так с ним сроднился, что переход на что-то другое мне казался пустой тратой времени и сил. К тому же кода уже столько, что миграция просто пугает.
Но вот пришло время изменений. Сборка стилей SASS’ом стала чуть ли на самым узким местом в проекте. Сборка стилей длится в секундах, что печалит.
Решили переходить на использование postcss. А для пущего интереса в связке с CSSNext.
На ближайшие дни и недели меня ждет увлекательное изучение нового и менее увлекательное переписывание старого.
Постараюсь описывать найденные и собранные грабли.
Всем добра!
Намасте!

Темы в angular material

Немного экзотичный кейс. В проекте использован angular material и, частично, его механизм темизации интерфейса. Есть несколько приложений, использующих общие стили. Часть стилей переопределяет стили из матириала. В одном из приложений имя темы указывается явно на все приложение, а другом не используются вообще, а применяются кастомные стили. Это дано.
Что надо? Чтобы в случае, если для приложения явно указана тема, отличная по оформлению от кастомных стилей, использовались кастомные стили, а не стили темы.
В angular material есть механизм указания темы для отдельных элементов библиотеки через атрибут md-theme. Так вот, если вам на каком-то элементе не нужно, чтобы использовалась тема приложения или даже дефолтная тема, оставьте значение этого атрибута пустым. �? пишите кастомные стили, какие вам нужны.

<md-radio-group ng-model="model" md-theme="">
  <md-radio-button ng-repeat="setting in settings" 
                      ng-value="setting.value"
                      class="app-color">
    <span ng-bind="setting.title"></span>
  </md-radio-button>
</md-radio-group>

Конец эпохи Firebug

Немного печальная новость, закрывается firebug. Каким событием было его появление в свое время, просто революция! Неоценимая помощь для разработчика!!!
Но все проходит. Firebug был первым и задал пути развития инструментов для разработчиков. А сейчас и Chrome DevTools, и Firefox Developer Tools предоставляют больше возможностей да и работают быстрее.
Король умер! Да здравствует король!!!

Стайл-гайд для SASS

Залез, работая с bourbon.io, в их исходники. �? там нашел короткий, но исчерпывающий стайл-гайд для написания кода в SASS. Просто процитирую:

SCSS Style Guide

  • Two spaces, no tabs.
  • Dashes instead of underscores or camel case: linear-gradient not linear_gradient or linearGradient
  • Names should be descriptive and written in full-words: $all-text-inputs-hover not $hover or $alltxthvr
  • Space between property and value: width: 20px not width:20px
  • Declarations within a block should be ordered alphabetically.
  • Blank lines between rules.
  • No trailing whitespace. Blank lines should not have any space.

Хочется подписаться под каждой строчкой! Всем красивого и легко читаемого кода.

Намасте!

Как спрятать «глаз» у поля пароля в 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-я

Ошибка 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

И снова о внимательности и аккуратности

В очередном проекте необходимо было использовать кросс-доменный аякс. Конечно, воспользовался решением предлагаемым библиотекой jQuery.

Написал всё честь по чести, два почти одинаковых запроса, на один и то же домен, проверяю. Первый запрос проходи на ура, второй выдает ошибку:


XMLHttpRequest cannot load http://domain-name.example/test?params. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://test.local' is therefore not allowed access.

А вот приблизительный вид запросов:

$.ajax({
    url : 'http://domain-name.example/test?params',
    dataType : 'jsonp',
    jsonp : 'callbackFuncName',
});

и

$.ajax({
    url : ' http://domain-name.example/test?params2',
    dataType : 'jsonp',
    jsonp : 'callbackFunc2Name',
});

И вот второй вызов и давал ошибку.

Если внимательно посмотреть, то видно, что вся разница в вызовах — это пробел в значении url перед http.

Не знаю ж откуда он там взялся, это пробел. Но мне он стоил нескольких часов гугления и экспериментов. Узнал за это время что-то новое для себя по ajax, jsonp etc.

Когда заметил пробел и убрал его, то всё замечательно заработало!

Так что вот. Очередной призыв быть внимательным и аккуратным со своим кодом :)

P.S. А вообще удивительно, хотя я могу не охватывать все варианты, но почему в строке url не вырезается на уровене библиотеки jQuery пробел в начале строки.