Конец эпохи 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 пробел в начале строки.

Лень или безразличие разработчиков Vaio Care

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

Сегодня в очередной раз обновилась мало нужная, на мой взгляд, предустановленная на  мой Vaio софтина (намеренно так, не очень уважительно) Vaio Care. После обновления оно самозапустилось и предстало во всей красе:

vaio-care

 

Обратите внимание на ярко-голубой прямоугольник с надписью 0 Проблем(а/о) и ниже на белом фоне продолжение Обнаруженные в системе на данный момент. Не правда ли, звучит очень не по-русски: 0 Проблем(а/о) Обнаруженные в системе на данный момент, — но разработчики предусмотрели все сразу варианты, не заморачиваясь на падежи и всё остальное. У меня такой подход вызывает сильное неприятие.

Ведь насколько было бы лучше, если бы было  предусмотрено несколько вариантов:

  1. Если проблем нет, то написать: Проблем не обнаружено. Не добавляя ни количество 0, не несущее никакой полезной информации, ни добавление, что 0 проблем в некоей системе, что тоже излишне и усложняет ненужным образом сообщение. Проблем не обнаружено. И точка :)
  2. А далее немного поиграть с окончаниями при разном количестве проблем:
    1. 1 проблема,
    2. 2, 3, 4 проблемы,
    3. 5, 6, 7 и так далее проблем обнаружено.

И опять же без упоминания некой системы.

Ведь так сообщения Vaio Care будут восприниматься гораздо легче. И не будут выглядеть, как что-то недоделанное.

Не могу заблокировать экран в свежепоставленной Ubuntu 13.10

Ну что ты будешь делать с этой мегасистемой? Ни привычное сочетание CTRL+ALT+L, ни через верхнее меню не позволяют блокировать экран. Ни тот, ни другой способ ни к чему не приводит!
Оказывается, чтобы иметь возможность блокировать экран, необходимо доустанавливать пакет gnome-screensaver.

sudo apt-get install gnome-screensaver

Я не понимаю логики создателей Ubuntu.