Примечание: ниже расположен перевод статьи «jQuery for JavaScript programmers», в которой автор высказывает свое мнение об этой библиотеке, ориентируясь, в первую очередь, на продвинутых программистов, и приводит несколько десятков примеров ее использования.

Когда jQuery увидела свет в январе 2006, я подумал: «очередная красивая игрушка». Выбор CSS-селекторов в качестве базиса было, конечно, изящной идеей (подробнее о ней в моей заметке getElementsBySelector), но использование цепочек преобразований выглядело немного замысловато, и сама библиотека, по-видимому, не покрывала всех возможных случаев. Я расценивал тогда jQuery только как временное и проходящее решение.

Только несколько месяцев спустя понял я, насколько же ошибался по отношению к ней. jQuery является просто произведением инженерного искусства. Она умело покрывает достаточно широкой диапазон повседневных функций и предоставляет при этом удобный API для расширений, с помощью которых можно добавить любую другую функциональность. Абстрактность в ней заложена на уровне ядра — речь идет о выборе DOM-элементов — и она извлекает из него максимум пользы. И что важнее всего, использование этой библиотеки подразумевает следование хорошему стилю в программировании и хорошо сочетается с другими частями JavaScript-кода.

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

Примечание: ниже расположен перевод статьи «KHTML vs. Gecko vs. Trident vs. Presto: Behind the Browser», в которой рассматриваются основные движки браузеров, история их возникновения и развития, а также некоторые философские вопросы, с ними связанные. В основном, речь идет о KHTML, WebKit и Gecko.

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

В любом случае, пользователей гораздо больше беспокоит, насколько их браузер безопаснее. Возможно, их тревожит, были ли старые версии браузера от Apple более безопасными, потому что использовали KHTML? Или, может быть, безопасность и удобство использования гораздо выше у Firefox от Mozilla Foundation, ибо он использует Gecko? Является ли Internet Explorer 7 (IE7) от Microsoft лучшим браузером на сегодняшний день, потому что использует движок Trident? Отчего так много возможных альтернатив?

«Почему мы используем не единственный браузерный движок? Это помогает замедлить инновационное развитие и предупредить появление ошибок, которые не обнаружатся во всех браузерах одновременно. В любом случае, несколько реализаций одного и того же лучше, чем одна», — комментирует Gene Spafford, профессор информатики в Purdue University, специально для LinuxInsider.

Примечание: ниже перевод заметки «Visualizing Science & Tech Activity in Wikipedia».


Жёлтым цветом обозначены статьи на технологические темы, зелёным — на научные, синим (голубым) — на математические.

Осторожно! PNG: 3753x2775, 14 Мб


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

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

Примечание: ниже находится перевод статьи «Client Side Load Balancing for Web 2.0 Applications», в которой затрагиваются вопросы балансировки нагрузки между несколькими серверами и рассматривается решение, обеспечивающее балансировку такой нагрузки прямо на компьютере клиента.

Сервер обрабатывает HTTP (HyperText Transfer Protocol) запросы со стороны браузеров. Если вы введете в адресной строке URL, например, www.digital-web.com, то ваш компьютер отправит поисковый запрос для определения, какие именно сервера будут обрабатывать ваш запрос и пересылать данные. Техника обработки таких запросов для кластера веб-серверов называется балансировкой нагрузки.

Балансировка нагрузки для веб-приложений

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

• Распределять нагрузку внутри кластера рабочих серверов.
• Корректно обрабатывать отказ одного из рабочих серверов.
• Весь кластер должен существовать для конечного пользователя как одна-единственная машина.

читать дальше на webo.in →

Примечание: ниже находится перевод тезисов доклада «Learning to Love Forms» с конференции «WebVisions 2007» (автор Aaron Gustafson). Докладчик рассказывает о верстке форм, используя корректный и эффективный XHTML/CSS-код.

• Формы — это необходимое зло. Людям свойственно усложнять формы, хотя они могут быть представлены весьма просто.
• Рассматривайте верстку форм как создание обычного XHTML-кода. Но будьте готовы к несоответствиям со стороны браузеров и применению хаков.
• Разбивайте сложные формы на несколько простых частей.
• Старайтесь обеспечивать максимальную семантическую ценность кода.
• Не усложняйте дизайн форм.

XHTML & CSS приемы

1. Элемент FORM создает форму.
2. Единственным обязательным его атрибутом является ACTION, и он всегда должен быть URI.
3. По умолчанию METHOD выставляется в GET.
4. Атрибут NAME устарел, используйте вместо него ID.
5. Элемент FIELDSET используется для группировки связанных полей формы. Может быть вложенным.

Примечание: ниже находится перевод статьи «Speed Up Your Javascript Load Time», в ней автор рассматривает некоторые наиболее эффективные техники и методы действия по уменьшению времени отработки JavaScript'а на клиенте. Большая часть из них общеизвестна, но в статье важно не просто их перечисление, а общий подход для решения задачи оптимизации времени загрузки. Далее мои комментарии курсивом.

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

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

читать дальше на webo.in →

Примечание: ниже приведен перевод заметки из блога разработчика YUI-утилит Julien Lecomte «Running CPU Intensive JavaScript Computations in a Web Browser», в которой автор рассматривает выполнение «тяжелых» вычислений в веб-браузере и приводят ряд методов для их «оптимизации». Мои комментарии даны курсивом.

Введение

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

Наиболее существенным препятствием для выполнения в веб-браузере «тяжелых» вычислений является тот факт, что весь интерфейс пользователя в браузере останавливается и ждет окончания исполнения JavaScript-кода. Это означает, что ни при каких условиях нельзя допускать того, чтобы для завершения работы скрипта требовалось более 300 мс (а лучше, если горадо меньше). Нарушение этого правила неминуемо ведет к плохому восприятию ресурса пользователем (bad user experience).

К тому же в веб-браузерах у JavaScript-процесса имеется ограниченное время для завершения своего выполнения (это может быть как фиксированное число — в случае браузеров на движке Mozilla — или какое-либо другое ограничение, например, максимальное число элементарных операций — в случае Internet Explorer). Если скрипт выполняется слишком долго, то пользователю выводится диалоговое окно, в котором запрашивается, нужно ли прервать скрипт.

читать дальше на webo.in →

После статей «Практический CSS/JS: архивируем все!» и «JavaScript: жать или не жать» стало ясно, что проблема уменьшения CSS-файлов в размере действительно актуальна, и общественности хотелось бы аналогичного исследования уже конкретно для такой оптимизации. Которое, собственно, и приведено ниже.

В интернете было найдено 6 различных инструментов для минимизации CSS-кода (однако, с одним из них, перловым модулем, разобраться не удалось, поэтому приведены результаты только для 5), далее ими обрабатывались несколько примеров, которые затем подвергались еще и архивированию. Результаты, опять-таки, представлены в виде графиков, ибо таблицы я нахожу менее информативными.



читать дальше на webo.in →

Случайное блуждание по интернету может вывести в совершенно неожиданные места. Оказывается, если кто хочет потрогать живого Денискина посмотреть, послушать и задать вопросы создателю Хабрахабра deniskinДенису Крючкову и его смотрителю mioИгорю Денисову, то отличная возможность представится послезавтра, 5 февраля:


Нажмите на баннер, чтобы рассмотреть его поближе

Итак, в этот вторник, вечером, клуб «Бизнес в стиле .RU» проводит встречу «Продюсирование проекта по созданию тематических социальных сетей». Цитирую:

Одна из интересных функций CSS3, которую мы и рассмотрим сегодня, носит имя "::selection", при помощи которой можно заменить стандартный цвет выделения текста в браузере. Следует заметить что, на момент написания статьи, эту функцию поддерживают только лишь Safari и Firefox, причем отображают совершенно по разному. Однако, на мой взгляд, стоит быть в курсе всех новинок дабы не отставать от этих, так сказать, «вперед-идущих» техник.

Начнем:

::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}

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

[ПРИМЕР]

p.red::selection {
background: #ffb7b7;
}
p.red::-moz-selection {
background: #ffb7b7;
}
p.blue::selection {
background: #a8d1ff;
}
p.blue::-moz-selection {
background: #a8d1ff;
}
p.yellow::selection {
background: #fff2a8;
}
p.yellow::-moz-selection {
background: #fff2a8;
}

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

Туристические блоги
Во-первых, туристические блог площадки продолжают плодиться как грибы. Ключевые слова “share” и “with friends”. Шарить нужно experience, foto и video. Видимо доживем до времен, когда на каждого туриста будет свой блог стратап с офисом, инвесторскими 3 миллионами и разработкой в Индии. На лицо застой идей. Зацепится особо не за что, поэтому пройдемся по деталям.

Информация в принципе общеизвестная, но новичкам (вроде меня) может быть будет полезно.

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

Делается примерно так:

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




А ведь ничего глобального я поначалу не планировал. Просто надоело печатать за столом. Я программист, а программиста иногда трудно отличить по внешним признакам от профессиональной машинистки (а на слух — от дятла). Да, надо много стучать по клавишам. Но почему именно сидя? Впрочем, и сидеть можно по разному. Откинувшись на спинку кресла, нога на ногу, на газоне в парке, и т.п.

Наверное, самая популярная техника, с которой большинство людей начинает знакомиться с тайм менеджментом. Тема эта уже достаточно избитая, так что с самого начала я ее разъяснять не буду. Кому интересно – рекомендую почитать книгу Глеба Архангельского «Тайм-драйв. Как успевать жить и работать». Я лучше расскажу о нескольких подводных камнях, на которые натыкаются многие из тех, кто начинает вести хронометраж. Так как проблемы начинаются гораздо раньше, чем их ожидают. А именно в момент первой записи. Почему?

Не так давно я запустил небольшой проект, призванный помочь «мобильным» людям объеденяться, общаться на форуме, меняться мыслями на хабраподобных блогах итп. Однако, как правильно было замечено в комментариях, проект якобы «мобильный», а с мобильных устройств он смотрится хреновенько, не смотря на валидную xhtml верстку итп. «Черт подери», — подумал я, включил свой FS loox n560 и начал потихоньку переверстывать темплейты для pda версии.
Сначала я думал обойтись подключением «handheld.css» и написанием КПК-ориентированных стилей, как я это делаю обычно для «печатных» версий. Но достаточно быстро понял, что не все проблемы можно решить с помощью CSS. Тем более принцип построения тех же «печатных» страниц сводится обычно к: «Это скрываем, это скрываем, это переносим сюда, это туда, а это тоже скрываем». Все же мы имеем дело с мобильными устройствами и грузить лишний траффик, чтобы в итоге не отображать его это глупо… В итоге пришел к тому, что следует не только CSS стили переписать, но и шаблоны переверстать. Начал с более маленького и простого проекта, чтобы попрактиковаться…

Уже писал о верстке под PocketPC устройства, на неделе доработал все то, что так смущало и подвел небольшие итоги.

1. Резинка.
Верстка под PDA должна быть резиновой. Без дополнительного ПО эмулировать разное разрешение на PDA устройствах нельзя. Да и никому это особо не нужно =) Чаще всего это 320х240 или 640х480, хотя бывают и нестандартные разрешения. В любом случае сайт должен смотреться во всех разрешениях одинаково, т.к. их разброс не такой и большой, а значит верстка должна быть резиновой.

2. Одна колонка.
Есть исключения, но чаще всего скелет сайта должен быть одноколоночным. Т.е. исходник сайта может быть 2-х, 3-х колоночным, но PDA версия чаще всего превращается в одну колонку, т.к. места и так мало. Чаще всего левая колонка (навигация) превращается в <select>, а правая сползает под основной контент.

3. Авто определение PDA устройства + pda.site.ru домен.
Определить PocketPC не так и сложно. HTTP_USER_AGENT содержит «windows ce» + браузер (mobile ie) добавляет ряд своих заголовков, например HTTP_UA_OS. Соответственно при просмотре site.ru с мобильного устройства должна отображаться оптимизированная верстка. Однако помимо этого необходим и безусловный способ получения PDA верстки, самое простое — поддомен «pda». Это просто удобно + важно для всяких поисковых ботов, да и заранее сообщает, что есть и pda версия сайта…

В своём блоге и в комментариях я уже несколько раз упоминал об одном американском бизнес- инкубаторе Y Combinator, например, в заметке «Стартап: формула успеха». Вернуться же к этой теме меня заставила другая, уже не моя заметка. Речь там шла о российском бизнес – инкубаторе Inventure. Захотелось сравнить эти две модели.
Об Y Combinator в Интернете уже написано очень много. Естественно, имеется и сайт этого инкубатора. Не оставляет его без внимания и местная американская печать, как и телевидение тоже. Что касается Inventure, то, кроме указанной заметки, я найти ничего не смог. Нет пока даже корпоративного сайта. Поэтому сравнение я построил, отталкиваясь от цитат из указанной заметки о российском инкубаторе.

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

1. Может ли быть в странах СНГ инкубатор, построенный по модели Y Combinator?
2. И если да, то знаете вы что-то подобное?
3. Может ли быть на Западе инкубатор, построенный по модели Inventure?
4. И если да, то знаете вы что-то подобное?
5. Известны ли вам другие модели действующих бизнес-инкубаторов?

Итак,…

Хочу описать хабрачеловекам восемь самых важных расширений (или плагинов) для браузера Mozilla Firefox.
Эти расширения хорошо помогают в работе. Помогают ее организовать, уменьшить затрачиваемое время на работу и…да что тут говорить, читайте сами и решайте что вам подходит и как вам это может быть полезно.

Эта заметка уже была опубликована вчера на Блоге Стрельбана, теперь предлагаю ознакомиться с ней хабрачеловекам.
Да, чуть не забыл: расширения будут идти в обратном порядке. Т.е. самые важные находятся в конце!

Когда верстаешь (X)HTML, порой не знаешь или забываешь о многих фичах, которые стоит использовать. Перечислю те, о которых вечно забываю сам, а зря :)

В данном посте я решил опубликовать свой перевод статьи Якоба Нильсена (подробнее тут — http://www.useit.com/jakob/): “10 High Profit Redesign Priorities”.

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

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