Заметки за июль 2011 года

Тень у полей ввода в мобильном Safari

У всех полей ввода в мобильном Safari на iPhone и iPad есть легкая внутренняя тень. Если это поле как-то особенно декорируется, то тень может помешать нормальному отображению. Убрать её можно, назначив фоном не сплошной цвет или текстуру, а градиент.

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .search {
        /* remove inner shadow on iOS input */
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(hsla(0,0%,100%,0)), to(hsla(0,0%,100%,0)));
        background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0));
    }
}

Параметры подбираются в зависимости от контекста.

Так как эта тень никак не проявляет себя в настольных браузерах, то правила для неё фильтруем с помощью media queries и префиксов только для мобильных устройств.

Очень простое решение

Роман Комаров подсказал, что эту тень можно убрать более простым способом

.search {
    -webkit-appearance: none;
}
Комментарии к заметке: 2

Таблица без таблицы или display: table-cell для всех браузеров

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

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

.table {
    display: table;
}
.table-row {
    display: table-row;
}
.table-cell {
    display: table-cell;
}

Разметка, например, может быть такой:

<div class="table">
    <ul class="table-row">
        <li class="table-cell">Ячейка 1</li>
        <li class="table-cell">Ячейка 2</li>
        <li class="table-cell">Ячейка 3</li>
    </ul>
</div>

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

.table, .table-row, .table-cell {
    display: block;
    float: left;
}
.table-cell {
    clear: right;
    zoom: 1;
}
.table {
    overflow: hidden;
    position: relative;
}

Комбинация float: left; и clear: right; заставляет следующий блок намертво прилипнуть к предыдущему, образовывая ячейки нашей таблицы. Можно использовать прибивку в другую сторону, если нужен обратный порядок элементов.

Комментарии к заметке: 9

Закомментировать HTML

Чтобы закомментировать кусок HTML нужно обрамить его последовательностью <!-- с одной стороны и --> с другой.

<!-- <p>Эта строка не разбирается и не отображается</p> -->

В HTML нет разделения на строчный и блочный комментарий как, например, во многих языках программирования. Все комментарии являются блочными.

Оставте свой комментарий

Я.Субботник в Екатеринбурге

2 июля 2011 года состоялся очередной Я.Субботник. Местом его проведения выбран г. Екатеринбург, отель «Московская горка». Найти его по карте не составило труда, и я вместе с ребятами из «Стратегии Роста» без заминок добрались до него.

Мой бедж на Яндекс.Субботнике

На приветственном кофе мы встретились с Катей Черно (JetStyle) и Олегом Моховым (Яндекс), с которыми познакомились на UWDC-2011. Пока мы перекусывали эклерами к нашей компании подошли ещё ребята из Челябинска. Сделали групповое фото

Веб-разработчики из Челябинска на Яндекс.Субботнике в Екатеринбурге 2 июля 2011 года

Программа Я.Субботника в Екатеринбурге. Расскажу вкратце о впечатлениях от особо понравившихся докладов.

Как мы оцениваем качество поиска

Доклады начались с выступления Яны Нехорошевой об асессорах. Я, к своему стыду, ничего раньше не знал об этой службе Яндекса. Оказалось, что целый штат экспертов, которые оценивают поисковую выдачу на реальных запросах пользователей. В основном (90%) там работают женщины.

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

БЭМ, или как разрабатывать веб-проекты

Сергей Бережной (на сцене) и Виталий Харисов (в твиттере) рассказывали и отвечали на вопросы о технологии «Блок-Элемент-Модификатор». Сергей на слайдах показал пример простой страницы сделанной обычным способом в текстовом редакторе и генерацию аналогичной страницы из отдельных блоков.

Безусловно, у этой методики разработки есть свои плюсы. Они явно проявляются на больших проектах в больших командах. Для команд, работающих с классическими шаблонизаторами, и не привыкшими к процедурам «сборки» проекта, внедрение этой методики может быть проблематично.

Ребята активно отвечали на вопросы из твиттера по хеш тегу #bem или #бэм.

Куда идём мы с Пятачком, или о том, куда движется вёрстка и верстальщики Яндекса

Олег Мохов в своем докладе подтвердил, что Яндекс уже активно внедряет современные технологии верстки в своих проектах. Тестируется производительность и совместимость новых CSS3-свойств. Сейчас перед разработчиками Яндекса уже не ставится задача сделать идентичное макету отображение в старых браузерах. Вся разработка ориентирована на перспективу. Почти все проекты уже сейчас тестируются на touch-устройствах, хотя изначально такой задачи перед разработчиками не ставится.

Масштабируемые JavaScript-приложения

Михаил Давыдов рассказывал о проекте «Чат». Очень подробно прошелся по архитектуре приложения. Основной мыслью, мне показалось, стало то, что в масштабируемое приложение нужно строить на основе независимых модулей и связывать их через события с ядром приложения. Чем меньше будет зависимостей друг от друга у них, тем легче будет перейти с одного фреймворка на другой или внести изменения в API какого-то отдельного модуля.

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

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

HTML5 в Я.Почте

Очень впечатлила работа с применением WebSocket, localStorage и Cross-server XRH, о которой рассказывал Алексей Андросов. Эти технологии реально использовать уже сейчас для упрощения коммуникации между браузером и сервером, а так же ускорения загрузки статических ресурсов сайта.

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

Лично мне очень захотелось поэкспериментировать в этом направлении тоже.

Нагрузки в спорте высоких достижений. Как Python стал делать погоду в Яндексе. Python в инфраструктуре поиска

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

Кластеризация дубликатов в Яндекс.Картинках

Отслеживание дублей в картинках — это очень важная задача, о чем и поведал на Александр Крайнов.

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

Офлайн-поиск на основе MapReduce

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

Роботы и люди в Twitter-е

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

Заключение

Мне очень понравилась организация мероприятия в целом. Огромная благодарность всем, кто принимал в этом участие. Особое «мерси» хочется сказать Леночке Джетпыспаевой и Павлу Браславскому.

PS: Заметил интересные моменты. На слайдах у докладчиков редко у кого был указан твиттер-аккаунт (хотя, как выяснялось потом, он у них есть). Так же мало кто обменивается визитками. Вот такие вот тенденции.

Оставте свой комментарий