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

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

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

Записи с последней конференции HPC — High Performance Conference, состоявшейся 6 декабря 2012, никак не анонсировались, хотя заслуживают внимания.

Под катом видеозаписи следующих докладов:

1. Практические вопросы использования NOSQL в высоконагруженном проекте
   Дмитрий Ананьев, Руководитель группы разработки новых сервисов, Мамба
2. Как работает «умная живая миграция» в Jelastic
3. Дмитрий Лазаренко, Директор R&D, Jelastic Russia
4. Parallels Cloud Server как платформа для высокопроизводительных систем
   Дмитрий Мишин, Team-lead отдела серверной виртуализации, Parallels
5. Облачная платформа Windows Azure для высоконагруженных проектов
   Владимир Юнев, Technical evangelist, DPE, Microsoft Russia

и одно видео с фестиваля профессионального развития BitByte:

1. Badoo Desktop: оптимизация приложения на миллион юзеров
   Руководитель проекта десктопных приложений компании Badoo.

AngularJS — прекрасный фреймворк для построения веб-приложений. У него замечательная документация, снабженная примерами. В обучающих «пробных» приложениях (вроде TodoMVC Project) он очень достойно показывает себя среди остальных прочих фреймворков. По нему есть отличные презентации и скринкасты.

Однако если разработчик никогда ранее не сталкивался с фреймворками, подобными Angular, и пользовался в работе в основном библиотеками вроде jQuery, то ему может быть трудно изменить свой образ мышления. Как минимум, так было со мной, и я бы хотел поделиться некоторыми заметками на эту тему. Может быть, кому-то это будет полезно.

Сегодня команда Twitter представила общественности собственный фреймворк. Flight — это легкий компонентный javascript фреймворк, каждый компонент которого описывает поведение элементов на странице. На самом деле, вы скорее всего уже видели Flight в действии, потому что Twitter использует его для своих приложений. Вы можете посмотреть демонстрацию возможностей фреймворка в виде простейшего почтового клиента (код на github).

Новый фреймворк использует ES5-Shim для поддержки ES5 в старых браузерах и jQuery для манипуляции DOM. Также потребуется одна из реализаций AMD, например require.js или loadrunner.

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

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

Стилизация

BootSwatchr — быстрая стилизация Twitter Bootstrap.

Время от времени мне приходится распутывать терминологические хитросплетения, связанные с употреблением словосочетаний, в которых встречается слово Selenium – Selenium 2.0, Selenium IDE, Selenium RC, Selenium WebDriver, Selenium Server, Selenium Grid.

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

Хочу поделиться набором ссылок на нексолько полезных, интересных и, возможно, не самых известных материалов по JavaScript. Из них вы узнаете немного больше об истории появления языка, о его настоящем, тонкостях реализации в различных браузерах, и о будущем развития стандарта ECMAScript. О различных способах наследования в том числе об эмуляции «классического» ООП, множественном наследовании и миксинах. О функциональном стиле программирования в JavaScript: чистые функции, map, reduce, частичное применение и композиции функций. И, наконец, что если бы Хемингуэй писал на JavaScript?

Отличная подборка, как нарисовать различные геометрические фигуры одним элементом HTML.

Квадрат

#square {
	width: 100px;
	height: 100px;
	background: red;
}

Итак, позавчера Корпорация Добра все-таки закрыла свой бесплатный Translate API. Автор до последнего момента надеялся, что они образумятся и не станут уподобляться остальным так поступать. Поэтому не чесался и ничего не делал. Но вот гром грянул. И в CMS одного небольшого 3-х язычного проекта отвалился переводчик. Не страшно, но неприятно — раньше админ на форме редактирования контента 1 щелчком мыши переводил все поля еще на 2 языка. Переводчик я написал по своей милости, потратил на это минут 20 и не взял за это ни копейки. Тем не менее, клиент звонит, грозится физической расправой над любимым хомячком, просит, опять угрожает. Пришлось закрывать баш и искать альтернативы.

Под катом список (4 варианта, никаких откровений / открытий) чего нашел автор, а также рецепт Javascript-перевода от Bing.

По просьбам некоторых читателей решил написать топик про контекст в javascript. Новички javascript часто не понимают значение ключевого слова this в javascript. Данный топик будет интересен не только новичкам, а также тем, кто просто хочет освежить данный аспект в памяти. Посмотрите пример ниже. Если вы затрудняетесь ответить на вопрос «что будет выведено в логе» хотя бы в одном из пунктов или хотите просто посмотреть ответы — добро пожаловать под кат.

var f = function() {
    this.x = 5;
    (function() {
        this.x = 3;
    })();
    console.log(this.x);
};

var obj = {x: 4, m: function() {
    console.log(this.x);
}};


f();
new f();
obj.m();
new obj.m();
f.call(f);
obj.m.call(f);

Добрый день, хабрачитатели!
Как мы уже ранее писали, 9 августа состоится конференция по высоким нагрузкам High Performance Conference.
Количество полученных заявок и ваши мотивационные письма показали, что данная тема интересна широкому кругу читателей, поэтому… онлайн трансляции быть!

Во всем мире подозревают, что лучшие разработчики, архитекторы, системные администраторы и другие IT-специалисты родом из России.

Было создано много крутых highload проектов, но, к сожалению, сейчас у нас нет комьюнити, где бы мы могли постоянно собираться, общаться и делиться опытом.
С другой стороны у нас очень многие любят писать свои «велосипеды», а не использовать уже готовые решения, которые позволяют сильно сократить время на разработку и внедрение.
Поэтому мы решили постепенно исправлять данную ситуацию:
ITmozg.ru организует конференцию по высоконагруженным системам High Performance Conference.
Своим опытом будут делиться Гуру, которые не понаслышке знают о высоких нагрузках:

• Badoo
• Mail.ru Group
• ITmozg.ru
• Фотострана

Fluid UI: очень удобное HTML5-приложение для создания прототипов мобильных интерфейсов в браузере (Chrome или Safari). Буквально за пару минут можно сделать приличный набросок.



Поддерживает жесты, действия на прикосновения, драг-н-дроп, переходы между страницами, дублирование шаблона на несколько страниц, библиотеки iPhone и Android, загрузку пользовательских изображений и скриншотов. Ссылку на созданный дизайн можно быстро отправить коллеге или протестировать на мобильном устройстве. Можно экспортировать в PDF, HTML или графический формат.

Есть сейчас такая тенденция — делать в сайтах поддержку планшетов iPad и других устройств на iOS: iPhone, iPod. Но если для сайтов это достаточно просто, при хорошей верстке, можно добавить пару тегов в head и готово, то для веб-приложений, где есть сессии с использованием Cookies, все обстоит сложнее и есть подводные камни. Итак, возможно, еще не все знают, что в мобильном Safari можно нажать кнопку меню (со стрелкой, как на рисунке) и выбрать там «Добавить в Домой» / «Add to Home Screen», тогда для сайта появится иконка на рабочем столе. Но иконка будет просто запускать Safari с этим сайтом, а вот если добавить пару известных тегов (см. ниже), то все элементы управления Safar будут скрыты и приложение будет работать на полный экран, как обычные нативные приложения iOS. Так вот основная выявленная проблема в том, что в этом режиме сессия все время сбрасывается. Стоит переключится на другое приложение или рабочий стол, даже просто перейти по ссылке, и опять вернуться в веб-приложение, как страница перегрузится и сессионной Cookie уже не будет, нужно логиниться заново. Эту проблему то мы и решим.

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

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

Наткнулся на интересную вещицу: VIM Adventures.



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

Наглядный пример для домейнеров, как нужно строить модель бизнеса: новый сервис Stylate. Здесь начинающий стартап может подобрать красивое имя для сайта — и сразу купить выбранный домен .com вместе с логотипом в векторном формате. Логотип идёт как бонус. Самое главное, что пакеты «домен+логотип» продаются по единой цене $250. Это настоящий демпинг на рынке красивых доменов, где сделки часто проходят в районе $10 тыс.



Пока что каталог Stylate весьма скромный: на продажу предлагается всего 33 бренда, но уже готов рубрикатор на 31 отрасль. Очевидно, они будут пополнять ассортимент.

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

В данной статье я попытаюсь показать, как можно создать простой чат, используя Node.js в связке с Socket.IO. Изначально я хотел построить чат на чистых Websockets, но столкнулся с практически полным отсутствием готовых реализаций сервера для них в Интернете. Так что решил не изобретать велосипед, а использовать готовую библиотеку.
В моем случае сервер работает под Ubuntu, поэтому все примеры будут для неё (и ссылки в примерах — на него же).

Установка компонентов

Первым делом нам потребуются собственно Node.js (инструкция по инсталляции и ссылки на скачивание здесь) и Socket.IO. Модули для Node.js проще всего устанавливать, используя менеджер npm —

curl http://npmjs.org/install.sh | sh
npm install socket.io

Серверная часть

Структура серверной части такова: сервер принимает сообщение, если это команда — выполняет определенные действия, если просто сообщение — рассылает всем остальным участникам.