Недавно написал одно приложение для собственного удобства, и сначала не хотел о нем рассказывать. Потом подумал, что оно может пригодиться кому-то еще. По сути это сервис для планирования автомобильных маршрутов, собранный из готовых компонентов google maps api. Это — клон Google Maps Engine, однако без досадных ограничений последнего. Бесплатный, опенсурсный, чистый фронтэнд без сервера, код выложен на github.
Рубрика «javascript» - 430
Планирование автопутешествий на базе google maps api
2014-03-05 в 11:07, admin, рубрики: Google API, google maps api v3, Google Maps Engine, javascript, knockout, open source, метки: google maps api v3, Google Maps Engine, knockout, open sourceНовые бесплатные курсы виртуальной академии Microsoft Virtual Academy, февраль 2014
2014-03-05 в 6:57, admin, рубрики: ASP.NET, html5, iaas, javascript, mva, sql database, storage, system center, Windows 8, windows azure, Windows Server, Блог компании Microsoft, разработка, системное администрирование, метки: ASP.NET, html5, IaaS, javascript, mva, sql database, storage, system center, Windows 8, windows azure, Windows Server 
В этом обзоре мы поговорим про бесплатные курсы виртуальной академии Microsoft MVA, которые будут полезны как ИТ-профессионалам так и разработчикам программного обеспечения.
Хит! Полный курс по JavaScript для абсолютных новичков
Большой курс с 21 модулем на тему JavaScript от Боба Тэбора, автора портала www.LearnVisualStudio.net. Курс предназначен для абсолютных новичков в JavaScript и покрывает все концепции языка, позволяя научиться разрабатывать динамические веб-сайты, красивый пользовательский интерфейс и игровые приложения в браузере.
Хит! Разработка современных веб-приложений со Скоттом Хансельманом
Watch Scott Hanselman, host of Azure Friday, with his team of experts from the Windows Azure Application and Web Tools Platform team, as they take you on an entertaining journey through the latest tools and capabilities of the Windows Azure and Web platform for developers. He challenges you to apply your new knowledge right away with both overviews and deep dives covering everything the team is working on today—and tomorrow.
Новый! Параллельное программирование с помощью языка C#
Курс предназначен для практического введения в параллельное программирование (ПП) и знакомства с основными возможностями ПП на платформе .NET 4.0 Курс включает общие теоретические сведения по дисциплине параллельное программирование в объеме необходимом для реализации эффективных параллельных приложений. Большая часть материала посвящена практическому знакомству с возможностями библиотеки TPL (Task Parallel Library). Все разделы иллюстрируются практическими примерами. Все конструкции и средства TPL закрепляются выполнением лабораторных работ.
Читать полностью »
Графы — sigmajs
2014-03-05 в 6:06, admin, рубрики: canvas, html5, javascript, метки: Canvas, html5, javascriptПривет, уважаемое Хабра сообщество. В один из прекрасных летних дней, позвонил мне мой товарищ, и сказал, что у него есть для меня очень интересная задача. Я люблю интересные задачи. Приехав на следующий день в офис, мы обсудили задачу. Задача, в двух словах, поставлена была следующая: отобразить на браузерном канвасе иерархию ~ 30000 пользователей с зависимостью между ними, плюс должна присутствовать некая анимация, которая в контексте данного поста не существенна, может в будущих, если на то будет время и Ваше одобрение.
Мы ударили по рукам, я сказал, что мне нужно провести «изыскания», так как сфера (JS + Canvas), была для меня была нова, и выяснить насколько развитие браузерных технологий соответствует реалиями поставленной задачи.
Через некоторое, не долгое время, я наткнулся на замечательную библиотеку — sigmajs, на тот момент была версия 0.8.2, если мне не изменят память, которая удовлетворила почти все наши амбициозные потребности.
С тех пор, много воды утекло, появилась версия сигмы 1.0.0, я обрел новый багаж знаний в сфере JS + Canvas и веба в целом. Для тех, кого я заинтриговал, прошу под кат, где будет дан краткий обзор библиотеки — sigmajs.
JavaScript to APK. Подводные камни разработки под Android для тех, кого задолбал PhoneGap. Построение мостов из Java в JavaScript
2014-03-04 в 11:09, admin, рубрики: android, css, html5, javascript, phonegap, Блог компании i-Free, Веб-разработка, метки: android, css, html5, javascript, phonegapПривет !
Я люблю игры на JavaScript и стараюсь сделать их код пуленепробиваемыми для портирования на все платформы. Полгода назад я уже писал о сборке Android приложений и сегодня хотел бы раскрыть тему более подробно.
Сразу предупрежу, что мне пришлось отказаться от PhoneGap, т.к. опыт использования его в двух проектах меня огорчил. Он отлично справляется с «Hello World» приложениями, но при конвейерной сборке всего подряд всплывают нюансы.
Почему PhoneGap не пошел:
1. Он изначально пустой. Постоянно приходится подключать все новые и новые модули.
2. Многие модули написаны криво. Они либо берут много лишнего, либо ведут себя неожиданно. Например, из двух модулей под Android для отправки SMS, один не работал, второй — отправлял true при любых условиях.
3. Не решены элементарные вещи, вроде получения EMEI телефона. Нужно постоянно допиливать.
Font boosting в мобильных браузерах
2014-03-04 в 11:00, admin, рубрики: Google Chrome, inline-block, javascript, mobile developement, Мобильный веб, метки: Google Chrome, inline-block, javascript, mobile developementЯ хочу рассказать о том, что такое font boosting в мобильных браузерах, к какой неожиданной проблеме он может привести при web-разработке и как с этой проблемой бороться.
Рассмотрим пример из реальной жизни:
Пример 1:
- Имеется вновь созданный
spanсdisplay: inline-block.- Измеряем его ширину в пикселях через свойство
offsetWidth.- Меняем его цвет.
- И, вдруг, в Google Chrome for Mobile, после изменения цвета ширина элемента резко увеличивается, переставая соответствовать той, что была измерена всего двумя строчками выше!
Показать код<!DOCTYPE html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset=utf-8" /> <title>Проблема с Font boosting в Google Chrome for Mobile</title> <script type = "text/javascript"> window.onload = function () { var spnSpan1 = document.getElementById ("span-1"); alert ("Ширина элемента до изменения цвета: "+ spnSpan1.offsetWidth +"px"); //59px spnSpan1.style.color = "red"; alert ("Ширина элемента после изменения цвета: "+ spnSpan1.offsetWidth +"px"); //186px } </script> </head> <body> <p> <span id = "span-1" style = "display: inline-block;">Элемент</span> </p> <!-- На странице должно быть достаточно текста. Если убрать этот абзац, глюк перестанет возникать. --> <p> abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc </p> </body> </html>
Смотреть пример on-line.
(Для просмотра примеров из этой статьи воспользуйтесь Google Chrome for Mobile или обычным Google Chrome в режиме эмуляции смартфона, например Apple iPhone или Samsung Galaxy Note II).
Причиной такого странного поведения, как раз, и является font boosting.
Что такое font boosting
Font boosting — это специальный прием, с помощью которого мобильные браузеры подгоняют размер шрифта под разрешение мобильного устройства. Этот прием нужен из-за того, что многие web-страницы, сверстанные в расчете на десктопные браузеры, содержат текстовые элементы, ширина которых превышает ширину мобильного экрана. Для просмотра этих элементов посетитель вынужден либо использовать горизонтальную прокрутку, либо вписать элемент в размеры экрана, уменьшив масштаб страницы. Однако, при уменьшении масштаба уменьшается также и размер шрифта, делая текст порой совершенно нечитаемым. Так вот, font boosting специально увеличивает размер шрифта, так, чтобы после вписывания блока в ширину экрана, этот размер шрифта соответствовал изначально задуманному.
Степень увеличения размера шрифта при font booting'е зависит от ширины элемента — чем шире элемент, тем сильнее его надо уменьшить, чтобы вписать в размеры экрана, и, соответственно, тем больше надо увеличить размер шрифта для компенсации этого уменьшения.
Проблемы font boosting в Google Chrome for Mobile
Реализация font boosting в Google Chrome for Mobile имеет две особенности, которые могут привести к сложнообнаружимым ошибкам при web-разработке:Читать полностью »
JSDuck — генератор документации
2014-03-04 в 9:43, admin, рубрики: javascript, Библиотека ExtJS/Sencha, документация, метки: документация Документирование является неотъемлемой частью хорошего кода и проекта в целом. Хорошие разработчики тратят много времени на поддержку документации, но в дальнейшем это окупается с лихвой: экономит время на поддержке кода, его расширении и исправлении багов, позволяет сократить время на погружение в проект новых разработчиков и т.д. Так же, хорошо документированный код неявно стимулирует разработчика к применению стандартов кодирования.
Читать полностью »
Пишем генератор для Yeoman.io. Часть первая
2014-03-03 в 18:19, admin, рубрики: javascript, node.js, nodejs, npm, yeoman, метки: javascript, nodejs, npm, yeoman Доброго времени суток, читатели! В этом цикле статей я хочу описать опыт создания генератора для scaffolding системы Yeoman. Прежде всего, я был немного удивлён тем, что данная система и работа с ней не были описаны на хабре, разве что одно маленькое упоминание из далекого 2012 года: Yeoman.io. Как я уже написал выше, в данном цикле статей я буду рассматривать поэтапное создание yeoman-генератора для ваших проектов.
Читать полностью »
Звездное Небо на Canvas. Созвездия
2014-03-02 в 19:33, admin, рубрики: canvas, dbcartajs, egaxegax, html5, javascript, map, proj4js, projection, starry sky, Веб-разработка, звездное небо, карта, планетарий, проекции, метки: Canvas, dbcartajs, egaxegax, html5, javascript, map, proj4js, projection, starry sky, звездное небо, карта, планетарий, проекцииПродолжение темы, начатой в предыдущей статье. Идеей к ее развитию послужило прочтение статьи на Хабре «LibCanvas: На пути к звёздам», где описывается реализация планетария на Canvas с выводом созвездий и планет в азимутальной системе координат. В посте автор дает ссылку на базу данных звезд и созвездий, которой я любезно воспользовался. Файл содержит координаты прямого восхождения (Right Ascension, в часах) и склонения (Declination, в градусах) звезд, точек созвездий и их названий. Я перевел их в радианы и сохранил в файл constellations.js для своего «звездного» проекта Starry Sky.
Несколько интересностей и полезностей для веб-разработчика #12
2014-03-01 в 20:33, admin, рубрики: css, html, javascript, Веб-разработкаДоброго времени суток уважаемые читатели. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.
BrowserSync
Я считаю это лучшим Live Reload инструментом. BrowserSync — это: конечно же перезагрузка страницы после изменения исходных файлов в том числе и серверных (PHP, ASP, Rails и др); синхронизация с десктопами, планшетами и смартфонами; синхронизирует между браузерами скроллинг, данные в формах и множество других действий; существует как Grunt и Gulp плагин; доступен на Windows, Linux, MacOS.
npm install -g browser-sync
// Using a an IP based host
browser-sync --proxy "192.167.3.2:8001" --files "app/css/*.css"
AngularJS vs IML
2014-03-01 в 12:45, admin, рубрики: .net, AngularJS, ASP.NET, asp.net mvc, frontend-разработка, javascript, nojs, razor, метки: AngularJS, ASP.NET, asp.net mvc, c++, client-side, frontend-разработка, nojs, razor, web-framework, фронтенд 
disclaimer: сравнение не подразумевает поднятие “холивара”, а делает обзор задач, решаемых одним инструментом в сравнении с другим. Я не являюсь знатоком всех тонкостей angularJs, но прочитав 10 статьей обзора этого инструмента, привожу альтернативный пример решения тех же самых задач на IML.
Читать полностью »