Ну сразу стоит извиниться за запоздалую реакцию, ведь «неделя 30 строк» прошла, а я выкладываю этот пост только сейчас. Все из-за тяжелой рабочей недели и только на выходных удалось выделить немного времени.
Сразу поблагодарю пользователя deadkrolik за статью Алгоритм Эллера для генерации лабиринтов и оговорюсь о том что я плут и мошенник и 30 строками кода тут и не пахнет))) Кто не любит ждать объяснений, прошу сразу на Fiddle.
Читать полностью »
Рубрика «javascript» - 448
Генерация лабиринтов алгоритмом Эйлера в 30 строк
2013-11-24 в 23:53, admin, рубрики: 30 строк, canvas, javascriptHTML5 Canvas Схема пригородного движения ж/д сообщения Москвы и МО
2013-11-24 в 17:47, admin, рубрики: canvas, dbcartajs, html5, javascript, mosmetro, Веб-разработка, метки: Canvas, dbcartajs, html5, mosmetro Ещё одна схема движения железнодорожного транспорта с использованием возможностей Canvas и dbCartajs.
В оригинале она называется Moscow Underground and Commuter Rail Map, её можно видеть в тамбурах подмосковных электричек. Изначально я хотел реализовать именно эту карту в качестве очередного демо к проекту dbCartajs, но в Сети нашёл лишь копию карты, снятую на мобильный телефон с неважным качеством. Зато с легкостью нашел с десяток схем Московского метро. Самая красивая, на мой взгляд, в Википедии, самая неказистая оказалась почему-то у Яндекса с его-то возможностями. Собственно SVG-вариант из Википедии я и переделал под Canvas, о чем писал в предыдущей статье.
Читать полностью »
Изоморфный JavaScript — будущее веб-приложений. Испугались?
2013-11-24 в 16:13, admin, рубрики: javascript, Веб-разработка, изоморфный JavaScriptВ компании Airbnb мы многому научились за последние несколько лет, создавая мощные веб-приложния. Мы погрузились в мир одностраничных приложений в 2011 г., делая мобильную версию нашего сайта, с тех пор, кроме прочего, мы запустили Wish Lists и новый поиск. Все это — большие JavaScript приложения, что означает то, что тонны кода запускаются в браузере, чтобы обеспечить современный интерактивный пользовательский опыт.
Это обычный подход сегодня, когда такие библиотеки, как backbone.js, ember.js и angular.js помогают разработчикам создавать мощные JavaScript приложения. Мы поняли, однако, что такие приложения имеют несколько критических ограничений. Чтобы стало понятно, давайте предпримем небольшой тур по истории веб-приложений.
Читать полностью »
Как это сделано — доступ к контенту iFrame с другого домена
2013-11-24 в 8:53, admin, рубрики: java, javascript, Блог компании Mail.Ru Group, Веб-разработка, вебразработка, метки: java, javascript, вебразработка Сегодня я хочу рассказать о том, как мы в своем проекте indexisto.com сделали дешевую китайскую подделку аналог инструмента Google Webmaster Marker. Напомню, что Marker это инструмент в кабинете Google Webmaster, который позволяет аннотировать ваши страницы Open Graph тегами не вставляли их в код страницы. Для этого вы просто размечаете контент вашей страницы в админке Google Webmaster. Страница грузиться в Iframe, Далее вы просто выбираете мышкой текст на странице и в контекстном меню помечаете, что это title, а это published_time.
Теперь Google, встретив подобную страницу на вашем сайте, уже знает, что за контент на ней опубликован и как его красиво распарсить в сущность (статью, товар, видео..)
Нам был нужен подобный функционал. Задача казалась несложной и исключительно клиентсайд. Однако на практике решение лежит на стыке клиентсайда и серверсайда. При этом «чистые» JS программисты могу ничего не знать про различные прокси серверы и очень долго подходить к снаряду.
Читать полностью »
А что Вы думаете о StarlingJS?
2013-11-23 в 6:44, admin, рубрики: Flash-платформа, javascript, starling, Блог компании CodeOrchestra, метки: starlingНаш друг Алекс Винкс распетрушил демку StarlingJS, поправил баги, допилил, портировал свою флеш-демку и выложил исходники:
Как мы делали сервис на WebRTC
2013-11-22 в 18:31, admin, рубрики: backbone, html5, javascript, pics.io, WebRTC, Блог компании TopTechPhoto, метки: backbone, html5, javascript, pics.io, WebRTC 
Статей про WebRTC уже достаточно много и в интернетах, и на Хабре (здесь и здесь), повторять их ещё раз не имеет особого смысла, поэтому тут приведем наш личный опыт и впечатления, полученные при раработке live.pics.io.
Идея
Live.pics.io позволяет создавать приватные сессии для совместного просмотра и обсуждения изображений голосом. Это могут быть любые изображения: от фотографий, до макетов дизайна и презентаций. Pазрабатывая pics.io, мы достаточно хорошо научились работать с разными raw форматами в браузере, поэтому можно не заморачиваться с конвертацией и закидывать фотографии сразу после съемки (будут рады владельцы Canon’ов и Nikon’ов, остальные камеры пока требуют конвертации в DNG).
Очень коротко о webRTC
На самом деле, использовать WebRTC — это практически то же самое, что использовать сокеты. Но немного по-другому (совсем чуть-чуть). Нам нужно передавать изображение и звук. Берем RTCPeerConnection для соединения между пирами, MediaStream для трансляции аудио и RTCDataChannel для передачи изображений. Еще, для того, чтобы все это заработало, понадобится небольшой серверсайд для соединения пиров и передачи управляющих инструкций. Но об этом чуть позже.
Генератор визуальных интерфейсов с генетическим алгоритмом в помощь дизайнерам
2013-11-21 в 18:24, admin, рубрики: javascript, Алгоритмы, генетические алгоритмы, Дизайн в IT, метки: генетические алгоритмы 
Результат генерации первого поколения
Я не дизайнер. Но иногда приходится для каких-то своих проектов придумывать какой-то дизайн, чего я очень не люблю делать. Колдуя несколько часов в фотошопе в голову ничего интересного так и не приходит. Вроде сделаю какой-никакой макет, но чего-то не хватает. Что-то не то. Нужно вдохновение. Именно так и родилась идея сделать генератор визуальных интерфейсов, который служил бы источником вдохновения, подсказывал какие-нибудь формы и их положение. А потом в мою неспокойную голову пришла идея сделать генетический алгоритм, где в роли фитнесс-функции буду выступать я со своей субъективной оценкой. Забегая вперед скажу, что ничего особенного из этой идеи не вышло. Читать полностью »
В Google показали сложный WebGL-мир для мобильного Chrome
2013-11-21 в 9:54, admin, рубрики: android, Google Chrome, javascript, webaudio, WebGL, метки: android, Google Chrome, webaudio, WebGLПоследнее обновление Google Chrome для Android привело к тому, что экран при скроллинге сильно дёргается и использовать браузер стало крайне некомфортно — реакцию пользователей на эту проблему, которую исправлять в ближайшем времени, кажется, не собираются, можно увидеть в комментариях в Play Market.
Команда инженеров в рамках уже известного ранее экспериментального проекта Chrome Experiment показала новый проект "Хоббит: Пустошь Смауга" (по мотивам «Хоббита» Толкиена, укороченная ссылка сразу для неиспорченного обновлением браузера: goo.gl/EOdnHI), созданный специально для мобильного Chrome.
Читать полностью »
Автоматическое тестирование iOS приложений
2013-11-21 в 8:42, admin, рубрики: iOS, javascript, mobile, mobile development, testing, разработка под iOS, тестирование, метки: iOS, javascript, mobile, testing 
Бывает, наступает момент, когда нужно следить, не развалился ли лишний раз интерфейс мобильного приложения. Чтобы решить эту проблему используются автоматические тесты. Для веб страниц считается общепринятой практикой использовать Selenium Web driver, поэтому для мобильных приложений я искал похожие вещи. И, на счастье, таких нашлось немало, в них используется Selenium WebDriver JSON Wire Protocol.
Читать полностью »
Крошечный контейнер для мини-приложений в 30 строк на чистом JS
2013-11-21 в 7:54, admin, рубрики: 30 строк, javascript, localStorage, ненормальное программирование, метки: 30 строк, javascript, localStorage Увидев на хабрахабре крутые реализации программ в 30, 24, 19 и даже 1 строчку, тоже решил поморать чистые страницы хабра чем-нибудь этаким. Тем более, что давно хочется инвайт выпала возможность поработать в новом для себя качестве.
Дело в том, что по работе мне пришлось учиться писать расширения для хрома. Так как задача сама по себе была небольшая, то первой мыслью естесственно было написать лапшекод в лоб. Но помучившись с получением и сохранением данных в localStorage, решил, что так дело не пойдет, и, уж как минимум, надо написать какую-нить обертку над localStorage.
Вообще в самом начале я честно погуглил на предмет наличия разных фреймворков для расширений. Нашел, например, Kango. Но мне не нужна была кроссбраузерность (расширение писалось только для Chrome), и не было желания заморачиваться изучением сторонних библиотек ради небольшого приложения, поэтому было решено написать свой велосипед.
Задачи, которые ставились перед контейнером:
- Удобная работа с localStorage. Получаем и сохраняем любые данные, в том числе объекты и массивы.
- Какая-нибудь валидация параметров (хотя бы в случае, если такого параметра в localStorage просто нет).
- Возможность фасовать параметры по группам — плохо когда все свалено в одну кучу.
- Подключение функциональности с разносом по отдельным компонентам, при этом вероятно будет необходима преинициализация некоторых параметров.
В принципе все удалось реализовать в небольшом контейнере, и для небольших приложений он меня устраивает на 100%.
Читать полностью »