Заморочился я автообновлением странички в браузере на таскаемом с собой iPad при разработке NodeJS/ExpressJS-приложений, чтобы видеть все изменения на лету.
Под катом — как очень просто сделать из мобильного гаджета средство живого просмотра разрабатываемых веб-приложений.
Читать полностью »
Рубрика «javascript» - 435
LiveReload в очень постороннем браузере
2014-02-06 в 9:48, admin, рубрики: javascript, livereload, node.js, практические советы, метки: javascript, livereload, node.js, практические советыRepeatable, еще один способ рендерить списки
2014-02-06 в 5:17, admin, рубрики: javascript, jquery, jquery plugin, веб-дизайн, Веб-разработка, метки: jquery plugin, веб-дизайн(из серии «малая механизация web страниц»)
Что такое Repeatable?
Repeatable это способ вывода (популяции) всякого рода списков, таблиц и пр. по массивам данных. Данный механизм
использует шаблон описанный в самом коде разметки (в отличие от, скажем, {{mustache}} templates).
Поддерживаются выражения и условное включение. И всё это в 90 строках кода.
Repeatable функиональность есть в каждом «взрослом» web framework'е. Но если вы не хотите по тем или иным причинам завязываться с монстрами то вот вам механизм который, что называется, есть не просит.
Пример
Скажем есть такие данные:
var data = [
{ name: "Olga", age: 20, email: "aaa@example.com" },
{ name: "Peter", age: 30, email: "bbb@example.com" },
{ name: "Ivan", age: 15, email: "ccc@example.com" },
];
И нам нужно из вывести как-то так:
<ul id="people">
<li><a href="mailto:{{this.email}}">{{this.name}}</a> <b if="this.age > 18">18+</b> </li>
<li>No data available</li>
</ul>
Первый <li>
собственно и есть шаблон записи. Для каждой записи во входном наборе этот элемент будет повторен с подстановками и гуляшшыми девами. Второй <li>
будет выведен если Repetable «накормить» пустым массивом.
Если у нас это все описано то собственно популяция нашего списка это одна строка:
var list = $("ul#people").repeatable(); // declaring the repeatable
list.value = data; // that's data population, sic!
10+ полезных jQuery сниппетов на каждый день
2014-02-05 в 15:13, admin, рубрики: javascript, jquery, snippets, web-разработка, Веб-разработка
Спустя годы библиотека jQuery стала неотъемлемой частью в работе каждого web-разработчика. Ведь она простая в использовании, быстрая и имеет очень широкие возможности. В этой статье я собрал список из более чем десяти сниппетов, которые вы можете свободно брать для использования. Их очень легко адаптировать под нужды ваших собственных проектов.
Читать полностью »
Кроссплатформенное Smart TV приложение в одном экземпляре. Библиотека SmartBox для Samsung, LG, Philips и других
2014-02-05 в 11:03, admin, рубрики: html, javascript, lg smart tv, philips, philips smart tv, Samsung, samsung smart tv, smart tv alliance, smart tv framework, SmartTV, разработка, метки: html, javascript, lg smart tv, philips, philips smart tv, Samsung, samsung smart tv, Smart TV, smart tv alliance, smart tv framework, smarttv Копаясь в памяти своего неискушённого идеальным миром мозга, я, припоминаю, как два года назад начиналась наша история по разработке приложений для SmartTv. Если коротко, то это был АД!!! богатейший опыт.
Однако, хотелось бы получить этот опыт сразу, не наступая на недокументированные грабли, разложенные по всей технологии, и специальные детские грабли разложенные каждым вендором отдельно. Но как говорится «c'est la vie» и нам пришлось пробиваться сквозь тернии к звёздам!
В итоге мы получили кроссплатформенную расширяемую библиотеку для всех SmartTv.Читать полностью »
Keypress 2.0.0
2014-02-05 в 6:22, admin, рубрики: javascript, Веб-разработка, перехват нажатия, сочетания клавиш, метки: перехват нажатия, сочетания клавишСемнадцать дней назад (19 января 2014 года) вышла новая версия (2.0.0) джаваскриптовой библиотеки Keypress, предназначенной для удобного программирования реакций браузера на события, поступающие от нажатий (и от отпусканий) клавиш на клавиатуре.
Опубликованный на Гитхабе список изменений позволяет уверенно огласить вот что: важнейшим из достоинств новой версии стала возможность ловить события не только во всём окне в целом, но и для одного или нескольких отдельных элементов DOM. Теперь и при программировании различающихся реакций у различных элементов на веб-страницах мы можем с удобством прибегнуть к библиотеке Keypress вместо тех её более ранних и более популярных аналогов (например, jQuery.Hotkeys), которые уступают Keypress по богатству возможностей.
Возможности же эти вот каковы:
- Реакция на нажатие и отпускание одной или нескольких клавиш. Поддерживаются синонимы кросс-платформенные (например, "meta" означает "cmd" или "ctrl" в зависимости от системы) и шифтовые (например, "@" означает сочетание Shift и двойки).
- Программируемые сочетания клавиш могут включать в себя не только классические модификаторы ("meta", "alt", "option", "ctrl", "shift", "cmd"), но и какие угодно другие клавиши. Например, программируя WASD-управление пошаговою бродилкою, нетрудно достигнуть того, чтобы нажатие и отпускание клавиши «W» означало шаг вперёд, но «W» и «D» совместно — шаг по диагонали вперёд+направо.
- Возможно указание сочетаний клавиш, состоящих не из одновременных, а из последовательных нажатий клавиш. Это такие сочетания, как код Конами, например.
- Специальные «считающие» комбинации позволяют программировать такие ситуации, в которых нажатие основной клавиши обнуляет некоторый счётчик, а каждое нажатие дополнительной клавиши (при удержании основной) увеличивает этот счётчик на единицу. David Mauro (автор Keypress) приводит в пример такое сочетание Tab+Space, при котором нажатие Tab тотчас же открывает первую вкладку в некотором наборе вкладок, а каждое нажатие на пробел (при удержании Tab) перебрасывает на следующую вкладку — на вторую, на третью, на четвёртую…
Беседа с Артемом Захарченко, JavaScript Developer’ом Pics.io
2014-02-04 в 16:40, admin, рубрики: front-end разработка, javascript, Блог компании TopTechPhoto, подкаст, фронт-энд, метки: front-end разработка, javascript, подкаст, фронт-энд
Ребята из подкаста «Откровенно про IT-карьеризм» пригласили к себе нашего ведущего фронтендщика Артёма Захарченко. Что из этого получилось — слушаем на их сайте.
В 141-м выпуске подкаста:
- Про во’IT’и
- Аутсорсовая империя
- Gameloft
- Образование
- JavaScript
- JS Конференции
- Изучение JS
- Pics.io
Есть также прямая ссылка на файл подкаста.
Генератор космических кораблей из арматуры
2014-02-03 в 9:48, admin, рубрики: canvas, game development, JASS, javascript, JS, дизайнер, космические корабли, космос, метки: Canvas, generator, JASS, дизайнер, космические корабли, космос Доброго времени на вашей стороне планеты.
Сегодня на хабре прямо день космических кораблей, столько интересных статей про последнюю битву в EVE Online, ну а я в свободное время я продолжаю делать свою двухмерную космическую игру и после длительного перерыва взялся за генератор кораблей. Пусть корабли и не такие шикарные как в EVE, зато свои.
Кому интересно как такой рендер на канве сделать, прошу под кат.
Читать полностью »
Updated + code: Свой «VBoxManage list ip» — список адресов запущенных виртуальных машин
2014-02-02 в 13:28, admin, рубрики: javascript, virtualbox, администрирование, виртуализация, системное администрирование, метки: virtualbox, администрированиеДело было вечером, делать было много чего. И почти все — в VirtualBox. Используя headless виртуалки.
Я уже давно оценил плюсы виртуальных машин для разработки, и повсеместно их использую. В результате имею парк в 5-10 виртуальных машин, с разными ветками и проектами. Несколько из которых постоянно запущены.
90% из них запускаются в headless режиме. И берут IP динамически. Так как статику контролировать постоянно невозможно, и она имеет другие ограничения. Отсюда результат — достоверно неизвестно с каким адресом запустится виртуалка.
В этом случае у меня такой порядок запуска виртуалки:
1. запуск в нормальном режиме
2. смотрим внутри нее ifconfig / ipconfig на предмет адреса
3. гасим ее
4. запускаем в headless и надеемся, что адрес будет таким же
Думаю вы с таким сталкивались. Если нет — можете перейти к следующему посту. Под катом нет никакой волшебной теории или особого кода. Под катом — простое и готовое решение. Для тех, кому эта небольшая повседневная задача знакома.
Читать полностью »
О безопасности в Meteor и не только (часть 2)
2014-01-31 в 20:09, admin, рубрики: javascript, Meteor, Meteor.JS, Meteorjs, Веб-разработка, метки: javascript, Meteor, Meteor.js, meteorjs Если вас не испугала первая часть, предлагаю продолжить разговор о механизмах безопасности Meteor. Начав с loginToken, выдаваемого клиенту, правил allow/deny при модификации базы данных клиентом, коснемся доверенного и недоверенного кода, серверных методов, использования HTTPS и пакета force-ssl, пакета browser-policy (Content Security Policy и X-Frame-Options), и закончим встроенным механизмом валидации данных (функция check() и пакет audit-arguments-check).
Читать полностью »
Бандл… Пара-пара-па хэй! или Bundle Transformer шагает по планете 2
2014-01-30 в 16:13, admin, рубрики: .net, ASP.NET, asp.net mvc, Bundle Transformer, Bundling and Minification, coffeescript, css, javascript, less, Optimus, Pluralsight, sass, scss, TypeScript, umbraco, Веб-разработка, Клиентская оптимизация, метки: ASP.NET, asp.net mvc, Bundle Transformer, Bundling and Minification, coffeescript, css, javascript, less, Optimus, Pluralsight, sass, scss, TypeScript, umbraco, клиентская оптимизацияЯ немного отойду от формата предыдущей статьи и прежде чем привести подборку интересных упоминаний о Bundle Transformer, я расскажу об изменениях, которые произошли в проекте за последние полгода.
До августа прошлого года библиотека dotless была основным средством для работы с LESS в сообществе .NET-разработчиком, и входила в состав практически всех инструментов клиентской оптимизации для ASP.NET: Cassette, SquishIt, Combres и RequestReduce. Bundle Transformer также не являлся исключением: библиотеки dotless и DotlessClientOnly (облегченная версия) использовались в модулях BundleTransformer.Less и BundleTransformer.LessLite.
Ситуация в корне изменилась, когда вышел Twitter Bootstrap 3.0. Исходники таблиц стилей Bootstrap 3.0 были написаны на LESS 1.4.X, а библиотека dotless на тот момент поддерживала более старую версию LESS (поддержка LESS 1.4.X появилась в dotless только в декабре 2013 года). Фактически все перечисленные инструменты для работы с LESS в одночасье стали морально устаревшими.
Читать полностью »