Статьи / Закладки / Профиль vovs / Хабр

Как стать автором

Воловиков Владимир @vovs

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

Профиль Публикации 7Комментарии 51Закладки 39

alex-ganyukhin 24 ноя 2021 в 16:05

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

8 мин

11K

ПрезентацииБлог компании Orion Innovation

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

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

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

Читать далее

+12

KruFFT 11 дек 2019 в 17:10

CAN sniffer

9 мин

78K

DIY или Сделай сам

Непосредственно сама CAN шина используется уже много где, мне интересно её использование в автомобиле, хотя этой сферой можно и не ограничиваться. Тем более пару лет назад подвернулась такая возможность. Я посмотрел на общие спецификации — вроде бы ничего особо сложного нет. Посмотрел на программы, которые встречаются в интернете — и ни одна мне не приглянулась, у каждой не хватало чего-то такого, что казалось мне нужным на тот момент. Буду изобретать свой велосипед. Делаю свой CAN sniffer далее под катом.

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

+57

funnybanana 2 апр 2017 в 07:13

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

5 мин

26K

JavaScript*jQuery*HTML*Canvas*Визуализация данных*

Туториал

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

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

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

+30

olegbunin 18 янв 2017 в 21:51

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

15 мин

43K

JavaScript*Блог компании Конференции Олега Бунина (Онтико)Node.JS*WebGL*

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

Сегодня я вам расскажу про технологию nw.js, большинство слайдов моей презентации будет посвящено ей. Это технология позволяет разрабатывать десктопные приложения и писать их на html, javascript и css. Причем приложение будет кроссплатформенное — под Windows, Linux и Mac. Можно их сбилдить и они будут иметь доступ к графическому интерфейсу системы, т.е. смогут еще работать с менюшками и т.д.

+36

milkiway 25 мая 2015 в 10:25

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

11 мин

45K

Разработка под iOS*Разработка мобильных приложений*Разработка под Android*Тестирование мобильных приложений*Блог компании Arcadia

Сегодня я расскажу вам о нашем опыте разработки кросс-платформенных мобильных приложений на основе PhoneGap/Cordova. В проекте используются такие технологии, как HTML5, CSS3 и Angular.js. Grunt применяется в качестве task manager’а, позволяющего упростить и ускорить выполнение рутинных задач. Все сборки компилируются локально во время процесса разработки.

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

Когда версия готова к этапу тестирования, она компилируется с помощью PhoneGap Build и загружается на Ubertesters — сервис дистрибуции мобильных приложений, который позволяет проводить тестирование быстро и эффективно на всех подключенных устройствах. Приложение поддерживает минимум iOS 6 и Android 4.1 (87.5 % доля рынка).

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

+15

alizar 26 фев 2012 в 15:09

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

1 мин

26K

Разработка под Windows*

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

На скриншотах изображены разные версии Explorer, браузера IE (с переделанными сайтами Windows.com и Bing), Media Center/Player и Skype. Автор подчёркивает, что он не стремился строго соблюдать новый стиль Metro, в общем, его работа — это скорее фантазия на тему, как может выглядеть Windows 8.

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

+154

sterx 12 фев 2012 в 22:26

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

10 мин

32K

Библиотека ExtJS/Sencha*

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

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

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

+37

exeditor 6 окт 2013 в 21:29

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

5 мин

30K

Высокая производительность*Node.JS*Блог компании Нордавинд

Туториал

Перевод

От переводчика: Это пятая статья из цикла о Node.js от команды Mozilla Identity, которая занимается проектом Persona.

Все статьи цикла:

"Охотимся за утечками памяти в Node.js"

"Нагружаем Node под завязку"

"Храним сессии на клиенте, чтобы упростить масштабирование приложения"

"Производительность фронтэнда. Часть 1 — конкатенация, компрессия, кэширование"

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

"Производительность фронтэнда. Часть 2 — кешируем динамический контент с помощью etagify"

"Приручаем конфигурации веб-приложений с помощью node-convict"

"Производительность фронтенда. Часть 3 — оптимизация шрифтов"

"Локализация приложений Node.js. Часть 1"

"Локализация приложений Node.js. Часть 2: инструментарий и процесс"

"Локализация приложений Node.js. Часть 3: локализация в действии"

"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-атаки. Первый шаг к борьбе с такими атаками — написание сервера, который не падает.

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

+46

prigara 26 сен 2013 в 16:53

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

3 мин

37K

Веб-разработка*JavaScript*Блог компании JetBrainsTypeScript*

Привет, Хабр!

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

Конечно же, в новом WebStorm 7 вы сможете порадоваться поддержке новых и востребованных технологий, например, JavaScript шаблонов, Stylus, Web Components. К тому же мы значительно переработали и улучшили внутренние инструменты IDE, что должно положительно отразиться на удобстве использования WebStorm и на вашей продуктивности.

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

+75

PyroRed 23 сен 2013 в 17:17

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

5 мин

24K

JavaScript*jQuery*

Здравствуйте!

При написании своего WYSIWYG редактора возникла проблема копирования текста из Ворда. Собственно проблем три:

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

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

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

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

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

UPD Демо на CodePen

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

+49

imater 29 авг 2013 в 12:58

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

25 мин

56K

Веб-разработка*JavaScript*Программирование*

Из песочницы

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

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

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

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

Секрет минимализма в том, что мы будем использовать проверенные в бою плагины:

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

PS: Также мы научимся создавать «синглтон», облегчать себе асинхронное программирование при помощи jQuery и встроенного объекта $.Deferred(), а также при помощи плагина LiveReload, сохраним краску на клавише F5 при изменении свойств CSS и кода в HTML и Javascript.

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

+100

YuriyLuchaninov 29 июл 2013 в 14:12

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

11 мин

56K

Веб-разработка*Разработка мобильных приложений*Блог компании MobiDev

Туториал

На сегодняшний день существует немалое количество обзорных статей о PhoneGap, но к сожалению, написаны они или front-end разработчиками, которые решили заняться мобильными платформами, или нативными программистами, которые решили попробовать себя в кроссплатформенной разработке. И именно с этих позиций рассматриваются достоинства и недостатки PhoneGap'а, возникают статьи о том, «насколько крута кроссплатформа», или об «ущербности кроссплатформенных решений».

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

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

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

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

+81

LiveTex 28 июн 2013 в 13:18

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

3 мин

32K

PostgreSQL*Node.JS*Блог компании LiveTex

Туториал

Recovery Mode

Быстрый Node.js

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

К сожалению, в сообществе node.js, на данный момент сложилась такая ситуация, что подавляющее большинство драйверов к распространённым сервисам имеет ряд существенных недостатков, не позволяющих приложениям достигать заслуженных высот эффективности и стабильности. Вы наверняка слышали все эти ужасающие истории о том, что «node.js течёт», оно “игрушечное”, не предназначенное для применения в настоящей высоконагруженной среде. Однако, как мы убедились на собственном опыте, с умом написанное ПО для ноды блестяще справляется со всеми испытаниями суровых боевых реалий. И здесь мы приходим к главному вопросу: что же мешает среднестатистическому node.js-драйверу нормальной работе?

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

+15

delch 17 июн 2013 в 20:44

HTML 5 Notifications API

3 мин

116K

Веб-разработка*JavaScript*HTML*

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

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

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

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

Safari 6
Chrome 27
Firefox 22

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

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

Цикл работы следующий:

Получить разрешение на отправку;
Правило фиксируется для сайта;
Отправить уведомление.

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

+79

codefo 29 мая 2013 в 12:38

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

9 мин

15K

Веб-разработка*JavaScript*Блог компании Дневник.ру

Вступление

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

растущее количество HTTP запросов для получения статичного контента – так, например, на всех страницах только в теге <head> загружалось 11 JavaScript файлов;
глобальные переменные, которые иногда перекрывали друг друга;

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

В этой статье мы расскажем вам о том, как решили эту задачу.

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

+16

exeditor 16 апр 2013 в 18:10

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

2 мин

104K

Веб-разработка*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.

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

+142

Azy 3 апр 2013 в 13:35

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

9 мин

85K

Веб-разработка*JavaScript*

Перевод

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

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

В JavaScript существует два разных типа операций сравния: === / !== и == / !=. Считается хорошим тоном всегда использовать первую пару для сравнения.

“Если два операнда одного типа и значения, то === вернет true, а !== false”
JavaScript: The Good Parts

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

+39

alizar 25 мар 2013 в 11:27

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

1 мин

79K

FirefoxInternet Explorer

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

На днях произошла утечка билда 9364, а на форуме Winforum.eu опубликована масса скриншотов. Обозреватели выделяют изменения в интерфейсе Metro UI и стартового меню, а также новый браузер Internet Explorer 11 с функцией синхронизации табов и режимом совместимости с Gecko.

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

+28

stemm 11 мар 2013 в 15:23

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

8 мин

119K

Программирование*Data Mining*

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

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

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

+80

Finom 10 янв 2013 в 14:03

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

10 мин

57K

Веб-разработка*JavaScript*jQuery*

Туториал

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

Вступление
Как сделать простейший редактор самому, причем не будет никакой теории, только практика. Предупреждаю, для многих эта часть покажется простой и очевидной, так как текст ориентирован, можно сказать, на себя, в прошлом (нет, я не путешествую во времени :));
Описание работы очень легкого редактора «Suit Up» (оригинальный объем кода: 5.97KB (1.87KB gzipped), минимизированный: 3.35KB (1.37KB gzipped) на момент написания статьи, не считая спрайта и стилей).

UPD Критика

Вступление

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

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

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

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

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

<div contenteditable></div>

Редактор готов!

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

+85

1