Почти месяц назад вышла вторая версия прекрасного и замечательного jQuery Notification plugin для вывода самых разнообразных уведомлений на сайте, странно что Хабр вообще обошёл его стороной, исправлю ситуацию.
Читать полностью »
Рубрика «javascript» - 543
Noty — необычайно гибкий плагин jQuery для вывода уведомлений
2012-08-16 в 7:35, admin, рубрики: javascript, jquery, Noty, plugins, веб-дизайн, уведомления, метки: jquery, Noty, plugins, уведомленияBart Chalkboard Generator
2012-08-14 в 22:36, admin, рубрики: canvas, html, html5, html5 canvas, images, javascript, Веб-разработка, метки: Canvas, html5, html5 canvas, images, javascript Здравствуйте.
Мне бы хотелось рассказать про мой «Bart Chalkboard Generator».
Я уверен, что большинство из вас знают сериал «The Simpsons», и вы помните что почти в каждой новой заставке Барт писал на школьной доске что-то новое, типа: «They are laughing at me, not with me». А в интернете часто всплывает картинка с текстом: «I will use google before asking bump questions». И вот однажды я подумал, почему бы не создать простой генератор подобных картинок, да ещё и на Html5, что бы попрактиковаться?
Читать полностью »
Обзор JS-фреймворков. Путешествие через джунгли JavaScript MVC. Ч. 1
2012-08-14 в 19:51, admin, рубрики: javascript, javascript library, Веб-разработка, фреймворки (от 27 июля 2012)
При написании нативного веб-приложения легко начать чувствовать себя богом, способным работать просто с библиотекой работы с DOM (такой как jQuery) и горсткой сервисных плагинов. Вскоре возникает проблема в виде груды вложенных возвратных функций jQuery и разбросанных DOM-элементов без всякой структуры вместо приложения.
Короче, мы застреваем в спагетти-коде. К счастью, есть современные JS-фреймворки (библиотеки, задающие, кроме функций, правила организации кода --прим. перев.), помогающие поддерживать структуру и организованность в проекте, облегчающие ремонтопригодность в будущем.
Что такое MVC или, лучше сказать, MV*?
Эти современные библиотеки дают разработчикам простой путь к организации кода, используя вариации паттерна проектирования, известного как MVC (Model-View-Controller). MVC разделяет задачи в приложении на 3 части:
Читать полностью »
JavaScript библиотека для работы покадровой анимацией
2012-08-14 в 12:01, admin, рубрики: animation, game development, Gamedev, javascript, метки: animation, Gamedev, javascript Здравствуйте, читатели.
Хочу предоставить Вашему вниманию новую JavaScript библиотеку для работы покадровой анимацией. Занимался флеш-разработкой, сейчас все больше и больше пишу на JavaScript-e (только не будем здесь разводить холивар на эту тему). После долгих поисков чего либо для работы с анимацией и таймлайном, решил написать свою библиотеку. Получилась лёгкой, но достаточно функциональной, решила те моменты, которые отсутствовали в JavaScript, но были очень полезны в AS3.0 (Flash) и были там стандартными методами.
Библиотека была названа JS_Mc (долго над названием не думал, по этому как то так), Mc от MovieClip -типа даных во Flash, в котором и присутствует таймлайн и различные методы по управления им. Работает в браузерах Chrome (22.0.1229.2 dev-m), Opera (11.61), Firefox (14.0.1), IE (8.0) — это те версии, которые установлены у меня, на них тестировал. Сама библиотека находиться здесь, там есть документация, демо и туториалы.
По одному из них
я пройдусь здесь и расскажу о основной функциональности.
Начинаем работу с JS_Mc
Лексическая область видимости функций в JavaScript
2012-08-13 в 22:12, admin, рубрики: javascript, Программирование, метки: javascript, Программирование Почитав недавние посты для новичков JavaScript, решил написать небольшой топик про один интересный вопрос, которого ни один из авторов пока не касался, а именно, вопрос про область видимости функций в JavaScript.
Читать полностью »
Ключевое слово this в javascript — учимся определять контекст на практике
2012-08-13 в 19:22, admin, рубрики: javascript, jquery, this, метки: javascript, jquery, thisПо просьбам некоторых читателей решил написать топик про контекст в javascript. Новички javascript часто не понимают значение ключевого слова this в javascript. Данный топик будет интересен не только новичкам, а также тем, кто просто хочет освежить данный аспект в памяти. Посмотрите пример ниже. Если вы затрудняетесь ответить на вопрос «что будет выведено в логе» хотя бы в одном из пунктов, или хотите просто посмотреть ответы — добро пожаловать под кат.
var f = function() {
this.x = 5;
(function() {
this.x = 3;
})();
console.log(this.x);
};
var obj = {x: 4, m: function() {
console.log(this.x);
}};
f();
new f();
obj.m();
new obj.m();
f.call(f);
obj.m.call(f);
HTML5 аудио — состояние дел. Часть 2
2012-08-13 в 19:01, admin, рубрики: Audio Data API, html, javascript, media queries, браузеры, медиаплеер(Статья специалиста по фронтенду и медиатегам Марка Боаса (Mark Boas) от 8 мая 2012. Перевод заключительной части. Начало дало понять, что придётся попотеть, прежде чем освоить всю кухню, а ведь это ещё развивается… Не ждите коротких рецептов.)
Содержание первой части:
■ Типы MIME
● Серверная часть
● Клиентская часть
■ Заранее узнать тип аудио поможет .canPlayType (наверное)
■ Текущая поддержка кодеков в браузерах
■ Форматы контейнеров и расширения файлов
■ Мы имеем тег <audio> и не боимся его использовать!
■ Буферизация, поиск и интервалы воспроизведения
● Атрибут buffered
● Объект TimeRanges
  ● Атрибуты seeking и seekable
Читать полностью »
Библиотечка datef — форматирование дат
2012-08-13 в 17:52, admin, рубрики: javascript, javascript library, даты, метки: javascript library, даты Разрешите представить datef — мини-JS-библиотеку вывода даты в разных форматах.
Вкратце опишу имеющиеся фичи:
- Выполняет одну и только одну задачу: вывод дат в разных, потребных юзеру форматах;
- Работает в nodejs и в браузерах. В браузерах может работать как requirejs/amd-модуль;
- Не мусорит в прототипах встроенных объектов;
- Написана в strict mode;
- Обильно аннотирована в js-doc-формате;
- Не имеет внешних зависимостей.
Примеры использования:
datef('dd.MM.YY', new Date()); // "13.08.12"
datef('dd.MM.YY'); // второй аргумент необязателен — берется «сейчас»
var d = new Date();
d.setFullYear(2045);
datef('dd.MM.YYYY', d); // "13.08.2045"
// есть несколько заранее заданных форматов:
datef.formatters.ISODateTimeTZ(); // "2012-08-13T15:01:29 -04:00"
// можно определить и сохранить свой…
datef.register('myFormat', 'd.M.YY');
datef.formatters.myFormat(); // "13.8.12"
// или просто получить его как отдельную функцию
var myFormat = datef.createFormatter('d.M.YY');
MaskJS, поговорим о шаблонном движке, или новом велосипеде
2012-08-13 в 15:59, admin, рубрики: javascript, template parser, метки: javascript, template parser
Вот, наконец дошли руки поделиться с людьми одним из множества велосипедов (как сейчас называют личные наработки). До хабраката пару плюсов и минусов этого решения:
Из плюсов:
- скорость jsperf
- расширяемость := кастомные контролы, трансформация шаблонных данных
- data bindings
- компиляция в json для дальнейшего кэширования
- приятный синтаксис (без мешанины логики и структуры)
Из недостатков (хотя это реализуемо, просто мне это без надобности):
- шаблонные данные могут находиться только в атрибутах и литералах
Если тема интересная —
Читать полностью »
Эксперимент со страницей результатов поиска
2012-08-13 в 11:07, admin, рубрики: ajax, css 3, css3, deploy, history api, javascript, Блог компании Яндекс, яндекс, метки: ajax, css 3, css3, deploy, history api, javascript, яндексСтраница результатов поиска — одна из самых популярных страниц Яндекса. Её загружают около 130 миллионов раз в день. Это при среднем размере страницы в 25КБ дает нам 3ТБ трафика в сутки.
Несмотря на кажущуюся простоту, за тем, из чего состоит эта страница, — огромная работа большого количества людей и много сложных технологий.
Развивая интерфейсы, обычно мы идём по эволюционному пути, меняем страницу поэтапно. Проверяем наши решения, внедряя их на небольшой процент пользователей, — проводим эксперименты. Нас уже не устраивают небольшие изменения: хотим развивать продукт, построив новую технологическую платформу, на которой в будущем будем реализовывать свои проекты.
Сегодня мы начинаем эксперимент с новой страницей результатов поиска. И для этого мы выбрали нашу площадку для тестирования поиска по мировому интернету — yandex.com. Читать полностью »