Продолжая тему веб-разработки мобильных сайтов и приложений под мобильные устройства нельзя не затронуть такую тему как Фреймворки для манипуляции DOM и отправкой асинхронных запросов.
Стандартом на десктопе уже давно стал jQuery, но он никуда не годится для разработки под мобильную платформу. Давайте посмотрим, как jQuery дружит с мобильными устройствами.

Как часто Вы используете конструкции вида «5 минут назад», «Полчаса назад» на вашем сайте? А что если пользователь открыл вкладку и забыл про нее на пару часов? «5 минут назад» явно теряет свою актуальность.
Именно для того чтобы исправить это досадное недоразумение служит uptodate.js

Начиная работать в IntelliJ IDEA, обнаружил отсутствие удобной комбинации клавиш, которой пользуюсь в Eclipse — Ctrl+Alt+Up. По этой комбинации выделенный блок текста или строка, копируется вверх с перемещением курсора в начало скопированного блока.
В Idea есть действие по умолчанию на Ctrl+D, которое копирует блок вниз (Ctrl+Alt+Down в Eclipse), но невозможно добавить аналогичное действие вверх. После гугления был задан вопрос в Q&A, оставшийся без ответа. Заведён issue на jetbrains. Все эти действия не дали ответа, поэтому решено было написать небольшой плагин для Idea.

Приветствую всех!

Статья посвещена решению проблемы кастомизации скроллбаров браузера ради воплощения в жизнь амбициозных идей дизайнера. Статья расчитана на тех, кто свободно ориентируется в технологиях html, css, js, т.к. предлагаемое решение основано на их компромиссном использовании.



В статье будут описаны и решены следующие задачи и цели:

• минимум JavaScript вычислений при прокрутке и изменении размеров элемента
• кроссбраузерность и работа на мобильных браузерах
• простота использования, кастомизации и внедрения
• учитывание поведения элементов при прокрутке с помощью выделения контента
• обновление параметров скроллбаров при обновлении, изменении или догрузке контента
• обход стандартного поведения содержимого браузера при изменении ширины его окна

Все мы слышали про ajax и node.js. Они прочно обосновались уже не просто в словарном запасе, но и в наборе инструментов веб-разработчика. Ajax — асинхронное подтягивание данных с сервера на страницу, node — фреймворк с асинхронным IO. Но как в таком однопоточном языке, как Javascript, реализуется та самая асинхронность?

Вы, наверное, уже догадались из заголовка, речь пойдет об основном цикле («main loop»).

Равенство parseInt("042") === 42 (как и другие ему подобные) станет верным в Firefox следующей версии (Firefox 21) и в более новых, хотя прежде Firefox действовал по образу и подобию языка Си, считая восьмеричными числа, запись которых начиналася нулём — так что вызов parseInt("042") давал тогда значение 34.

Обсуждение в мозилловской багзилле показывает, что перемена эта произошла под влиянием ECMAScript 5 и соответствует изменениям, случившимся в других браузерах (Safari 6, Google Chrome 23 и др.), в движке V8 (и в основанном на нём Node.js, например), так что в этом году Firefox оставался последним оплотом восьмеричности.

Теперь оплот этот не устоял, оплот этот пал. Обновите свои сайты по мере необходимости, особенно если они имели дело с обработкою записей времени, где нередко попадаются числа с ведущим нулём.

Доброго времени суток, господа!

В джаваскрипте существует очень много интересных нюансов, которые едва ли можно встретить в других языках программирования. Рассмотрим самый нужный, на мой взгляд, из них — this.
Данный пост поможет освежить знания по этой теме.
Я не буду долго объяснять теорию, лучше сразу перейдем к коду и подумаем, что же произойдет в результате его выполнения.

Метод численного интегрирования Верле издавна использовался для вычисления траекторий частиц. Сам метод был впервые использован ещё в 1791 году французским астрономом Жаном-Батистом-Жозефом Деламбром. В 1907 норвежский математик и физик Карл Штёрмер использовал его для моделирования движения частиц в магнитном поле, поэтому иногда этот метод называют методом Штёрмера. Современное название этот алгоритм получил от имени французского физика Лу Верле, который в 1967 году использовал его в моделировании молекулярной динамики. В последнее время метод Верле применяется и в разработке компьютерных игр.

Проверка на поддержку конкретных технологий браузером с помощью JavaScript по праву считается наилучшей практикой при клиент-сайд разработке (Часто используют другой способ, заключающийся в проверке из какого браузера пользователь просматривает страницу — Прим. пер.), но, к сожалению, такую проверку нельзя было сделать с использованием только лишь CSS. Firefox, Chrome и Opera недавно объявили о поддержке CSS директивы @supports и CSS.supports (JavaScript), которые помогут разработчикам определять справится ли браузер пользователя с CSS свойством или нет. Давайте посмотрим на них в деле!

tFormer.js — empower your HTML forms

Предисловие:

Вам приходилось верстать формы? Приходилось писать скрипт для валидации этих форм на клиенте? Доводилось ли использовать уже существующие плагины/надстройки для валидации форм?
Мне приходилось, но я не был на 100% удовлетворен ни от подхода решения задачи в лоб (собственный скрипт валидации для каждого проекта под его формы), ни от того, как работают существующие сторонние плагины.

Проблема:

Основными проблемами собственных скриптов и плагинов всегда были — гибкость, удобство и простота.
Большое количество data-attributes, необходимых для конфигурации скриптов (как это в Parsley.js) делают и код менее читабельным, и никогда не помнишь, как все они пишутся. Не просто…
Не все плагины хорошо подходили под желаемые HTML-формы, а постоянно писать свои скрипты под разные формы не всегда удобно и разумно.

Задача:

Создать нечто гибкое, удобно настраиваемое, полностью подконтрольное, с интуитивным синтаксисом и чтоб валидировало.

Решение:

Решение вылилось в небольшой опенсорсный плагин, который получил название tFormer.js.

Что хотелось:

• при завершении задачи в jenkins выводить уведомление на компьютере и как дополнение — вывести его на физический дисплей, подключенный к arduino;
• интерфейс, который можно открыть на телефоне или планшете, для управления проигрывателем музыки на компьютере и видеоплеером на raspberry pi;
• интерфейс, доступный снаружи локальной сети, для вывода значения с датчиков, установленных на arduino.

Что получилось:

• клиент, запускаемый на устройстве, с декларацией методов на python;
• RESTful api для запуска «методов»(картинка справа выведена через него);
• «панели управления» с web-интерфейсом;
• сервис для управления устройствами, методами и панелями.

Наверно каждый веб-программист задумывался о том, как избавиться от назойливых картинок антиспама, которые по смыслу должны пресекать ботов-спамеров, а на деле отпугивают реальных посетителей. Работая над очередной поделкой на HTML5+JS+canvas, пришла идея нового прототипа защиты от ботов. Данная идея не что иное как очередная вариация самой капчи, но на этот раз без дурацких «угадываний» символов.

С traceGL можно увидеть весь JavaScript поток в шустром webGL визуализаторе. Это как осциллограф, только для кода.

На сайте traceGL предлагают купить за $14.99 или € 11.50

jRIApp — ещё один HTML5 фреймворк, созданный для разработки Web приложений, которые по своей функциональности мало чем уступают desktop приложениям.

Основное отличие от уже существующих фреймворков типа angularJS или emberJS, это наличие интегрированного с фреймворком сервиса данных, а также использование MVVM дизайн-архитектуры вместо наиболее распространенного в фреймворках такого типа MVC дизайна.
В общих чертах его можно охарактеризовать как HTML5 Фреймворк реализующий привязку к данным, имеющий инфраструктуру для декларативного прикрепления логики к HTML элементам, имеющий классы для работы с данными (DbContext, DbSet) и имеющий реализованную серверную часть дата сервисов.

Клиентская часть фреймворка написана на javascript (сейчас в разработке typescript версия), а серверная часть на C#.

Этот фреймворк опубликован на GitHub под MIT лицензией. Он включает демо-приложение написанное с использованием ASP.NET MVC4 и содержит документацию по его использованию.

Из года в год, сталкиваюсь с одной и той же проблемой. Как добавить, изменить или удалить параметр к некоторому адресу в строковом виде. Быстро и грязно это можно делать с помощью, например, регулярных выражений или найти каке-то готовое решение. Зачастую также может потребоваться, к примеру, подменить путь в адресе или изменить протокол с HTTP на HTTPS и т.д.

В целом, это хочется делать просто и понятно. При этом хочется разумного компромиса. Я встречал некоторые библиотеки, которые дают мощный функционал, но при этом по объему — десятки килобайт JavaScript кода. Несколько десятков килобайт, чтобы, например, подменить параметр в QueryString? Эх…

Недавно я задался вопросом поиска инструментария для разработки мобильных приложений на html/css. Из требований были: доступность, легковесность, простота настройки. Выбор пал на встроенный Node менеджер NPM. NPM содержит
инструментарий для базовых тасков типа install и запуска пользовательских скриптов. Также NPM не такой громоздкий, как Grunt и не требует адаптации модулей под себя, т.к. запускает модули с командной строки.

В скрипте HabrAjax (113.2013.04.20) добавлено удобное редактирование исправлений в собственных статьях. Достаточно просто выделить уникальный участок текста и среди контекстных кнопок выбрать кнопку <E>. В фрейме половинной высоты откроется поле ввода с выделением именно на том месте, которое было выделено.

Также, обеспечена поддержка браузеров Iceweasel (на основе Fx3.6) в Дебиане и возвращена поддержка Firefox 3.6 в остальных ОС (но там будет иметься проблема установки старой версии Greasemonkey, актуальной для 3.6). Потенциальная аудитория — 1% от остальных пользователей Firefox.

Аудитория пользователей HabrAjax и направленность статьи

Среднее число пользователей скрипта — 40-60 человек. Поэтому, если статью прочитает 3000 человек, то практический интерес она может иметь только для 1.5% читателей. Пусть, ещё 10% будут иметь желание попробовать скрипт. Но не более. Потому что скриптами вообще пользуются немного людей. Остальным — достаточно узнать, что функции, сделанные для удобства пользования, имеются в том или ином скрипте.

Что такое GruntJS

Большинство JS разработчиков уже используют какие-то инструменты компоновки для своих разработок, даже если не знают или не используют этот термин. Они объединяют файлы при разработке, уменьшают код JavaScript-а, чтобы ускорить загрузку страниц и конвертировать Sass, или уменьшают количество файлов в CSS для браузера, и много чего другого. Чаще всего это разные инструменты, что есть не очень удобно.

Grunt помогает управлять всеми этими шагами в одном месте и организовать сторонние компоненты.

Речь в статье пойдёт об оконном калькуляторе. Да, я знаю что их море, но тот, о котором хочу рассказать — особенный. Он позволяет считать стоимость оконных изделий на сайте со средним отклонением от расчётной программы на производстве в 0.002%. На момент запуска проекта (май 2011 года) это калькулятор был единственным решением такого рода. Как обстоят дела с этим сейчас я не знаю, но судя по периодическим звонкам, допускаю что изменилось мало чего.

Особенности проекта:

Качественная предварительная аналитика задачи. Именно она определила ту границу которая позволила создать простой инструмент для основной целевой аудитории, полностью учитывающий требования по специфике для ~90% изделий требующих расчёта. В первой части будет именно об этом.

Выбор HTML5 Canvas в качестве основы для графической реализации. Многие разработчики до сих пор считают что данная технология “экспериментальная” и не подходит для сервисов ориентированных на широкую публику. Что тут говорить о марте 2011 года?.. Данный выбор стоил мне килограмма нейронов, но он полностью себя оправдал. Этому, а также другой специфике с которой пришлось бороться при реализации задачи будет посвящена вторая часть.

Для тех, кому не интересны аналитические выкладки предлагаю сразу ознакомиться с демоверсией конструктора.

Релизнулась версия 2.0 самой популярной JavaScript-библиотеки.

В релизе выкинули поддержку Internet Explorer 6, 7 и 8. За счёт этого выиграли в размере на 12% и прибавили в скорости. Можно выиграть в размере ещё больше, если сделать свой билд, убив ненужные из 12-и встроенных по умолчанию модулей.

Тем, кому нужны старые IE остаются на ветке 1.x, которая их поддерживает и которую не забросили (скоро выйдет 1.10) и планируют поддерживать ещё несколько лет. API 2.0 хоть и совместим с не-deprecated 1.9, но изменений всё-таки много.

Подробный список изменений есть в официальном анонсе.