Веб-разработка *

В погоне за оптимизацией сайтов захотел уменьшить количество запросов, не в ущерб размерам оптимизированных файлов.
Цель — передавать в одном файле изображения разных форматов, с разными настройками оптимизации.
Как средство, выбрал data uri и gzip'нутый css файл. Однако IE с data uri работают из рук вон плохо. Но в них есть mhtml. Существовавшая реализация не отвечала моим требованиям, т.к. приходилось 1 файл передавать два раза — раз для IE, в mhtml, и второй для всех остальных, в data uri. В поисках решения наткнулся на статью bolk'а, где описывалось решение для формата jpeg и некоторые теоретические выкладки для gif и png. После почти трехнедельного раскуривания манов мне удалось реализовать решение для gif и png и автоматизировать процесс для всех трех форматов.

Вкратце: как заставить новые теги из HTML 5 работать в Internet Explorer.

Любой веб-разработчик смотря на HTML 5 плачет от счастья, которое наконец-то пришло в наш дом. Для большинства функций (такие как WebGL, многопоточность и веб-сокеты) придётся ждать поддержки от браузеров (а в самых правильных эти возможности уже есть), но новые удобные теги мы можем использовать уже сейчас.

Однако Internet Explorer (даже последней, 8-ой версии) и тут сумел споткнуться — новые теги вне HTML 4 он просто не замечает — на них нельзя повесить стили.

В IE проблем даже две — отдельно нужно включать поддержку HTML 5 тегов в обычном документе, и отдельно в содержимом, которое добавляется динамически (например, через AJAX).

Где то полгода назад я сильно увлекся OpenID и всем что с ним связанно. Моим главным занятием в это время стало — неспешное чтение спецификаций, форумов, блогов и хабрапостов OpenID тематики.

Все знания, которые мной были получены за это время, я «материализовал» в проекте компании, в которой собственно я работаю.

Изучая спецификацию OpenID и прочих его расширениях (SREG, AX) и надстройках, мне пришла идея разработать JavaScript виджет со своим API-прослойкой, в помощь другим разработчикам нежелающим «коротать» дни и ночи изучая спеки различных способов авторизации и их расширений.

Собственно об этом далее.

Сегодня 4 апреля, а значит, кроме дня покровителя Интернета Исидора Севильского, все вебмастера и интернет-разработчики сегодня отмечают свой профессиональный праздник.

С праздником, хабравчане. Быстрых нам серверов, а также лёгкого и валидного кода :)

В блоге Google Web Toolkit появилось сообщение, что разработчики из Гугль смогли прикрутить Quake2 (вернее проект Jake 2 — порт на java) к GWT.

Были использованы следующие технологии: WebGL, Canvas API, html5-тег audio, Local Storage API и WebSockets.

Для того, чтобы заставить работать Jake 2 с GWT, пришлось сделать некоторые доработки:
— Переписать рендеринг под WebGL.
— Переделать работу с сетью (для многопользовательской игры) с UDP на WebSockets.
— Сделать все подгрузки ресурсов асинхронными.
— Сделать реализацию Java NIO буферов в GWT, используя массивы WebGL.
— Реализовать эмуляцию простой файловой системы для сохранения игр.

На сегодняшний день поддерживаются лишь Webkit Nightly Builds (Mac OS X) и Chrome Development Branch.



Сайт проекта: quake2-gwt-port

UPD: Как я вижу, сие можно запустить на AppEngine. Если вдруг кто-то развернет там это приложение и потестит, расскажите потом плиз, насколько это все нагружено, сколько проца/трафика/etc. потребляет. А то интересно, но у самого времени совсем на это нет.

Для написания ТЗ я задался вопросом поиска простого и удобного средства создания прототипов веб-страниц. Хотелось чего-то бесплатного и в онлайне, некой альтернативы Axure. Такой сервис удалось найти, его я и предлагаю вашему вниманию. Итак, встречайте www.gomockingbird.com – сервис, позволяющий создавать очень красивые прототипы легко и удобно.
Помимо представления самого сервиса, этим постом хотелось также привлечь внимание общественности к полезной практике прототипирования.

Вот нам и показали IE9. От финала он, конечно, далёк, но посмотреть есть на что.

— Более быстрый, чем в IE8, JavaScript-движок.
— Поддержка некоторых фич CSS3: border-radius, RGBA, opacity, селекторы. К релизу обещают доделать ещё.
— Поддержка HTML5: новые элементы, перехлёст тэгов, изменено поведение script и style (теперь можно получить их текст через DOM), API для выделения текста.
— DOM L2 и немного DOM L3 (Events).
— Поддержка SVG.
— DirectX для рендеринга страниц.
— Улучшена производительность отладчика, добавлен профайлер HTTP.

Для того, чтобы зарабоали приятные дополнения, надо перевести IE в новый document mode — IE9, например, при помощи:
<meta http-equiv="X-UA-Compatible" content="IE=IE9" />
или
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Полный список изменений
Пробуем

На работу установленного в системе IE никоим образом не влияет. Устанавливать можно не опасаясь повреждения системы.

Хороший код

К хорошему коду много требований: он должен быть оптимальным, у него должны быть юнит-тесты, его должно быть легко переиспользовать, он должен соответствовать код-стандарту компании и духу языка. А ещё его должно быть приятно читать.
Я бы хотел рассказать о правилах, которые помогают мне делать код читаемым.

Основное правило

Я считаю, что читаемым является код, в который можно не вчитываться.
То есть, пары-тройки строк дожно быть достаточно, чтобы сказать, что делает класс или метод. Ещё пары-тройки — чтобы примерно сказать, как он это делает.

Прочие замечания

Я заметил, что есть ещё несколько довольно общих правил, которые делают код симпатичнее.

1. Предистория

Вот уже некоторое время я наблюдаю за развитием стартапа friendsaround.me. Идея стартапа это запустить социальную сеть для владельцев мобильных утройств с привязкой к местоположению. Сейчас как я понимаю они все еще в процессе разработки — ну не суть. Наблюдаю я достаточно пассивно и поэтому только 7 марта обнаружил, что они проводят конкурс на лучший слоган для их продукта с главным и единственным призом в виде iPad (а точнее iTunes gift карты на необходимую для его покупки сумму). Конкурс заканчивался сообственно 7 марта и я, предварительно посмотрев на текущие присланные варианты (и не найдя ни одного понравившегося), решил тоже попытать, так сказать, счастья. После нескольких минут креативного раздумья в голове вертелось несколько вариантов, из которых я остановился на слогане «Locate Friendship!» (А че — подумал я — коротко, ясно и по делу. Отличный слоган!). Его и послал на участие…

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

Amy Editor

Созданый в 2007 Петром Кронторадом (Petr Krontorad), Amy Editor продвинутый редактор с интерфейсом в стиле Mac. Amy Editor имеет в наличие кучу полезных опций, такие как нумерация строк, подсветка синтаксиса, сниппеты для более чем 20 языков, совместное использование и прочее.

» http://www.amyeditor.com

В HTML 5 есть много новых возможностей, которые позволяют web разработчикам создавать более мощные и насыщенные приложения. К этим возможностям относятся и новые способы хранения данных на клиенте, такие как web storage(поддерживается в IE8) и web SQL database.

При этом если web storage ориентирован на хранение пар ключ-значение, то в случае с web SQL database у нас есть полноценный sqlite(во всех текущих реализациях применяется именно этот движок баз данных, что является проблемой при стандартизации).

Далее я расскажу, как работать с web SQL database. При этом примеры естественно будут на JavaScript. Кроме того, стоит отметить, что с поддержкой браузерами всего этого хозяйства дела обстоят, не очень хорошо, но всё постепенно меняется к лучшему и, скажем, в Opera 10.50 поддержка будет, а браузерах на движке WebKit она уже есть. Более подробно про то, какой браузер, что поддерживает можно узнать, пройдя по ссылке.

Соединение с базой данных.

Подсоединиться к базе данных очень просто:

db = openDatabase("ToDo", "0.1", "A list of to do items.", 200000);

О, коде

Когда я пишу код, мне нравится отдавать себе отчёт о том, что именно я делаю.

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

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

Читая блог Ивана Сагалаева нашел отсылку на статью показавшуюся мне интересной и достойной перевода.

Лифты, поезда и Информационные технологии

Возможные методы для создания безопасных систем.

Джордж Вестингауз не был теоретиком, а одним из великих изобретателей 19 века. Возможно, самым известным его изобретением был воздушный тормоз для поезда в 1869. Чуть позже подробнее.

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

Нужно использовать много изображений на сайте? Не хочется забивать хостинг изображениями? Хочется уменьшить нагрузку на сервер?
Тогда можно использовать сервис от гугл picasaweb і Picasa API как хостинг для изображений

процесс загрузки фотографий на сервер

Возможно в Вашем проекте и не пишут try { /* code */ } catch(...) { } для того чтобы избежать исключений при работе с памятью, умеют закрывать хендлы и знают о виртуализации Windows Vista, а программы никогда не падают по непонятным и редко повторяемым причинам.

Тогда Вам повезло, можете переходить к следующему топику.

Недавно я попал на новый проект, с задачей создать небольшое приложение с нуля. Разговариваю с тестером:
— А как тебе новые версии поставлять?
— Можешь как все остальные на проекте, через SVN.
— То-есть ты сама билдить будешь?
— Да нет… Бинарники оттуда беру.

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

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

А какую кодировку используешь ты, %username%?

     Я иногда сталкивался с тем, когда web-программист не знал CSS или, скорее, не хотел заниматься облагораживанием своего HTML, который являлся результатом работы разрабатываемого им скрипта. Это натолкнуло меня на мысль, что ему (программисту) не помешало бы иметь при себе некоторое средство для создания «красивых» страниц. Средство должно было бы включать в себя некоторый CSS, возможно, картинки, и подключаться к любому HTML (очевидно, созданному по некоторым определённым правилам). При этом смена CSS (и картинок) на альтернативные не должна была бы приводить к семантически некорректному отображению.
     Вышеобозначенные требования очень похожи на требования к составлению скина для какой-либо системы (в частности, CMS). Но, в отличие от скина, который заточен под конкретный HTML, в нашем случае хотелось бы максимально упростить правила написания HTML, чтобы разработчикам не нужно было держать в голове много сложных правил.
     Таким образом, оговаривая некоторые (небольшие) ограничения на HTML, мы с одной стороны гарантируем программисту, что его код, генерируемый с учётом этих правил, будет корректно оформлен любым сделанным для этих целей CSS, а с другой стороны, оговариваем шаблон изготовления самих этих CSS.

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

Привет, .

Недавно, когда запускали Кинобазу, мы помимо способов противодействия хабраээфекту задались ещё одним вопросом, который нас давно интересовал: какая форма логина удобнее всего для большинства пользователей. Для этого мы провели эксперимент: до сегодня всем посетителям сайта предлагалась случайным образом один из 4х вариантов формы логина, каждый из которых состоял из 2х форм. Оценку мы проводили очень просто: по количеству человек, которые всё-таки зарегистрировались через каждый из вариантов форм. Поскольку варианты предлагались случайным образом, чем больше человек зарегистрировалось — тем удобнее форма (или тем меньшее количество людей она отпугнула:).

Итак, участники эксперимента и его результаты: