Рубрика «javascript» - 435

Заморочился я автообновлением странички в браузере на таскаемом с собой iPad при разработке NodeJS/ExpressJS-приложений, чтобы видеть все изменения на лету.
Под катом — как очень просто сделать из мобильного гаджета средство живого просмотра разрабатываемых веб-приложений.
Читать полностью »

(из серии «малая механизация 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 сниппетов на каждый день

Спустя годы библиотека jQuery стала неотъемлемой частью в работе каждого web-разработчика. Ведь она простая в использовании, быстрая и имеет очень широкие возможности. В этой статье я собрал список из более чем десяти сниппетов, которые вы можете свободно брать для использования. Их очень легко адаптировать под нужды ваших собственных проектов.
Читать полностью »

Копаясь в памяти своего неискушённого идеальным миром мозга, я, припоминаю, как два года назад начиналась наша история по разработке приложений для SmartTv. Если коротко, то это был АД!!! богатейший опыт.

image

Однако, хотелось бы получить этот опыт сразу, не наступая на недокументированные грабли, разложенные по всей технологии, и специальные детские грабли разложенные каждым вендором отдельно. Но как говорится «c'est la vie» и нам пришлось пробиваться сквозь тернии к звёздам!

В итоге мы получили кроссплатформенную расширяемую библиотеку для всех SmartTv.Читать полностью »

Семнадцать дней назад (19 января 2014 года) вышла новая версия (2.0.0) джаваскриптовой библиотеки Keypress, предназначенной для удобного программирования реакций браузера на события, поступающие от нажатий (и от отпусканий) клавиш на клавиатуре.

Опубликованный на Гитхабе список изменений позволяет уверенно огласить вот что: важнейшим из достоинств новой версии стала возможность ловить события не только во всём окне в целом, но и для одного или нескольких отдельных элементов DOM. Теперь и при программировании различающихся реакций у различных элементов на веб-страницах мы можем с удобством прибегнуть к библиотеке Keypress вместо тех её более ранних и более популярных аналогов (например, jQuery.Hotkeys), которые уступают Keypress по богатству возможностей.

[Keypress]

Возможности же эти вот каковы:

  • Реакция на нажатие и отпускание одной или нескольких клавиш. Поддерживаются синонимы кросс-платформенные (например, "meta" означает "cmd" или "ctrl" в зависимости от системы) и шифтовые (например, "@" означает сочетание Shift и двойки).
     
  • Keypress 2.0.0Программируемые сочетания клавиш могут включать в себя не только классические модификаторы ("meta", "alt", "option", "ctrl", "shift", "cmd"), но и какие угодно другие клавиши. Например, программируя WASD-управление пошаговою бродилкою, нетрудно достигнуть того, чтобы нажатие и отпускание клавиши «W» означало шаг вперёд, но «W» и «D» совместно — шаг по диагонали вперёд+направо.
     
  • Возможно указание сочетаний клавиш, состоящих не из одновременных, а из последовательных нажатий клавиш. Это такие сочетания, как код Конами, например.
     
  • Специальные «считающие» комбинации позволяют программировать такие ситуации, в которых нажатие основной клавиши обнуляет некоторый счётчик, а каждое нажатие дополнительной клавиши (при удержании основной) увеличивает этот счётчик на единицу. David Mauro (автор Keypress) приводит в пример такое сочетание Tab+Space, при котором нажатие Tab тотчас же открывает первую вкладку в некотором наборе вкладок, а каждое нажатие на пробел (при удержании Tab) перебрасывает на следующую вкладку — на вторую, на третью, на четвёртую…

Читать полностью »

Artem Zakharchenko

Ребята из подкаста «Откровенно про IT-карьеризм» пригласили к себе нашего ведущего фронтендщика Артёма Захарченко. Что из этого получилось — слушаем на их сайте.

В 141-м выпуске подкаста:

  • Про во’IT’и
  • Аутсорсовая империя
  • Gameloft
  • Образование
  • JavaScript
  • JS Конференции
  • Изучение JS
  • Pics.io

Есть также прямая ссылка на файл подкаста.

Читать полностью »

Доброго времени на вашей стороне планеты.
Сегодня на хабре прямо день космических кораблей, столько интересных статей про последнюю битву в EVE Online, ну а я в свободное время я продолжаю делать свою двухмерную космическую игру и после длительного перерыва взялся за генератор кораблей. Пусть корабли и не такие шикарные как в EVE, зато свои.

Генератор космических кораблей из арматуры

Кому интересно как такой рендер на канве сделать, прошу под кат.
Читать полностью »

Дело было вечером, делать было много чего. И почти все — в VirtualBox. Используя headless виртуалки.

Я уже давно оценил плюсы виртуальных машин для разработки, и повсеместно их использую. В результате имею парк в 5-10 виртуальных машин, с разными ветками и проектами. Несколько из которых постоянно запущены.

90% из них запускаются в headless режиме. И берут IP динамически. Так как статику контролировать постоянно невозможно, и она имеет другие ограничения. Отсюда результат — достоверно неизвестно с каким адресом запустится виртуалка.

В этом случае у меня такой порядок запуска виртуалки:
1. запуск в нормальном режиме
2. смотрим внутри нее ifconfig / ipconfig на предмет адреса
3. гасим ее
4. запускаем в headless и надеемся, что адрес будет таким же

Думаю вы с таким сталкивались. Если нет — можете перейти к следующему посту. Под катом нет никакой волшебной теории или особого кода. Под катом — простое и готовое решение. Для тех, кому эта небольшая повседневная задача знакома.
Читать полностью »

Если вас не испугала первая часть, предлагаю продолжить разговор о механизмах безопасности Meteor. Начав с loginToken, выдаваемого клиенту, правил allow/deny при модификации базы данных клиентом, коснемся доверенного и недоверенного кода, серверных методов, использования HTTPS и пакета force-ssl, пакета browser-policy (Content Security Policy и X-Frame-Options), и закончим встроенным механизмом валидации данных (функция check() и пакет audit-arguments-check).
Читать полностью »

Упоминания о Bundle Transformer в Интернете

Я немного отойду от формата предыдущей статьи и прежде чем привести подборку интересных упоминаний о 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 в одночасье стали морально устаревшими.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js