Пока все обсуждают HTML5 я тут пошевелил извилинами и придумал, в общем-то, тривиальную, но полезную концепцию и решение всех ваших проблем с языками разметки. Оно работает уже сейчас в Mozilla, WebKit и Opera.

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

Зато на это способен XML. Теоретически xhtml2 как раз и является воплощением идей модульности и расширяемости. Но есть одна проблема: все равно вам требуется ждать, пока браузеры начнут его поддерживать. Я сейчас возьму на себя смелость сказать следующее: браузер вообще не должен учиться новому языку разметки и разработчики не должны ждать, пока он ему научится. Все что должен уметь браузер — это обрабатывать xml, css и Javascript.

Концепция проста: полностью разделить структуру документа, представление и поведение. Это именно то, что уже сегодня можно сделать используя соответственно xml, css и Javascript. Сценарий выглядит следующим образом:

1. Браузер парсит xml-документ
2. Браузер парсит css-стили, которые говорят как должны выглядеть элементы, и применяет стили к документу
3. js-движок браузера выполняет Javascript, в котором описано, как должен вести себя каждый элемент страницы.

Обратите внимание, что без стилей браузер не знает, что делать с элементом <strong> например. А без описания поведения js-скриптом браузер не знает как себя вести, когда пользователь щелкает по ссылке. Этот подход можно, наверное, назвать DSRB — Document Structure-Representation-Behavior.

А теперь я покажу вам, собственно, страницу, сделанную описанным выше образом, работает в Mozilla, WebKit и Opera (в Опере есть небольшой непонятный глюк с заголовком) — посмотрите в исходный код обязательно. Недостаток данного подхода состоит в том, что браузеры не хотят выполнять Javascript, если они думают, что перед ними XML-документ. По этой причине мне пришлось указать пространство имен xhtml и избегать стандартных элементов HTML, чтобы браузеры не определяли для них дефолтные стили и поведение. Если браузеры начнут поддерживать Javascript для XML-документов, проблема будет решена.

В чем преимущество?

Сообразительные читатели уже догадались, что таким вот способом реализовать HTML5 можно уже хоть сегодня. При этом вы можете добавить в документ нужный вам доктайп или написать свой собственный DTD. Без доктайпа документ будет представлять из себя well-formed XML, что тоже неплохо.

В будущем, если идея приживется, полагаю, появится множество в чем-то схожих языков разметки. 2-3 из них, видимо, будут самыми популярными. Но, самое главное, что DSRB позволит создавать языки разметки, которые начнут работать в браузерах сразу же.

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

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

Всех у кого хоть раз болела голова при написании/чтении javascript кода прошу под кат.

Многие пользователи Файерфокса давно знают о том, что из контекстного меню (то есть из того, которое появляется, если правой клавишею мыши жмякнуть по странице) можно выбрать пункт «Properties» — и тем вызвать список свойств элемента страницы, жмякнутого мышою.

Например, если жмякнутый элемент — это картинка-гиперссылка, то можно вызвать примерно вот какое окошко:



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

Так что, некоторое время подумавши, программисты Фонда Мозиллы вообще убрали этот пункт напрочь (и из Firefox 3.6, и из Firefox 3.7).

Для тех же пользователей, которым будет всерьёз недоставать этого пункта (а я уверен, что среди веборазработчиков на Хабрахабре таких много!..), предназначается новое расширение — «Element Properties», которое возвращает в Firefox желаемый подпункт контекстного меню и соответствующее ему диалоговое окошко.

Будьте готовы.

Работая с jQuery многие рано или поздно сталкиваются с одной особенностью: когда мы хотим показать с анимацией скрытый блок, его появление может быть дерганым. Происходит это не всегда, но довольно часто. К сожалению не все разработчики знают как с этим бороться, а те кто знают, зачастую ленятся. Явный пример дерганного появления блока, можно посмотреть прямо на главной странице jQuery, нажав на кнопку Run Code:

С одной стороны, в языке XPath используются знакомые каждому программисту операторы сравнения «равно», «не равно», «меньше», «больше» и другие. С другой стороны, эти операторы умеют работать не только с примитивными типами, но и с целыми наборами узлов. Незнание правил сравнения наборов узлов может привести к некоторым сюрпризам.

Попробуйте быстро ответить на вопрос, чему равно следующее выражение:

foo = 'bar' and foo != 'bar'

Если ваш ответ — false, автор предлагает

Помните «Денди» (он же NES — Nintendo Entertainment System)? Это восмибитная игровая приставка, выпущенная в 1985. Помимо всего прочего именно она познакомила нас с легендарными играми типа Super Mario Bros, Tetris и The Legend of Zelda.

Какое отношение все это имеет к Google Chrome? Все просто. Бен Фиршман (Ben Firshman) портировал vNES (эмулятор NES), переписав его на JavaScript, и назвал его JSNES. Он прекрасно работает в Firefox 3.5 и Safari 4, но он работает в разы быстрее в Chrome.

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

Кроме того, что это поможет вам скоротать время, данный пример показывает, что все разговоры вокруг оптимизации работы JavaScript в Chrome не были пустой болтовней…

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

Пример:

<style type="text/css">
 #div-1 { position: absolute; width: 100px; height: 100px; background: grey; border: 1px solid black; top: 50%; margin-left: 50%; }
</style>

<script type="text/javascript">
 $(function(){
  $('#link-1').click(function(e){
   e.preventDefault();
   $('#div-1').animate({ left: '25%' });
  });
  $('#link-2').click(function(e){
   e.preventDefault();
   $('#div-1').animate({ left: '-25%' });
  });
 });
</script>

<div id="div-1" style="left: -25%;"></div>
<a href="#" id="link-1">Animate to 25%</a>
<a href="#" id="link-2">Animate to -25%</a>

Вся сущность CSS:


По настойчивым просьбам трудящихся: заказать за $12.95. Таки напечатать будет дешевле.

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

A — A List Apart

A List Apart содержит лучшие советы и мнения от лидирующих умов индустрии.

В связи с выходом Opera 10 решил немного обновить стиль кнопок в индикаторе закладок.


Кнопка «Индикатор закладок» — Если нажать на кнопку, то появляется окно добавления страницы в закладки (в случае если эта страница еще не присутствует в закладках), а если страница уже есть в закладках, то открывается боковая панель закладок.

Установить индикатор можно отсюда

Update:
Сделал второй вариант:

С выходом IE8 мы получили одну из самых удобнейших функций в браузере — Визуальные Поисковые Предложения.

Данная статья покажет, как реализовать поиск друзей в твиттере, через специальную Визуальный строку поиска в IE8. По мере набора имени, мы будем видеть аватарку, имя, которое заполнил друг и текущий статус.
Руководство основано на статье Search Provider Extensibility in Internet Explorer из MSDN.

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

Первая типографская революция произошла во Всемирной Паутине настолько давно, что приходится производить поиски, чтобы установить подробности. Кажется достоверным то, что пишет Ian Graham: в Netscape Navigator 2.0 впервые появился элемент <font> (тогда он позволял задавать только размеры шрифта, и только в условных единицах), а в Internet Explorer 3 у этого элемента появился атрибут face, позволявший задавать начертание, задавать шрифтовое семейство. Википедия подсказывает, что Netscape Navigator 2.0 появился в марте 1996 года, а Microsoft Internet Explorer 3 — в августе того же года. В язык HTML версии 3.2 даже не входил атрибут face, хотя и упоминалося, что такой атрибут существует.

Тринадцать лет назад.

Все эти тринадцать лет для начертания текста сайтов в основном использовались несвободные шрифты, являющиеся частью операционных систем и офисных пакетов. Сайтам приходилося гадать о том, какие шрифты установлены у читателя, а какие не установлены, и какова вероятность того или другого, какие шрифты можно считать безопасными. Сочинялись специальные плагины jQuery и создавались специальные страницы, способные выяснить набор шрифтов на компьютере читателя. Особый дух того времени прекрасно передал despoth, сочинив превосходную серию статей о такой веботипографике, которая основана именно на подборе несвободных шрифтов (часть I — часть II — часть III — часть IV — часть V).

Наконец, это время кончилось: явствуют, зримо явствуют признаки Второй типографской революции, связанной с приходом @font-face.

Джон Даггетт сочинил познавательную статью о том, как все мы совсем скоро (после появления Safari 3.1, Firefox 3.5, Opera 10) сможем использовать загружаемые шрифты во всех популярных браузерах, а не только в одном наиболее популярном.

Марк Пилгрим грубо обрисовал ситуацию с лицензированием собственнических шрифтов. Ситуация эта немало напоминает глухой тупик. Даже создателям прекрасной демонстрации возможностей Firefox 3.5, чтобы изготовить страницу, пришлось специально связаться со шрифтопроизводителями и изготовлять такие особые (усечённые) версии использовавшихся шрифтов, чтобы их не было смысла копировать нелицензионно. А вон там предлагают раздавать особые паутинные обкусанные ужатые копии купленных шрифтов (которые сам покупатель вывешивать не имеет никого права, а только ссылаться). Остроумно. Открывает широкую дорогу в сторону Большого Брата: типа как недавно читальники Kindle удаляли книги Оруэлла за нелицензионность (даже честно купленные — просто оставляя стоимость их на счету покупателя в уплату). Так и тут. Внешний шрифт может неожиданно подохнуть, даже купленный заранее.

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

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

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

Не так давно на Хабре уже заходила речь о нашем новом типографе (см. habrahabr.ru/blogs/typography/66710/). Речь зашла раньше, чем я успел написать этот топик. Нам конечно же очень приятно, что силы, время и душу, которые мы вложили в этот бесплатный продукт кому-то пригодились. Наши первые версии писались в 2007 для форумных систем (о них вы сможете почитать на нашем сайте в разделе типографа, даже скачать можно будет). В конечном итоге мы решили позиционировать его как отдельный независимый продукт, и сейчас я хочу немного рассказать вам о нем.

Пояснение

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

Конкретизируя

Сейчас он включает в себя множество умных правил, которые время от времени улучшаются и становятся более продуманными. Типограф обрабатывает тексты не только по классическим законам (неразрывные пробелы, правильные кавычки, свисающая пунктуация и др.), но и по взятым канонам из «Справочника издателя и автора» Мильчина А. Э. Любители типографики должны это оценить.

Много людей знают, что такое getter'ы и setter'ы во многих языках программирования. Есть эти чудесные штуки и в JavaScript, хоть узнал я об этом совсем недавно (темень я необразованная). Речь пойдёт не только и не столько про методы getSomeProperty()/setSomeProperty(...), а про более интересную реализацию — псевдо-аттрибуты, при изменении которых будут вызываться функции-обработчики.

Привет! Один очень хороший человек, лютый велосипедист и просто отличный дизайнер, попросил меня представить проект, в разработку которого, он и команда разработчиков вложили всю свою душу и почти год личного времени. К сожалению сейчас у него недостаточно кармы, чтобы самому напиасть пост в разделе, поэтому все плюсы за проект, мужество и силу воли — только ему: diamond.

Предисловие

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

Дизайн

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


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

Часто ли вы используете регулярные выражения? Задумываетесь ли вы о том, на сколько оправдано их использование? Каковы альтернативы, каковы возможности и ограничения? Какова цена применения регекспа?

Я уже давно и часто замечаю, что люди (особенно из мира Perl) склонны мистифицировать регулярные выражения, наделяя их (в своём сознании) универсальными сверх-способностями.

Настоящей статьёй, я призываю одуматься задуматься.

Хочу представить проект, который, с одной стороны, является русским аналогом stackoverflow.com и альтернативой форумам — с другой. Но почему же аналог, а не клон? И чем он отличается от форумов?
Эти и другие вопросы мне задавали не один раз — на них я и попробую ответить.

Стэнфордский курс по основам языков программирования выложен на YouTube.



27 лекций минут по 20 каждая ведут стэнфордский преподаватель Джерри Кейн (экс-Стэнфорд, нынче Facebook), последняя лекция по Haskell преподается Сашей Рашем (Facebook). Рассматриваются концепции и основы C (куда ж без него), ассемблера, C++, Scheme, Python и Haskell.

Статья является расширенным сборником CSS-хаков в сравнении с аналогичной статьей.
Под хаком подразумевается метод, позволяющий воспринимать CSS только определенному браузеру.
Хаки могут использоваться не только для исправления багов в верстке, но и в случае использования определенных особенностей браузера для ускорения рендеринга web-страницы в нём (к примеру CSS3-свойства)