Статей про SASS(SCSS), Less на хабрахабре уже полно, но на мой взгляд не хватает такой, в которой было бы немного реальной практики. Я постараюсь восполнить этот пробел. Около года назад одна из SASS-статей меня "зацепила", и с тех пор я полюбил эту технологию настолько, что ручной набор обычного CSS кода представляется мне лишней тратой времени. Сия статья посвящается тем верстальщикам (или web-программистам), которые про SCSS ещё не слышали, или же ещё не пробовали в деле. Более опытным товарищам, полагаю, в ней ловить нечего.

Что такое SCSS

SCSS — "диалект" языка SASS. А что такое SASS? SASS это язык похожий на HAML (весьма лаконичный шаблонизатор), но предназначенный для упрощения создания CSS-кода. Проще говоря, SASS это такой язык, код которого специальной ruby-программой транслируется в обычный CSS код. Синтаксис этого языка очень гибок, он учитывает множество мелочей, которые так желанны в CSS. Более того, в нём есть даже логика (@if, each), математика (можно складывать как числа, строки, так и цвета). Возможно, некоторые возможности SCSS покажутся вам избыточными, но, на мой взгляд, лишними они не будут, останутся "про запас".

Эту статью давно стоило переписать (слишком много «экономии на спичках»), но руки не доходят. Пускай весит и напоминает о том, как мы глупы в молодости.
Одним из основных критериев успешности любого интернет-ресурса является скорость его работы и с каждым годом пользователи становятся всё более и более требовательными по этому критерию. Оптимизация работы php-скиптов — это один из методов обеспечения скорости работы системы.
В этой статье я бы хотел представить на суд общественности свой сборник советов и фактов по оптимизации скриптов. Сборник собирался мною достаточно долго, основан на нескольких источниках и личных экспериментах.

Сегодня мы поговорим об отечественных стандартах на проектную документацию. Как эти стандарты работают на практике, чем они плохи и чем хороши. При разработке документации для государственных и серьезных частных заказчиков у нас обычно нет выбора — в требования по документированию ТЗ вписано соблюдение стандартов. На практике мне приходилось сталкиваться с различными примерами недопонимания структуры стандартов, того, что должно быть в документах и зачем эти документы нужны. В итоге из-под пера техписателей, аналитиков и специалистов выходят порой такие перлы, что непонятно, в каком состоянии сознания они писались. А ведь на самом деле все достаточно просто. Поиск по Хабру не вернул ссылок на более-менее целостный материал на данную тему, потому предлагаю закрасить этот досадный пробел.

Хабр, привет!

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

Очень часто модальные окна и диалоги делаются при помощи плагинов jQuery. Например, SimpleModal или jqModal. К сожалению, все они, в варианте по умолчанию, работают неправильно.

Что же такое «правильно»?

Модальное окно по определению блокирует работу пользователя с родительским окном до тех пор, пока пользователь его не закроет. То есть:

1. Пользователю нельзя позволять прокручивать страницу под ним.
2. При этом, если содержимого в модальном окне очень много, нужно позволить прокручивать содержимое.

По этому принципу работает просмотр фото в Facebook и Вконтакте и, я считаю, что для модальных окон это правильный вариант.

Чтобы не мучать вас заранее деталями реализации, покажу сначала демо плагина jQuery: http://rmcreative.ru/playground/modals_plugin/demo.html.

Ну а теперь немного про реализацию.

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

Вот уже на протяжении четырёх лет, с сентября 2011 г. W3C занимается разработкой CSS4. Модули четвёртой версии каскадных таблиц стилей проектируются на базе CSS3 и дополняют их новыми свойствами и значениями. В этой статье я хотел бы рассказать о том, как использовать возможности CSS4 уже сегодня, о cssnext.

Итак, cssnext — это CSS компилятор, позволяющий использовать последний синтаксис CSS уже сегодня. Он преобразует новые CSS спецификации в более современный код так, что вам не придётся ждать поддержки новых возможностей в вашем браузере.

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

Итак, для начала статистика размеров.

На картинке видно, что наиболее популярны форматы 120, 80 и 60, которые выпускаются только Intel.
Можно также заметить, что диски объёмом 120/128 особо популярны среди пользователей алтернативных операционных систем (включая OS X).

Продолжим данными по производителям.

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

В Рунете и Уанете последнее время придается огромное значение юзабилити и дизайну, как инструментам, способным увеличить продажи интернет-магазинов. Приуменьшать значение юзабилити или дизайна в интернет-магазине, как фактор высоких продаж – глупо. Но я хочу обратить внимание на то, что большинство владельцев магазинов, особенно начинающих, уделяют юзабилити и дизайну первостепенное значение. Создается впечатление, что руководители магазинов забывают о логистике, бухгалтерии, ассортименте, директ-маркетинге, эвент-маркетинге и контенте (я бы даже ввел новое определение контент-маркетинг).

Даже руководители с опытом, когда возникает вопрос “а чтобы нам сделать сайтом, чтобы заказов стало больше” в первую очередь задумываются о юзабилити и дизайне, забывая о том, что покупатель приходит в магазин за товаром; а заказ делает, только получив необходимую ему информацию, а вовсе не за тем, чтобы супер-удобно в 5 сек. сделать заказ или порадоваться красивому “уникальному” дизайну и другим дизайнерским приблудам.

Статистика многих магазинов показывает, что раз уж собравшись покупать (а значит, принял твердое решение) клиент будет преодолевать проблемы, возникающие во время оформления заказа. Попытки 3-4 он сделает (не считая обязательной регистрации).

Что же в интернет-магазине играет наиболее важную роль: юзабилити, дизайн, работа с клиентами или менеджмент? (под менеджментом я понимаю логистику, бухгалетрию, товарооборот, персонал и другие факторы напрямую влияющие на качество работы компании)

Начать хочу с напоминания: интернет-магазин – это в меньше степени сайт, а в большей степени то, что твориться в офисе компании. Но почему я начинаю так издалека? Потому что хочу дать вам понять, откуда растет корень всех проблем и удач, так сказать начать с истоков, чтобы понять суть вопроса максимально эффективно.

Сайт или компания – курица или яйцо – что первее?

Чтобы узнать насколько удобен сайт или другой программный продукт для пользователей, надо спросить об этом у них самих. Но считается, что тестирование на «на живых людях» отнимает много сил и времени у разработчика и/или владельца ресурса.

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

В этой статье представлен обзор десяти простых и доступных инструментов для юзабилити-тестирования сайтов. Что приятно, всеми описанными приложениями, за исключением последнего, можно воспользоваться бесплатно: они вообще не требуют оплаты или имеют бесплатные версии с ограниченным функционалом.

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

В странах СНГ не менее 75-80% заказов приходятся на cash-and-delivery (оплата заказа при доставке). Это отличие российского и западного потребителя легло в основу редизайна оформления заказа Сотмаркета еще в 2012 году. Тогда впервые в России интернет-магазин перестал требовать авторизации или регистрации клиента перед совершением покупки.

Фоновая регистрация и авторизация пользователей

Хотя авторизация на последнем шаге покупки и не несет никакой ценности для пользователя, это западное клише глубоко укоренилась в Рунете. Со средней частотой покупки (техники) раз в 9-10 месяцев люди зачастую не запоминают регистрационных данных: эл. почты, логина, пароля. Парадокс в том, что большинство интернет-магазинов с готовностью принимают заказы по телефону, но при этом создают искусственные препятствия при совершении покупке онлайн.

Это наблюдение легло в основу концепции фоновой регистрации и авторизации пользователей.

Здравствуйте, друзья. За последний месяц я экспериментировал с псевдо-элементами, особенно, с их использованием в создании кнопок. Таким образом, удалось создать крутые эффекты, которые раньше можно было сделать только со спрайтами.

В этом уроке я покажу как создать кнопку с изюминкой, используя только якорный тег и мощь CSS.

Введение

Уважаемый читатель, эта статья является второй частью цикла статей, посвященных вёрстке.

В первой части мы верстали шаблон Corporate Blue от студии Pcklaboratory с помощью стандартных средств на чистом HTML и CSS. В данной статье мы попробуем сверстать этот же шаблон, но с помощью CSS фреймворка Bootstrap 3.

Еще в 2009 году, Сергей Чикуёнок опубликовал статью, в которой представил новый способ написания HTML и CSS кода. Этот революционный плагин, назывался Zen Coding, он помогал многим разработчикам на протяжении многих лет и в настоящее время вышлел на новый уровень.

Emmet, ранее известный как Zen Coding, является самым производительным и экономным во времени плагином для текстового редактора. Простые сокращения мгновенно расширяются в сложные фрагменты кода, Emmet превратит вас в более продуктивного разработчика.

Для тех, кто предпочитает смотреть, а не читать, вот видео любимых трюков автора.

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

Не претендуя на библию или «настольную статью программиста» я хочу поделиться полезными находками в моей любимой IDE, не скатываясь в тупую копипасту мануалов и скучных списков хоткеев, только то, что я сам использую постоянно и над чем удивляются коллеги: «о! а так можно?»

Хотите слушать свою музыку за завтраком, а не только то, что ловит ваш приемник? Устроить это довольно легко. Logitech Squeezebox Radio — отличная замена кухонному радио, которая способна самостоятельно воспроизводить любые интернет-радиостанции, а также ваш собственный плейлист при наличии медиасервера. Несмотря на то, что устройство уже год как в продаже за рубежом, в России оно до сих пор не представлено. Тем не менее, мы всё-таки решили рассказать о нём аудитории Хабра, ведь заказать любой товар из зарубежного интернет-магазина сегодня не представляет никакой сложности.

Вместе с WEB движущимся семимильными шагами (адаптивным дизайном, CSS препроцессорами, постпроцессорами и другими вещами) может оказаться проблемой попытка не отставать от чего-то нового и полезного.
Ниже Вы найдете 14 инструментов, 7 для веб-дизайнеров и 7 для веб-разработчиков, которые помогут веб-сайту перерасти из концепции в действительность.

В наше время для различных сайтов нормой стали всевозможные всплывающие модальные окна — popup'ы — для регистрации, авторизации, информационные окна, — всевозможных форм и размеров. Также существует огромное количество плагинов к тому же jQuery для простого и удобного создания таких попапов — тот же Shadowbox, например.

Чуть меньше года назад Snickersmix публиковал статью "Меню с плавной инверсией цвета". В данной статье описывается меню, сделанное на JavaScript. Днём ранее он мне показывал сайт, на котором он делал это меню, и я, как поклонник NoScript, возмутился: «Это меню можно сделать на CSS!»



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

Итак, предлагаю реализацию похожего меню на CSS3.

Чтобы сразу ты, уважаемый читатель, увидел отличия приведу финальную демку меню на CSS3 и демку меню от Snickersmix на JS

Теперь постараюсь вкратце рассказать про процесс создания