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

Web-developer

Send message

Bootstrap-wysiwyg: крошечный текстовый редактор

Reading time2 min
Views105K



Текстовый редактор bootstrap-wysiwyg — это всего 1.5 Кб в минифицированном и сжатом виде и чуть больше 6 Кб исходного кода, базовые функции редактирования на основе execCommand, drag-and-drop для вставки изображений, поддержка стандартных горячих клавиш и ничего лишнего. Редактор работает в современных браузерах (Chrome 26, Firefox 19, Safari 6) и на мобильных платформах (IOS 6 iPad/iPhone, Android 4.1.1 Chrome). Зависимости — jQuery, jQuery HotKeys и Bootstrap.
Читать дальше →

Веб-чат от Mozilla на JavaScript

Reading time1 min
Views23K
Фонд Mozilla из недр своей тестовой лаборатории выкатил новую возможность Tow Truck в альфа-версии, который представляет из себя интегрированный прямо в веб-страницу чат, который практически не требует от разработчика поддержки — при этом присутствуют возможности обмена текстовыми сообщениями и голосом, а также разделения контента страницы в реальном времени.

Схема работы следующая — на страницу требуется добавить JS-библиотеку:



и кнопку для включения работы TowTruck примерно так:.

Start TowTruck

Узнать подробности

Академия для веб-мастеров выходит на международную арену

Reading time1 min
Views10K
Уровень подготовки веб-мастера: любой

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

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

Google для веб-мастеров

Читать дальше →

Использование Selenium WebDriver для автоматического тестирования веб-интерфейса Яндекс.Почты

Reading time2 min
Views149K
Без качественного тестирования невозможно разрабатывать и поддерживать крупный веб-сервис. На ранних этапах его развития часто можно обходиться только ручным тестированием по заданному тест-плану, но с появлением новых фич и увеличением количества тест-кейсов довольствоваться только им становится все сложнее и сложнее. В этой статье мы расскажем о том, как автоматизируем функциональное тестирование веб-интерфейса Яндекс.Почты с помощью Selenium WebDriver и Node.js.

Selenium
Читать дальше →

Вертикальная черта, затем ноль

Reading time3 min
Views41K
Заголовок, выраженный словами, понадобился только для поисковой находимости. Но речь пойдёт о роли символьной конструкции «|0» в JavaScript.

Впервые на неё я обратил внимание, когда переводил FAQ про asm.js и читал спецификации этого подмножества языка JavaScript. Там «|0» служит, например, для указания типа значения, возвращаемого из функции: увидели «|0» после значения — значит, перед нами знаковое целое.

Вдругорядь я заметил конструкцию «|0» в примере кода на Гитхабе, где происходило преобразование к целому числу результата деления на 1024².

Тогда глаза мои открылись, и я увидел прекрасные возможности:

( 3|0 ) === 3;       // целые числа не изменяет
( 3.3|0 ) === 3;     // у дробных чисел отбрасывает дробную часть
( 3.8|0 ) === 3;     // не округляет, а именно отбрасывает дробную часть
( -3.3|0 ) === -3;   // в том числе и у отрицательных дробных чисел
( -3.8|0 ) === -3;   // у которых Math.floor(-3.3) == Math.floor(-3.8) == -4
( "3"|0 ) === 3;     // строки с числами преобразуются к целым числам
( "3.8"|0 ) === 3;   // при этом опять же отбрасывается дробная часть
( "-3.8"|0 ) === -3; // в том числе и у отрицательных дробных чисел
( NaN|0 ) === 0;     // NaN приводится к нулю
( Infinity|0 ) === 0;     // приведение к нулю происходит и с бесконечностью,
( -Infinity|0 ) === 0;    // и с минус бесконечностью,
( null|0 ) === 0;         // и с null,
( (void 0)|0 ) === 0;     // и с undefined,
( []|0 ) === 0;           // и с пустым массивом,
( [3]|0 ) === 3;          // но массив с одним числом приводится к числу,
( [-3.8]|0 ) === -3;      // в том числе с отбрасыванием дробной части,
( [" -3.8 "]|0 ) === -3;  // и в том числе с извлечением чисел из строк,
( [-3.8, 22]|0 ) === 0    // но массив с несколькими числами вновь зануляется
( {}|0 ) === 0;                // к нулю также приводится пустой объект
( {'2':'3'}|0 ) === 0;         // или не пустой
( (function(){})|0 ) === 0;    // к нулю также приводится пустая функция
( (function(){ return 3;})|0 ) === 0;    // или не пустая

Итак, во-первых, перед нами удобное средство отбрасывания дробной части.

  • По отношению к отрицательным числам оно полезно тем, что дробное число превращается не в ближайшее меньшее целое число (возрастая по модулю), как это случилось бы после «Math.floor()», а в ближайшее меньшее по модулю целое число (возрастая по значению). Нередко именно это и требуется.
     
  • По отношению к положительным числам оно полезно уж тем одним, что конструкция «|0» более чем на порядок короче по сравнению с «Math.floor()». Поэтому она может и должна вызывать у разработчиков привыкание не меньшее, чем та принятая в jQuery запись «$()», о которой я говорил четыре дня назад, что с неё никто добровольно не перейдёт обратно на «document.getElementsByClassName()», например.

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

Читать дальше →

Баг с position:fixed и backface-visibility в Firefox

Reading time1 min
Views13K
В процессе верстки очередного проекта наткнулся на странный баг в Firefox свежих версий, которые поддерживают свойство backface-visibility. Ранее описание этой проблемы не встречал, поэтому решил поделиться. Полезно будет всем, кто прочел этот пост об антиалиасинге под Windows и начал использовать эти советы.
Читать дальше →

Загадка выпадающего списка «Амазона»

Reading time2 min
Views192K
Бен Кэменс обнаружил, что в выпадающем списке Shop by Department на сайте «Амазон» ховер-эффект происходит очень быстро, абсолютно без какой-либо задержки. Тем самым происходит нарушение старого, выработанного ещё в 90-х годах прошлого века правила: перед отображением пункта подменю необходим так называемый гистерезис, запаздывание.



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

Google поставил редирект с Picasa Web Albums на Google+ Photos

Reading time2 min
Views28K


Корпорация Google, как и некоторые другие компании, уже долгое время избавляется от непрофильных/непопулярных среди пользователей активов. В эти «балластные» активы попадают некогда очень популярные сервисы, бывшие у всех на слуху. Например, Picasa. Пользователей Picasa Web Albums сейчас стараются перевести на аналогичный функционал в Google+.

Читать дальше →

Зачем Google добавляет while(1); к своим JSON-ответам?

Reading time2 min
Views68K
Это позволяет избежать CSRF/XSRF-атак (подделки межсайтовых запросов).

Рассмотрим следующий пример: допустим у Google есть URL вида gmail.com/json?action=inbox, который возвращает 50 первых сообщений вашего почтового ящика в формате JSON. Злоумышленник, чей сайт находятся на другом домене, не может выполнить AJAX запрос, обратившись по данному URL, чтобы получить данные, ввиду same origin policy (правило ограничения домена). Но ничто не мешает злоумышленнику включить вышеуказанный URL на свою страницу с помощью тега .
Читать дальше →

Многопользовательский видео чат

Reading time2 min
Views37K
Недавно столкнулся с несколькими интересными проектами: jssip, node-webkit. Весьма кстати родилась свежая оригинальная тост идея. Так как для ее реализации достаточно лишь соединить готовые компоненты, оперативно написал небольшое кросс-платформенное приложение, исходники открыл. Вот что получилось:



Скачать можно здесь. В статье раскрою некоторые детали.
Читать дальше →

5 секретов хорошего интерфейса. Личный опыт

Reading time18 min
Views32K
Последние несколько лет я плотно занимаюсь разработкой интерфейсов для разнообразнейших устройств – от банальных смартфонов и планшетов, до приложений под smartTV и некоторых эзотерических устройств вроде приставок для трансляции музыки через телевизор.


Один из упоминаемых в статье интерфейсов

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

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

Я люблю читать про интерфейсы.

Полезные техники HTML, CSS и JavaScript

Reading time8 min
Views101K
Техника – это способ справиться с заданием, и у нас, разработчиков и дизайнеров фронтэнда, этих способов бывает достаточно много. При это, будучи погруженными в рутинную работу, мы порой не всегда замечаем как стремительно меняется окружающая нас сфера. В период с 2002 по 2010 годы сообщество фронтэнд-разработчиков буквально покрывалось язвами избыточного кода и ресурсов, от которых страдали и работа сайтов, и удобство их использования. Чтобы с этим справиться, мы придумали уйму хаков, трюков и уловок под кодовым названием «техника». Мы по-прежнему продолжаем выполнять поставленные перед нами задания, просто используем не самые эффективные способы.



Оборачиваясь назад, отметим, что в последние несколько лет установились новые, лучшие, стандарты и способы их применения, позволяя нам создавать более продвинутые «техники». Этот новый мир, открытый перед нами, называется «modern web». Web 2.0, которым восхищались в свое время, сегодня для нас стал запутанным и застойным. С одной стороны нет сомнений в том, что подобная судьба постигнет и то, что мы называем «modern web». С другой — пока что мы можем использовать этот термин и злоупотреблять им сколько угодно, пока понимаем, что он означает.



В 2010 появился стандарт HTML5, обеспечивающий совершенно новую, полустандартизованную веб-среду. Такие браузеры, как Opera, Firefox, Chrome и Safari приняли нововведения, и их разработчики вышли за пределы реализации стандартов и изучения интерфейса программирования приложений. Чтобы представить себе, насколько автономны эти браузеры, можно ознакомиться с отличной наглядной демонстрацией поддержки HTML5 на www.html5readiness.com.
Читать дальше →

Как мы используем Trello и Google Docs, чтобы постоянно улучшать работу UserVoice

Reading time12 min
Views120K


Прошлой осенью, вернувшись из отпуска, я обнаружил, что Дехана, наш Product Manager в UserVoice, заменила мой любимый «Roadmap» в Google Docs на доску Trello.

Моя первоначальная реакция на такие перемены была отнюдь не положительной. Проблема заключалась не в самом Trello, а в том, как мы им пользовались. Trello – это ОЧЕНЬ открытый проект. Не существует единственного “правильного” способа работы в Trello, поэтому, чтобы чувствовать себя в нем как дома, вам потребуется время для настройки «под себя».

Итак, после долгих экспериментов, нам, кажется, удалось получить полностью устраивающую нас систему работы, и мы решили, что стоит поделиться ею со всеми. Этот пост будет длиннее, чем обычно, и если вы далеки от темы веб-разработки, он может показаться вам немного скучным. Если вы решите сразу перейти к части поста, посвящённой полученным урокам, я, несомненно, расстроюсь, но обижаться не стану.
Читать дальше →

Кастомизация input type=”file” с помощью CSS

Reading time2 min
Views65K
Есть несколько способов кастомизации (изменения внешнего вида) инпутов такого типа. Все они обладают своими плюсами и минусами, но, на мой взгляд, предложенный мною вариант, выигрывает даже со своими минусами, коих всего один.
Читать дальше →

Произвольный вид поля file в html-форме, одинаковый во всех браузерах

Reading time2 min
Views79K
Не смотря на развитие, внедрение новых стандартов и плюшек в браузерах, у нет единых стандартов, как отображать элемент /> по умолчанию. Более того, у этого элемента нет атрибутов, позволяющих его в какой-то мере стилизовать.
Из-за необходимости привести это поле формы к единому виду во всех браузерах и «вписать» в разработанный дизайн, после поисков и анализа материалов в интернете был разработан метод замены вида поля формы на html+css, и js для расширения функциональности.

Как по умолчанию выглядит это поле?

Читать дальше →

Selenium 2.0 — WebDriver. Впечатления, проблемы и советы по использованию

Reading time13 min
Views35K

Введение


Последние три месяца мне пришлось работать с Selenium 2.0 (WebDriver).
В данной статье я опишу свои впечатления, мысли и опыт, который я приобрел.
Так же я опишу основные действия, которые чаще всего вызывают проблемы и покажу наиболее удачные решения, которые я смог реализовать для них. Возможно есть более правильные подходы — буду рад если оставите их в комментариях.
Читать дальше →

Пример — часы на СSS3 без изображений и JavaScript

Reading time9 min
Views92K


Это статья о том, как был сделан демонстрационный пример Wall Clock in Pure CSS3. Изначально, я предполагал написать данную статью в виде пошагового учебного пособия, но в процессе я понял, что такой пример мало для этого подходит. Потому я решил остановиться только на деталях, которые, на мой взгляд, наиболее интересны, а реализацию остального можно посмотреть и в коде.

Для начала собственно сам пример — на codepen.io или на cssdesk.сom

Читать дальше →

CoffeeScript 1.5.0 позволяет писать комментарии в формате Markdown

Reading time2 min
Views11K
Сегодня, 25 февраля, вышла версия 1.5.0 языка CoffeeScript. В ней впервые появилась базовая поддержка так называемого «грамотного» или «литературного» программирования (literate programming). Концепцию грамотного программирования придумал Дональд Кнут в 1981 году при разработке системы TeX. В отличие от исходного кода на обычном языке программирования, который включает в себя небольшие вкрапления комментариев, грамотное программирование подразумевает написание текстового документа на естественном языке с вкраплениями кода. Многие существующие системы грамотного программирования вообще не зависят от конкретного машинного языка.
Читать дальше →

Инновационный браслет MYO от Thalmic Labs

Reading time1 min
Views194K


Сегодня на выставке Mobile World Congress в Барселоне компания Thalmic Labs представила свою новую разработку — браслет для руки, с помощью которого можно управлять различными электронными устройствами. После просмотра видео кажется, что мы уже попали в будущее, а Leap устарел еще до появления в продаже…
Читать дальше →

Кто есть кто на рынке облачных IDE?

Reading time7 min
Views27K
С момента публикации обзора облачных IDE прошло около двух лет. Хватило ли разработчикам этого времени, чтобы перевести онлайн IDE из категории интересных игрушек в разряд реально используемых в разработке инструментов и сервисов? Однозначный ответ дать сложно. Переворот не совершен, но наступление облачных IDE стало ещё более напористым. Развитие облачной индустрии подстрекает команды новаторов к нестандартным ходам. Кстати, одно из самых распространенных заблуждений — cloud IDE — это обычный редактор в браузере, напичканный всякими довесами и рюшечками. Как раз такие проекты и не имеют шансов стать полноценной заменой оффлайн средам разработки. А вот идея иметь все средства разработки, а также сервисы для запуска, тестирования и развертывания приложений в облаке, весьма и весьма прельщает. А если это ещё и выгодно с точки зрения финансов и времени? Тогда, возможно, стоит задуматься. Ниже представлены небольшие обзоры самых интересных, на мой взгляд, облачных IDE: Cloud9 и Codenvy.
Читать дальше →

Information

Rating
7,964-th
Location
Пенза, Пензенская обл., Россия
Date of birth
Registered
Activity

Specialization

Specialist
Lead
From 350,000 ₽
TypeScript
React
JavaScript