По сообщению The Register, в ноябре 2014 года в Австралийском городе Брисбен пройдет встреча мировых лидеров в рамках саммита G20. Администрация штата Квинсленд, в котором располагается Брисбен, проводит серьезную подготовку к этому событию, в первую очередь, нацеливаясь на безопасность.
Дмитрий Муштат @Mushtat
User
Шум Перлина (Perlin Noise)
10 min
71KДоброго времени суток. Предлагаю Вашему вниманию перевод статьи про шум Перлина (вот этой). Ссылки на эту статью уже мелькали на хабре (тут), но перевод статьи мне не попался. Так что надеюсь кому-либо он может оказаться полезен.
Многим людям приходилось использовать генератор случайных чисел в программах для создания непредсказуемости, чтобы сделать движение и поведение объектов более натуральным или генерировать текстуры. Генераторы случайных чисел, конечно, имеют свои области применения, но иногда их выход может быть слишком «жесткий», чтобы казаться естественным. В этой статье мы представляем функцию, которая имеет очень широкий спектр применения, больше, чем я мог бы думать, но в основном везде, где вам нужно чтобы что-то выглядело естественного происхождения. К тому же вывод может быть легко настроен под ваши нужды.
Если посмотреть на многие вещи в природе, вы заметите, что они являются фрактальными. Они имеют различные уровни детализации. Типичным примером является очертание горного хребта. Оно содержит значительные различия в высоте (горы), средние изменения (холмы), небольшие вариации (валуны), крошечные изменения (камни) и так далее. Посмотрите на что угодно: распространение пятен травы на поле, волн в море, движение муравьев, движение ветвей дерева, узоры из мрамора, ветра. Все эти явления поддаются той же схеме, в больших и малых вариациях. Функция шума Перлина воссоздает это, просто складывая функции шума в различных масштабах.
Для создания функции шума Перлина, вам нужны две вещи, функции шума и функция интерполяции.
Многим людям приходилось использовать генератор случайных чисел в программах для создания непредсказуемости, чтобы сделать движение и поведение объектов более натуральным или генерировать текстуры. Генераторы случайных чисел, конечно, имеют свои области применения, но иногда их выход может быть слишком «жесткий», чтобы казаться естественным. В этой статье мы представляем функцию, которая имеет очень широкий спектр применения, больше, чем я мог бы думать, но в основном везде, где вам нужно чтобы что-то выглядело естественного происхождения. К тому же вывод может быть легко настроен под ваши нужды.
Если посмотреть на многие вещи в природе, вы заметите, что они являются фрактальными. Они имеют различные уровни детализации. Типичным примером является очертание горного хребта. Оно содержит значительные различия в высоте (горы), средние изменения (холмы), небольшие вариации (валуны), крошечные изменения (камни) и так далее. Посмотрите на что угодно: распространение пятен травы на поле, волн в море, движение муравьев, движение ветвей дерева, узоры из мрамора, ветра. Все эти явления поддаются той же схеме, в больших и малых вариациях. Функция шума Перлина воссоздает это, просто складывая функции шума в различных масштабах.
Для создания функции шума Перлина, вам нужны две вещи, функции шума и функция интерполяции.
+37
Маленькие программы на Javascript: куда податься
4 min
44KДа, я про лавинообразный поток статей про программы на javascript в 30 строк, охвативший Хабр. Честно сказать, я и сам ярый любитель (специальной?) дисциплины код-гольфа на js, и провел не один выходной, пытаясь втиснуть функцию в твит. И хотя мне нравится дух тридцатистрочников, мне не по духу этот формат.
Почему? Ограничение в 30 sloc весьма и весьма размыто:
Господа, это не серьёзно.
Но это не значит, что нужно прямо сейчас бросить недописанный к пятнице тридцатистрочник. Но когда наиграетесь, добро пожаловать в высшую лигу!
Почему? Ограничение в 30 sloc весьма и весьма размыто:
a.pop();s+='foo'
— скорее две строки, а a.pop(s+='foo')
— скорее одна, хотя эти два куска кода делают абсолютно одно и то же. Да и практика показала, что даже 30 слоков не обязательное ограничение, а HTML и CSS вовсе не считаются. Иными словами, слоками померить крошечность невозможно, да и это никому не нужно.Господа, это не серьёзно.
Но это не значит, что нужно прямо сейчас бросить недописанный к пятнице тридцатистрочник. Но когда наиграетесь, добро пожаловать в высшую лигу!
+144
Миникрафт в 252 символа
5 min
41KTranslation
В продолжении популярного цикла статей о том, что 30 строк джаваскрипта достаточно каждому, предлагаю Вашему вниманию перевод статьи Мэтью P01 Генри о его последней работе:
+132
Алгоритм «diamond-square» для построения фрактальных ландшафтов
12 min
117KДумаю, многие знакомы с весьма необычной игрой Minecraft (справа — пример сгенерированной в ней карты), в которой игрок находится на (практически) бесконечной поверхности Земли и может исследовать окружающий мир с минимальными ограничениями.
Как же автору игры, Notch'у, удалось добиться подобного сходства его случайных «миров» с земными просторами? В этом топике я как раз и рассмотрю один из способов построить искусственный ландшафт такого рода (и вскользь упомяну пару других способов), а также расскажу о моем небольшом усовершенствовании этого алгоритма, позволяющем значительно увеличивать размеры ландшафта без заметных потерь в производительности.
Внутри вас ждет несколько схем и красивых картинок, довольно много букв и ссылка на пример реализации алгоритма.
Как же автору игры, Notch'у, удалось добиться подобного сходства его случайных «миров» с земными просторами? В этом топике я как раз и рассмотрю один из способов построить искусственный ландшафт такого рода (и вскользь упомяну пару других способов), а также расскажу о моем небольшом усовершенствовании этого алгоритма, позволяющем значительно увеличивать размеры ландшафта без заметных потерь в производительности.
Внутри вас ждет несколько схем и красивых картинок, довольно много букв и ссылка на пример реализации алгоритма.
+146
Вспоминая прошлое. О том, что делали 5 лет назад
4 min
40KВ Украине есть такая интересная штука, как Малая Академия Наук. В общем, это что-то вроде конкурса проектов для учащихся по школам. Довольно интересные проекты попадаются, и об одном я вам сейчас поведаю.
Проектик этот — мой, случайно напомнивший о себе, пока наводился порядок в книжном шкафу. Тема его, тогда, 5 лет назад, казалась ужасно крутой и звучала так: «Методы генерации игровых карт». Чуть выше пример того, что у меня получалось. Как видите, это стилизованные под рогалик примеры уровней какой-то там несуществующей игры. Но обо всём по порядку.
Проектик этот — мой, случайно напомнивший о себе, пока наводился порядок в книжном шкафу. Тема его, тогда, 5 лет назад, казалась ужасно крутой и звучала так: «Методы генерации игровых карт». Чуть выше пример того, что у меня получалось. Как видите, это стилизованные под рогалик примеры уровней какой-то там несуществующей игры. Но обо всём по порядку.
+80
Знакомство с Parallax Scrolling
4 min
292KTranslation
Любой, кто играл или наблюдал за игрой друзей, либо в принципе видел игры, которые были выпущены в 80-90-х годах, должны быть знакомы с техникой параллакс-скроллинга.
Вспомните такие игры, как Mario Bros, Streets of Rage, Mortal Kombat, Turtles in Time или оригинальную игру Moon Patrol. В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.
Почему я начал говорить о ретро-играх в статье о веб-разработке? Самым простым ответом мог бы быть «потому что они клевые», но нет. Параллакс-скроллинг является классным дизайнерским концептом, который прокладывает свой путь в мир веб-дизайна. Nike были одними из первых, кто использовал эту технику с большим успехом, когда они наняли маркетинговых гигантов Weiden and Kennedy для разработки их оригинального сайта Nike Better World. Сайт Nike Better World с того времени был обновлен и заменен на новый, однако есть другой сайт, довольно похожий на то, как выглядел первый параллакс-дизайн от Nike — сайт о спортивных напитках Activate.
Вспомните такие игры, как Mario Bros, Streets of Rage, Mortal Kombat, Turtles in Time или оригинальную игру Moon Patrol. В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.
Почему я начал говорить о ретро-играх в статье о веб-разработке? Самым простым ответом мог бы быть «потому что они клевые», но нет. Параллакс-скроллинг является классным дизайнерским концептом, который прокладывает свой путь в мир веб-дизайна. Nike были одними из первых, кто использовал эту технику с большим успехом, когда они наняли маркетинговых гигантов Weiden and Kennedy для разработки их оригинального сайта Nike Better World. Сайт Nike Better World с того времени был обновлен и заменен на новый, однако есть другой сайт, довольно похожий на то, как выглядел первый параллакс-дизайн от Nike — сайт о спортивных напитках Activate.
+85
jBone. Замена jQuery для Backbone или 2kb для DOM манипуляций
3 min
12KПриветствую всех.
jBone — микро библиотека (2кб gzipped) для работы с DOM в современных браузерах. Она частично имплементирует интерфейсы jQuery для основных методов необходимых для корректной работы Backbone, но может использоваться и независимо.
Проблема
jBone родился при решении конкретной задачи — разработки мобильного приложения. Основными требованиями были отзывчивость UI и скорость загрузки приложения. Очень скоро стало ясно, что почти половину всего кода у нас занимает jQuery, причем решались с помощью него очень простые задачи.
+24
Одна из самых больших DDoS-атак в истории
2 min
177KНа протяжении последней недели многие пользователи интернета в Европе столкнулись с задержками и кратковременной недоступностью множества сайтов. Их причина — бушевавшая всё это время DDoS-атака, достигавшая 300 гигабит в секунду — одна из самых крупных, возможно даже самая крупная за всю историю интернета. Масштаб атаки был таков, что её ощутили даже «киты», на которых стоит интернет — Tier-1-операторы и крупнейшие точки обмена трафиком европейских столиц.
Причиной атаки стал конфликт между организацией Spamhaus, составляющей списки распространителей спама, и голландским провайдером Cyberbunker. Конфликт разгорелся после того, как Spamhaus включила Cyberbunker в списки спамеров. Cyberbunker — один из самых радикально настроенных «абузоустойчивых» провайдеров. Его услугами пользовалась Пиратская Бухта. Штаб-квартира и серверы Cyberbunker расположены в пятиэтажном здании бывшего военного бункера НАТО — отсюда и название. Как утверждает Spamhaus, в ответ на включение в чёрный список Cyberbunker начал атаку.
Причиной атаки стал конфликт между организацией Spamhaus, составляющей списки распространителей спама, и голландским провайдером Cyberbunker. Конфликт разгорелся после того, как Spamhaus включила Cyberbunker в списки спамеров. Cyberbunker — один из самых радикально настроенных «абузоустойчивых» провайдеров. Его услугами пользовалась Пиратская Бухта. Штаб-квартира и серверы Cyberbunker расположены в пятиэтажном здании бывшего военного бункера НАТО — отсюда и название. Как утверждает Spamhaus, в ответ на включение в чёрный список Cyberbunker начал атаку.
+192
Пишем single-page web application framework в 60 строках кода
5 min
76KВ качестве предисловия
Веб-дизайнерский народ в последнее время распробовал single page web applications. Что оправдано во многих случаях.
Но явно ошибочно считать что single page web application не сделать без чего-то типа AngularJS, Ember и прочих Knockouts.
Во всяком случае если вам нужно сделать нечто простое типа To-do списка совершенно не обязательно тащить на клиент килобайты мега-фреймворка. На самом деле килобайты трафика это пол беды. Основная цена, скажем AngularJS, в том что он, как любой универсальный data binding механизм, создает значительную run-time нагрузку.
Эта статья про то как в 60 строках кода + jQuery/Zepto сделать простой app framework котрый можно расширять под свои нужды и без лишних сущностей в нагрузку.
Постановка задачи
Наш framework должен ...:
- … поддерживать routing, т.е. должна быть возможность сказать в деклартивной модели: «этот вот url hash должен быть показан в этом view».
- Должна быть возможность динамической загрузки разных view. Какие-то части нашего приложения могут быть либо тяжелы для начальной загрузки, либо не нужны, например, для незалогиненного пользователя.
- Должна быть возможность динамической загрузки скриптов. По причинам изложенным в п. 2
- Наше приложение будет поддерживать browsing history — кнопка «назад» в браузере должна показывать предыдущую страницу и т.д.
- Ну и все это должно быть компактным и расширяемым как того будет требовать логика нашего приложения.
Пример того что мы хотим получить
Приложение Bootstrap'нутый список контактов — содержит сам список, карточку — детали контакта и некую панель управления (dashboard). Что будет на той панели нам не важно — знаем что что-то будет и ладно.
+39
Harmony collections NOW
11 min
9.6KНа хабре уже проскакивала статья про такие замечательные вещи, как Map, WeakMap и Set, но в действительности реальные возможности этих API не были раскрыты (если я все-таки хорошо воспользовался поиском).
Эти API толком не реализованы нигде, кроме firefox (можно включить в chrome canary), но даже там до недавних пор не поддерживалось использование HTMLElement-подобных объектов в качестве ключей. Polymer, например, убрал только три недели назад
if (navigator.userAgent.indexOf('Firefox/') > -1)
Чем же они так хороши? По сути Map/WeakMap можно воспринимать как обычные хэш-объекты, только в качестве ключей можно использовать только сложные объекты (Object, Function, Array), так как привязка идет не по содержимому, а по адресу в памяти.
Таким образом появляется возможность привязаться на фронтэнде к
- dom-элементу
- XHR-запросу
- File-элементу
Это дает нам возможность работать без id-шников элементов, делать дата-биндинг в разы быстрее, создать безумную альтернативную реализацию promises и так далее.
Мы будем говорить о WeakMap. Даже не так, мы будем говорить о существующих полифиллах для WeakMap.
+35
Как 45 минут терять по $172 222 в секунду
4 min
157KTranslation
Это, пожалуй, самый болезненный отчет об ошибке, который я когда-либо читал. Он красочно описывает шаги, которые привели к потере 465 миллионов долларов компанией Knight Capital в связи с ошибкой программного обеспечения, проявившейся в прошлом году и обанкротившей компанию.
В этом отчете есть все характеристики технического долга в огромной, лишенной поддержки и запущенной базе кода (ошибка произошла из-за исполнения кода, который не использовали почти 9 лет) и ужасная и грустная история взаимодействия между разработчиками ПО и ИТ-профессионалами.
В этом отчете есть все характеристики технического долга в огромной, лишенной поддержки и запущенной базе кода (ошибка произошла из-за исполнения кода, который не использовали почти 9 лет) и ужасная и грустная история взаимодействия между разработчиками ПО и ИТ-профессионалами.
+150
Очередная программная закладка в роутерах D-Link
2 min
132KНа информационном портале devttys0.com некто Craig Heffner – опытный специалист в области реверс-инжиниринга – выложил статью-исследование очередной (уже находили) программной закладки в роутерах D-Link. На этот раз закладка была выявлена в официальной прошивке для DIR-100 revA, но, по его мнению, присутствует в роутерах других серий:
- DIR-100
- DI-524
- DI-524UP
- DI-604S
- DI-604UP
- DI-604+
- TM-G5240
- Planex BRL-04UR
- Planex BRL-04CW
Коротко говоря, если у вашего браузера установлен User-Agent как «xmlset_roodkcableoj28840ybtide», то вы автоматически получаете админский доступ к веб-панели управления роутером без всякой авторизации.
+209
Создание гравитационной и портальной пушки. Как правильно убить персонажа в машине и создать теплый вязаный интерфейс
11 min
39KTutorial
Привет Хабра!
Эта статья продолжает цикл статей об игровом движке StalinGrad. В прошлой статье мы насиловали DHTML, а в этой — будем насиловать архитектуру и прототипы.
Кода практически не будет, поэтому, если вы не web разработчик, можете просто почитать про архитектуру и ООП. И таки да — про HTML5 тут снова ничего не будет, только DHTML-хардкор :)
Сразу короткое демо:
Пример 1 — паралельные миры
Пример 2 — один мир с разных камер
Пример 3 — боты
Пример 4 — нянкэт, облака и портальная пушка
Эта статья продолжает цикл статей об игровом движке StalinGrad. В прошлой статье мы насиловали DHTML, а в этой — будем насиловать архитектуру и прототипы.
Кода практически не будет, поэтому, если вы не web разработчик, можете просто почитать про архитектуру и ООП. И таки да — про HTML5 тут снова ничего не будет, только DHTML-хардкор :)
Сразу короткое демо:
Пример 1 — паралельные миры
Пример 2 — один мир с разных камер
Пример 3 — боты
Пример 4 — нянкэт, облака и портальная пушка
+83
«А что если», Event Sourcing
4 min
70KНаверное, про Event Sourcing слышал каждый, кто хоть раз пересекался с темой CQRS и DDD. Это подход хранения данных, при котором вместо конечного результата храниться череда записей о событиях происшедших с некоторой сущностью. На сайте Мартина Фаулера есть подробное описание, а мы же остановимся на фундаменте, основных «печенюшках», а также проблемах в его применении.
+27
Обфускация JavaScript
5 min
195KВ статье собраны всем известные методы и предельно извращенные. Эту статью я решил написать после недавнего прочтения поста в блоге Badass JavaScript и решил её дополнить своими находками.
Он всем известен — обфускация минимизаторами такими как JS Packer, JSmin, YUI Compressor, Closure compiler или можно просто пугуглить «JavaScript Obfuscator» и найдется ещё сто штук разных обфускаторов.
Они превращают существующий код
В какой-то такой вид:
Или такой:
Или вот такой:
Но ничего не стоит его восстановить с помощью jsbeautifier.org либо просто убрать eval и получить исходный код, многое потеряем, но смысл кода восстановим. Ну и с первого взгляда мы видим, что перед нами JavaScript.
Все это были цветочки под катом жесткие методы обфускации.
Первый способ
Он всем известен — обфускация минимизаторами такими как JS Packer, JSmin, YUI Compressor, Closure compiler или можно просто пугуглить «JavaScript Obfuscator» и найдется ещё сто штук разных обфускаторов.
Они превращают существующий код
function MyClass(){
this.foo = function(argument1, argument2){
var addedArgs = parseInt(argument1)+parseInt(argument2);
return addedArgs;
}
var anonymousInnerFunction = function(){
// do stuff here!
}
}
В какой-то такой вид:
function MyClass(){this.foo=function(c,b){var d=parseInt(c)+parseInt(b);return d};var a=function(){}};
Или такой:
var _0xd799=["\x66\x6F\x6F"];function MyClass(){this[_0xd799[0]]=function (_0xefcax2,_0xefcax3){var _0xefcax4=parseInt(_0xefcax2)+parseInt(_0xefcax3);return _0xefcax4;} ;var _0xefcax5=function (){} ;} ;
Или вот такой:
eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('4 0="3 5!";9 2(1){6(1+"\\7"+0)}2("8");',10,10,'a|msg|MsgBox|Hello|var|World|alert|n|OK|function'.split('|'),0,{}))
Но ничего не стоит его восстановить с помощью jsbeautifier.org либо просто убрать eval и получить исходный код, многое потеряем, но смысл кода восстановим. Ну и с первого взгляда мы видим, что перед нами JavaScript.
Все это были цветочки под катом жесткие методы обфускации.
+159
RESTful API на Node.js + MongoDB
16 min
258KTutorial
Я, будучи разработчиком мобильных приложений, часто нуждаюсь в backend-сервисах для хранения пользовательских данных, авторизации и прочего. Конечно, для подобных задач можно использовать BaaS (Parse, Backendless, etc…). Но свое решение — это всегда более удобно и практично.
И я все же решил изучить совершенно неизвестные для меня технологии, которые сейчас весьма популярны и позиционируются, как легко осваиваемые новичками и не требующие глубоких знаний и опыта для реализации масштабных проектов. Вот и проверим вместе, может ли неспециалист написать свой эффективный и правильный бэкенд.
В данной статье будет рассмотрено построение REST API для мобильного приложения на Node.js с использованием фреймворка Express.js и модуля Mongoose.js для работы с MongoDB. Для контроля доступа прибегнем к технологии OAuth 2.0 с помощью модулей OAuth2orize и Passport.js.
Пишу с позиции абсолютного новичка. Рад любым отзывам и поправкам по коду и логике!
И я все же решил изучить совершенно неизвестные для меня технологии, которые сейчас весьма популярны и позиционируются, как легко осваиваемые новичками и не требующие глубоких знаний и опыта для реализации масштабных проектов. Вот и проверим вместе, может ли неспециалист написать свой эффективный и правильный бэкенд.
В данной статье будет рассмотрено построение REST API для мобильного приложения на Node.js с использованием фреймворка Express.js и модуля Mongoose.js для работы с MongoDB. Для контроля доступа прибегнем к технологии OAuth 2.0 с помощью модулей OAuth2orize и Passport.js.
Пишу с позиции абсолютного новичка. Рад любым отзывам и поправкам по коду и логике!
Содержание
- Node.js + Express.js, простой web-сервер
- Error handling
- RESTful API endpoints, CRUD
- MongoDB & Mongoose.js
- Access control — OAuth 2.0, Passport.js
+38
Наш взгляд: Meteor против Derby
11 min
18KTranslation
От переводчика: Не встречал на хабре материалов, посвященных фреймворку Derbyjs, который часто упомянается, как основной конкурент Meteor. Под катом сравнение этих двух фреймворков, сделанное авторами Derby. Сравнению уже больше года, но тем, кто не читал, думаю будет интересно.
+10
Ratchet — быстрое прототипирование мобильных приложений на HTML, CSS и JS
1 min
24KRatchet — новый фреймворк, который позволяет быстро создавать прототипы приложений для iOS. По сути является аналогом Twitter Bootstrap для мобильных устройств.
Сайт проекта | Ratchet на GitHub | Обсуждения в Google Groups | Twitter
+33
PhoneJS — Новый HTML5-фреймворк для мобильных приложений
8 min
66KНовые инструменты для разработки под мобильные устройства появляются сегодня чуть ли не каждый день. Большая часть из них — это HTML5-фреймворки, с помощью которых, обладая навыками веб-программиста, можно создавать приложения для смартфонов и планшетов, не углубляясь в изучение платформенных SDK и других языков.
Мы видим этот тренд и видим примеры реализации пользовательских интерфейсов на HTML5, не уступающих по качеству нативным приложениям, и верим, что за HTML5 стоит будущее кросс-платформенных мобильных приложений.
В настоящее время веб-технологии и JavaScript, в частности — это очень либеральная среда, не привязанная к конкретным средствам и методологиям разработки. Как в любой подобной ситуации, с одной стороны это дает свободу, с другой стороны вносит долю хаоса.
Мы в DevExpress организовали небольшую команду, которая на протяжении нескольких месяцев анализировала и пробовала различные существующие средства и подходы. Результат полученного опыта — PhoneJS — наше комплексное решение для создания кросс-платформенных мобильных приложений на HTML5.
Мы видим этот тренд и видим примеры реализации пользовательских интерфейсов на HTML5, не уступающих по качеству нативным приложениям, и верим, что за HTML5 стоит будущее кросс-платформенных мобильных приложений.
В настоящее время веб-технологии и JavaScript, в частности — это очень либеральная среда, не привязанная к конкретным средствам и методологиям разработки. Как в любой подобной ситуации, с одной стороны это дает свободу, с другой стороны вносит долю хаоса.
Мы в DevExpress организовали небольшую команду, которая на протяжении нескольких месяцев анализировала и пробовала различные существующие средства и подходы. Результат полученного опыта — PhoneJS — наше комплексное решение для создания кросс-платформенных мобильных приложений на HTML5.
+87
Information
- Rating
- Does not participate
- Registered
- Activity