Pull to refresh
  • by relevance
  • by date
  • by rating

DOM, который построил Chrome. Или не построил? Или не Chrome? Или не DOM?

Website development *JavaScript *Programming *Perfect code *

Обычный, теневой, виртуальный, инкрементальный… Как получилось, что простой программный интерфейс доступа к элементам веб-страниц обзавелся таким количеством «родственников»? Чем современные фреймворки не устраивает стандартная объектная модель документа или просто DOM? Что и как на самом деле отрисовывает браузер в процессе рендера веб-страницы?

Всем привет, это Макс Кравец из Holyweb. Помните сцену из Матрицы, в которой один из юных кандидатов в Избранные наставляет Нео: «Не пытайся согнуть ложку. Первое, что ты должен понять — ложки не существует!»? Давайте переформулирую: «Не пытайся изменить DOM...». А вот о том, что прячется под многоточием, мы сегодня и поговорим.

Читать далее
Total votes 33: ↑30 and ↓3 +27
Views 15K
Comments 23

Консоль разработчика в Opera

Opera
Еженедельная сборка браузера Opera 9.20 под номером 8713 отметилась замечательным нововведением, хорошо знакомым пользователям Firefox, — консолью разработчика (Developer Console)!

Консоль будет доступна из меню Tools(Сервис)-Advanced(Дополнительно)-Developer Console(Консоль разработчика)

Читать дальше →
Rating 0
Views 5.8K
Comments 1

Консоль разработчика в Opera

Opera
Еженедельная сборка браузера Opera 9.20 под номером 8713 отметилась замечательным нововведением, хорошо знакомым пользователям Firefox, — консолью разработчика (Developer Console)!

Консоль будет доступна из меню Tools(Сервис)-Advanced(Дополнительно)-Developer Console(Консоль разработчика)

Читать дальше →
Total votes 45: ↑38 and ↓7 +31
Views 15K
Comments 78

Firefox и Opera 9 признаны самыми «правильными» браузерами

Lumber room
С точки зрения поддержки различных веб-стандартов абсолютными лидерами являются браузеры Firefox и Opera 9. А вот седьмая версия Internet Explorer подтверждает реноме IE как самого «кривого» продукта.
Читать дальше →
Rating 0
Views 286
Comments 13

JavaScript: создание DOM фрагментов

Website development *
Если приходилось когда-нибудь писать JavaScript и приходилось в JavaScript’е писать что-то вроде:
var p = document.createElement( «p» );
p.appendChild( document.createTextNode( «Настоящий рыба фиш.» ) );
var div = document.createElement( «div» );
div.setAttribute( 'id', 'new' );
div.appendChild( p );

то это может быть вам полезно.
узнай, как сделать себе жизнь проще
Total votes 41: ↑37 and ↓4 +33
Views 19K
Comments 64

Учим InternetExplorer хорошему: расширяем прототипы DOM элементов.

Lumber room
Возникла у меня проблемка расширять стандартные HTMLElement объекты, только не в Firefox'e, а в IE. Можно использовать библиотеку Prototype или JSX. Но мне не понравилось это решение из-за того, что используется надстройка, а не приятный глазу механизм обращения к элементам через DOM. Например, хочу, чтобы в IE появился новый метод
someDOMElement.getLastChild()

Читать дальше →
Total votes 7: ↑5 and ↓2 +3
Views 339
Comments 3

Доступен RENESIS® Player 1.0

Vector graphics *
Презентации, Диаграммы, Графики- всё это+ динамичность в SVG

Три продукта:


  • Microsoft Internet Explorer  Plugin


    Позволяет просматривать веб-сайты сделаные на SVG. (ну кто-то же должен был это сделать, Могилевский то занят был)
  • Windows Thumbnail Plugin


    Добавляет возможность предпросмотра svg в качестве thumbnail в Проводник.

    Standalone Player


    Позволяет запускать svg приложения вне постороннего окружения
Total votes 14: ↑12 and ↓2 +10
Views 721
Comments 10

Google Doctype

IT-companies
Google всегда, как нам всем известно, ведет себя (а есть мнение, что и является) очень позитивным в плане открытых стандартов и распространения знаний. Вот и на этот раз любимый интернет-гигант порадовал веб-разработчиков и дизайнеров новым источником знаний. Google Doctype — wiki-энциклопедия, покрывающая такие темы, как JavaScript, CSS, безопасность, производительность веб-систем и т.д. Уже на момент открытия энциклопедия содержит 8000 строк кода на JavaScript, много статей и туториалов от работников Гугл.

Конечно же, главная деталь — wiki-система: вы можете редактировать и создавать любые статьи! Главная цель проекта — повысить понимаемость концепции Open Web, которую (нужно согласиться — довольно-таки успешно) продвигает Google. Все материалы распространяются по лицензии Creative Commons, что, в принципе, очень логично.

via Radio-U.ru
Rating 0
Views 265
Comments 1

Семантика проигрывает!

Client optimization *
Логическим продолжением уже проведенных исследований CSS/DOM-производительности браузеров (часть 1, часть 2, часть 3) стало рассмотрение зависимости времени создания документа от числа тегов (узлов дерева). Раздельно анализировались случаи, когда DOM-дерево было чисто линейным (все div лежали прямо внутри body, когда оно было разветвленным (ветки по 10 вложенных div наращивались внутри body) и когда вместо ветки из div использовалась некоторая семантическая конструкция.

Время создания документа от числа узлов

читать дальше на webo.in →
Total votes 22: ↑14 and ↓8 +6
Views 603
Comments 11

jQuery для JavaScript-программистов

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

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

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

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

Читать дальше →
Total votes 47: ↑46 and ↓1 +45
Views 67K
Comments 121

Что нового в HTML 5.0? Часть 3: Структура документа. Заключение.

Website development *
Translation
В отличие от предыдущих версий HTML и XHTML, которые определяются браузерами их синтаксисом, HTML 5 определяется в зависимости от Document Object Model (DOM) — структура («дерево») документа считываемое браузером для отображения страницы. Например, рассмотрим очень простой документ, состоящий из заголовка, подзаголовка и некоторого текста. Структура DOM будет выглядеть так:

К иллюстрации: структура документа DOM состоит из элемента «title» в заголовка «h1» и «p» элементов в теле документа.

Читать дальше →
Total votes 19: ↑17 and ↓2 +15
Views 1.6K
Comments 18

Практический JS: проблемы innerHTML

Website development *
Translation
Примечание: ниже перевод статьи Julien Lecomte «The Problem With innerHTML», в которой автор рассматривает проблемы при использовании метода innerHTML в современных браузерах и предлагает ряд советов, как ее можно избежать. Мои комментарии далее курсивом

Свойство innerHTML крайне популярно среди веб-разработчиков в силу своей простоты и удобства, поскольку оно совершено элементарно позволяет заменить HTML-содержание у конкретного тега. Можно также воспользоваться DOM Level 2 API (removeChild, createElement, appendChild), но использование innerHTML гораздо более простой и эффективный способ для модификации DOM-дерева. Однако, есть ряд проблем при использовании innerHTML, которых следует избегать:

  • Неправильная обработка свойства innerHTML может привести к атакам, связанным со script-инъекциями (XSS) в Internet Explorer, когда HTML-строка содержит вызов <script>, помеченного как отложенный: <script defer>...</script>
  • Выставление свойства innerHTML уничтожит все текущие вложенные HTML-элементы со всеми обработчиками событий, что потенциально может вызвать утечки памяти в некоторых браузерах.


Есть и еще несколько более мелких недостатков, которые тоже стоит упомянуть:

  • Нельзя получить ссылку на только что созданные элементы, вам приходится добавлять код для получения ссылки на них вручную (используя DOM API).
  • Вы не можете выставить innerHTML для всех HTML-элементов во всех браузерах (к примеру, Internet Explorer не позволяет выставить innerHTML для строки таблицы (tr)).


Читать дальше →
Total votes 35: ↑33 and ↓2 +31
Views 38K
Comments 50

DOM DocumentFragment: быстрее быстрого

Client optimization *
Translation
Примечание: ниже перевод заметки от John Resig DOM «DOM DocumentFragments», в которой автор рассказывает об опыте использования DocumentFragment и сравнивает его быстродействие с обычным appendChild. Мои комментарии далее курсивом.

Недавно я игрался с DOM DocumentFragment в JavaScript, пробуя, что же можно с ним сотворить. Если вкратце, то DocumentFragment является облегченным контейнером для DOM-узлов. Он является частью спецификации DOM 1 и поддерживается во всех современных браузерах (был добавлен в Internet Explorer в 6 версии).

В процессе чтения я наткнулся на интересную вещь. Цитирую из спецификации:

Также различные операции — например, добавление узлов как дочерних для другого Node — могут принимать в качестве аргумента объекты DocumentFragment; в результате этого все дочерние узлы данного DocumentFragment перемещаются в список дочерних узлов текущего узла.


читать дальше на webo.in →
Total votes 33: ↑27 and ↓6 +21
Views 4.4K
Comments 10

Динамические стили: быстро и просто

Client optimization *
Заметка Выносим CSS в пост-загрузку была посвящена исследованию наиболее быстрого способа добавить стилевые правила в исходный документ динамически, не затрагивая при этом стадию предзагрузки (когда у нас еще белый экран в браузере). В ней, однако, не был рассмотрен следующий вопрос: какой метод использовать для добавления массива CSS-правил в сам HTML.

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

Тестовое окружение


Поскольку скорость загрузки отдельного CSS-файла достаточна велика, а требуется рассмотреть, как его содержимое может повлиять на скорость его динамического применения к документу, то нам нужны сотни или даже тысячи правил. В качестве отправной точки была опять взята главная страница Яндекса, стили которой были вынесены в отдельный файл и скопированы 10 раз. Это дало необходимую задержку (которая существенно больше погрешности, вносимой браузерами) и не сильно увеличило сжатый с помощью gzip файл.

Все варианты представлены на тестовой странице, вкратце опишу основные подходы.

Читать дальше yа webo.in →.
Total votes 28: ↑26 and ↓2 +24
Views 3.9K
Comments 13

Opera 9.62 против Opera 10.0 alpha 1

Opera
4 декабря 2008 года увидела свет первая альфа версия Opera 10.0 на двиижке Presto 2.2. Подробнее об этом радостном событии и новшествах движка можно прочитать в статье написаной fidelich. А что дает пользователю новый движок в числовом выражении, я попытаюсь выяснить под катом.
Продолжить чтение
Total votes 93: ↑85 and ↓8 +77
Views 702
Comments 71

Реализация интерфейса ElementTraversal

JavaScript *
Достаточно много браузеров (Opera 9.6, Google Chrome 2, Safari 4, Firefox 3.5) обзавелись поддержкой весьма удобного интерфейса ElementTraversal, который позволяет перемещаться по DOM-дереву, игнорируя текстовые узлы. В этих браузерах для каждого элемента стал доступен следующий набор новых getter'ов:
  • firstElementChild — первый дочерний элемент;
  • lastElementChild — последний дочерний элемент;
  • nextElementSibling — следующий соседний элемент;
  • previousElementSibling — предыдущий соседний элемент;
  • childElementCount — количество дочерних элементов.
Читать дальше →
Total votes 30: ↑26 and ↓4 +22
Views 2K
Comments 17

ShortXSLT: упрощенный синтаксис для XSLT с операторами вставки, if, else и т. д.

PHP *
Библиотека Dklab_ShortXSLT — это система для поддержки упрощенного синтаксиса XSLT для встроенных в PHP классов XSLTProcessor и DOMDocument. Фактически, это компилятор с диалекта XSLT в стандартный XSLT, запускаемый «на лету» и «прозрачно» для вызывающего кода (естественно, имеется возможность кэширования, чтобы компиляция запускалась только в до следующего изменения шаблона). Там, где вы используете XSLT в PHP-скриптах, вы можете подключить ShortXSLT, написав несколько дополнительных строчек кода.

Стандартный синтаксис XSLT весьма громоздок, что оказывается неудобным при его использовании в Web-программировании. Библиотека позволяет облегчить эту проблему.

Поддерживаются сокращенные версии для следующих конструкций: вставка значения вне тэгов, вставка языковой константы, вставка sprintf-like константы, if-then-elseif, foreach.

Пример на ShortXSLT:
...
<xsl:template match="/">
  {if /some/node = 1}
    {#hello}, world! {#my_name_is(/my/name)}.
  {elseif /other/node = /some/node}
    <p>You have {/money} dollars.</p>
  {else}
    {foreach /nodes/*}
      Node {.}<br/>
    {/foreach}
  {/if}
</xsl:template>
...

Читать дальше →
Total votes 16: ↑11 and ↓5 +6
Views 2.3K
Comments 56

FireDiff — расширение для FireBug, позволяющее отслеживать изменения в DOM и CSS

Website development *
Translation
Kevin Decker выпустил FireDiff — замечательное расширение для Firebug, которое отслеживает изменения в DOM и в таблицах стилей HTML-страницы.
Читать дальше →
Total votes 49: ↑48 and ↓1 +47
Views 1.6K
Comments 25

Оригинальный баг с iframe и DOM в IE

Website development *
Некоторое время назад обнаружил интересный баг в IE, успешно доживший и до восьмой версии. Суть бага заключается в том, что при уходе со страницы содержащей несколько iframe-ов и последующем возврате при помощи кнопки back, содержимое этих самый фреймов может перемешаться.

UPD: Говорят FF и Opera на этом коде тоже косячат, но по-другому :)
Читать дальше →
Total votes 40: ↑38 and ↓2 +36
Views 3.1K
Comments 10

Парсинг XML в Java. DOM vs. SAX

Lumber room
Наконец дошли руки написать эту заметку.
В прошлой статье я писал о создании простейшего xml парсера на по технологии SAX.
По просьбам трудящихся сделал следующий выпуск из этой серии. Сравнение производительности SAX и DOM.
Читать дальше →
Total votes 6: ↑4 and ↓2 +2
Views 3K
Comments 9