Pull to refresh
7
0
Сергей Маковеев @sergeymakoveev

Web-developer

Send message

Кроссбраузерная кастомизация системного скроллбара

Reading time8 min
Views145K


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

Под катом можно узнать, как в ближайшее время будет работать скролл в 2ГИС Онлайн.
Подробности
Total votes 127: ↑116 and ↓11+105
Comments132

Webfonts — разбираемся с антиалиасингом под Windows (UPD)

Reading time6 min
Views71K
Думаю, что не только я, но и другие пользователи Chrome под Windows, на многих сайтах замечали проблемы c отображением нестандартных шрифтов. Читать текст на таких сайтах можно, но глазам больно. Я бы так все это и продолжал терпеть, но на одном из недавних собственных проектов этот вопрос встал буквально ребром. Решил разобраться во всем досконально.

Разница в этих двух фрагментах очевидна. Первый сделан со случайно выбранного сайта adaptive-images, а второй с его локальной копии, в css которой была изменена буквально одна строчка.

(Читавшие первую версию статьи могут сразу перейти к UPD, где приведено работающее альтернативное решение проблемы для Chrome)


И в чем же там дело?
Total votes 78: ↑74 and ↓4+70
Comments35

Полнотекстовый поиск: как это делают в Почте Mail.Ru

Reading time7 min
Views32K
Исторически в Почте Mail.Ru использовался механизм от «большого» Поиска (go.mail.ru); однако для задач поиска по почтовым ящикам такой вариант не был оптимальным ввиду большого потребления ресурсов и относительной сложности в обслуживании. Поиском по почте пользуются около 3% владельцев почтовых ящиков; однако, хотя эта цифра кажется относительно небольшой, ящики этих людей обычно достаточно объемны, и поиск им действительно необходим. Поэтому мы приняли решение написать специализированный поисковый демон, который будет заниматься именно поиском по почте. Основными требованиями к нему стали ограничения по потребляемым ресурсам (размер индекса — не более 3% от размера почтового ящика, среднее потребление оперативной памяти — не более 100 Мб, средняя утилизация CPU — не более 3%) и скорости исполнения запросов (среднее время — не более 200 мс). О том, как он был организован, я расскажу ниже.
Читать дальше →
Total votes 147: ↑129 and ↓18+111
Comments24

Джон Резиг об интернационализации JavaScript-приложений

Reading time6 min
Views13K
Недавно мне пришлось заниматься интернационализацией веб-приложения на Node.js+Express, над которым я сейчас работаю, и, как мне кажется, получилось довольно неплохо (иностранные пользователи очень довольны, и я вижу заметный приток трафика из неанглоязычных стран). Стратегия интернационализации, которую я опишу, не слишком сильно завязана на Node и может подойти любому веб-приложению.

Мне часто приходилось пользоваться многоязычными сайтами или заходить на англоязычные сайты из разных стран мира, так что я хорошо представлял, каким требованиям должна удовлетворять интернационализация:
Читать дальше →
Total votes 51: ↑46 and ↓5+41
Comments19

Кроссбраузерные аксессоры в JavaScript

Reading time4 min
Views6.8K

В своём фреймворке AtomJS я активно использую аксессоры — геттеры и сеттеры:

Foo = atom.Class({
    get bar () {
        return this._bar;
    },
    set bar (bar) {
        this._bar = bar;
    }
});


Я уже описывал теорию, но в топике я расскажу о том, как заставить их работать во всех современных браузерах, а именно — как разрулить ситацию с тем, что Internet Explorer 9 ничего не знает о __defineSetter__ и подобных методах.

Читать дальше →
Total votes 57: ↑50 and ↓7+43
Comments31

Пишем плагин для jQuery

Reading time8 min
Views247K
Эта статья призвана дать представление об основных правилах, подходах, дающих наилучшие результаты, и распространённых ошибках, на которые стоит обратить внимание при разработке плагинов для jQuery.
Читать дальше →
Total votes 171: ↑138 and ↓33+105
Comments67

Магия JavaScript: arguments

Reading time3 min
Views68K
arguments — очень специфическая штука, о которой новички и даже любители знают только то, что это «вроде массив, но какой-то неправильный». На самом деле, у него есть ряд интересных особенностей. Предлагаю в топике пофантазировать на тему TypeHinting, аргументов по-умолчанию и всякого другого.
(function (foo, bar) {
	console.log(typeof arguments); // ?
	
	arguments[0] = 42;
	console.log(foo); // ?
})(10, 20);


А также покажу интересную идею-библиотеку
function test (foo, bar) {
    Args(arguments).defaults(100, 100);

    return [foo, bar];
};

test(      ); // 100, 100
test(15    ); //  15, 100
test(21, 42); //  21,  42

Читать дальше →
Total votes 99: ↑93 and ↓6+87
Comments37

Интерактивная инфографика с анимациями CSS и SVG

Reading time7 min
Views46K
Одной из наименее обсуждаемых функций, все чаще появляющейся в последних браузерах, является поддержка файлов формата SVG. Этот формат характеризуется абсолютной свободой в отображении: легко изменяется в размере, может быть отображен в любом разрешении без потери качества. Во многих случаях SVG весят гораздо меньше, чем, например, PNG или JPG.

image

Но самое клевое свойство SVG, о котором многие разработчики не знают, это то, что этот формат построен на спецификации XML. C помощью этого мы можем манипулировать элементами SVG файла используя технологии вроде CSS или JavaScript, с которыми разработчики уже знакомы.

С правильным применением технологий и современным браузером, разработчики могут создавать впечатляющие анимации и эффекты с помощью SVG. Сегодня мы рассмотрим возможности SVG и создадим интерактивную векторную инфографику, демоверсию которой можно посмотреть здесь.
Читать дальше →
Total votes 47: ↑46 and ↓1+45
Comments18

Умная зарядка Kweller X-1800. Заряжаем никель правильно

Reading time10 min
Views149K
Опять понедельник, и опять что-то интересное у нас на столе в Box Overview! На этот раз — интеллектуальное зарядное устройство для Ni-Mh аккумуляторов типоразмера AAA и AA.
Почему интеллектуальное?

image
В отличие от обычных зарядных устройств, которые продаются задешево китайцами или входят в комплекты типа «10 дешевых аккумуляторов и дешевая зарядка за 2000 рублей», и заряжают «капельным» способом, это зарядное устройство имеет в себе контроллер, в который заложены программы быстрой зарядки аккумуляторов, и некоторые другие фишки — вроде определения емкости и «тренировки» аккумуляторов для восстановления емкости.
Читать дальше →
Total votes 68: ↑61 and ↓7+54
Comments99

В поисках идеального css-фреймворка. Maxmertkit widget manager

Reading time2 min
Views16K

Предыдущий пост с описанием фреймворка maxmertkit получил большой отклик. Фреймворк особенно понравился, почему-то, японцам, но наилучшую конструктивную критику и помощь я получил от хабрасообщества. Теперь к делу.
Нынешние фреймворки, включая мой, имеют модульную структуру. Но все эти модули в некоторой степени являются зависимыми друг от друга. Это плохо. Именно эту проблему я и хочу решить.
Читать дальше →
Total votes 42: ↑37 and ↓5+32
Comments20

В поисках идеального css-фреймворка. Требования, реализация, maxmertkit

Reading time14 min
Views70K


Я обожаю twitter bootstrap. Прост, местами логичен, достаточно красив, подходит для быстрого прототипирования веб-интерфейсов. Но этого оказалось недостаточно. Взяв twitter bootstrap в большой проект, мне пришлось целиком его разобрать и переосмыслить css-фреймворки как боевые единицы в веб-проектах. В результате переосмысления родились требования к любому css-фреймворку, удобному как верстальщику, так и frontent-разработчику.
Требования и реализация
Total votes 208: ↑199 and ↓9+190
Comments135

Отслеживаем «onresize» на элементе

Reading time2 min
Views72K
Достаточно древняя задача отслеживания события изменения размеров произвольного элемента на странице. Актуально при создании модульно-независимой структуры для корректировки размеров и иных сss-атрибутов нужного элемента на странице, в частности блоков с периодической Аякс-подгрузкой (например: новостных). Типично решается через таймирование и периодический опрос размеров элемента. Новый вариант, — не использующий таймирующий опрос.
Читать дальше →
Total votes 18: ↑12 and ↓6+6
Comments23

Шаг за шагом, или Как мы строили свой поиск

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

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

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

Читать дальше →
Total votes 99: ↑88 and ↓11+77
Comments20

Cила CSS поможет тебе принять форму, SVG!

Reading time8 min
Views106K

Нам нужно:
  1. Установить на сайте собственные иконки с помощью SVG.
  2. Они должны управляться с помощью CSS (форма, размер, заливка, эффекты в том числе и их поведение).
  3. Они должны иметь маленький вес и находиться в одном месте для экономии http запросов.
  4. Работать во всех основных современных браузерах.

демо
Читать дальше →
Total votes 50: ↑49 and ↓1+48
Comments29

То, что вам никто не говорил о z-index

Reading time3 min
Views357K

Проблема z-index в том, что многие просто не понимают, как он работает.
Всё, описанное ниже, есть в спецификации W3C. К сожалению, не все её читают.

Описание проблемы:


Итак, пусть у нас есть HTML код, состоящий из 3 элементов.
Каждый из них внутри себя содержит по одному . А каждый , в свою очередь, имеет свой фон: красный, зеленый и синий, соответственно. Плюс ко всему, каждый позиционирован абсолютно левого верхнего края документа таким образом, что он немного перекрывает собой следующий за ним . Первый имеет z-index
, равный 1, у остальных двух z-index не задан.
Читать дальше →
Total votes 112: ↑109 and ↓3+106
Comments30

WebRTC #1 — Знакомимся

Reading time3 min
Views153K


Многие уже слышали о проекте WebRTC, некоторые даже используют его (или пытаются применять в существующих проектах), а кто-то злобно потирает руки, предвкушая постепенную расправу со Skype и Flash.

Погуглив в Хабре (хе-хе) я почему-то не нашел статей, которые углублялись в техническую сторону WebRTC, показывали бы примеры его использования.

Что же, я попытаюсь порадовать вас схемками, кодом. В общем, именно тем, что всем по вкусу. Так пройдем же под кат, мой любимый читатель.
Читать дальше →
Total votes 58: ↑56 and ↓2+54
Comments12

Webshell.io — командная строка для интернета

Reading time1 min
Views13K
Webshell.io предназначен для создания прототипов и мэшапов на основе JavaScript API различных веб-сервисов. Что-то вроде IFTTT, но для программистов. С его помощью можно в интерактивном режиме писать запросы на JavaScript и CoffeeScript к клиентским и серверным API Google, Facebook, Twitter и многих других популярных сайтов и видеть их ответы в консоли, а так же создавать свои приложения, API которых, в свою очередь, будет доступен другим разработчикам. Webshell также поддерживает рендеринг HTML из шаблонов EJS.
Читать дальше →
Total votes 45: ↑40 and ↓5+35
Comments13

IMAP: трудности перехода

Reading time7 min
Views45K

Какие грабли зарыты в IMAP



Уже некоторое время IMAP работает в Почте Mail.Ru в полную силу, и я готов рассказать о том, с какими проблемами мы столкнулись при его запуске. Часть из них была связана с особенностями самого протокола и с его историей, другие были обусловлены спецификой взаимодействия IMAP с нашим хранилищем. Отдельная категория трудностей вызвана многообразием почтовых клиентов.

За подробностями — добро пожаловать под кат.
Читать дальше →
Total votes 53: ↑49 and ↓4+45
Comments56

Силовые тренировки: раскатываем HTTPS под высокими нагрузками

Reading time6 min
Views17K
В сентябре Почта Mail.Ru включила HTTPS-шифрование для всех пользователей.

Преимущества защищенного соединения очевидны всем разработчикам крупных интернет-проектов. Большинство современных web-серверов (nginx, Apache, etc) и браузеров поддерживают HTTPS. В то же время сайтов, на которых безопасный протокол включен всегда и по умолчанию, не так много. Почему это так? С какими трудностями мы столкнулись при поддержке HTTPS? Читайте под катом.
Читать дальше →
Total votes 49: ↑42 and ↓7+35
Comments33

Information

Rating
Does not participate
Location
Пенза, Пензенская обл., Россия
Date of birth
Registered
Activity

Specialization

Specialist
Lead
From 350,000 ₽
TypeScript
React
JavaScript