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

   <div id="block_outer">
      <div id="block_inner"></div>
   </div>

А теперь представьте, что к блоку #block_outer привязано событие onClickOuter, а к блоку #block_inner, соответственно, событие onClickInner. И ответьте на вопрос, как сделать так, чтобы при клике на блок #block_inner, событие onClickOuter не вызывалось? И будет ли оно вообще вызвано? И если будет, то в каком порядке события будут вызываться? И знаете ли вы, как работает метод jQuery.live или подобные в других библиотеках (events delegation в ExtJS, например)?

Как же все-таки работает HTTPS? Это вопрос, над которым я бился несколько дней в своем рабочем проекте.

Будучи Web-разработчиком, я понимал, что использование HTTPS для защиты пользовательских данных – это очень и очень хорошая идея, но у меня никогда не было кристального понимания, как HTTPS на самом деле устроен.

Как данные защищаются? Как клиент и сервер могут установить безопасное соединение, если кто-то уже прослушивает их канал? Что такое сертификат безопасности и почему я должен кому-то платить, чтобы получить его?

Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.

Зачастую вроде бы простые задачи верстки требуют сложной структуры HTML-разметки и использования CSS-трюков. Центрирование элементов или выравнивание контента может быть очень утомительным. Одна из таких задач — это выравнивание элементов верхней части сайта так, чтобы логотип был слева, а пункты меню — справа. Можно использовать float и position:absolute, а для выравнивания по вертикали — добавлять margin и padding разным элементам. Вроде бы ничего сложного. Но если сайт должен корректно отображаться и на мобильных устройствах, возникает много проблем.



Ниже описан лаконичный способ решения этой проблемы.

Перевод статьи Криса Койера (Chris Coyier) с CSS-Tricks.com "Search with Filters Responsive Design Pattern".

Паттерны дизайна — очень полезная штука, особенно в адаптивном дизайне. Рассмотрим пример: на большом экране в блоке со вкладками по ширине помещается много табов, однако на мобильном устройстве верстка съедет. Решение — использование специального паттерна дизайна, который сжимает все табы в выпадающие пункты.

Brad Frost даже собрал очень хорошую коллекцию адаптивных паттернов, очень полезно. Еще один пример, форма поиска с фильтром результатов. На десктопе места много:

Несколько месяцев назад мы с коллегами решили сделать многопользовательскую realtime игру, которая могла бы работать в вебе. Мы решили использовать node.js для нашего сервера. Это решение привело к очень убедительному успеху — наш сервер работал несколько месяцев без единого падения или перезагрузки процесса.

Мы решили написать нашу игру на node.js, потому что мы слышали много хорошего об этой платформе и очень хотели немного с ней поиграть. И это было потрясающе — мы очень быстро вошли в тему. Для node.js существует множество любопытных библиотек, способных решать абсолютно разные задачи. Побочным преимуществом использования node для серверной части является, собственно, javascript — очень простой в обращении язык. Это позволило нам сфокусироваться на проблемах, которые встречаются во всех realtime играх, без лишней суеты, ограничений и необходимости компилировать код, как это случается при использовании менее динамических языков.

Также node.js проявил себя как очень легковесный язык, даже в моменты пиковой нагрузки. Для нашей игры, процесс node.js использовал только один поток и потреблял всего около 3-4% CPU при одновременной работе 8-10 копий игры, каждая со своим собственным движком обнаружения столкновений.

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

Вчера (23 июля) интеловский Центр технологий с открытым исходным кодом выдал на-горá очередную версию движка node-webkit. Как и прежде, движок этот позволяет открывать браузероподобные окна (на основе кода Chromium) и употреблять в них API Node.js — а значит, обеспечивает нетрудное создание GUI-приложений методами веборазработки (на языках JavaScript, HTML, CSS, WebGL и т. п.) под операционные системы Windows, Mac OS X и Linux.

Новая версия получила номер 0.6.3 и содержит движок Node версии 0.10.12:



Три месяца назад (29 апреля) я обозрел одну из предыдущих версий node-webkit (версию 0.5.1). За прошедшее с тех пор время в node-webkit появился целый ряд существенных новшеств.

Важнейшим из них стало улучшение подсистемы поиска и запуска приложений. Теперь, когда вы запускаете движок node-webkit, он ищет приложение в следующем порядке:

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



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

Effeckt.css — это постоянно пополняемая подборка эффектов для оформления веб-приложений. Один из главных плюсов этой библиотеки эффектов — достаточно жёсткие критерии включения. Это не куча-мала, в которую сваливают всё подряд, каждый эффект должен соответствовать ряду критериев: эффекты должны быть практичными, их назначение — не демонстрировать возможности технологий, а облегчать и украшать жизнь пользователя, они должны работать быстро и плавно, они должны быть полностью совместимыми с мобильными технологиям.

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

История

Фильмы 30-и-более летней давности трудно сегодня воспринимать всерьез, т.к. большинство систем будущего выглядело в лучшем случае так («Чужой», 1979):

Добрый день, Хабр!

Мы рады сообщить о новом релизе Tizen SDK версии 2.2, который доступен для скачивания на официальном сайте. Основные изменения коснулись UI и UX (в частности, была добавлена поддержка аппаратных кнопок «Меню» и «Назад»), API и внешнего вида инструментов разработчика, а также были исправлены ошибки, найденные в предыдущей версии. Подробнее об изменениях можно узнать из документа release notes и API change notes.



Теперь к самому интересному. В первой половине июля стартовал конкурс приложений Tizen App Challenge, который продлится до 1 ноября 2013 года. Общий призовой фонд составляет более 4 000 000 вечнозеленых американских президентов и будет разделён между 54 победителями.

Здравствуйте! На днях мне выпала задача написать «заглушку» на сайт, который прекратил своё существование. Дизайнерское решение заключается в создании видео на котором изображён старый сайт, напечатанный на листке, плавно поглощающийся офисным утилизатором бумаги. После окончания ролика должна появиться надпись «Старого сайта больше нет. Скоро будет новый.», логотип компании, ссылки на Facebook и Google+, а также контактная информация.



Видео посредством Css размещается на всю ширину или высоту вьюпорта, в зависимости от экрана пользователя, сохраняя свои пропорции. То есть, если у нас видео с разрешением 1280 x 1024, то при ресайзе окна браузера, его разрешение будет меняться пропорционально: 1000 x 800, 600 x 480.

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

Доброго времени суток, читатель!

Как-то понадобилась мне в проекте, работающем на node.js, обработка изображений. И чтоб скачал файлик, закинул в папку и подключил как модуль. Ан нет, таких в природе не оказалось. По этому тогда пришлось воспользоваться node-imagemagick. Но сейчас пост не о этой библиотеке.

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

Назвал её по простому, imageLib.js, и на github выложил, правда под MIT.

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



Демо / Скачать исходники

В заметке собраны сайты с обучающими материалами для веб-дизайнеров и веб-разработчиков. Старался не повторяться с постом 27+ ресурсов для онлайн-обучения хабраюзера nicolausYes.

Academic Earth

Множество бесплатных лекций, в том числе от известных университетов (Гарвард, MIT, Стенфорд и др.).

Для работы с SVG есть очень много библиотек для рисования. Мы рассмотрим плагин для jQuery.

Вчера, 6 июля 2013, Брам Мооленаар объявил о выходе первой бета‐версии Vim 7.4: одного из лучших текстовых редакторов мира *nix.
Наиболее значимым изменением в новой версии является новый движок регулярных выражений. Также была сильно улучшена поддержка Python.

Добрый вечер!

Всё началось с того, что необходим был более или менее удобный инструмент для работы с API социальной сети ВКонтакте под iOS. Однако Google меня достаточно быстро расстроил результатами поиска:

• StonewHawk — GitHub
• maiorov/VKAPI — GitHub
• AndrewShmig/Vkontakte-iOS-SDK (да-да, с первой версией было не всё так хорошо, как могло показаться с первого взгляда)

Вроде бы всё хорошо, самое главное есть, но вот использование не вызывает приятных ощущений.

Под катом я расскажу, как работает обновленная версия ВКонтакте iOS SDK v2, с чего всё начиналось и к чему в итоге пришли.

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

Итак, мы хотим написать нечто достаточно музыкальное.