Доброго времени суток дорогой хабраюзер. Я очень люблю все новое и красивое и поэтому очень часто посматриваю за развитием ecma 6 aka Harmony. Да-да, вы не ошиблись, речь пойдет именно о новом javascript, хотя он еще в разработке, но многие фичи уже сейчас можно начать тестировать, так сказать, просто для своего удовольствия.

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



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

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

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

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

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

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

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

Распространение LESS/SCSS, а также ожидаемые движения в мире браузеров и стандартов, появление jQuery, наконец, вернуло фан в вёрстку HTML-страничек и во фронт-энд разработку.
Но представьте, что вам требуется сверстать раздел в интернет-магазине, раздел блога, или целую главную страницу Хабра? Да, мы делим страницу на отдельные блоки и делаем для них разметку, порождаем множество вложенных блоков, делаем для них CSS/LESS/SCSS. Безусловно, существуют такие замечательные средства как Zen-Coding, шаблонизатор jQuery Templates, а для построения сеток (grids) — всевозможные CSS-фреймворки, наподобие Bootstrap или же Zurb Foundation.

Но часто хочется посмотреть как же ведет себя вёрстка списков, когда в них не один только что свёрстанный элемент, а множество элементов. Наверняка, вы копипастили хотя бы раз в жизни разметку блока, чтобы заполнить страницу контентом, особенно когда под рукой нет запущенной любимой CMS или веб-фреймворка с шаблонизатором. А потом удаляли копипасту. Или что хуже, вы из тех, кто получает «в нарезку» HTML'ки от тех, кто верстает, и вам необходимо удалять эту копипасту самим.

В подборке инструменты, плагины и другие полезности, облегчающие работу с Twitter Bootstrap. Предыдущая подборка.

Инструменты

Bootstraptor — подборка большого количества бесплатных и премиум тем, в том числе Starter Kit, на основе Bootstrap.

Всем доброго дня!

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

Не так давно, для одного проекта потребовалось написать карту, которая будет отвечать следующим требованиям:

• Плавная прокрутка
• Подгрузка областей карты

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

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

Здравствуйте! Весьма надолго у меня растянулась подготовка материала (жизнь давала изрядных пинков под зад), но вот я справился и готов поделиться продолжением первой статьи с вами.

Часть первая


Неудачный тест физики

В этой части мы:
— оптимизируем код из предыдущей статьи;
— создадим объект «база» и научим её чиниться время от времени;
— добавим пушкам патроны и перезарядку;
— избавимся от «неудобной» переменной gv;

А в конце статьи вас ожидает маленький бонус :)

Всем заинтересовавшимся — добро пожаловать под долгожданный кат!

Доброго времени суток, уважаемые хаброжители.

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

Дело было вечером, делать было нечего

Копался я недавно в интернете в поисках обоев и наткнулся на одно интересное изображение(1.1мб). И меня “зацепила” идея рисовать изображения разноцветными буквами. Порывшись в интернете узнал, что это называется ASCII-art. Ну и конечно же первая мысль: “А запилю ка я приложение, что бы мои любимые обои таким образом нарисовало!”
Сказано — сделано. Есть время, есть желание — почему бы не попробовать.

Хабражители редко ходят друг к другу в гости. И, в то же самое время, хотят взглянуть на то, как устроились другие. Может быть, даже, позаимствовать разные интересности.

Пока вы дома, самое время вооружиться фотоаппаратом и поделиться видом своего рабочего места (домашнего).

По возможности, описываем:
1. 7 любимых гаджетов.
2. 7 ежедневных программ.
3. 7 интересных открытий, которыми вы часто пользуетесь.

Приоткройте занавесу тайны в своей обители.

PS: Бонус для владельцев ноутбуков — подключаем 2 монитора.

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

(посвящается Марку Криспину 19.07.1956 — 28.12.2012)

Некоторое время назад в Яндекс.Почте появились сборщики писем по IMAP. В этом посте мы немного расскажем о двух важных почтовых протоколах — POP3 и IMAP — и о том, как они появились и используются в современных почтовых системах. Не всегда это так просто и очевидно, как ожидаешь от технологий, развивающихся уже почти 30 лет.

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

Еще в 2009 году, Сергей Чикуёнок опубликовал статью, в которой представил новый способ написания HTML и CSS кода. Этот революционный плагин, назывался Zen Coding, он помогал многим разработчикам на протяжении многих лет и в настоящее время вышлел на новый уровень.

Emmet, ранее известный как Zen Coding, является самым производительным и экономным во времени плагином для текстового редактора. Простые сокращения мгновенно расширяются в сложные фрагменты кода, Emmet превратит вас в более продуктивного разработчика.

Для тех, кто предпочитает смотреть, а не читать, вот видео любимых трюков автора.

Всем привет!
На данный момент очень трендово использовать node.js. Однако не всем он нравится. В данном обзоре, я бы хотел рассказать немного о конкуренте, который был написан под влиянием node.js
Vert.x это асинхронный, event-driven фреймворк, цели которого пересекаются с популярным node.js. Высокая производительность, простая асинхронность и конфигурирование — это все по vert.x.
Первая версия фрейворка, была выпущена в 2012 году, в то время как node.js был выпущен в 2009. Однако, уже поддерживается VMware и может запускаться на CloudFoundry.
Основные характеристики продукта под катом:

Приветствую вас, хаброжители! Сегодня я расскажу вам как сделать интерактивную SVG картограмму при помощи d3js.org, о возможностях этой JavaScript библиотеки в общем, а также придётся немного разобраться в том как и где лучше хранить геоинформацию для веба. В финале мы получим следующее:


Начать сие увлекательное путешествие можно под катом.

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

tl;dr Eсть новое API для асинхронного try\catch. Из статьи можно скопипастить пример и поиграться.

С ростом популярности node.js он становится всё более привлекательным для разработки приложений. По крайней мере я в последнее время очень часто использую эту технологию для быстрой разработки оных. И на данный момент, технологически нет никаких препятствий для разработки кроссплатформенных приложений на одном языке. И не только классических Web-приложений (клиент-сервер) но и десктопных.

Есть множество статей о том, как написать свои правила для плагина 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>

Ни для кого не секрет, что e-mail маркетинг только начинает набирать обороты во всем мире. А для России – это ещё и вовсе молодая ниша на рынке. И профессиональная верстка электронных писем здесь один из составляющих факторов успеха. Под профессиональной версткой понимается не только визуально красиво и надежно сверстанный макет, но и то, как выглядит usability открытки с маркетинговой точки зрения, как оптимизирована графика вместе с типографией для спам-фильтров и многое другое. Верстка электронных писем довольно обширная тема, в одной статье все не уместить, поэтому в данном посте постараюсь описать только базовые элементы и приемы, надежно проверенные за годы практики и работающие в top самых используемых почтовых клиентах мира: iPhone 4S/5; Outlook 07/10/13; iPad; Apple Mail; Android 2.3/4.0; Yahoo; Gmail. Если рассматривать только российский рынок, то нельзя не упомянуть о Mail.ru и Яндекс.Почта.

Что нужно знать в начале?

Сразу хочу выделить несколько из основных и важных моментов:

1. В нашем арсенале имеется очень урезанный набор css-свойств, которые поддерживаются всеми почтовиками. При этом, стили нужно прописывать inline, а в head выносить только вендорные свойства и те блоки объявлений, которые не несут нагрузки на основную стилизацию письма. Ну и использовать link in head — крайне нежелательно.
2. Не используйте background-image в основных визуальных элементах дизайна и не помещайте в изображения важную текстовую информацию. Вообще нужно всегда учитывать такой вариант, что письмо будет просматриваться получателем без единого изображения.

Каркас

Пожалуй каждый, кто хоть раз верстал письмо под рассылку, знает, что каркас лучше строить с помощью таблиц. На самом деле простая блочная модель div поддерживается на данный момент во всех перечисленных выше почтовиках, за исключением MS Outlook начиная с 2007 версии. Это связано с тем, что в качестве движка последние версии Outlook используют Microsoft Word, который в свою очередь много не знает о блочных css-свойствах. Игнорировать при верстке данный почтовый клиент я не рекомендую, поэтому в качестве фундамента все же используйте table. Да и добившись хорошего результата для Outlook, можно быть уверенным, что в большинстве почтовиках, письмо будет смотреться тоже хорошо, а скорее и лучше.

В качестве примера рассмотрим наиболее важные элементы из следующего, не сложного шаблона: