JavaScript *

Почему вокруг так много матерятся? Одно дело, когда на ногу падает молоток, или когда надо срочно сообщить коллеге, что он не успевает сделать макет сайта. Но в Интернете-то у автора всегда должно быть достаточно времени, чтобы подобрать красивую фразу и показать себя грамотным интеллигентным человеком с большим словарным запасом. К сожалению, редок тот случай, когда обсценная лексика действительно уместна — навскидку, один на сотню.

Некоторые владельцы форумов, чатов и блогов борются с обилием мата организационными мерами (устанавливая правила) или техническими (используя парсеры), но самый большой недостаток существующих антимат-систем — это многочисленные ложные срабатывания, порождающие удивительные неологизмы вроде заштричлен, застрапенис и скигей (кто не догадался — в оригинале было слово «скипидар»). Также скрипты (а зачастую — и сами авторы текстов) иногда заменяют буквы из середины бранных слов на звёздочки (***) или символы "#$%^", из-за чего у меня возникает подозрение, что у этих людей вместо половых органов чёрные квадратики.

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

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

Есть множество статей о том, как написать свои правила для плагина jQuery validate, но мало какие из них объясняют внутреннюю работу этого плагина, что мы и обсудим в этой статье.
Это первая часть серии статей «Понимание ненавязчивой валидации Asp.NET MVC»

1. Работа плагина jQuery validate изнутри
2. Понимание Html-кода, сгенерированного ненавязчивой валидацией в ASP.Net MVC
3. Внутренняя работа плагина unobtrusive jQuery validate в ASP.Net MVC.

Что мы узнаем из этой статьи:
1. Как валидировать форму.
2. Сообщения валидации и как они работают.
3. Добавление собственных правил валидации.
4. Что именно происходит, когда мы вызываем метод валидации.

Как валидировать форму

Есть 2 основных способа, чтобы валидировать форму.

1. Использовать имена классов как правила

Как это работает

Мы добавляем к полю, которое нужно провалидировать, html атрибут «class», и это подключит валидацию.
Итак, если нам нужно, чтобы текстовое поле было обязательным мы добавляем в элемент input значение атрибута class = «required»

Html

<form action="/" method="post">
  <input id="Name" type="text" name="Name" value="" class ="required"  />
  <input type="submit" value="Submit" />
</form>

Описание небольшого трюка по анимации вращения планет или других шарообразных штуковин. На написание этой статьи меня натолкнула статья Сфера из двух треугольников (стоит почитать). А сам трюк основан на весьма простом способе создания в Photoshop псевдо-объемной картинки из плоской, который описан под катом.

микродемо

Некоторое время назад я публиковал статью «Эффект слайдов на сайте. Через грабли на собственном велосипеде».
Статья справедливо набрала множество замечаний, в основном, касающихся отсутствия практической части и примеров кода.
Предлагаю вашему вниманию переработанную статью, снабженную живыми примерами.

Здравствуйте, хабровчане.

Хочу поделиться с вами одной техникой организации кода при массивной работе с DOM-элементами. Несколько лет назад, когда еще вовсе не было бэкбона и MVVC, мы писали старый добрый джаваскрипт без фреймворков: создавали объекты и заставляли их плясать на странице в общем танце. Такая практика, без сомнения, до сих пор оправдывает себя, и техника, о которой пойдет речь, применима именно к ней.

Мой рассказ — о маленькой библиотечке PageObject.js (текущая версия v0.14, 2.6K) и о том, как с ее помощью можно упростить себе жизнь.

Задача:

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

Пример реализации вы можете посмотреть на моём сайте game.tobefun.org открыв любую игру.

Как видите я применил этот алгоритм для вывода определённого количества (оно задаётся параметрами вашего окна) случайных миниатюр, которые являются ссылками на записи для которых они заданы.

Разрабатывая MaskJS вот уже больше полугода, удалось превратить DOM шаблонизатор в очень мощный, но при этом производительный веб фреймворк. В статье познакомлю вас с возможно интересными подходами к разработки. Уверен, будет интересно почитать о использовании сигналов и слотов вместо DOM событий. И как компоненты делают нашу жизнь проще. Маска легко интегрируется в уже готовый проект, и даже может быть использована вместе с любым другим фреймворком. Основным же отличием наверное является render flow, где в процессе поэтапно создается Document Fragment / контроллеры / «биндинги». Собственно всю гибкость даже сложно передать, но я попробую, и приглашаю под кат.

На днях у меня перестал работать онлайн-банкинг моего банка. Нет, не то чтобы совсем перестал — вроде бы можно зайти и даже кое-что сделать, но вот одна из самых важных вещей (просмотр архива платежей) — просто намертво отказалась работать (а как раз было очень нужно). Выглядит это так: при открытии страницы со списком платежей браузер съедает всю доступную оперативную память и падает. В Chrome падает только текущая вкладка, а вот Firefox и IE умирают совсем. Баг воспроизводится на трёх разных PC, айпаде, в Safari под Mac OS и в Firefox под Linux. Ну это я просто так рассказываю, для того чтобы показать наивность советов техподдержки «поставить антивирус» и «перезагрузиться и зайти ещё раз». Давайте подумаем — можем ли мы что-нибудь в этой ситуации сделать?

Около двенадцати часов назад Джон Резиг нащебетал в Твиттер, что на конференции Google I/O было объявлено об улучшении поддержки Asm.js в движке V8 и во браузере Google Chrome.

Так как про Asm.js упоминали на Хабрахабре (1, 2), то достоинства его могли стать известны многим читателям. Тем приятнее им предвкушать теперь в самом скором времени появление этих достоинств не только во браузере Firefox (где они впервые были внедрены Фондом Мозиллы), но и в движке V8 (а значит — и в построенном на его основе движке Node.js!), и во браузере Google Chrome.

Но для тех читателей, которые до сих пор пропускали эту новинку мимо себя, я также вкратце напомню суть. Asm.js — это особое подмножество языка JavaScript: ограничившись им в своём скрипте, автор скрипта обеспечивает возможность оптимизации интерпретируемого кода не только в момент исполнения (just-in-time, JIT), но даже и заблаговременно (ahead-of-time, AOT), то есть такому джаваскрипту становится возможно один раз однозначно заранее поставить в соответствие некоторый машинный код. Эффект этот достигается ценою заметных усилий по самоограничению. (В частности, при помощи операции «|0» и других подобных специальных приёмов тип значения каждого входного параментра функции, равно как и выходного значения, оказывается однозначно заданным и неизменным.) Зато его итогом становится небывалый рост скорости исполнения джаваскрипта — теперь по скорости он уступает скомпилированной программе (на Си или Си++) не более чем в два раза.

На мой взгляд, директивы являются основной изюминкой декларативного стиля Angularjs. Однако, если открыть комментарии пользователей в разделе официальной документации Angularjs, посвященной директивам, то вы увидите, что самый популярный из них: «Пожалуйста, перепишите документацию, сделайте ее более доступной и структурированной. Начинающему разработчику на Angularjs сложно в ней разобраться» («Please rewrite a clearer well structured documentation of directives., this is not friendly to first time angular developers»). С этим трудно не согласится, документация пока еще сыровата и в некоторых моментах приходится прилагать большие усилия, чтобы разобраться в логике и сути функционала. Поэтому я предлагаю вам свой вольный пересказ данной главы в надежде, что кому-то это позволит сэкономить время, а так же рассчитываю на вашу поддержку и участие в комментариях. Итак, поехали!

Мне предстояло в очередной раз сделать это. Казалось бы ничего ужасного, я делал это сотни раз. Но чувство… чувство, что все это неправильно, так не должно быть и должен быть другой выход, не покидало меня. Тогда я еще не знал, что в скором времени мне предстоит встреча, которая навсегда изменит мой мир, откроет глаза и наполнит жизнь смыслом. Смыслом вставать каждое утро, смыслом делать то, что практически перестало доставлять мне удовольствие, смыслом делиться этим чувством с другими.

Задача: Язык javascript. Имеется большой массив объектов. Нужно выбрать из массива некоторые объекты, в зависимости от значений свойств этих объектов.

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

Today's software engineering word is «farpotshket.» This is a Yiddish word meaning, «broken, because someone tried to fix it.»
(с) Andr Zerozero

Схлеснулись мы тут на днях на работе по вопросу «А хорошо бы закешировать регулярку», в совершенно банальной функции

  uncached = function(data_in) {
    return /_(\d)+(?:#(\d)+)?$/.exec(data_in);
  };

сделав как-то так

  cached = (function() {
    var pattern = /_(\d)+(?:#(\d)+)?$/;
    return function(data_in) {
      return pattern.exec(data_in);
    };
  })();

Идея популярная, но многие ли задумывались о реальном профите и накладных расходах?

Как мы все знаем, евенты backbone.js делятся на две категории:

• Изменение информации в моделях/коллекциях
• Евенты DOM — дерева

Недавно, мне необходимо было решить задачу подключения евентов socket.io к backbone, да так, что бы все было внутри приложения backbone, что бы евенты сокетов можно было объявить прямо во вьюхах и там же описать все действия, которые будут происходить по евенту.

Дабы не отступать от стиля backbone, хотелось реализовать возможность добавить событие socket.io так же, как событие DOM — дерева, а именно вот так:

var im = Backbone.View.extend({
  io_events: {
    'new_message': 'newMessage'
  },
  newMessage: function(message_data){
    //do something
  }
});

Долгие поиски по просторам интернета меня привели к подборке менее элегантных методов связки backbon'а и сокетов, которые, вроде, и решали задачу, но не так, как хотелось бы. Пришлось думать самому.

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

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

Думаю, что большинство программистов, писавших код на JavaScript больше пары дней, сталкивались с этими особенностями. Цель данного топика не открыть что-то новое, а попытаться описать эти особенности «на пальцах» и «недостатки» сделать «преимуществами».

В данном топике будут рассматриваться:

1. Замыкания
2. Прототипирование
3. Контекст выполнения

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

CoffeeScript — это маленький язык, который транслируется в JavaScript. Его документация умещается на одной странице — coffeescript.org и отличается компактностью и наглядностью. Я даже сомневался в необходимости данной статьи, когда есть такое классное описание «от производителя», но все же рискнул расставить акценты и прояснить некоторые детали.

Здравствуйте, Хабралюди.

Мал по-малу из моего опыта и наших проектов родилась небольшая библиотека для работы с моделями в джаваскрипте. Она так и называется — Model.js.

Я расскажу вам вкратце об этой библиотеке и этим постом запрашиваю обратную связь у тех, кто создавая сложные джаваскрипт-приложения, уже решает эту проблему каким-то определенным образом без фреймворков. Интересно также и мнение тех, кто только подыскивает подходящий инструмент для своих нужд: какой инструмент вам нужен и насколько вам подходит Model.js?

В ASP.NET MVC метаданные — атрибуты, описывающие поля модели, используются как при генерации разметки (вывод названия поля, его заполнителя и т.д.), так и при валидации данных (вывод правил валидации). Условно можно выделить 2 вида валидации:

• клиентская валидация
• серверная валидация

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


Итак, необходимо реализовать автоматический вывод метаданных модели MVC на клиентскую сторону и ненавязчивую валидацию.

AngularJs – великолепный фреймворк для разработки web-приложений. Разработка бизнес-логики приложения полностью отделена от сопутствующей суеты вокруг DOM. Angular модульный – это замечательно, но так же является источником проблемы. Количество модулей быстро растёт. И если директивы ещё можно упаковывать в отдельные пакеты типа angular-ui, то с контроллёрами бизнес-логики всё сложнее. Всё становится ещё хуже, когда требования безопасности в принципе запрещают загрузку на клиента контроллёров с бизнес-логикой, которые недоступны текущему пользователю. При развитой ролевой системе доступа к приложению масштаб проблемы становится очевиден.

В современной разработке ваш код сильно отличается от кода на «боевом» сервере (production) после компиляции, минификации, объединения и разных оптимизаций. Тут-то и вступают в игру карты кода (source maps), показывая точное соответствие элементов готового рабочего кода проекта и вашего кода разработки. В этом вводном уроке мы возьмём простой проект и запустим его с помощью различных компиляторов JavaScript с целью посмотреть работу карт кода в браузере.