AngularJS: добавляем SVG иконки

В этой статье я покажу как просто добавить svg иконки на сайт, написанном на ангуляре (как пример).

Что необходимо:

grunt/gulp для автоматизации;

svg иконки.

Мы будем собирать из иконок svg спрайт, который необходимо добавить на страницу, а в нужных местах будем использовать для вставки иконки. Подробнее о способе читайте тут. Читать дальше

CSS структура на Ruby on Rails

Сейчас я расскажу какую структуру для css можно использовать, если вы разрабатывает на Ruby on Rails.

Пару фактов при которых всё это придумывалось и создавалось:

  1. Бэкенд на рельсах, используем все возможности которые есть, например, assets pipeline
  2. Используем идею бэм методологии

Читать дальше

Egov.kz – обзор мобильного приложения электронного правительства

Наверное уже многие слышали про электронные правительства, так вот в Казакстане такое имеется. Можете ознакомиться по ссылке.

Так вот выпустили они мобильные приложения для андроид и iphone.

Сейчас я постараюсь объяснить, что я думаю об этом приложении, тем более, что представители Nitec (компания, которая ответственная за это приложение) собирают фидбек и уверяют, что мнение каждого будет услышано :)

Обзор приложения для iphone.

Первое, что бросается в глаза – это название приложения: Читать дальше

Бесплатный шаблон Cjs

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

CSS gradients

Если вы вдруг решили изучить что такое css gradient и с чем его едят, то я для вас собрал ссылки на полезный материал как на русском, так и на английском языках.
Если есть что-то полезное у вас пишите в комментариях или на почту. Читать дальше

Социальная активность

Давно хотел сделать страницы в социальных сетях с публикацией статей. Удобный формат потребления контента, если не хочется подписываться через почту.
В твиттере активность постоянная, ссылка.
Также добавились страницы:

Будут не только репосты, но и полезные сборки информации о фронтенде и около этой темы.

facebookСпасибо всем кто меня читает.

Теперь буду писать стабильнее, надеюсь :)

Код языка и код страны

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

Примеры неправильного использования:

Вот, например, в jquery ui был баг, добавили код языка как kz, т.е. в Jquery то откуда такая привычка путать? Есть международный стандарт кода языка.

Тем более у России, Казахстана есть отдельный гост стандарт.

Ну, и элементарно в википедию можно заглянуть раз, два.

Самое интересное об этом само государство похоже, что не знает:

Сайт Правительства

Сайт Президента РК

Сайт Премьер-министра

:)

А вот примеры правильные:

Википедия

На крайний случай можно схитрить как egov сделать казахский по умолчанию и не приписывать буквы.

http://egov.kz/wps/portal/index

Еще как вариант можно использовать трехсимвольный стандарт – kaz (каз), rus (рус). Но он менее популярен.

Откуда вообще придумали использовать kz вместо kk. И главное многие знают но делают как kz, привычка?

В общем, давайте делать правильно. :)

Stylus PX to REM Mixin

Rem очень крутая штука и вместо того, чтобы пересказывать документацию, почитайте о самом rem в статье Джонатана «Размер шрифта с помощью rem» (англ.), где он объясняет размеры шрифтов с px, em и как rem вступают в нашу игру.

The Stylus CSS

Метод по использованию в stylus rem, включает в себя 2 миксина: один определяет базовый размер шрифта, второй – ремификацию (надеюсь это так звучит, от англ. rem-ify) пикселей:

set-font-size(value) {
    font-size: value; /* добавляем PX как подстраховку */

    if (value is inherit) {
        /* делаем если нет значения для шрифта */
    } else {
        font-size: remify(value);
    }
}

remify(value) {
    u = unit(value);

    if (u is 'px') {
        return unit(value/16, 'rem');
    } else {
        return unit(value, u);
    }
}

16 – это базовый шрифт, из которого рассчитывается ремифицированный пиксель. (по-умолчанию, в современных браузерах используется размер шрифта 16px). Использование миксина будет выглядеть так:

.smaller {
	set-font-size(13px);
}

/*
	на выходе:

	.smaller {
		font-size: 13px;
		font-size: .8125rem;
	}

*/

Кстати, не забудьте установить базовый размер шрифта на html элементе, как правило это 100%. Также помните, что миксин использует миксин использует пиксели в качестве запасного размера для шрифта, поэтому если вас не устраивают пиксели, то данное решение вам не подойдет.

Другие интересные миксины для stylus можно найти тут

оригинал David Walsh: Stylus PX to REM Mixin

с/у Талга УтБ