Статус загрузки страницы в iframe

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

Если в iframe подгружается с того же домена, что и страница то мы можем просто скачать страницу по ajax, получить статус операции.

В примере использую обертку jQuery для загрузку через ajax.

var $frame = $('iframe')

$.get(url).done(function(content, status, x){
var _doc = $frame[0].contentWindow.document; 
_doc.open('text/html', 'replace');
_doc.write(content);
_doc.close();
$frame.css('height', _doc.documentElement.scrollHeight);
}).fail(function(x, status, message){
// Do another magic
});

П.С.
В одном списке вопросов для фронтендеров в качестве ответа на вопрос, когда бы вы использовали метод document.write(), был предложен ответ - никогда (или в 1999-м). Вообщем, это первый случай, когда я нашел применения этому методу.

П. П. С.
Обнаружил один существенный недостаток - невозможно определить когда завершится отрисовка содержимого, вставленного через document.write(). Поэтому полученный размеры контента могут не соответствовать реальным.

Лучшее из прочитанного в августе

Короткий конспект собранных ссылок понравившихся статей.

Браузер - это развитие ОС
http://siliconrus.com/2015/08/browsers-future/

Касперский попал под раздачу
http://geektimes.ru/post/259750/
Особенно полезно, что возможное решение сейф браузинга Dr.Web будет иметь похожее воплощение.

Занимательная вероятностная статистика
http://geektimes.ru/post/259090/

Как победить проституцию
http://w-o-s.ru/article/16030

Откуда берется ксенофобия
http://w-o-s.ru/article/14704

"Традиции износилования"
http://w-o-s.ru/article/14823

Чем бороться с локерами/вымогателями
http://geektimes.ru/company/icover/blog/259968/

Исповедь фронтендера в поисках работы. Стоит иногда перечитывать, чтобы приходить в чувства.
http://siliconrus.com/2015/08/kozulya-job/

Mac app store free apps. Листинг скидок в app store
http://appshopper.com/mac/prices/free

В чём истинное предназначение «Косынки» и «Сапёра»
http://geektimes.ru/post/260292/

Небольшой обзор Алисы в стране чудес с точки зрения анализа работы мозга.
Мне всегда нравился сюрриализм в этом произведении, и по всей видимости он не случаен.
http://www.factroom.ru/books/secrets-of-alice-in-wonderland

Мара Сальватруча из Центральной америки
http://lenta.ru/articles/2015/08/18/ms13/?pasa

Реабилитируем селфи
http://www.lookatme.ru/mag/how-to/inspiration-howitworks/216209-psycho-selfie

Признаю, что выработал у себя такую привычку - держать по множеству открытых вкладок.
И две вещи которые вынуждают их закрывать - не читаемость заглавий вкладок и нехватка памяти. Из за физических ограничений монитора и компьютера.
http://www.lookatme.ru/mag/how-to/better-life/216309-lifehack-singletasking

Небольшая история как появился ноль и отрицательные числа
http://www.lookatme.ru/mag/how-to/books/216125-excerpt-negative

Хороший рассказ о выборе фотоаппарата или чем снимать
http://geektimes.ru/company/icover/blog/260740/

Познавательная статья о прослушке (с красочными примерами)
http://habrahabr.ru/company/neuronspace/blog/265457/

VirtualBox: как объединить две виртуальные машину в одну сеть

Было необходимо поправить багу в верстке под IE9, который был доступен из одной ВМ, а сервер был на другой ВМ. Поэтому потребовалось настроить работу двух ВМ в VirtualBox в одной сети.
Составил небольшой конспект, основных действий. Может пригодится в будущем.

Создание виртуальной сети
Переходим по пунктам меню "Файл > Настройки"
Открываем вкладку "Сеть".
Создаем/выбираем сеть
Задаем настройки сети в попапе:

• Имя сети: "NatNetwork"
• CIDR сети: 10.0.2.0/24

IP адресс хоста потом надо будет искать в диапазоне указанного CIDR сети.

Настройка виртуальной машины
Выбираем пункт меню "Настройка" контекстного меню ВМ.
Во вкладке "Сеть" в настройках Адаптера (добавляем новый если требуется).
Выбираем "Тип подключения" - "Сеть NAT", в выпадающем списке "Имя" выбираем созданную сеть.
Задаем такие настройки для всех ВМ, которые надо подключить

Проверка
В ВМ в которой запущен сервер узнаем ip адрес машины
Debian/Ubuntu к примеру
#: ifconfig
В ВМ в которой открыт браузер в адресной строке указываем хост и порт сервера.

Двоеточие в идентификаторе css селектора

Опытным путем нащупал отличия в работе методов document.getElementById() и document.querySelector()
Был в DOM-е элемент с идентификатором layout:rightcol
<div id="layout:rightcol"></div>

Так для него document.getElementById('layout:rightcol') вернет правильный элемент, а для
document.querySelector('#layout:rightcol') и $('#layout:rightcol') будет получено исключение

chrome 40: DOMException: Failed to execute 'querySelectorAll' on 'Document': '#layout:rightcol' is not a valid selector.
firefox 35: SyntaxError: An invalid or illegal string was specified

Находки в сети за сентябрь

Заметки и все интересное, что мне попадалось в сети.

Js и веб разработка
Советы по хорошему оформлению angular кода
http://habrahabr.ru/post/235873/
https://github.com/johnpapa/angularjs-styleguide
V8 JavaScript stack trace API
https://code.google.com/p/v8/wiki/JavaScriptStackTraceApi
коллекция шаблонов сайтов
http://templated.co/
Сервис отдающий ip адрес по запросу строкой
https://secure.informaction.com/ipecho/
Проект на github-е ruby api for google drive
https://github.com/gimite/google-drive-ruby

Веб разработка под мобильные устройства
Список физических размеров экранов мобильных устройств
mydevice.io
подборка мобильных меню
http://www.dejurka.ru/web-design/menu-list-mobile-design/

Служебные разделы доступные только в браузере
Некоторые служебные разделы браузеров, которые могут пригодится при разработке расширений (аддонов)
Кэш в chromium-based браузерах - chrome://cache/
Превью страниц в chromium-based браузерах - chrome-search://thumb/http://mail.ru
Список сторонннего ПО, которое используется в Yandex браузере - browser://credits/

Приватность
Подробное описание заголовка запроса Content-Security-Policy
http://content-security-policy.com/
Статья про XSS
http://habrahabr.ru/post/149081/
Деаномизация пользователей
http://habrahabr.ru/post/238565/

Интересные статьи с Adme.ru
25 пророческих цитат Джорджа Оруэлла
Как обманывают наивных талантов
Эволюция мозга

Life Hack
Как составить план задач на день, понять на сколько он выполним и не забыть про него. Записывайте его в форме истории.
И прочитайте эту статью

Linux Дистрибутив
Сайт проекта занимающегося разработкой одноименного минималистичного Linux дистрибутива.
Damn Small Linux Remake

Уроки биологии
http://science.compulenta.ru/688541/

Android
Engineer Mode на Android смартфоне
UCSD comand: *#*#3646633#*#* К примеру на смартфоне c Android 4.2 нашел сообщение о состоянии батареи
Log and Debugging > BatteryLog > battery healthy

Макет резиновой таблицы

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

Размер html таблицы зависит от размера содержимого. Поэтому таблицу почти не возможно вписать в какой-либо контейнер. Отдельной проблемой может стать скролл, размер которого не контролируется.


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

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

Погружение в Angular

Сухим текстом представляю мои впечатления от знакомства с Angular.
До этого работал с Backbone и обратить на него внимания меня вынудили разговоры с командами которые его используют.
Чтобы лучше понять на каких принципах построен Angular реализовал небольшое приложение, которое разместил на github-е.

Что сразу бросилось в глаза.
Динамика интерфейса приложения скорее всего будет в верстке. Если же, разработчик не испытывает отвращение к "декларативному подходу".
Благодаря использованию директив обычная верстка перейдет в разряд шаблонов. Встроенная логика - дополнительный синтаксис, на подобии  SQL, LINQ. В таком примере
ng-options="key as value for (key, value) in categories"
часть после for относится к источнику, выражение до for определяет, какое значение использовать в качестве атрибута value опции, а какое в качестве текста опции.
Параметризация шаблонов с возможностью двунаправленного биндинга поддерживается изначально.
<h3>{{[«Добавление»,«Изменение»][(item.id>0)+0]}} записи</h3>
По слухам, в шаблоне не работает тернарный оператор, поэтому в этом примере он был заменен такой конструкцией.

Достоинства:

• Не требует зависимостей. В Backbone, для примера, потребуется jquery и underscore;
• Встроенная реализация привязки данных. В Backbone для аналогичного функционала придется создать удобный подсобный инструментарий или использовать стороннее решение (epoxy.js, ribs);
• Приемлемая архитектура построенная на патернах.

Недостатки :

• Не  имеет 100% эквивалентной замены функционала jquery для работы с DOM. К примеру, метод $element.find() работает только с названиями тегов и не работает с селекторами атрибутов (elem.find('[type=submit]'));
• Из личного, не так просто взять и вставить в нужное место вьюшку как в Backbone. Надо все обставить в специально "приготовленные" для этого директивы.

Сравнение с Backbone
Backbone по содержанию напоминает фреймворк кастомных MV* фреймворков. Необходимо самому реализовать вывод представления (метод render()). Можно использовать любой другой шаблонизатор по мимо underscore.template и т. п. Как связать атрибуты модели к вьюшке кодер решает сам. Т.е. то что будет использовано под "вывеской бекбона" будет удовлетворять вкусу и взглядам на правильный подход конечного разработчика. Поэтому необходимо, что бы у разработчика были представления о best practise и способах их достижений:

• Декларативное описания логики в шаблоне или перенос их в js код представления;
• Отдельное представление для каждой коллекции или коллекции будет вставлятся в DOM представления;
• Одна модель - одно представление или у одной модели может быть много представлений.

Разные слои абстракции. 
Backbone: Backbone.Events, Backbone.Model, Backbone.Collection, Backbone.View
под девизом "расширяй и наследуй".
Angular: service, fabric, module, controller, directive, filters Внедрение зависимостей.
В Angular роль бэкбоновской модели выполняют scope и сервисы, коллекции так же размыты.

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

В последнее время у меня появилась мысль, что коллекции в Backbone (Backbone.Collection) получили ход, благодаря тому что в модели поддерживаются только plain объекты (без доступа к дочерним под объектам). Но пока эта мысль у меня развивается.