Инженер из компании Google, автор трёх книг по веб-производительности и оптимизации, Стив Содерс (Steve Souders) опубликовал презентацию "JavaScript Perfomance" о том, какие методы нужно применять, чтобы скрипты меньше тормозили загрузку страниц.

По статистике WebPagetest, блокировка загрузки файлов .js на сайтах из Alexa Top 100 снижает среднее по медиане время загрузки страницы c 3,65 с до 2,487 с, то есть на 31%. Если вы видите медленную загрузку веб-страниц и хотите улучшить этот показатель, то, по мнению Стива Содерса, первым делом нужно посмотреть на JavaScript.

Это продложение цикла статей, посвященого разработке с помощью Entity Framework и ASP.NET MVC 3. Первые главы вы можете найти по следующим ссылкам:

• Создание модели данных Entity Framework для приложения ASP.NET MVC
• Реализация базовой CRUD-функциональности с Entity Framework в приложении ASP.NET MVC
• Сортировка, фильтрация и разбиение по страницам с Entity Framework в приложении ASP.NET MVC
• Создание сложной модели данных для приложения ASP.NET MVC
• Создание сложной модели данных для приложения ASP.NET MVC, часть 2
• Загрузка данных с Entity Framework в приложении ASP.NET MVC

В предыдущих уроках мы отображали данные. Теперь вы будете их обновлять. Для большинства связей обновить связанные данные можно с помощью внешних ключей. Для связи многие-ко-многим EF не использует напрямую объединённую таблицу, поэтому вы должны вручную добавить и удалить сущности из соответствующих navigation properties.

Результаты представлены на иллюстрациях.

Поговорим о случае, когда нужно автоматизировать запуск тестов и сбор статистики покрытия, к примеру, для гипотетической клиентской JS библиотеки. Задача не совсем тривиальна, поскольку для нормальной работы библиотеки требуется полноценный браузер — библиотека является визуальной оберткой над стандартными компонентами формы. Библиотека должна быть написана так, чтобы все взаимодействие с ее объектами можно было производить с помощью методов, которые они предоставляют, а не только через непосредственные манипуляции с DOM (т.е. любое действие юзера может быть запущено не только событием, допустим, клика по чему-то, но и руками через метод). Но тем не менее, надо этот DOM иметь, чтобы результаты работы методов помимо изменения внутреннего состояния объектов также отображались и в DOM. В целом напоминает приложения на Sencha (ExtJS).

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

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

Я уверен, что у каждого дизайнера есть набор сайтов, на которые они периодически заходят для того что бы черпать это самое вдохновение. У меня так же есть такой список. И я хочу им с вами поделиться.

Естественно, если вы расскажите о своих ресурсах, я буду благодарен.

Хочу сразу предупредить, что практически все ресурсы, собранные мной — англоязычные. Только лишь один на русском. Так же я не очень приветствую узкопрофильные ресурсы (речь о ресурсах, на которых можно скачать только кисти для photoshop и прочее).

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

Безусловно в этом списке вы обязательно найдёте уже знакомые расширения, однако огромный пласт полезных расширений всегда остаётся в стороне. Так что приготовьтесь установить ещё парочку расширений! :)

Встроенные инструменты разработки в Firefox

Перед началом списка было бы неправильно не упомянуть об инструментах, уже встроенных в Firefox. Здесь речь идёт о тех самых инструментах разработки в Firefox Aurora 10 и том функционале, который сегодня можно найти в любом современном браузере.

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



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

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

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

Moment.js это отличная библиотека для работы с датами в JavaScript. Примеры под катом.

Хочу поделиться ссылками на несколько полезных сервисов. Некоторые из них помогут сэкономить время, другие — сделают за Вас незнакомую/нелюбимую работу. Список разбит по категориям, чтобы было легче ориентироваться.

Сервисы опросов
userreport.com (добавил Romanych)
simpoll.ru
webanketa.com (добавил mihass)

Кнопки постинга в социальные сети
Кнопка от Яндекса
addthis.com (добавил UksusoFF)
share42.com

В сети очень много сайтов для подсчета хэшей (MD5, SHA1, SHA2) файлов, однако, все сервисы, что я смог найти, имеют один и тот же недостаток: размер файла ограничен. Также необходимо сначала загрузить файл на сервер, чтобы получить результат вычислений. Это очень неудобно.

Поэтому я решил создать небольшой сервис MD5 File, расчет в котором будет происходить непосредственно в браузере пользователя. Нет необходимости загружать файлы на сервер (экономим трафик и время) и появляется возможность работать с файлами любого размера.

Картинка и немного информации под катом

В статье пойдет речь о Must Have тулзе для удаленной отладки Node.js приложений либо кода на WebKit браузерах node-inspector.

Для отладки кода в браузере, впринципе удаленная отладка и не нужна, не считая мобильных устройств, где она фактически не возможна потому что крайне не удобна. Совсем другое дело с серверным JavaScript. Node.js имеет несколько отладчиков, восновном продвигают ndb Node Debugger — консольная утилита для дебага Node.js приложений. Подходит только для фанатов консоли либо для мазохистов. Работать не удобно, отлаживать долго, по сравнению с отладкой кода в том же FireBug.

Что же умеет node-inspector:
1. Удаленная отладка
2. Отладка в графическом интерфейсе WebKit-debugger (На клиент ничего не нужно ставить — у вас все уже есть)
3. Редактирование runtime-кода!
4. Использует WebSockets, и никакого polling'а!
5. Удаленное профилирование блоков кода c использованием v8-profiler

Вы никогда не задумывались над тем, что навигация в Windows могла бы быть намного удобней? Почему бы не добавить возможность, аналогичную навигации по классам во многих современных IDE, когда в выпадающем списке, вызываемом сочетанием клавиш, отображаются папки с нужным именем, вот так:

Надавно была опубликована библиотека node-fibers, вносящая в nodejs и v8 поддержку замечательного fiber/coroutine — тоесть, возможность использовать yield.
Параллельно, на nodejs groups прошел целый ряд обсуждений на тему всевозможных вариантов упрощения асинхронного синтаксиса.

Вдохновившись возможностями, которые дают «волокна», я написал библиотеку node-sync, которая делает разработку в асинхронном окружении nodejs значительно удобнее, а код — нагляднее.

Синопсис

// Обычная асинхронная функция, вызывает callback с результатом через 1 сек
function someAsyncFunction(a, b, callback) {
    setTimeout(function(){
        callback(null, a + b);
    }, 1000)
}
// Вызываем эту функцию синхронно, используя Function.prototype.sync(),
// работающий по тому же принципу, что и call()
// на этом моменте текуший поток "зависнет" на секунду, пока функция не вернет значение
var result = someAsyncFunction.sync(null, 2, 3);
console.log(result); // "5" через 1 секунду

Доброго времени суток!

Давно думал написать пост на эту тему, но решился только после этого топика про объединение JavaScript файлов.
Для ASP.NET сайтов существует отличная библиотека SquishIt — она позволяет объединять как css файлы в один, так и JavaScript файлы. Я не буду детально расписывать преимущества объединения так как о них было уже сказано в статье выше и других, основное это уменьшение количество запросов к серверу.

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

Однако есть несколько особенностей, которые не доступны из меню, которые вы можете увидеть только с помощью chrome:// команд.

Под катом приведены 12 самых полезных chrome:// команд, которые должны знать все.

В силу моего параноидального отношения к сайтам а также из проф соображений, я использую firefox + noscript. Когда я впервые захожу на некоторые сайты, у меня выключен js и кликая на поле, для поиска где красуется надпись «search here» — получаю облом. При том что у меня современный браузер, который без проблем поддерживает атрибут placeholder. Как правило везде стоит вот такой ужас: <input value="Поиск по сайту" onfocus="if (this.value == 'Поиск по сайту') this.value == ''" onblur="if (this.value == '') this.value == 'Поиск по сайту'"> (эхо конца 90-ых).

Созданый Райаном Далем в 2009 году, Node.js — относительно новая технология, завоевавшая в последнее время большую популярность среди веб-разработчиков. Однако, до сих пор не каждый знает, что на самом деле Node.js это серверная JavaScript среда, использующая асинхронную событийную модель. Что это означает? Все просто: это среда, которая предназначена для написания масштабируемых, высокопроизводительных приложений. Почти как Ruby’s Event Machine или Python’s Twisted, но гораздо глубже — JavaScript реализовывает цикл событий, на уровне самого языка, а не как отдельная библиотека.



И это еще не все: то, что действительно круто в Node.js — это тысячи модулей, доступных для любых целей, а также активниешее сообщество этого молодого проекта. В этом обзоре вы найдете самые полезные ресурсы по Node.js, от просто удобных инструментов и подробных руководств, до углубленных статей и ресурсов о этой перспективной технологии. Используете ли вы Node.js? Поделитесь опытом в комментариях к этотому посту!

Доброго времени суток всем желающим приобщиться к миру пользовательских скриптов (они же userscript, userJS, юзерскрипты).

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

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

Для Visual Studio 2010 создано уже около 900 дополнений. Многие из них позволяют облегчить решение рутинных задач, добавить удобства. Ниже представлено двадцать популярных дополнений, которые вы возможно найдете полезными для вашей работы.

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

Итак, Deferred — это отложенный результат, результат выполнения, который станет известен через некоторое время. Результатом, хранящимся в Deferred, может быть произвольное значение (успешное выполнение) или ошибка (исключение), которое произошло в процессе выполнения асинхронной операции. Раз нас интересует результат операции и мы получили от некоторой асинхронной функции Deferred, мы хотим выполнить действия в тот момент, когда результат выполнения будет известен. Поэтому Deferred кроме результата хранит еще цепочку обработчиков: обработчиков результатов (callback) и обработчиков ошибок (errback).

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