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

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

• Вконтакте
• Facebook

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

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

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

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

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

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

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

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

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

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

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

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

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

Википедия

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

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

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

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

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

Css media queries

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

originalURL

Планшеты стали очень популярны. Поэтому если вы хотите, что то изменить на своем сайте для Ipad устройств, используйте следующий css:

@media only screen and (device-width: 768px) {
  /* Для основных стилей */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* Только для режима портретный */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* Только для режима ландшафтный */
}

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

с/у Талга УтБ

Использую часто хороший плагин jQuery Form Styler от Dimox. Там  же можете почитать.

Суть плагина в стилизации чекбоксов, радиокнопок, селектов и файловых полей.

Я использую препроцессор stylus, и поэтому переписал стили для данного плагина.

Всем кому вдруг понадобиться можно забрать на github.

Визуально ничего не изменилось, просто все стили были переведены на препроцессор.

li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
}

Кому интересно, можно почитать подробнее здесь ( англ. )

У Louis Lazaris, автора сайта impressivewebs.com , есть интересная статья Skills for Front-End Developers.

Хоть статья и 2011 года, но актуальность не потеряла (периодически обновляется список). Вот собственно и сам список умений (навыков) для фронтедщика.

Для быстрой загрузки изображений используйте data:url

В css это делается данной конструкцией:

.class {
background: url("data:image/png;base64,you_code_here") no-repeat 0 0;
}

Вместо png впишите тот формат, который вы закодируете (gif, jpg, png).

В html это выглядит так:

<img width="10" height="10" alt="star" src="data:image/png;base64,you_code_here" />

Собственно формат записи:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

Зачем мне использовать data:url ?

Главная причина это http запросы. С помощью данной технологии меньше запросов. Меньше запросов, значит лучше

Как закодировать картинку?

Используйте в поиске фразу base64 online или один из ресурсов:

• Раз ресурс
• Два ресурс (просто перетащить картинку)
• Три

Поддержка браузеров

Все современные браузеры поддерживают. IE начинает поддерживать с 8 версии.