Заметки за 2011 год (страница 3)

Тень у полей ввода в мобильном 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;
}
Комментарии к заметке: 3

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

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

Улучшенный namespace

Для определения модулей и констант приложения на JavaScript я люблю применять функцию аналогичную namespace из библиотеки YUI3 . Она возвращает объект, который соответствует указанному пути или создает новый, если таковой не нашелся. Ценность этой функции в том, что можно не заботиться о том, что какая-то многоуровневая вложенность будет испорчена. Так же она позволяет определять поля в любом порядке.

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


(function (window, undefined) {

    var NS = "APP",
        app = window[NS] = window[NS] || {};

    /**
     * Get or create namespace for module
     * @param    ns        {String}    namespace
     * @param    origin    {Object}    initial object (optional)
     * @return             {Object}   
     */
    app.namespace = app["namespace"] || function (ns, origin) {
        var i, obj = window[NS], nsParts = ns.split('.');
        for (i = (nsParts[0] === NS) ? 1 : 0; i < nsParts.length; i++) {
            obj[nsParts[i]] = obj[nsParts[i]] || (i === nsParts.length - 1 && origin) || {};
            obj = obj[nsParts[i]];
        }
        return obj;
    };

}(window));

Такая функция должна быть объявлена одна из первых, т.к. задает namespace для всего приложения.

Её можно вызывать с одним строковым параметром

APP.namespace("APP.Module1");

или двумя параметрами — строковым и объектом, все поля которого будут перенесены в целевой namespace.

APP.namespace("APP.Module2", {
    method1: function () {
    },
    FIELD: "test"
});

Для названий можно использовать укороченный синтаксис и опускать базовое имя. Так вызовы APP.namespace("Module1") и APP.namespace("APP.Module1") будут эквивалентны.

Такую функцию удобно переносить из проекта в проект. Достаточно поменять только значение константы NS.

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