Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (Stephen Shaw) для Smashing Magazine — Absolute Horizontal And Vertical Centering In CSS.

Все мы знали о margin: 0 auto; для горизонтального центрирования, но margin: auto; не работало для вертикального. Это можно легко исправить, просто задав высоту и применив следующие стили:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Я не первый, кто предложил это решение, однако такой подход редко применяется при вертикальном выравнивании. В комментариях к статье How to Center Anything With CSS Simon ссылается на пример jsFiddle, где приводится отличное решение для вертикального центрирования. Вот еще несколько источников на эту тему.

Рассмотрим способ поближе.

21 сентября, при активной поддержке портала Айти-Событие.рф, Digital October примет на своей площадке BitByte — ежегодный фестиваль профессионального развития в IT-сфере. Фестиваль соберет гуру и новичков IT-сферы, предоставив им все условия для технического и карьерного «апгрейда».

Перевод отличной статейки. Думаю, будет полезна как новичкам, которые только приступили к использованию jQuery, так и тем, кто уже какое-то время с ним работает. А кого-то, возможно, заставит глянуть эту чудесную библиотечку. Многие советы имеют отношение не только к jQuery, но и к JavaScript в целом. Лично для меня была весьма и весьма познавательной, посему и захотелось донести это «до масс». Перевод не дословный, но передающий смысл и максимально адаптированный к русскому языку.

Далее все написано от имени автора оригинальной статьи.

Введение

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

Я не эксперт в jQuery. И даже не претендую, поэтому, если встретите ошибки, смело поправляйте меня и вносите предложения по улучшению (поправлять и присылать поправки нужно автору статьи, а не перевода — зам. пер.).

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

Содержание

1. Загружайте фреймворк с Google Code
2. Используйте «шпаргалку» (cheat sheet)
3. Соединяйте все ваши скрипты и уменьшайте размер файла
4. Используйте возможности Firebug для ведения логов
5. Минимизируйте операции выборки в пользу кэширования
6. Сводите манипуляции с DOM-деревом к минимуму
7. Оборачивайте все в единый элемент, когда речь идет о любой вставке в DOM
8. Используйте «id» вместо классов, где это возможно
9. Задайте контекст своим селекторам
10. Используйте последовательности вызовов методов с умом
11. Научитесь правильно использовать анимацию
12. Научитесь назначать и делегировать события
13. Используйте классы для сохранения состояния
14. Еще лучше — используйте встроенный в jQuery метод data() для сохранения состояния
15. Пишите собственные селекторы
16. Подготавливайте HTML и модифицируйте его, когда страница загружена
17. Используйте «отложенную загрузку» (lazy loading) для определенного контента для выигрыша в общей скорости и преимуществ для SEO
18. Используйте служебные функции jQuery
19. Используйте «noconflict» для переименования глобального объекта «jquery», когда используете его с другими фреймворками
20. Как узнать что картинки загружены?
21. Всегда используйте последнюю версию
22. Как проверить, что элемент существует?
23. Добавляйте класс «JS» в элемент «html»
24. Возвращайте «false» для отмены поведения по-умолчанию
25. Короткая запись для события готовности документа

Присылает нам заказчик (Газпром) свою версию договора.
Понимаем — нашу они не подпишут,
вносим реквизиты и отправляем обратно.
Пропадают на две недели… возвращают протокол разногласий к договору.

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

Во время создания front-end составляющей веб приложения, часто приходится сталкиваться с созданием так называемых hover-эффектов. Когда при наведении указателя мыши на DOM элемент меняется цвет ссылки, размер текста или иконка у пункта меню. С такой технологией, как CSS3 Transition, появилась возможность применять анимационные эффекты для DOM-элементов, без использования javascript-кода. Меня эта возможность сразу заинтересовала и я стал применять ее, без лишних усилий создавая плавные переходы.

Годами я использовал Chrome DevTools, Firebug и даже Opera Dragonfly для отладки, трасировки и профилирования моего JavaScript кода. Замечу, что использовал эти замечательные инструменты не только для работы с JavaScript, но и для отслеживания событий сети, отладки CSS, работы с DOM.

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

Меня всегда занимал вопрос, как создаются компании и организации, как образуются те центры самоорганизации, на которые осаждаются сотрудники и ресурсы из совсем даже не насыщенного «раствора» внешней среды.

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

Как же все-таки работает HTTPS? Это вопрос, над которым я бился несколько дней в своем рабочем проекте.

Будучи Web-разработчиком, я понимал, что использование HTTPS для защиты пользовательских данных – это очень и очень хорошая идея, но у меня никогда не было кристального понимания, как HTTPS на самом деле устроен.

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

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



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

На Хабре уже был пост о Технопарке, и даже рассказы о курсах (1, 2), которые в нем проходят. Сегодня мы публикуем первую часть мастер-класса, который для студентов Технопарка провел Андрей Андрианов из ABBYY.

Для начала не лишним будет вспомнить, что такое морфология, а также какое отношение она имеет к лингвистике. За этим предлагаю пройти под кат к содержимому первого поста серии.

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

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

Предлагаю вашему вниманию тестовое задание, которое я уже довольно давно даю кандидатам в компании, где я работаю:

На экране есть сетка M на N из цветных квадратиков. Нужно реализовать на этой сетке следующий эффект — по клику слева направо со скоростью V пробегает волна, меняя цвет квадратиков на другой (единый для всей волны). Эффект должен работать при любых значениях M, N, V. Волна начинается всегда у левой стенки. Одновременно может идти несколько волн разного цвета.
Анимационный пример: http://dl.dropbox.com/u/3601116/wave.swf (покликать по флэшке).

Я не сомневаюсь, что это задание с легкостью сделают все программисты посетители Хабра.

А у меня получилась следующая статистика:

1. В итоге, задание взяли чуть больше 20 человек.
2. Пара человек ничего не сделали.
3. Половина из оставшихся (по моим критериям) с ним не справились.
4. Кандидаты четко разделились на весьма интересные группы.

Подумайте немного, как бы вы выполнили это задание, и заходите под кат, где я расскажу обо всем подробнее.

Перевод статьи Криса Койера (Chris Coyier) с CSS-Tricks.com "Search with Filters Responsive Design Pattern".

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

Brad Frost даже собрал очень хорошую коллекцию адаптивных паттернов, очень полезно. Еще один пример, форма поиска с фильтром результатов. На десктопе места много:

В хабратопике Фотографии рабочих мест хабражителей и… был один интересный комментарий от хабрапользователя hermit931

… Ах да — у меня не совсем доска, а из старого окна рама со стеклом ) разница не большая, только в весе :)

И в мозге сразу возникла мысль: «Зачем я выкинул старые деревянные окна при ремонте квартиры !» Мозг продолжил выдавать мысли: «Как сделать маркерную доску с наименьшими денежными затратами и наибольшей долговечностью и эффективностью».

Я поделился идеей с коллегой. Через пять минут спрашиваю: «Что ты думаешь о том, чтобы сделать маркерную доску». Как выяснилось, он за эти пять минут уже перечетал все хабратопики по этому поводу (параллельно этим занимался и я).

Мы с коллегой проанализировали все хабратопики по изготовлению маркерных досок своими руками и разделили их на две группы:

1) Маркерные доски по технологии: подложка + цветной фон + стекло

Контрастная и долговечная маркерная доска
Идеальная маркерная доска
Маркерная доска своими руками

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

2) Маркерные доски с применением самоклеящейся пленки или скотча на белой бумаге

Бюджетная маркерная доска
Маркерная доска

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

Хотелось совместить прочность первой группы и дешевизну второй. Кому интересно, что у нас получилось — прошу под кат.

Уже три года я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-май 2013.

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

Задача

ВОШ — эффект, возникающий при стилизации текста подключаемым шрифтом, не установленным на компьютере пользователя. Проявляется, когда подключаемый шрифт ещё не успел скачаться, и стилизуемый текст отображается следующим шрифтом из значения свойства font-family этого элемента. Такое переключение шрифтов также может повлиять на размеры элемента, если они зависят от размеров текста в нём.
Эффект известен также как FOUT — так его назвал Пол Айриш.

При общих моментах, есть и особенности. Например, в Файрфоксе текст, который нужно будет отрисовать нестандартным шрифтом, в течение 3 секунд не отображается, в Хроме тоже есть подобная задержка. Если шрифт успеет скачаться за это время, текст отобразится сразу нужным шрифтом.

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

Хай, Хабр!
Сегодня я хочу представить, дорогому хабрасообществу свой первый хабраперевод. Программировать на языке Python — подобно песне. Но еще лучше, когда Ваш код читаем и понятен, а значит чуть более поэтичен, чем обычно бывает производстве. У каждого свои правила и свои стереотипы относительно написания и оформления исходного кода, на каком бы языке он ни был написан. Множество копий сломано о щиты на форумах, но, как ни крути, нельзя не считаться с мнением авторитетных товарищей. Так что сейчас будет представлен перевод первой части стайл-гайда для языка Python от Google. Коснется он именно постулатов написания кода (вторая часть тоже скоро появится, а посвящена она будет форматированию исходного кода). Сразу предупреждаю: тут много (если не большая часть) прописных истин, которые все знают уже давно. Но я искренне надеюсь, что Вы сможете найти тут что-то новое или хотя бы вспомнить старое. Приступим под катом. И pdf тут как тут.

За последние месяцы мы подготовили немало инфографики и объединили ее в общую серию под названием «Рунет в картинках». Сегодня мы рады представить Вашему вниманию несколько интересных фактов о российском рынке электронной коммерции.

Под катом — еще одна инфографика «Как россияне делают покупки в Интернете».

Речь идет о необычных учебниках, которые стоят посередине между вузовскими учебниками и чисто научно-популярными брошюрами. Тем не менее между научпопом и такими учебниками есть четкий водораздел — последние нацелены именно на обучение, развлекательные фишки — лишь форма подачи серьезного материала. Общее для всех таких книг, как мне представляется — подача материала в виде комикса и\или в виде диалога двух или больше людей. Обычно два собеседника — ученик и учитель, один постоянно задает вопросы, часто глупые или смешные, второй пытается объяснить в игровой форме.

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

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

В качестве иллюстрации поста приведу обложку другой манги из той же серии, что и книга о статистике:

Конечно подобный пост найдет голосовательное одобрение только в пламенных сердцах ИТ-подрядчиков, и бойцов прифронтовой кибернетической полосы — но думаю опубликовать будет не лишне!

Работаю АйТишником в крупной компании. В общем, все нормально и замечательно. Как-то однажды наше руководство решило идти в ногу со временем и возникли мысли автоматизироваться. Выбирали довольно долго Электронный документооборот, но либо денег жалко было много платить, либо разработчики какие-то липовые, короче, времени заняло все это переговорно-презентационное безобразие предостаточно. В конечном итоге остановились на некотором решении. Продукт адекватный, разработан под Microsoft Sharepoint 2013 Worklite Docs (я в силу некоторых обстоятельств с этой системой хорошо знаком). В общем выбор пал на него.

Мы собрали воедино все наши корпоративные хотелки, заказали, внедрили — запустили. Все нормально, все работает. Но суть не в этом. Это была присказка.