Продолжение перевода статьи «Проблемы CSS. Часть 1».

Когда использовать width / height равный 100%?

Height: 100%

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

Для ответа на него нужно понять, что height: 100% равен высоте родительского элемента. Это не магическое «высота всего окна». Так что, если вы захотите, чтобы ваш элемент занял все 100% от высоты окна, то установить height: 100% будет недостаточно.

Почему? А потому, что родителем вашего контейнера является элемент body, а у него свойство height установлено в auto по умолчанию; а значит — его высота равна высоте контента. Конечно, вы можете попробовать добавить height: 100% к body, но этого тоже будет недостаточно.

Почему? А все потому же, родителем элемента body является элемент html, у которого также свойство height равно auto и он также растягивается под размер контента. А вот теперь, если добавить height: 100% и к элементу html, то все заработает.

Стало понятнее? Корневой элемент html на самом деле не самый верхней уровень на странице — им является «viewport». Для простоты, будем считать, что это окно браузера. Так вот, если установить height: 100% элементу html, то это то же самое, что сказать — стань такой же высоты, как окно браузера.

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

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

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

«Все просто», или краткий пересказ длинной истории с пропусками некоторых важных фактов и обстоятельств

В какой-то момент мне казалось, что не проходило и дня, чтобы среди тех людей, на которых я подписан, или среди источников, которые я читаю, не проскакивало хоть что-то, что касалось бы «плоского» дизайна. Вбейте в Bing, Google, Yandex слова «flat design» или «плоский дизайн» ― и вы легко найдете огромное количество материалов: от обзоров и примеров, до аналитических и исторических измышлений или просто мыслей вслух (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, ...).

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

Кто-то говорит, что плоский дизайн интерфейсов пришел или, точнее, объявил о себе во всей красе благодаря платформе Windows Phone (и Windows 8) с ее революционными стилистически простыми и даже намеренно упрощенными интерфейсами. Это было ново и свежо на фоне повального увлечения скеуморфными, натуралистичными иконками в мире Apple. Это было интересно и необычно, в каком-то смысле, знаково, потому что как минимум резко и необратимо решил поменяться и обновиться такой большой и, казалось, неповоротливый монстр как Microsoft.

^{Рисунок найден в сети (автор неизвестен) и доработан напильником...}

Большинство портфолио демонстрируют работы, но отнюдь не продают дизайнера и его услуги. С точки зрения далекого от дизайна клиента – они все одинаковые, и при таких условиях выбор идет исключительно через собственную субъективную оценку «нравится / не нравится».

Можно ли как-то повлиять на мнение заказчика? – Да, можно, и даже более того – необходимо!

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

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

Зачастую вроде бы простые задачи верстки требуют сложной структуры HTML-разметки и использования CSS-трюков. Центрирование элементов или выравнивание контента может быть очень утомительным. Одна из таких задач — это выравнивание элементов верхней части сайта так, чтобы логотип был слева, а пункты меню — справа. Можно использовать float и position:absolute, а для выравнивания по вертикали — добавлять margin и padding разным элементам. Вроде бы ничего сложного. Но если сайт должен корректно отображаться и на мобильных устройствах, возникает много проблем.



Ниже описан лаконичный способ решения этой проблемы.

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

Инструменты

Colour Lovers — старый и функциональный инструмент для подбора цветовых схем. Аналоги — Colourcode, Color Scheme Designer и конечно Kuler. Подобных сайтов великое множество, но эти, на мой взгляд, самые удобные.

Мы продолжаем писать про проектирование сайтов и разработку интерфейсов. На этот раз выделили сразу 19 принципов построения интерфейсов. Эти принципы мы по крупицам собирали на протяжении последних 3х лет работы из разных книг, статей, исследований и, конечно, собственного опыта разработки интерфейсов.

Создание интерфейсов в проектировании больших сайтов – это самый объемный и один из самых важных этапов. Поэтому я отдельно решил выделить принципы и законы проектирования интерфейсов.

• Принцип KISS. От англ. «keep it short and simple». Интерфейс должен быть простой и понятный, задачи должны решаться минимальным числом действий, все должно быть понятно и очевидно.
• Не заставляйте думать. Нужно избегать сложных действий, которые заставляют пользователей думать.
• Убираем очевидное. Не стоит показывать очевидные элементы интерфейса, нужно сосредоточиться только на действительно необходимых вещах.
• Соотношение сигнал / шум. В каждом интерфейсе есть важные элементы (сигналы) и маловажные или даже бессмысленные для определенной части системы (шум), естественно, нужно концентрироваться на сигналах и избегать шума.
• Проверенное лучше модного. Не стоит цепляться за моду и делать что-то только потому, что так делают другие, лучше отдать предпочтение проверенным элементам интерфейса.

Как получить должность инженера в Google, не имея высшего образования?
Вот вам небольшая история.

Ничего не предвещало беды, как вдруг в 2 часа ночи раздался телефонный звонок.

— Алло, милый! У меня youtube не работает!
— Прекрасно, иди спать!
— Нууу! Там новая серия вышла!
— Завтра всё сделаю!
— Ну Заяя, нуууу!
— Ладно! Ладно! Сейчас.
…

Из этого поста вы узнаете ответы на следующие вопросы:
Как спасти свою милую от стресса в 2 часа ночи? Как вернуть доступ к youtube.com, если ваш провайдер его заблокировал? Как быстро поднять VPN и настроить клиентские устройства (Android, Windows, Debian, dd-wrt) для работу с ним? Как безопасно серфить интернет на открытых точках доступа? Как заработать карму в глазах своей возлюбленной? Если вам это интересно, добро пожаловать под кат!

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

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

Данный текст был написан моей женой для собственного блога. Мне он показался достаточно интересным и полезным для людей, интересующихся изучением иностранных языков, и я решил опубликовать его здесь, учитывая, что на Хабре таких людей очень много. Почему моя жена решила, что может давать какие-либо советы в этой области? Потому что она окончила иняз, свободно говорит на английском, продолжительное время вела курсы изучения английского языка с разными группами и благодарные ученики не раз положительно отзывались о ней, как о преподавателе, а сейчас она успешно изучает итальянский и уже использует его в своей работе.



Итак, кто заинтересовался — прошу под кат.

Добрый день, уважаемые хабровчане. В данном посте речь пойдет о совместном проекте S. C. Chen и John Schlick под названием PHP Simple HTML DOM Parser (ссылки на sourceforge).

Идея проекта — создать инструмент позволяющий работать с html кодом используя jQuery подобные селекторы. Оригинальная идея принадлежит Jose Solorzano's и реализована для php четвертой версии. Данный же проект является более усовершенствованной версией базирующейся на php5+.

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

Я хочу написать не просто очередной пост «как прикрутить Солр к Друпалу», а серию подробных постов начиная от базовой настройки и заканчивая фасетами.
На основе ваших комментариев и вопросов я готов включить дополнительный материал в очередной пост.

Все мы слышали о 3D графике (далее просто 3D, не путать со способом отображения — голограммами, 3D-мониторами и т.п.), многие прекрасно знают, что такое 3D и с чем его едят. Но, все же, есть и те, кто смутно себе представляет, что кроется под этой короткой аббревиатурой. Статья рассчитана на тех, кто не имеет представления о компьютерной графике. Также будет немного экскурса в историю компьютерной графики (в следующих планируемых частях).
Почему именно 3D? Как нетрудно догадаться, речь идет о 3 Dimension, или о трех измерениях. И не обязательно при этом, чтобы и отображение было в 3D. Речь идет о способе построения картинки.

Поводом для написания этого поста стало столкновение с очередным случаем вопиющего дибилизма на странице оплаты: каптча в форме ввода данных банковской карты на сайте Ассиста.

Я примерно 3 года работал в отрасли электронной коммерции и был напрямую связан с приемом платежей. То что написано ниже — капитанские советы для тех, кто еще не устал бегать по граблям или пока не понял чего хочет (а в действительности НЕ хочет) делать потенциальный клиент. (Фродеры в отличие от потенциальных клиентов любят заполнять огромные формы!) Если вы не согласны, приводите контр-примеры в комментариях. Я и другие читатели будут вам благодарны.

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

Крис Парнин (Chris Parnin) из технологического института Джорджии решил восполнить этот недостаток и опубликовал чрезвычайно насыщенную статью со ссылками на различные исследования по этой теме.

Для начала, несколько фактов, которые относятся ко всем работникам интеллектуального труда. Задача, прерванная по ходу выполнения, занимает в два раза больше времени и содержит вдвое больше ошибок, чем та же задача, которая выполнялась без прерывания (Czerwinski:04). Офисные сотрудники вынуждены отвлекаться при выполнении 57% задач (Mark:05). Опросы говорят о том, что сотруднику требуется в среднем 15 минут, чтобы вернуться в нормальный ритм после того, как его отвлекли (vanSolingen:98).

Скажу сразу, всю DOM-модель мы строить не будем, а лишь рассмотрим ее элементы и как с ними работать при помощи jQuery. Статья рассчитана на начинающих или тех кто хочет вспомнить как можно строить элементы «на лету», надеюсь кому-то это будет полезно.
Большинство веб-разработчиков сталкивается с необходимостью вставить какое-либо содержимое из js, возможно это ajax или событие. Но никто не задумывается о том что с вашим кодом возможно кому-то придется работать. И часто даже в очень известных плагинах можно встретить код такого типа:

var content = "<table>"
for(i=0; i<3; i++){
    content += '<tr><td>' + 'result ' +  i + '</td></tr>';
}
content += "</table>"

$('#table').append(content);

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

По работе мне несколько раз приходилось участвовать в собеседовании кандидатов на должность клиент-сайдера у нас в компании, смотреть на их познания в Javascript. Удивительно что никто из них не знал толком как же работает jQuery изнутри, даже те, кто отметил свои знания jQuery уровнем «отлично», увы.

У jQuery очень низкий порог вхождения, о нем часто пишут и используют всюду, где только можно (и даже там, где, в общем-то, не нужно), поэтому некоторые даже не смотрят на чистый Javascript. Зачем, мол, его знать, когда есть jQuery, а по нему — тонны примеров и готовых плагинов? Даже на Хабре видел статью про рисование на Canvas, где автор подключил jQuery и использовал его только один раз — для того, чтобы получить доступ к Canvas по его идентификатору. И не считал это чем-то ненормальным.

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