Доброго времени суток, читатели! В этом цикле статей я хочу описать опыт создания генератора для scaffolding системы Yeoman. Прежде всего, я был немного удивлён тем, что данная система и работа с ней не были описаны на хабре, разве что одно маленькое упоминание из далекого 2012 года: Yeoman.io. Как я уже написал выше, в данном цикле статей я буду рассматривать поэтапное создание yeoman-генератора для ваших проектов.
Читать полностью »
Метка «javascript» - 9
Пишем генератор для Yeoman.io. Часть первая
2014-03-03 в 18:19, admin, рубрики: javascript, node.js, nodejs, npm, yeoman, метки: javascript, nodejs, npm, 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.
Knockout-popover: простой байндинг Twitter Bootstrap Popover для KnockoutJS
2014-02-25 в 11:33, admin, рубрики: Bootstrap, javascript, knockoutjs, метки: bootstrap, javascript, knockoutjsПредлагаю вашему вниманию простой custom binding для KnockoutJS для реализации popover'ов из Twitter Bootstrap.
Единичный случай использования
<span data-bind="popover: true" class="ko-popover"
data-popover-placement="bottom"
data-popover-title="knockout-popover"
data-popover-content="Awesome knockout-popover plugin">
knockout-popover (hover over me :)
</span>
Модульная система YM
2014-02-24 в 10:36, admin, рубрики: amd, CommonJS, javascript, module, метки: amd, CommonJS, javascript, module Еще одна? Зачем? Есть же CommonJS и AMD? Страждующие могут пройти под кат.
Читать полностью »
Стрелочные функции (Arrow functions) в ECMAScript 6
2014-02-24 в 7:08, admin, рубрики: ecmascript 6, ecmascript harmony, javascript, Блог компании Mail.Ru Group, Веб-разработка, метки: ecmascript 6, ecmascript harmony, javascript -v-ECMAScript-6.png "Arrow functions madness")
Одной из самых интересных частей нового стандарта ECMAScript 6 являются стрелочные функции. Стрелочные функции, как и понятно из названия определяются новым синтаксисом, который использует стрелку =>. Однако, помимо отличного синтаксиса, стрелочные функции отличаются от традиционных функций и в других моментах:
- Лексическое связывание. Значения специальных переменных this, super и arguments определяются не тем, как стрелочные функции были вызваны, а тем, как они были созданы.
- Неизменяемые this, super и arguments. Значения этих переменных внутри стрелочных функций остаются неизменными на протяжении всего жизненного цикла функции.
- Стрелочные функции не могут быть использованы как конструктор и кидают ошибку при использовании с оператором new.
- Недоступность «собственного» значения переменной arguments.
Было несколько причин для введения этих отличий. Первоочередная — это то, что связывание (binding) используется довольно часто в JavaScript. Очень легко потерять нужное значение this при использовании традиционных функций, что может привести к непредсказуемым последствиям. Другая причина, это то, что JS-движки смогут легко оптимизировать выполнение стрелочных функций за счет этих ограничений (в противоположность традиционным функциям, которые могут быть использованы в качестве конструктора и которые свободны для модификации специальных переменных).
Legacy или Inheritance: немного оффтопа про .prototype, каламбур для неофита
2014-02-21 в 10:30, admin, рубрики: javascript, метки: javascriptПостараюсь быть неимоверно кратким.
Написано для тех, кто только начинает!
Статей про наследование в JS не счесть:
Считаю важным добавить, что есть терминологическая разница на уровне языка носителей, т.е. — английского. И это принципиально важно, когда Вы работаете с прототипами в JS.
У меня в google по запросу "what is the difference between inheritance and legacy" первая ссылка ведёт сюда: ссылка.
Само собой, что статей там не одна.
Там есть такая строчка, дописка: Also, as pointed out in some comments, «inheritance» is generally from the viewpoint of the receiver, while «legacy» is from the viewpoint of the giver: My inheritance was my father's legacy.
Краткая суть, которая не отражает всей глубины, которую я себе уяснил, в том, что:
- legacy — это взгляд со стороны родителя, широкий
- inheritance — это взгляд со стороны потомка, узкий
Поэтому я считаю, что в обычных ООП языках программирования типа Java, C#, С++ и т.п. используется термин inheritance — наследование.
А у нас в JavaScript используется почти то же самое, но немного шире: legacy — наследство.
А т.к. в Русском Языке разницы между этими понятиями почти нет, то отсюда и масса FuckUp'ов с пониманием зачем это нужно.
И, в том числе потому, что от Legacy code мы никуда не денемся.
UPD: В комментариях подсказывают, что речь идёт о Гипотезr Сепира-Уорфа, спасибо.
Читать полностью »
Стартовала Online продажа Revolution Geeksphone
2014-02-21 в 5:31, admin, рубрики: Firefox, Firefox OS, geeksphone, html, javascript, метки: Firefox OS, geeksphone, javascript Сегодня получил вот такое интересное письмо:
Наконец-то что-то новенькое и интересное появилось. Цена, по-моему конечно немного завышенная относительно его характеристик(222,31 €), но такому аппарату я считаю место быть на рынке.
Читать полностью »
Тестируем MeteorJS-приложение с помощью Laika
2014-02-19 в 16:14, admin, рубрики: javascript, Meteor.JS, Meteorjs, тестирование, метки: javascript, meteorjs, тестированиеВсем привет! Этот небольшой пост посвящен системе тестирования MeteorJS-приложений Laika от Arunoda Susiripala. Ее особенности довольно интересны:
- Laika запускает свои тесты так же, как запускается реальное приложение (используется PhantomJS)
- Каждый тест изолирован, т.е. заново запускается ваше MeteorJS-приложение с чистой базой данных
- Вы можете использовать для разработки и meteor, и meteorite, laika прекрасно работает с ними обоими
- Вы можете запускать проверку на сервере и клиенте в одном тесте. Это поможет протестировать такие моменты, как права доступа (permission), подписки (subscriptions) и вызовы методов (method calls)
- Так как MeteorJS работает в реальном времени, то вам потребуется тестировать приложение при работе нескольких клиентов одновременно. Laika это может.
- Возможность использования событий для более точного тестирования, т.е., фактически, эмуляция работы пользователя
- Передача значений в код во время выполнения теста через аргументы
- Ожидание окончания генерации шаблонов (templates)
Новый интерфейс Яндекс.Метро и технологии, с помощью которых он работает
2014-02-19 в 6:09, admin, рубрики: javascript, Блог компании Яндекс, Веб-разработка, метки: javascriptСегодня мы запустили новую версию веб-интерфейса сервиса Яндекс.Метро. Теперь в новом «островном» дизайне доступны схемы метрополитена пяти городов. Но мы обновили не только визуальную часть, но и перенесли всю логику с серверной стороны на клиентскую.
В этом посте мы хотели бы рассказать, как именно мы это делали, какие решения выбирали и почему.
Сервис Яндекс.Метро был запущен в далеком 2007 году. С тех пор веб-интерфейс практически не развивался, дизайн выглядел откровенно устаревшим. Почтенный возраст сервиса сказывался и на технической стороне. Все схемы представляли собой наборы изображений в формате GIF, на которых при помощи координат размещались объекты. Из-за этого возникали трудности с обновлением графа, нельзя было самостоятельно вносить изменения в схему (приходилось привлекать аутсорсеров, заказывать у них картинки). Так как названия станций также были вшиты в картинки, локализация схем потребовала бы генерации полных наборов GIF-изображений.
Читать полностью »
Как мы :hover на iOS побеждали…
2014-02-18 в 20:59, admin, рубрики: css, html, iOS, javascript, safari, Веб-разработка, метки: css, html, iOS, javascript, safariНи для кого, думаю, не секрет, что touch-устройства обрабатывают «мышиные» события несколько иначе, не так, как это происходит на десктоп-браузерах…
Самый яркий для меня пример, это обработка псевдокласса :hover. Для начала iOS7, например, не будет реагировать на hover если только на элемент, или его родителя, не навешена обработка события click. Это хорошо видно вот на этом примере: jsfiddle.net/H8EmG/ — сколько не тыкай пальцем в текст — никаких подчеркиваний не увидишь. А в этом примере jsfiddle.net/H8EmG/1/ «тычок» пальцем в текст будет приводить к его подчеркиванию. Интересный факт — пока не ткнем в другой элемент, текст так и будет сидеть под ховером…
Другой интересный пример, это обработка появления элементов «по-наведению»: jsfiddle.net/ASRm9/1/ Попробуйте нажать на текст. Сперва вы увидите текст «HOVER!», появившийся внутри строки, а вот второе нажатие уже вызовет alert('click'). Это происходит потому, что iOS понимает что за :hover что-то скрыто, и старается не сломать поведение, заложенное автором сайта.
Но однажды мы столкнулись с такой багой, объяснить которую мы не смогли до сих пор, а на ее локализацию потребовался не один отладки на iPad… Желающие подробностей, а также хитрого, как мне кажется, способа решения, наверное, всех проблем с :hover разом — прошу под кат…