^{Cравните: популярный новостной сайт на Западе и в Китае}

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

Команда разработчиков WebStorm постаралась в очередном выпуске IDE собрать самые востребованные возможности для самых свежих технологий. Что появилось нового?

Поддержка TypeScript, CoffeeScript, Dart, LESS и Sass

В новой версии Webstorm появилась базовая поддержка TypeScript: подсветка кода, проверка соответствия типов, навигация по коду, обнаружение ошибок по ходу редактирования и автодополнение. Поддержка TypeScript, CoffeeScript и Dart включает компиляцию в Javascript на всех платформах, поддерживаемых в WebStorm. Аналогично поддерживаются LESS и Sass.

В основном релизе IDE теперь есть полноценная отладка CoffeeScript, TypeScript и Dart с использованием source maps. Нам особенно приятно порадовать коллегу pietrovich, который поднимал этот вопрос в ветке обсуждения в одном из прошлых постов.

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

Один из упоминаемых в статье интерфейсов

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

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

CDN-провайдер CloudFlare в прошлом году разработал протокол Railgun для сжатия сетевого трафика. Бинарный протокол, написанный на языке программирования Google Go, передаёт хэши веб-страниц и diff’ы между ними, с поддержкой версионности. После внедрения этой технологии степень сжатия в некоторых случаях достигает 99.6%, что недостижимо с помощью gzip. Сайты 4Chan и Imgur после внедрения Railgun сократили некэшируемый трафик примерно на 50%.

Сейчас компания CloudFlare объявила, что поддержка протокола реализована также у Amazon Web Services и около 30 крупнейших хостинговых компаний. Поставить Railgun теперь как никогда просто: есть плагины для WordPress, Joomla, Drupal и прочих CMS, выпущены пакеты для большинства популярных дистрибутивов Linux и BSD.

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

Под катом можно узнать, как в ближайшее время будет работать скролл в 2ГИС Онлайн.

С момента публикации обзора облачных IDE прошло около двух лет. Хватило ли разработчикам этого времени, чтобы перевести онлайн IDE из категории интересных игрушек в разряд реально используемых в разработке инструментов и сервисов? Однозначный ответ дать сложно. Переворот не совершен, но наступление облачных IDE стало ещё более напористым. Развитие облачной индустрии подстрекает команды новаторов к нестандартным ходам. Кстати, одно из самых распространенных заблуждений — cloud IDE — это обычный редактор в браузере, напичканный всякими довесами и рюшечками. Как раз такие проекты и не имеют шансов стать полноценной заменой оффлайн средам разработки. А вот идея иметь все средства разработки, а также сервисы для запуска, тестирования и развертывания приложений в облаке, весьма и весьма прельщает. А если это ещё и выгодно с точки зрения финансов и времени? Тогда, возможно, стоит задуматься. Ниже представлены небольшие обзоры самых интересных, на мой взгляд, облачных IDE: Cloud9 и Codenvy.

Я уже довольно долгое время хочу формализовать все свои мысли, опыт, ежедневно применяемый на практике, и многое другое в одном месте и предоставить их общественности. Уверен, многим этот материал будет полезен. Он посвящен различным моментам в конфигурации серверного ПО Linux и безопасным подходам к созданию сайтов/приложений на php (все же это до сих пор одна из самых популярных связок, хоть её успешно и подвигают другие технологии. Но советы так же легко применимы и к веб-ресурсам на других технологиях).

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

В последней версии мобильной операционной системы Android веб-гигант Google сделал большие изменения в том, как ОС интерпретирует твои голосовые команды. Компания сделала систему распознавания голоса, основанную на том, что мы называем нейронной сетью – компьютеризированной обучающей системой, которая ведет себя подобно человеческому мозгу.

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

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

Сразу скажу, что существуют такие web-приложения, которые лишены указанных ниже недостатков (например, Gmail, Хабрахабр). Но это — счастливые исключения, лишь подтверждающие правила.

1. Трудность навигации

Прежде всего, состояние. Тот, кто читал «Психбольницу в руках пациентов» Купера, знает, о чем речь. Складным ножом легко пользоваться потому, что у него всего два состояния: раскрыт и сложен. А в случае же с сайтом вы имеете очень большое количество состояний. И если к неопределенности в плане ссылок мозг еще привыкает со временем — пользователь знает, что он находится на одной странице, и всего его действия ограничены ею одной, что сказывается на относительной легкости моделировании различных состояний по страницам — то с аяксом такого не происходит.


Довольная Гаечка наконец-то нашла нормальный ajax-сайт!

У меня есть хобби — я разрабатываю мобильные казуальные игры. Поэтому мне часто приходится подвергать анализу хиты из топов Google Play и AppStore, клонировать удачные решения и не допускать чужих ошибок. В результате я выявил у всех самых хитовых игр некоторые сходные черты в геймплее и управлении. В этом посте я изложу свои наблюдения о том, что именно делает игру популярной, и как это лучше реализовать.

1. Геймплей

Главные сходства игрового процесса таких хитов рынка мобильных игр, как Angry Birds, Ninja Jump, FruitNinja, Rope'n'Fly, Doodle Jump — простота и однообразие. Минимум действий и постоянное их повторение.

а) Лёгкость прохождения

Все самые популярные игры крайне легки в прохождении или собственно в самом процессе игры. Эта одна из главных причин их бешеного успеха. Большинство владельцев телефонов и планшетов — обычные люди, они не считают интересным пяток раз на выходных перепройти Марио или Battletoads. Также помните причины, по которым люди играют в мобильные игры. Причины эти — скука и усталость. Люди сидят на работе, на скучных лекциях, едут в метро, и вполне логично у них возникает желание поиграть. Поэтому ни в коем случае нельзя делать огромные сложности в играх — скучающие не получат веселья (девиз Dwarf Fortress «Проигрывать — это весело» здесь не прокатит), а уставшие от сложностей на работе не станут вкладывать кучу сил ещё и в какую-то игрушку.

В то время как Ajax стал мейнстримом, пользовательские интерфейсы по-прежнему не могут похвастаться мгновенной отзывчивостью к действиям пользователя. Причина в том, что многие разработчики привыкли мыслить в терминологии «запрос/ответ» и думают, что UI должен работать параллельно с фронтэндом, дожидаясь ответа от сервера на каждый запрос. Но почему бы не обновлять интерфейс раньше, чем пришёл ответ?

Проблема довольно острая, потому что быстродействие является критически важной характеристикой UI. Например, по оценке Amazon, задержка загрузки страницы всего лишь в 0,1 секунды приводит к снижению оборота магазина на 1%. По оценке Google, задержка в 0,5 секунды уменьшает количество поисковых запросов на 20%.

Ruby/JavaScript-разработчик Алекс Маккоу (Alex MacCaw) из компании Twitter предлагает логичное решение проблемы: распространить принципы Ajax не только на фронтэнд, но и на пользовательский интерфейс. Он разработал соответствующий фремйворк для того, что называется AUI (асинхронный интерфейс пользователя).

Перевод статьи Vincent Driessen: A successful Git branching model

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



В качестве инструмента управления версиями всего исходного кода она использует Git.

Осенью 2008 года мы потратили две-три недели свободного от основной работы времени, чтобы написать маленькую утилитку для бэкапа баз данных (MS SQL Server и потом MySQL). Сегодня она приносит нам около $230 000 в год и можно с уверенностью говорить, что суммарно мы заработаем на ней больше $1 000 000.

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

Вступление

Я безумно люблю различные эксперименты на JS. Они словно позволяют заглянуть нам в будущее, и посмотреть, каким захватывающим и футуристичным оно будет. Когда вы будете просматривать приведенную подборку, вы наверняка вспомните про еще недавнего короля — Adobe Flash, а затем осознаете, насколько быстро CSS и JavaScript лишили его трона. Современные браузеры позволяют нам использовать множество различных эффектов и анимаций без сильных тормозов. Однако слово «экспериментальный» подразумевает ряд ограничений, как например некорректное отображение в некоторых браузерах (IE), кроме того, подобные плагины будут, скорее, отличным концептуальным дополнением для персональных страниц, а не для использования в больших проектах.

Meny

Meny — трехмерное меню, которое помимо своей визуальной притягательности еще и экономит место на экране. При наведении (или свайпе на тачскрине, что важно), меню «выезжает» с отличным эффектом.

Ответ на вопрос, скорее всего, будет отрицательным. И на это есть масса причин. Использование чего либо вроде retina.js в какой то мере облегчает процесс, но можно попробовать и более альтернативный способ.

Как вы обычно сохраняете графику для сайта? Скорее всего делаете .jpg один к одному и сохраняете его с уровнем качества где то в районе 80%. Попробуйте сделать несколько иначе. Сохраните картинку в два раза большего размера чем требуется и сохраните с уровнем качества 20%. Объем изображения скорее всего станет даже меньшей, а результат, вероятно, удивит.

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

UPD. Спасибо IIIEB4YK за ссылку в комментарии.

Недавно Крис Койер отвечал на вопросы читателей Smashing Magazine. Один из вопросов был о том, как распознать код CSS с «душком»:

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

Я подумал, что могу расширить и дополнить ответ Криса исходя из собственного опыта.

Я работаю в BSkyB. Я делаю большие сайты — над последним из них я тружусь уже больше года. Плохой код CSS доставляет мне очень много проблем. Когда занимаешься одним сайтом месяцами, ты просто не можешь себе позволить плохой код, и его обязательно надо исправлять.

Я хочу поделиться несколькими вещами, на которые я обращаю внимание прежде всего, чтобы составить впечатление о качестве, сопровождаемости и чистоте кода CSS.

Я уже писал о ресурсе, который отбирает лучшие и бесплатные пользовательские интерфейсы. Сейчас настала очередь более интересеного и потенциального ресурса AgileDesigners , Созданный Гонкогской компанией Webalys, известная разработкой User Interface Design Framework для Illustrator.

AgileDesigners

Является тематическим каталогом лучших ресурсов, которые рекомендуют специалисты со всего мира. Ресуры разбиты на 4 типа:

• Дизайн;
• Разработка;
• Управление;
• Обучение;

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

Ресурс позволят собрать из имеющихся, или создать свою собственную подборку ресурсов и делится ею с друзьями, коллегами, читателями.

Методика проекта очень простая: Под каждым ресурсом есть счетчик людей которые им пользуются и рекомендуют. Если Вы нашли ресурс, который посещяете и рекомендуете, просто поставье «Лайк» I USE THIS (поскольку проект еще в бете, лайки пока работают только со страницы ресурса, а не в общей ленте), что поднимет общий рейтинг ресурса. Сейчас Проект находится в стадии «Beta», много подчерпнуть из него врядли удасться, но потенциально пользоваться им будет удобней, нежели вычитывать по одной рекомендации по разным источникам.
PS: Хабрахабр уже добавлен.

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

• какие показатели стоит отслеживать в играх;
• какие инструменты анализа могут помочь в работе со статистикой;
• какие сервисы сбора и анализа статистики существуют с их достоинствами и недостатками.

Обнаружил забавную атаку на сайт vkontakte.ru.
При переходе на сайт tvoydohod.com, если вы в этот же момент авторизованы на вконтакте, отработает следующий джаваскрипт:

<script>
function doit() {
  var html;
  html = '<img src=http://vkontakte.ru/profileEdit.php?page=contacts&subm=1&website=http://tvoydohod.com>';
  window.frames["frm"].document.body.innerHTML = html;
}
</script>
<iframe name="frm" onload="doit()" width="0" height="0"></iframe>

Как видно, будет запрошена картинка с адресом vkontakte.ru/profileEdit.php?page=contacts&subm=1&website=http://tvoydohod.com, броузер сделает запрос по этому УРЛу, и на анкете в vkontakte ваше поле «Веб-сайт» станет равным tvoydohod.com.
Затем в вашем профайле, ваш друг, который вам доверяет кликнет на этот линк, и изменит профайл себе… И т д.

Этот вид атак называется Cross Site Request Forgery. В вики описаны все противоядия и куча полезной инфы.

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

Отписал в тех-поддержку, где столкнулся с «Это не баг!», «Не кликайте по подозрительным ссылкам!» и прочим. Надеюсь пользователей они ценят и поправят.
А вам было интересно узнать о таком простом «вирусе», который живет целиком в соц-сети =)

После прочтения очередной статьи и комментариев к ней, я в который раз убедился, что слово «дизайнер» для программистов является синонимом доброй половине словоформ «Большого словаря русского забористого мата».

На просторах сего сайта, в виду специфической аудитории ресурса, часто любят выражать своё негодование по отношению к методам работы начинающих «дизайнеров». Но нужно понимать, что частая встреча с непрофессиональным уровнем работы обусловлена низкой стоимостью выбираемых для сотрудничества дизайнеров и чуть более чем полным отсутствием общения между дизайнером и технарём (желанием «и рыбку съесть и на люстре покататься»).

Тот дизайнер, который ценит своё время, любит порядок в работе, разукрашивает папки и обзывает слои вменяемыми именами, а иногда даже оставляет «сноски в фотошопе в трудных для понимания местах» мгновенно переходит на следующий уровень с соответствующим ценником. И даже если финансы позволяют вам воспользоваться их услугами – их очень не просто найти, так-как соотношение между «дизайнерами-новичками» и «дизайнерами-со-скиллом-именования-слоёв» стремится к 80% — 20% или даже 90% — 10%.

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