В этой статье я детально исследую примеси в JavaScript, и покажу менее общепринятую, но, на мой взгляд, более естественную стратегию «примешивания», которую, надеюсь, вы найдете полезной. Закончу я матрицей результатов профилирования, подводящей итог влиянию на производительность каждой техники. (Большое спасибо блистательному @kitcambridge за ревью и улучшение кода, на котором основан этот пост!)

Повторное использование функций

В JavaScript каждый объект ссылается на объект-прототип, из которого он может наследовать свойства. Прототипы — отличные инструменты для повторного использования кода: один экземпляр прототипа может определять свойства бесконечного числа зависимых сущностей. Прототипы могут так же наследоваться от других прототипов, формируя, таким образом, цепочки прототипов, которые более-менее повторяют иерархии наследования «классовых» языков типа Java and C++. Многоэтажные иерархии наследования иногда бывают полезны при описании природного порядка вещей, но, если первичным мотивом служит повторное использование кода, такие иерархии могут быстро стать искривленными лабиринтами бессмысленных субклассов, утомительных избыточностей и неуправлямой логики («кнопка — это прямоугольник или контрол? Вот что, давайте унаследуем Button от Rectangle, а Rectangle может наследоваться от Control… так, стоп…»).

Последнее время все чаще можно встретить сайты с необычным дизайном и функциональностью, увидев которые, можно залипнуть на некоторое время. Увидев такие, у меня рука непроизвольно тянется к f12, чтобы открыть firebug и посмотреть, как же реализован тот или иной компонент. Таким образом можно открыть для себя интересные техники и в будущем реализовать их на своих проектах. Некоторые из них стали доступны с приходом новых технологий, например таких, как CSS 3 — то, что раньше было реализовано на флеше, теперь можно воплотить с помощью строк кода в таблице стилей. Дизайнеры тоже не теряют времени, создавая новые тренды и все плотнее взаимодействуя с верстальщиками. В этой статье я хотел бы показать 15 сайтов, которые так или иначе удивили и порадовали меня. Возможно, кого-то они вдохновят на собственный шедевр

В любой профессии есть тонкая прослойка людей, которые являются действительно высококлассными специалистами. Не исключение и область фронт-енд разработки — здесь также есть выдающиеся личности. К их мнению прислушиваются, за ними следят в блогах и социальных сетях и читают их книги. В процессе своей работы они рождают различные оригинальные решения или техники, которые мгновенно расходятся по миру веб-разработки и остаются актуальными не один год. Они создают удобные онлайн-сервисы для верстки, пишут полезные js-библиотеки, совершенствуют браузеры, пропагандируют веб-стандарты и оказывают непосредственное влияние на их развитие. Они могут называть себя front end engineer, front-end developer, web developer, web designer, UI Designer, browser compatibility expert или просто css lover, но для большинства из нас они — звезды мирового фронт-енда, которые делают интернет таким, каким мы его знаем. На Хабре довольно часто появляются обзоры интересных решений, техник и новостей из мира веб-разработки с указанием западных авторов, однако далеко не все знают что-нибудь о них кроме имени. Мне захотелось вкратце рассказать для широкой публики о некоторых из этих товарищей.

В этой статье я кратко в примерах объясню что такое свойства __proto__, prototype и работу оператора new в JavaScript.

Свойство __proto__

Абсолютно любой объект в JavaScript имеет свойство __proto__. Это скрытое системное свойство, и не во всех реализациях языка оно доступно пользователю.
При обращении к любому свойству объекта, оно в первую очередь ищется в самом объекте:

var obj = {ownProperty: 1};
console.log(obj.ownProperty);// 1

Но если его там нет, поиск происходит в свойстве __proto__:

obj.__proto__ = {propertyOfProto: 2};
console.log(obj.propertyOfProto);// 2

Если его нет и там, оно ищется дальше по цепочке:

obj.__proto__.__proto__ = {propertyOfProtosProto: 3};
console.log(obj.propertyOfProtosProto);// 3

Эта цепочка называется цепочкой прототипов (prototype chain).

Увиденный недавно топик, про валидацию css в Visual Studio подстегнул к написанию похожей вещи про валидацию Яваскрипта.
Когда яваскрипт в веб-проекте занимает достаточно большую долю кода, и клиентские скрипты вырастают за рамки «инлайн-скриптов» с одной-двумя строчками вызова jquery-плагинов, вопрос проверки их валидности встает достаточно явно (даже для .net-разработчиков, достаточно далеких от js в принципе :)).

В идеале — хотелось иметь компилятор, который при сборке проекта «компилировал» бы и яваскрипт, с привычным указанием ошибок/предупреждений в окне VS.
Для подобной компиляции уже написан ряд утилит, и я даже сделал небольшой обзор существующих решений.

Если кратко, то проверять яваскрипт можно с помощью jslint, jshint и google closure. Нетрудно догадаться, что у последнего возможности наиболее широкие, и для его интеграции в Visual Studio существует как минимум пара готовых решений.
В этой статье я расскажу об еще одной утилите интеграции google closure в Visual Studio, а именно — jsvalidator, небольшой open-source проект, который и был мной написан после вышеупомянутого анализа.
Ключевое отличие моей реализации — в простоте интеграции и возможности конфигурирования отображения определенных типов предупреждений.

Проектирование — этот, возможно, ключевой этап создания интернет-сайта, отвечает нам на следующие вопросы:

1. Каковы наши цели — зачем мы делаем сайт? Как мы реализуем поставленные цели?
2. Как сайт будет выглядеть и работать?

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

Не так давно из лекции Дугласа Крокфорда я узнал об очень интересной технике «шаблонизирования» в JavaScript. Основная цель техники заключается в том, что мы получаем с сервера JSON и потом как-то формируем из этого HTML. Во многих ситуациях этот процесс оставляет желать лучшего потому, что формирование HTML происходит или с помощью конкатенации строк или ряда операций createElement, appendChild и т.п. Возможно многие уже знают об этом решении, но для тех кто не знал надеюсь будет полезно.

Само понятие модульной сетки, за последние несколько лет стало чрезвычайно модным. В первую очередь у дизайнеров. И во-вторую очередь у верстальщиков.

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

Немного про модульные сетки

Модульная система вёрстки — система вёрстки, при которой основой композиции полос и разворотов становится модульная сетка с определенным шагом (модулем), одинаковым или разным по горизонтали и вертикали. По мотивам Википедии.

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

Некоторое время назад у меня дошли руки до темы, которая давно уже меня нервирует интересует. Эта тема — наследование в JavaScript.

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

Хочу сразу сказать, что я не претендую на глубокое понимание ООП в JavaScript, и даже не претендую на глубокое понимание ООП вообще. Я буду рад, если моя попытка анализа окажется кому-нибудь полезной, но основная цель публикации, в некотором смысле, противоположная — мне бы хотелось самому воспользоваться замечаниями людей, которые лучше меня ориентируются в теме, чтобы прояснить ее для себя.

Для меня одним из самых проблемных мест Javascript было управление переменными. Излагаю простым русским языком.

Сегодня, при разработке приложений в интернете, вопрос клиентской оптимизации встает все чаще. Если раньше, страница отправленная клиенту содержала только информацию, то сегодня очень часто такая страница содержит много JavaScript-кода. Для достижения наилучшей производительности и снижения нагрузки на сервер применяются правила клиентской оптимизации.

В этой статье речь пойдет про Bundler — удобное средство клиентской оптимизации JavaScript для .net-проектов.

Те, кто пишут на C# очень хорошо знают и часто используют механизм String.Format, которого сильно не хватает в JavaScript. Несмотря на его простоту и удобство, на просторах Сети мало что можно накопать, в основном вариации на тему sprintf (привет сишникам). Достаточно давно был написан скрипт, который позволял форматировать строки на JavaScript и был похож на String.Format C#. Форматирование стало использоваться коллегами достаточно плотно в скриптах и я решил немного причесать код и опубликовать для тех, кто хочет получить String.Format в JavaScript.

Наткнулся вчера на этот инструмент и не смог пройти мимо, провел ночь за написанием тестов, а теперь хочу поделиться находкой. QUnit — это библиотека от разработчиков jQuery, позволяющая писать unit-тесты для кода на javascript. Удобна в использовании, ничего лишнего, осваивается за 20 минут, выгода от применения — колоссальная.

Самым нетерпеливым сразу ссылки:
Официальная документация на сайте jquery: docs.jquery.com/QUnit
Реальные примеры тестов (для модулей jquery): view.jquery.com/trunk/jquery/test/unit
Руководство для начинающих (англ): www.swift-lizard.com/2009/11/24/test-driven-development-with-jquery-qunit
Система распределенного тестирования (гениально и просто): testswarm.com

Под катом информация о преимуществах юнит-тестирования применительно к js и разбор возможностей библиотеки на примерах.

Сниппеты — это инструмент Visual Studio, который позволяет быстро набирать рутинный код. Нажав Ctrl+K, Ctrl+X в редакторе вы получите список сниппетов, после выбора которых в редакторе появится кусочек необходимого кода. Есть еще более простой способ вызвать сниппет — набрать сокращенное наименование и нажать TAB.

Ранее сниппеты были доступны только для редактора кода C#/VB, но в Visual Studio 2010 появилась возможность создавать сниппеты и для HTML/ASPX-страниц (в комплекте идет масса стандартных сниппетов).

Вчера блоггер John Sheehan сообщил в своем блоге, что он выпустил сниппеты для работы с jQuery. Его набор включает более 100 сниппетов на самые разные случаи жизни: от простого внедрения ссылки на скрипт jQuery, до работы с анимацией и Ajax.



Этот крайне полезный набор можно скачать со страницы на Codeplex. В архиве пакет с установщиком, который автоматически интегрирует сниппеты в вашу Visual Studio 2010. Ознакомится со списком сниппетов можно там же, на странице документации.

Довольно часто при верстке сайта возникает необходимость размещать блоки одинаковой ширины, но разной высоты в контейнере с переменной шириной (читай резиновом). Плюс на этот список может применяться фильтр, который JS-ом скрывает или показывает элементы списка, при этом он не должен разрушать «строки», верстку, или образовывать дыры, поэтому решения на таблицах не катят сразу. Простейший пример — каталог товаров:

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

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

Автор блога — учитель математики в школе и много пишет о современном образовании. Но вообще темы очень разнообразны и, думаю, найдут отклик у многих. Его статьи всегда дают встряску для ума, заставляют проснуться сознание и приводят в порядок мысли.

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

Такая вот ситуация: дизайнер присылает макет, а у верстальщика открывается какая то лабуда светлая, или темная (если верстальщик испольует МасOS, а дизайнер Win.). Или же верстальщик сохраняет картинку, а там цвета другие стали.

Разберемся почему так и как с этим жить.