How to become an author
Search
Write a publication
Pull to refresh
15
Karma
2
Rating
Воловиков Владимир @vovs

Пользователь

Send message
Profile Publications 7Comments 51Bookmarks 39

reveal.js: HTML-презентации

Reading time8 min
Views11K
PresentationsOrion Innovation corporate blog

Привет, меня зовут Александр, я старший разработчик ПО в Центре разработки Orion Innovation и я люблю делиться своими мыслями с людьми, разумеется, любимые форматы – статьи на Хабре и доклады на конференциях и митапах. Сложно представить доклад без презентации, о них и хочу поговорить.

Практически 10 лет слова презентация, слайды, PowerPoint(KeyNote) были для меня равносильны. Однажды мне необходимо было продемонстрировать большое количество кода (80 из 100 слайдов содержали код), и моя работа в PowerPoint превратилась в «День сурка»...

[Осторожно: много изображений]

Читать далее
Total votes 12: ↑12 and ↓0+12
Comments5

CAN sniffer

Reading time9 min
Views77K
DIY
Непосредственно сама CAN шина используется уже много где, мне интересно её использование в автомобиле, хотя этой сферой можно и не ограничиваться. Тем более пару лет назад подвернулась такая возможность. Я посмотрел на общие спецификации — вроде бы ничего особо сложного нет. Посмотрел на программы, которые встречаются в интернете — и ни одна мне не приглянулась, у каждой не хватало чего-то такого, что казалось мне нужным на тот момент. Буду изобретать свой велосипед. Делаю свой CAN sniffer далее под катом.
Читать дальше →
Total votes 57: ↑57 and ↓0+57
Comments57

Круглый график на Canvas

Reading time5 min
Views26K
JavaScript*jQuery*HTML*Canvas*Data visualization*
Tutorial

Приветствую!


Совсем недавно для одного проекта мне понадобилось отображать проценты в круглых графиках(?). И как обычно я принялся искать готовое решение в интернете, однако ничего путного найти не удалось (возможно из-за того что я точно не знаю как этот элемент правильно называется). Более-менее то что мне нужно я нашел в библиотеке Knob, но его функционал оказался излишен, т.к изменять значения в графике нет необходимости, помимо этого в библиотеке затесался баг. В итоге пришлось сочинять очередной велосипед.

image
Читать дальше →
Total votes 36: ↑33 and ↓3+30
Comments22

Как сделать кроссплатформенное десктопное приложение на базе веб-технологий

Reading time15 min
Views43K
JavaScript*Конференции Олега Бунина (Онтико) corporate blogNode.JS*WebGL*


Дмитрий Дудин (xbSoftware)


Сегодня я вам расскажу про технологию nw.js, большинство слайдов моей презентации будет посвящено ей. Это технология позволяет разрабатывать десктопные приложения и писать их на html, javascript и css. Причем приложение будет кроссплатформенное — под Windows, Linux и Mac. Можно их сбилдить и они будут иметь доступ к графическому интерфейсу системы, т.е. смогут еще работать с менюшками и т.д.
Total votes 58: ↑47 and ↓11+36
Comments119

Инфраструктура разработки приложения на PhoneGap для iOS и Android

Reading time11 min
Views45K
Development for iOS*Development of mobile applications*Development for Android*Mobile applications testing*Arcadia corporate blog
Сегодня я расскажу вам о нашем опыте разработки кросс-платформенных мобильных приложений на основе PhoneGap/Cordova. В проекте используются такие технологии, как HTML5, CSS3 и Angular.js. Grunt применяется в качестве task manager’а, позволяющего упростить и ускорить выполнение рутинных задач. Все сборки компилируются локально во время процесса разработки.


Источник: build.phonegap.com

Когда версия готова к этапу тестирования, она компилируется с помощью PhoneGap Build и загружается на Ubertesters — сервис дистрибуции мобильных приложений, который позволяет проводить тестирование быстро и эффективно на всех подключенных устройствах. Приложение поддерживает минимум iOS 6 и Android 4.1 (87.5 % доля рынка).
Читать дальше →
Total votes 17: ↑16 and ↓1+15
Comments20

Концепт UI для Windows 8

Reading time1 min
Views26K
Development for Windows*
Дизайнер Sputnik8 (Phyek) на форумах The Verge вынес на суд публики концепт дизайна для десктопной версии Windows 8 (все скриншоты кликабельны).



На скриншотах изображены разные версии Explorer, браузера IE (с переделанными сайтами Windows.com и Bing), Media Center/Player и Skype. Автор подчёркивает, что он не стремился строго соблюдать новый стиль Metro, в общем, его работа — это скорее фантазия на тему, как может выглядеть Windows 8.
Читать дальше →
Total votes 210: ↑182 and ↓28+154
Comments208

Пишем MVC приложение на Ext JS 4 с возможностью офлайн работы

Reading time10 min
Views32K
ExtJS/Sencha*

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

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

Сегодня этот вопрос решается элегантно — с помощью HTML5 с его локальным хранилищем (local storage), Ext JS 4 с возможностью прозрачно работать с этим хранилищем, и HTML5 кэшем приложений (Application Cache). Совокупность этих технологий позволяет реализовать следующую схему: при наличии сети статичные файлы (HTML/CSS/JS код и картинки) загружаются с сайта и мы работаем с серверной централизованной базой данных, при отсутствии сети статика загружается из Application Cache и мы работаем с локальным хранилищем, которое сохраняется в серверную БД при появлении доступа к Интернет. При этом без активного подключения по URL адресу страницы браузер отображает не ошибку доступа к сети, а функциональную систему, работающую с локальным хранилищем. Пояснения и рабочий пример (да не упадет мой vds под хаброэффектом) — под катом. Статья получилась немаленькая, но, надеюсь, весьма содержательная.
Вперед!
Total votes 39: ↑38 and ↓1+37
Comments5

Пишем сервер, который не падает под нагрузкой

Reading time5 min
Views30K
High performance*Node.JS*Нордавинд corporate blog
Tutorial
Translation
От переводчика: Это пятая статья из цикла о Node.js от команды Mozilla Identity, которая занимается проектом Persona.

Все статьи цикла:
  1. "Охотимся за утечками памяти в Node.js"
  2. "Нагружаем Node под завязку"
  3. "Храним сессии на клиенте, чтобы упростить масштабирование приложения"
  4. "Производительность фронтэнда. Часть 1 — конкатенация, компрессия, кэширование"
  5. "Пишем сервер, который не падает под нагрузкой"
  6. "Производительность фронтэнда. Часть 2 — кешируем динамический контент с помощью etagify"
  7. "Приручаем конфигурации веб-приложений с помощью node-convict"
  8. "Производительность фронтенда. Часть 3 — оптимизация шрифтов"
  9. "Локализация приложений Node.js. Часть 1"
  10. "Локализация приложений Node.js. Часть 2: инструментарий и процесс"
  11. "Локализация приложений Node.js. Часть 3: локализация в действии"
  12. "Awsbox — PaaS-инфраструктура для развёртывания приложений Node.js в облаке Amazon"




Как написать приложение Node.js, которое будет продолжать работать даже под невозможной нагрузкой? В этой статье показана методика и библиотека node-toobusy, её воплощающая, суть которой наиболее кратко может быть передана этим фрагментом кода:

var toobusy = require('toobusy');
 
app.use(function(req, res, next) {
  if (toobusy()) res.send(503, "I'm busy right now, sorry.");
  else next();
});

В чём заключается проблема?


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

Это может быть и злонамеренный всплеск трафика, например от DoS-атаки. Первый шаг к борьбе с такими атаками — написание сервера, который не падает.
Читать дальше →
Total votes 66: ↑56 and ↓10+46
Comments26

Новый WebStorm 7: все необходимое под рукой

Reading time3 min
Views37K
Website development*JavaScript*JetBrains corporate blogTypeScript*
Привет, Хабр!

Мы выпустили WebStorm 7 — новую версию нашей JavaScript IDE, и с радостью хотим рассказать вам о том, что же нового в ней появилось.

Конечно же, в новом WebStorm 7 вы сможете порадоваться поддержке новых и востребованных технологий, например, JavaScript шаблонов, Stylus, Web Components. К тому же мы значительно переработали и улучшили внутренние инструменты IDE, что должно положительно отразиться на удобстве использования WebStorm и на вашей продуктивности.
Читать дальше →
Total votes 87: ↑81 and ↓6+75
Comments104

Чистим HTML-код при вставке текста из MS Word в HTML5 WYSIWYG редактор (contenteditable)

Reading time5 min
Views24K
JavaScript*jQuery*
Здравствуйте!

При написании своего WYSIWYG редактора возникла проблема копирования текста из Ворда. Собственно проблем три:
  • Ворд вставляет много мусорного html кода, который необходимо чистить
  • Для представления списков Ворд почему-то использует параграфы вместо тегов UL и LI
  • Собственно как определить, что вставленный текст является вставленным из Ворда.

В общем, для решения этих проблем, был написан jquery-плагин, полный исходный код которого доступен в конце статьи. Пример использования:

$(‘#editor’). msword_html_filter();

Плагин вешается на событие keyup и проверяет, является ли исходный код внутри редактора вставленным из Ворда, если да, то запускается функция очистки. В результирующем html прибивается все что только можно – неразрывные пробелы, атрибуты style и align, теги span, все Mso-классы, пустые параграфы.

Детали реализации под катом.

UPD Демо на CodePen

Читать дальше →
Total votes 55: ↑52 and ↓3+49
Comments18

Делаем «mindmap» на Javascript с локальным хранением в базе данных браузера

Reading time25 min
Views56K
Website development*JavaScript*Programming*
From sandbox

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

Я опишу особенности создания редактора карты памяти, который использует базу данных браузера. Причём, это будет не LocalStorage, который не может превышать 5 мегабайт. Объём данных сможет превысить 100-200 мегабайт, так как используется IndexedDB или webSQL, смотря что доступно в конкретном браузере.

Исходники выложены в открытый доступ на Github.

Мы уложимся в 520 строк кода, при этом в нашей карте можно будет перетаскивать узлы между собой, удалять, переименовывать и создавать новые. А также можно будет назначать одну из 120 иконок через контекстное меню.

Секрет минимализма в том, что мы будем использовать проверенные в бою плагины:
  1. Ydn.db — хранение информации в базе данных браузера с автоматическим выбором лучшего метода и единым API
  2. jQuery context menu — контекстное меню, которое можно наполнять динамически при помощи Javascript
  3. jsPlumb — расширение позволяющее рисовать линии между HTML элементами
  4. jQuery UI — Drag&drop — перетаскивание элементов между собой


PS: Также мы научимся создавать «синглтон», облегчать себе асинхронное программирование при помощи jQuery и встроенного объекта $.Deferred(), а также при помощи плагина LiveReload, сохраним краску на клавише F5 при изменении свойств CSS и кода в HTML и Javascript.
Читать дальше →
Total votes 116: ↑108 and ↓8+100
Comments45

PhoneGap: как сделать приложение отзывчивым

Reading time11 min
Views56K
Website development*Development of mobile applications*MobiDev corporate blog
Tutorial
На сегодняшний день существует немалое количество обзорных статей о PhoneGap, но к сожалению, написаны они или front-end разработчиками, которые решили заняться мобильными платформами, или нативными программистами, которые решили попробовать себя в кроссплатформенной разработке. И именно с этих позиций рассматриваются достоинства и недостатки PhoneGap'а, возникают статьи о том, «насколько крута кроссплатформа», или об «ущербности кроссплатформенных решений».

В качестве затравки — видео демо-приложения, написанного за 6 часов; готовым был взят UI-бутстрап, наверстанный за 3,5 часа; использовались библиотеки iScroll, backbone, underscore, Jquery, и небольшая обертка на backbone (RAD.js — rapid application development, архитектурный фреймворк, берущий на себя часть оптимизации, связанной с мобильной средой выполнения).


Еще 2 часа было потрачено на фикс движка. Но сегодня речь не о том, что что-то тормозит, дергается, или самописный свайп не всегда вовремя отрабатывает на 14000 объектах данных; речь о том, что на PhoneGap можно и нужно писать.

Выносим на Ваше рассмотрение мнение людей, которые занимаются кроссплатформеной разработкой на PhoneGap, дабы рассказать о том, какие тонкости мы находим нужными и важными при разработке на PhoneGap, и почему они так важны.
Читать дальше →
Total votes 93: ↑87 and ↓6+81
Comments31

Драйвер для PostgreSQL на Node.js

Reading time3 min
Views32K
PostgreSQL*Node.JS*LiveTex corporate blog
Tutorial
Recovery Mode
Быстрый Node.js

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

К сожалению, в сообществе node.js, на данный момент сложилась такая ситуация, что подавляющее большинство драйверов к распространённым сервисам имеет ряд существенных недостатков, не позволяющих приложениям достигать заслуженных высот эффективности и стабильности. Вы наверняка слышали все эти ужасающие истории о том, что «node.js течёт», оно “игрушечное”, не предназначенное для применения в настоящей высоконагруженной среде. Однако, как мы убедились на собственном опыте, с умом написанное ПО для ноды блестяще справляется со всеми испытаниями суровых боевых реалий. И здесь мы приходим к главному вопросу: что же мешает среднестатистическому node.js-драйверу нормальной работе?
Читать дальше →
Total votes 31: ↑23 and ↓8+15
Comments19

HTML 5 Notifications API

Reading time3 min
Views116K
Website development*JavaScript*HTML*

Привет, Хабр. В этой статье я расскажу о HTML Notification API.

Какие возможности предоставляет Notification API


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

Поддержка в браузерах


  • Safari 6
  • Chrome 27
  • Firefox 22

Opera 15 beta не работает с Notifications API, несмотря на наличие конструктора Notification.
На мобильных платформах технология не работает.
В движке webkit есть старая нотация в виде webkitNotifications.

Как это работает


Цикл работы следующий:
  1. Получить разрешение на отправку;
  2. Правило фиксируется для сайта;
  3. Отправить уведомление.

Читать дальше →
Total votes 85: ↑82 and ↓3+79
Comments66

Развиваем фронтенд Дневник.ру. Часть первая. Сборка и проверка JavaScript кода

Reading time9 min
Views15K
Website development*JavaScript*Дневник.ру corporate blog

Вступление


За время существования Дневник.ру (а это более 4-х лет) скопился огромный объем JavaScript кода: часть находилась в отдельном проекте в виде подключаемых файлов, часть определялась прямо на разметке контролов, а часть собиралась прямо в code-behind при помощи StringBuilder. К этому прибавлялись:
  • растущее количество HTTP запросов для получения статичного контента – так, например, на всех страницах только в теге <head> загружалось 11 JavaScript файлов;
  • глобальные переменные, которые иногда перекрывали друг друга;

Решив, что с этим пора что-то делать, мы поставили себе первоочередную задачу: вынести все подключаемые по отдельности файлы из тега <head> в один минифицированный пакет. При этом код делился на сторонний и «наш», который планировалось проверять каким-то синтаксическим анализатором.

В этой статье мы расскажем вам о том, как решили эту задачу.
Читать дальше →
Total votes 28: ↑22 and ↓6+16
Comments19

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

Reading time2 min
Views104K
Website development*JavaScript*



Текстовый редактор 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.
Читать дальше →
Total votes 156: ↑149 and ↓7+142
Comments63

24 совета javascript-разработчику

Reading time9 min
Views85K
Website development*JavaScript*
Translation
От переводчика: Не смотря на то что оригинал данной статьи датирован январем 2009 года, она не потеряла актуальности и теперь. Я надеюсь что даже те, кто используют JavaScript не первый год, почерпнут для себя что-то полезное.

1. Используйте === вместо ==


В JavaScript существует два разных типа операций сравния: === / !== и == / !=. Считается хорошим тоном всегда использовать первую пару для сравнения.
“Если два операнда одного типа и значения, то === вернет true, а !== false”
JavaScript: The Good Parts
Читать дальше →
Total votes 145: ↑92 and ↓53+39
Comments185

Опубликованы скриншоты Windows Blue и IE 11

Reading time1 min
Views79K
FirefoxInternet Explorer


Многие подозревают, что Microsoft собирается перейти в режим частых платных обновлений операционной системы в стиле Apple. Cейчас идёт разработка Windows Blue — следующей версии на основе Windows 8. В принципе, её можно считать первым «сервис-паком» для Windows 8, но вполне вероятно, что это будет платный апдейт.

На днях произошла утечка билда 9364, а на форуме Winforum.eu опубликована масса скриншотов. Обозреватели выделяют изменения в интерфейсе Metro UI и стартового меню, а также новый браузер Internet Explorer 11 с функцией синхронизации табов и режимом совместимости с Gecko.
Читать дальше →
Total votes 66: ↑47 and ↓19+28
Comments257

Энтропия и деревья принятия решений

Reading time8 min
Views119K
Programming*Data Mining*
Деревья принятия решений являются удобным инструментом в тех случаях, когда требуется не просто классифицировать данные, но ещё и объяснить почему тот или иной объект отнесён к какому-либо классу.

Давайте сначала, для полноты картины, рассмотрим природу энтропии и некоторые её свойства. Затем, на простом примере, увидим каким образом использование энтропии помогает при создании классификаторов. После чего, в общих чертах сформулируем алгоритм построения дерева принятия решений и его особенности.
Читать дальше →
Total votes 86: ↑83 and ↓3+80
Comments14

Suit Up! Простой и легкий WYSIWYG

Reading time10 min
Views57K
Website development*JavaScript*jQuery*
Tutorial


Статья делится на три части:
UPD Критика


Вступление


Не так давно, а, точнее, года два назад, в кругу разработчиков, с которыми я имел честь общаться (почти все — новички), каждый, кому поступила задача поставить WYSIWYG, ставили монстрообразный TinyMCE. Этот редактор считался почему-то стандартом у многих веб разработчиков, хотя, мало кому нужны были то большое количество функций, которые предлагались программистам. Тут тебе и то и это. Наверно, таким образом, новички пытались сказать клиенту «смотри, мы тебе на сайт запилили Ворд».

Однажды (не помню при каких условиях), мне захотелось или понадобилось разобраться в том, как работают браузерные «рич эдиторы». Моему удивлению не было предела, когда я сам, не имея каких-либо глубоких познаний в веб разработке, сделал две кнопочки: Bold и Italic, что оказалось очень простой задачей. Мне захотелось больше узнать о том, что же делать дальше. Так я познакомился с серией статей «WYSIWYG HTML редактор в браузере» (по ссылке первая статья, советую прочесть). Но информация на тот момент мне показалась несколько сложноватой. Поэтому я решил методом тыка, наступая на уже растоптанные кем-то грабли, написать свой простой редактор.

Сделал я его в виде jQuery плагина, и, думаю, не стоит отвечать «почему». Получилось кое-как заставить работать его в разных браузерах. Тут мне пришла в голову идея написать статью на хабр, после некоторых доработок. Время шло, допиливание я откладывал, откладывал… Два года, черт, целых два года. Но я постараюсь исправиться.


Простейший редактор


Для того, чтоб дать возможность пользователю менять содержимое блока (в данном случае, обычного дива) просто задаём ему (блоку) атрибут contenteditable:
<div contenteditable></div>

Редактор готов!
Читать дальше →
Total votes 95: ↑90 and ↓5+85
Comments88
BackHere
1
2

Information

Rating
1,091-st
Location
Санкт-Петербург, Санкт-Петербург и область, Россия
Registered
Activity

Your account

Sections

Information

Services

Support
© 2006–2024, Habr