IndexedDB – стандарт хранения больших объемов структурированных данных на клиенте – был ожидаем также как и WebSocket (ну может самую малость меньше). В свете выхода FireFox 4 я нашёл время и силы всё-таки разобраться, как им пользоваться, и попытаться написать что-то больше, чем пример с адресной книгой, гуляющий по интернетам (в процессе поиска информации у меня сложилось впечатление, что это был единственный пример).
msa @msa
User
Canvas шаг за шагом: ПОНГ
5 min
54KTutorial
Сегодня попробуем написать небольшую игру Понг используя html5 тег canvas. Те кто не хочет читать пост тот может сразу ИГРАТЬ.
Если верить Википедии, то можно узнать что Pong является простейшим симулятором настольного тенниса. Небольшой квадратик, заменяющий пинг-понговый мячик, двигается по экрану по линейной траектории. Если он ударяется о периметр игрового поля или об одну из нарисованных ракеток, то его траектория изменяется в соответствии с углом столкновения.
Геймплей состоит в том, что игроки передвигают свои ракетки вертикально, чтобы защищать свои ворота. Игрок получает одно очко, если ему удаётся отправить мячик за ракетку оппонента…
Мы попытаемся реализовать игру так что бы в неё можно было играть при помощи мыши, а оппонентом управлял компьютер. Итак приступим. Для начала определимся с тем что, для полного понимания происходящего в этой записи желательно ознакомиться с постом описывающим основы.
Если верить Википедии, то можно узнать что Pong является простейшим симулятором настольного тенниса. Небольшой квадратик, заменяющий пинг-понговый мячик, двигается по экрану по линейной траектории. Если он ударяется о периметр игрового поля или об одну из нарисованных ракеток, то его траектория изменяется в соответствии с углом столкновения.
Геймплей состоит в том, что игроки передвигают свои ракетки вертикально, чтобы защищать свои ворота. Игрок получает одно очко, если ему удаётся отправить мячик за ракетку оппонента…
Мы попытаемся реализовать игру так что бы в неё можно было играть при помощи мыши, а оппонентом управлял компьютер. Итак приступим. Для начала определимся с тем что, для полного понимания происходящего в этой записи желательно ознакомиться с постом описывающим основы.
+41
Модульный подход в JavaScript
8 min
49KTranslation
Модульный подход довольно распространённая техника программирования в JavaScript. Обычно его понимают довольно хорошо, но продвинутые техники описаны недостаточно. В этой статье я рассмотрю основы и затрону некоторые сложные приёмы, включая один, по моему мнению, оригинальный.
Мы начнём с несложного обзора модульного подхода, хорошо известного с тех пор, как Эрик Миралья (Eric Miraglia) из YUI впервые об этом написал. Если вам уже знаком модульный подход, переходите сразу к «Продвинутым техникам».
Основы
Мы начнём с несложного обзора модульного подхода, хорошо известного с тех пор, как Эрик Миралья (Eric Miraglia) из YUI впервые об этом написал. Если вам уже знаком модульный подход, переходите сразу к «Продвинутым техникам».
Анонимные замыкания
+109
Делаем консоль чуточку удобнее
4 min
7.3K
Но у неё есть пару неудобств, которые можно очень легко исправить. Это:
- Ошибки, когда консоль не определена
- Невозможность использовать вне контекста
- Невозможность отключить во время production
- некроссбраузерность
Исправим эти проблемы легко и быстро!
+87
Как я объяснил жене, что такое REST
7 min
29KTranslation
Возможно, как и многим, мне не всегда удаётся простым языком объяснять сложные вещи, я становлюсь многословным, уделяю чрезмерное внимание деталям и невольно использую профессионализмы. Наверное, именно поэтому я обратил внимание на статью How I Explained REST to My Wife, в которой Ryan Tomayko вот так запросто рассказывает жене о REST и принципах работы HTTP. В заголовках статьи был перечень языков на которые переведена эта статья и этот список из 6 языков, во-первых, дал понять что я не одинок, во-вторых, показал что статья стоит того что бы добавить перевод на русском.
+38
Команда dd и все, что с ней связано
4 min
650K
В UNIX системах есть одна очень древняя команда, которая называется dd. Она предназначена для того, чтобы что-то куда-то копировать побайтово. На первый взгляд — ничего выдающегося, но если рассмотреть все возможности этого универсального инструмента, то можно выполнять довольно сложные операции без привлечения дополнительного ПО, например: выполнять резервную копию MBR, создавать дампы данных с различных накопителей, зеркалировать носители информации, восстанавливать из резервной копии данные на носители и многое другое, а, при совмещении возможностей dd и поддержке криптографических алгоритмов ядра Linux, можно даже создавать зашифрованные файлы, содержащие в себе целую файловую систему.
Опять же, в заметке я опишу самые часто используемые примеры использования команды, которые очень облегчают работу в UNIX системах.
+307
Оптимизируем процесс работы в консоли
4 min
16KВсе привыкли редактировать текст в текстовых редакторах, блокнотах, веб-формах и т.д. В процессе набора текста мы пользуемся привычными стрелками, кнопками «End» и «Home», более опытные зажимают «Ctrl» и стрелками шагают по словам (что, кстати, не всегда работает). И при переходе на консоль мы ориентируемся на те же самые правила, даже не зная, что bash предлагает очень удобные средства и комбинации клавиш, которые очень упрощают работу и минимизируют количество операций для выполнения задачи. К тому же, в bash есть удобные средства работы с историей, масса различных подстановок и других интересных функций. Самые часто используемые мной и любым опытным администратором я и опишу в этой статье.
+234
«Переезжаем» в офлайн: Web Storage, Application Cache и WebSQL
11 min
28KTranslation
Чтобы делать приложения, которые могут работать в полностью автономном режиме, нам нужно познакомиться со следующими технологиями: HTML5 Application Cache, Web Storage и WebSQL.
Мной уже были опубликованы вводные статьи, касающиеся Web Storage и HTML5 Application Cache. Рекомендую их к прочтению если вы еще не знакомы с основными понятиями. В данной статье будут пересмотрены эти технологии, в том числе и WebSQL, и описаны варианты их совместного эффективного использования. Все эти технологии поддерживаются настольной версией браузера Opera 11.10, Opera Mobile 11, браузерами на движке WebKit (в iOS и Google Android).
Мной уже были опубликованы вводные статьи, касающиеся Web Storage и HTML5 Application Cache. Рекомендую их к прочтению если вы еще не знакомы с основными понятиями. В данной статье будут пересмотрены эти технологии, в том числе и WebSQL, и описаны варианты их совместного эффективного использования. Все эти технологии поддерживаются настольной версией браузера Opera 11.10, Opera Mobile 11, браузерами на движке WebKit (в iOS и Google Android).
+72
PhantomJS: Webkit в консоли
2 min
125K
PhantomJS это все плюшки WebKit из консоли с управлением на JS и поддержкой различных стандартов и технологий: DOM, CSS, JSON, Canvas и SVG.
Внутри несколько примеров использования
+85
Ожидание нескольких событий в nodejs
6 min
14KНаверное, каждый, кто начинает изучать nodejs, испытывает трудности с переходом на событийно-ориентированное программирование. Все просто, пока мы можем выполнять действия последовательно: начинать следующее, дождавшись завершающего события от предыдущего. Но что делать, если таких действий много и они продолжительны во времени? А если мы не можем продолжать, пока не дождемся завершения каждого из них?
+17
Принцип цикады и почему он важен для веб-дизайнеров
6 min
236KTranslation

Однако, в зависимости от вида, каждые 7, 11, 13 или 17 лет периодические цикады одновременно массово вылезают на свет и превращаются в шумных летающих тварей, спариваются и вскоре умирают.
Хотя наши странные цикады весело уходят в иной мир, возникает очевидный вопрос: это просто случайность, или числа 7, 11, 13 и 17 какие-то особенные?
+668
Оригами и расширенная реальность
2 min
1.3KСовременные технологии проникли уже почти во все сферы нашей жизни. Люди используют их для облегчения какой-либо своей деятельности, ускорения процессов взаимодействия, как необходимость, данность или приятное дополнение. Естественно, развиваются и сами технологии, среди которых — технологии взаимодействия с пользователем, которые позволяют работать с приложениями не только посредством привычных уже манипуляторов (мышки, клавиатуры и т. д.), а с привлечением веб-камеры, микрофона и др. Технология расширенной реальности используется для того, чтобы дополнять данные, полученные от пользователя (изображение с камеры), данными, полученными в ходе внутренних вычислений. Казалось бы, при чем здесь оригами?
+40
Оригами и расширенная реальность (продолжение)
5 min
1.4KУ всего, что написано ниже есть маленькая предыстория. Здесь мы решили сосредоточится на технических подробностях. Итак, перед нашим пытливым умом поставили следующую задачу:
- есть лист бумаги, который необходимо сложить определенным образом;
- для подсказок складывающему желательно воспользоваться технологией расширенной реальности и накладывать информацию о подсказках поверх получаемых изображений.
+39
Запускаем сторонний код в песочнице
8 min
5.9KКак гласит статья из Википедии, Песочница — механизм для безопасного исполнения программ. Песочницы часто используют для запуска непротестированного кода, непроверенного кода из неизвестных источников, а также для запуска и обнаружения вирусов.

Представим, что у нас стоит задача: есть какой-то проект и пользователи могут под него писать свои скрипты (виджеты, дополнения, плагины). Мы хотим, чтобы пользовательские скрипты не делали ничего плохого (кража кук это меньшее, что они могут сделать).
В статье пойдет речь об атаках, которые могут совершать злоумышленники и о методах безопасного выполнения стороннего кода.

Представим, что у нас стоит задача: есть какой-то проект и пользователи могут под него писать свои скрипты (виджеты, дополнения, плагины). Мы хотим, чтобы пользовательские скрипты не делали ничего плохого (кража кук это меньшее, что они могут сделать).
В статье пойдет речь об атаках, которые могут совершать злоумышленники и о методах безопасного выполнения стороннего кода.
+87
Haskell Tutorial с другой стороны
16 min
16KВ данной статье я хочу развенчать мифы о сложности и узкоспециализированности функционального программирования в общем и языка Haskell в частности. Я постараюсь сделать эту статью понятной даже для людей с минимальным представлением о Haskell. Но сначала небольшое введение.
Я отношу себя к категории ленивых фотолюбителей. У меня есть неплохая «беззеркальная зеркалка», иногда на меня нападает желание пощёлкать чего-нибудь вокруг себя. Однако я ленив, и ковыряться потом в полученном фотоархиве у меня ни времени, ни желания нет. Как правило фотографии просматриваются один-два раза сразу после съемки путём подключения фотоаппарата к телевизору через HDMI кабель. Затем фотографии отправляются внебытие каталог ~/Pictures/Photos/Unsorted и, как правило, остаются там навсегда. С различным спец. ПО я как-то не сдружился, посему этот бардак просуществовал почти два года. И вот, на волне изучения Haskell, я созрел для решения проблемы.
Я отношу себя к категории ленивых фотолюбителей. У меня есть неплохая «беззеркальная зеркалка», иногда на меня нападает желание пощёлкать чего-нибудь вокруг себя. Однако я ленив, и ковыряться потом в полученном фотоархиве у меня ни времени, ни желания нет. Как правило фотографии просматриваются один-два раза сразу после съемки путём подключения фотоаппарата к телевизору через HDMI кабель. Затем фотографии отправляются в
+38
Универсальный шаблонный движок за 1 минуту из подручных материалов
3 min
1.8K
Ни для кого сейчас уже не секрет, что шаблонный движок должен быть полноценным языком программирования.
Не стоит забывать, что применение шаблонов далеко не ограничено WEB-ом.
Это генерация различного вида отчётов, генерация кода программ на различных языках, генерация исходных данных для обработки и многое другое.
Вообще, шаблоны хочется применить везде, где много текста и мало логики.
В раздумьях, как бы это сделать побыстрее и подешевле, не следует обманывать себя (в основном, на раннем этапе) мыслями типа «да у меня статический текст, только надо приклеить шапку», «тут нужен только счётчик», «мне надо только вывести дату» и т.д.
Сначала — шапка и счётчик, дальше будет условная вставка блоков (if), потом понадобится генерация таблиц (тут уже нужны циклы и массивы), далее потянутся строковые операции и все остальные конструкции нормального языка программирования.
+2
Вышел jQuery Mobile Alpha 4
2 min
1.7K
+30
FPV
4 min
136KЭта статья для тех, кто с детства мечтает летать как птица. Сразу оговорюсь, в реале Вы не полетите, но чувства будут очень близки. Итак, речь идет о FPV (first person view)-полетах. FPV — это новое движение в авиамоделизме, его суть заключается в управление моделью самолета через установленную на борту камеру. Картинку с борта самолета Вы получаете в реальном времени и видите через очки “виртуальной реальности”. Также, на очках установлен датчик поворота головы и камера на самолете поворачивается вслед за поворотами Вашей головы. У вас появляется неподдельное ощущение реального присутствия. А самолетом Вы управляете по радио каналу. Со стороны это выглядит примерно так:

А вот как выглядит изнутри:

А вот как выглядит изнутри:
+252
Решение вопроса с паролями — раз и навсегда
3 min
17K
Эта статья выросла из одного обстоятельного комментария. За идеи, описанные там, меня поблагодарили несколько человек в реале — поэтому было решено оформить их в топик.
Итак, как же легко и ненапряжно создавать и использовать уникальные и криптостойкие пароли для каждого сайта, на котором довелось заводить аккаунт? Как сделать так, чтобы через 3 года забвения, обнаружив свой покрытый мхом аккаунт, вы не задумываясь залогинились, введя уникальный для этого сайта 15-символьный пароль, состоящий из не поддающегося анализу набора букв и цифр?
Я пользуюсь этой системой уже почти год, придумав ее после взлома моего аккаунта в соц. сети — и с удовольствием поделюсь с заинтересовавшимися
+78
Принципы дизайна веб-форм для мобильных устройств
10 min
14KTutorial
Представляю вашему вниманию перевод статьи "Mobile Form Design Strategies" от Chui Chui Tan. Перевели в компании UXDepot. Специально для пользователей Хабрахабра с одобрением издания UX Booth.
Веб-форма, которая работает хорошо на настольном ПК, не обязательно столь же успешно будет использоваться на мобильном устройстве. Из-за природы использования настольных ПК, веб-формы не делают продуктивными. Из-за ограничений, присущих мобильным устройствам, и из-за контекста их пользования, при заполнении формы на мобильном устройстве продуктивность очень важна. Эта статья позволит вам понять принципы создания продуктивных и устойчивых к ошибкам веб-форм для мобильных устройств.
Интернет на экране мобильного телефона находится под влиянием нескольких важных факторов:
- Окружающей среды — человек может пользоваться гаджетом в толпе, в режиме цейтнота или на ярком свету (соответственно, качество изображения на экране ухудшается)
- Сети — соединение может быть медленным и ненадежным
- Особенностей девайса — например, маленького экрана устройства
+108
Information
- Rating
- Does not participate
- Location
- Украина
- Registered
- Activity