JavaScript *

Представляю вашему вниманию меню с плавной инверсией цвета при перетекании курсора.

Под катом сам плагин и немного о концепции.

В предыдущем посте я описал, что this в javascript не привязывается к объекту, а зависит от контекста вызова. На практике же часто возникает необходимость в том, чтобы this внутри функции всегда ссылался на конкретный объект.
В данной статье мы рассмотрим два подхода для решения данной задачи.
1. jQuery.proxy — подход с использованием популярной библиотеки jQuery
2. Function.prototype.bind — подход, добавленный в JavaScript 1.8.5. Рассмотрим также его применение для карринга (частичного применения функции) и некоторые тонкости работы, о которых знают единицы.

При создании сайтов часто возникает задача создания админки для редактирования контента. Задача, в общем, тривиальная, но сделать удобную админку не так-то просто.

Под удобством в первую очередь подразумевается возможность сортировки таблицы со списком материалов и работа без перезагрузки страницы. Если материалов в таблице становится много, то возникает задача разбивать её на страницы.

Всем известный jQuery-плагин tablesorter с tablesorterPager-ом и менее известный, но гораздо более функциональный DataTables хороши, но обладают некоторыми недостатками. Главный из них — сложность динамического добавления новых строк в таблицу (после добавления строки в таблицу, новая строка потеряется при следующем вызове сортировки). tablesorter вообще не даёт средств для добавления строки в свой кэш, DataTables предоставляет широкое и функциональное API для управления внутренним представлением таблицы, но это API довольно многословно и не очень гибко.

Хочу предоставить общественности реализацию админки на относительно новой javascript-фреймворке AngularJS. Будет создана страничка для редактирования списка вопросов, разбитых по категориям и отвечающим. В статье нет сравнения с другими подобными фреймворками, но нет и простого повторения официальной документации, я постараюсь поделиться своим опытом в использовании фреймворка и расскажу о нескольких интересных приёмах работы с ним.

Сразу приведу, что получится в итоге (кликабельно):

Почти месяц назад вышла вторая версия прекрасного и замечательного jQuery Notification plugin для вывода самых разнообразных уведомлений на сайте, странно что Хабр вообще обошёл его стороной, исправлю ситуацию.

Здравствуйте.
Мне бы хотелось рассказать про мой «Bart Chalkboard Generator».
Я уверен, что большинство из вас знают сериал «The Simpsons», и вы помните что почти в каждой новой заставке Барт писал на школьной доске что-то новое, типа: «They are laughing at me, not with me». А в интернете часто всплывает картинка с текстом: «I will use google before asking dump questions». И вот однажды я подумал, почему бы не создать простой генератор подобных картинок, да ещё и на Html5, что бы попрактиковаться?

(от 27 июля 2012)
При написании нативного веб-приложения легко начать чувствовать себя богом, способным работать просто с библиотекой работы с DOM (такой как jQuery) и горсткой сервисных плагинов. Вскоре возникает проблема в виде груды вложенных возвратных функций jQuery и разбросанных DOM-элементов без всякой структуры вместо приложения.

Короче, мы застреваем в спагетти-коде. К счастью, есть современные JS-фреймворки (библиотеки, задающие, кроме функций, правила организации кода --прим. перев.), помогающие поддерживать структуру и организованность в проекте, облегчающие ремонтопригодность в будущем.

■ Что такое MVC или, лучше сказать, MV*?

Эти современные библиотеки дают разработчикам простой путь к организации кода, используя вариации паттерна проектирования, известного как MVC (Model-View-Controller). MVC разделяет задачи в приложении на 3 части:

Почитав недавние посты для новичков JavaScript, решил написать небольшой топик про один интересный вопрос, которого ни один из авторов пока не касался, а именно, вопрос про область видимости функций в JavaScript.

По просьбам некоторых читателей решил написать топик про контекст в 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);

(Статья специалиста по фронтенду и медиатегам Марка Боаса (Mark Boas) от 8 мая 2012. Перевод заключительной части. Начало дало понять, что придётся попотеть, прежде чем освоить всю кухню, а ведь это ещё развивается… Не ждите коротких рецептов.)

Содержание первой части:
■ Типы MIME
  ● Серверная часть
  ● Клиентская часть
■ Заранее узнать тип аудио поможет .canPlayType (наверное)
■ Текущая поддержка кодеков в браузерах
■ Форматы контейнеров и расширения файлов
■ Мы имеем тег <audio> и не боимся его использовать!
■ Буферизация, поиск и интервалы воспроизведения
  ● Атрибут buffered
  ● Объект TimeRanges
    ● Атрибуты seeking и seekable

Разрешите представить 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');

Вот, наконец дошли руки поделиться с людьми одним из множества велосипедов (как сейчас называют личные наработки). До хабраката пару плюсов и минусов этого решения:
Из плюсов:

• скорость jsperf (тест с прекомпилированными шаблонами: jsperf)
• расширяемость := кастомные контролы, трансформация шаблонных данных
• data bindings
• компиляция в json для дальнейшего кэширования
• приятный синтаксис (без мешанины логики и структуры)

Из недостатков:

• шаблонные данные могут находиться только в атрибутах и литералах (хотя, поверте — этого достаточно)

Если тема интересная —

Прочитав статью jtaby.com/2012/04/23/modern-web-development-part-1.html я узнал несколько полезных вещей, напишу-ка я их здесь дабы не забыть.

(Опубликовано на сайте разработчиков 9 августа 2012)
Август стал немного жарче из-за того что зарелизилась библиотека jQuery 1.8! Вы можете брать код из CDN на сайте jQuery:

  code.jquery.com/jquery-1.8.0.min.js (минфицированный и сжатый код — для рабочих версий сайтов)
  code.jquery.com/jquery-1.8.0.js (несжатая библиотека, для отладки)

Как обычно, Google и Microsoft CDNs будут тоже раздавать эти файлы (не спрашивайте нас, когда — мы не знаем!). Если очень хочется, воспользуйтесь нашей копией из jQuery CDN.

Мы не ждем от вас сообщения об ошибках в релиз-версии, так как было несколько бета-версий и релиз-кандидат; у вас было много возможностей для тщательного тестирования (ха-ха, шутка). Мы знаем, что слишком многие из вас ждали финального релиза. Так что теперь нет никаких оснований ждать, и вы можете узнать, нет ли ошибок, о которых сообщалось ранее в багрепортах.
UPD 31.08.2012: jQuery 1.8.1.

Я бесконечно уверен, что все люди ненавидят формы и считают их заполнение вещью противоестественной и ненужной. Тем более, что на дворе уже 12 лет как XXI век.

Представляют Вашему вниманию перевод небольшой заметки Алекса Маккава (Alex Maccaw, JavaScript-программиста, (со)автора некоторых книг (даже бесплатных) издательства O'Reallyю) о концепции браузерного API который бы избавил разработчиков от различного рода велосипедописания, а пользователей — от рутинных операций по заполнению форм регистрации и оформления платежей.

Алекс, автор заметки, должен отождествляться у читателя с местоимением «Я».

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

Для затравки начнем с простого.

Как известно в Firefox начиная с 10ой версии, появился свой нативный отладчик. И теперь, вслед за GoogleChrome, в Firefox 15 появится удаленная отладка для мобильных устройств. Уже есть видео (EN)с демонстрацией настройки и подключения отладчика. Для этого вам нужно поставить Firefox beta

На прошлой неделе Карты Nokia были интегрированы в самый популярный фотохостинг Flickr, в результате чего получился интересный мэшап, где на карте можно посмотреть фотографии с проставленными геотегами.



Мы решили продолжить тему мэшапов на основе Карт Nokia, и сегодня покажем, как с помощью связки Nokia Maps JS API + Twitter Search API отобразить на карте интенсивность использования тех или иных хештегов в Twitter. Выглядеть такой мэшап будет так, как на картинке ниже.

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

Очень часто в веб-разработке (и в программировании вообще) необходимо сохранить длинный список логических значений (yes/no, true/false, checked/unchecked и подобные) в виде строк. К примеру, вы захотите записать такие данные с помощью localStorage, в cookie, или отправить их в теле HTTP запроса. У меня возникала такая необходимость сотни раз.

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

Недавно SamDark писал о правильных модальных окнах и представил сообществу плагин The Modal. Полностью согласен с его виденьем модальных окон, но в представленном плагине не хватало функционала. У меня уже давно из проекта в проект кочевали наработки по этой же теме, вот решил тоже оформить их в виде плагина.