Клиентская оптимизация → Увеличиваем скорость загрузки сайта используя lazy-load изображений
Сейчас многие сайты насыщены графикой в разных видах: аватары, иллюстрации к постам, галереи и тп.
Читатели блога «Клиентская оптимизация» как никто другой знают цену лишних запросов к серверу.
Количество обращений к серверу можно легко уменьшить с помощью техники пост загрузки изображений, которые не попадают в область видимости(первый экран). Т.е изначально будут загружаться только те изображения которые пользователь способен увидеть, остальные будут загружаться по мере скролинга страницы.
Читатели блога «Клиентская оптимизация» как никто другой знают цену лишних запросов к серверу.
Количество обращений к серверу можно легко уменьшить с помощью техники пост загрузки изображений, которые не попадают в область видимости(первый экран). Т.е изначально будут загружаться только те изображения которые пользователь способен увидеть, остальные будут загружаться по мере скролинга страницы.
Google → Google наконец-то выпустил в свет свой корпоративный javascript-фреймворк
Похоже, не все поняли, что произошло: вместо того, чтобы говорить о фреймворке от Google, народ обратил внимание на вторичную вещь — компрессор javascript-кода Closure Compiler.
А ведь Closure Library есть ни что иное, как внутренний javascript framework Гугла, компоненты которого использованы в Gmail, Google Docs и прочих веб-приложениях от Г. И это замечательно, друзья мои! Ведь это фреймворк от непревзойдённых профессионалов разработки популярных вебприложений. Что подразумевает собой качество, стабильность и оптимальность кода, единообразность разных частей фреймворка.
До сих пор подобных фреймворков была только одна штука — это YUI, корпоративный фреймворк Yahoo. Безусловно, YUI радует единообразием, отличной документацией, компонентами, удобными для создания вебприложений. Однако мне всегда казалось странным, что Yahoo, далеко не лидер в области rich internet applications, опубликовала свои библиотеки, а Google, та самая компания, которая своими Maps и Gmail просто заставила разработчиков браузеров поддержать всё то, благодаря чему мы сейчас имеем кучу 2.0 сервисов, не обнародавала свои javascript-библиотеки на пользу простым разработчикам.
И вот это произошло. Ура, товарищи!
А ведь Closure Library есть ни что иное, как внутренний javascript framework Гугла, компоненты которого использованы в Gmail, Google Docs и прочих веб-приложениях от Г. И это замечательно, друзья мои! Ведь это фреймворк от непревзойдённых профессионалов разработки популярных вебприложений. Что подразумевает собой качество, стабильность и оптимальность кода, единообразность разных частей фреймворка.
До сих пор подобных фреймворков была только одна штука — это YUI, корпоративный фреймворк Yahoo. Безусловно, YUI радует единообразием, отличной документацией, компонентами, удобными для создания вебприложений. Однако мне всегда казалось странным, что Yahoo, далеко не лидер в области rich internet applications, опубликовала свои библиотеки, а Google, та самая компания, которая своими Maps и Gmail просто заставила разработчиков браузеров поддержать всё то, благодаря чему мы сейчас имеем кучу 2.0 сервисов, не обнародавала свои javascript-библиотеки на пользу простым разработчикам.
И вот это произошло. Ура, товарищи!
Веб-разработка → Анонс YUI 2.6.0
Обновилась javascript-библиотека Yahoo! User Interface (YUI) до версии 2.6.0.
Кроме исправлений предыдущих элементов управления, добавлены два новых:
Живой пример
Живой пример
Прочие исправления перечислены здесь
Скачать новую версию с sourceforge.net (10.5 Mb)
Архив включает документацию, многочисленные примеры и собственно библиотеку YUI.
Ссылка на анонс
Официальный сайт проекта
_________
Текст подготовлен в ХабраРедакторе
Кроме исправлений предыдущих элементов управления, добавлены два новых:
The Carousel Control
Живой пример
The Paginator Control
Живой пример
Прочие исправления перечислены здесь
Скачать новую версию с sourceforge.net (10.5 Mb)
Архив включает документацию, многочисленные примеры и собственно библиотеку YUI.
Ссылка на анонс
Официальный сайт проекта
_________
Текст подготовлен в ХабраРедакторе
Веб-разработка → Практический JS: проблемы innerHTML
Примечание: ниже перевод статьи 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)).
Ajax → Асинхронная загрузка файлов, реализованная на YUI
Cuong Tham написал пример, демонстрирующий асинхронную загрузку 5 файлов на сервер, использую YUI.
Клиентская оптимизация → Практический JS: ускоряем обработку событий
Примечание: ниже перевод статьи "Event delegation without a JavaScript library", посвященной обзору методов по назначению обработчиков событий в JavaScript и их возможной оптимизации, она дополнена моими комментариями и практической частью.
Большинство статей и примеров, которые я видел в последнее время по переопределению событий, основывались на какой-либо распространенной библиотеке. Например, в своей хорошо известной статье Chris Heilmann применяет YUI-библиотеку, а в прошлом месяце Dan Webb в своей презентации на @media использовал prototype.
Для тех из нас, кто вручную корпеет над достаточно запутанным JavaScript-приложением без использования этих замечательных библиотек, будет интересно взглянуть, как же на самом деле работает переопределение событий. Это звучит так, как будто изложенный ниже материал будет значительно сложнее обычного назначения обработчиков, но, на самом деле, все очень просто.
Персональные блоги → iPhone. Вариации на тему.
Дэйв Канн представил импровизацию интерфейса iPhone (использовал YUI).
Обертку для дига можно глянуть тут
Обертку для дига можно глянуть тут