HTML/XHTML

1. HTML Help Sheet

• PDF

2. HTML Cheat Sheet

• PDF
• PNG

3. HTML Character Entities Cheat Sheet

• PDF
• PNG

4. XHTML Cheat Sheet v. 1.03 – PDF

CSS

5. CSS Cheat Sheet (V2)

• PDF
• PNG

6. CSS Cheat Sheet

• PDF
• HTML

7. CSS Shorthand Cheat Sheet

• PDF

8. CSS Level 1 Quick Reference – PDF

9. CSS Level 2 Quick Reference – PDF

10. CSS2.1 Quick Reference Card – PDF

11. CSS2 Reference Guide – PDF

JavaScript

12. JavaScript Cheat Sheet

• PDF
• PNG

13. Addison-Wesley’s JavaScript Reference Card – PDF

14. JavaScript and Browser Objects Quick Reference

• PDF

15. The most common DOM methods at a glance – PDF

16. JavaScript Quick Reference Card/Cheatsheet

• PDF

17. mootools 1.2 cheat sheet

• PDF

18. jQuery Cheatsheet

• PNG

19. jQuery 1.2 Cheat Sheet

• PDF

20. jQuery Visual Map – PNG

Miscellaneous

21. RGB Hex Colour Chart

• PDF
• PNG

22. The Web Developer’s SEO Cheat Sheet

• PDF

23. The WordPress Help Sheet

• PDF

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

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

Формула опредления:
PR(A) = (1-d) + d(PR(t1)/C(t1) +… + PR(tn)/C(tn)),
где PR(t1…tn) - вес страницы, ссылающейся на страницу A,
C - количество исходящих ссылок со страницы А,
d - коэффициент затухания, обычно принимаемый 0.85.

Из уравнения следует, что одна ссылка со страницы с PR4 и пятью исходящими ссылками передаст больший вес, чем ссылка со страницы с PR8 и сотней исходящих ссылок. Чем больше исходящих ссылок на странице, тем меньший PageRank будет передан по такой ссылке, и это не зависит от того - внешние ли это будут ссылки или внутренние. При этом у страниц отдающих свой "голос" за другие страницы PR не уменьшается!!!

Что делать если у вас много исходыщих ссылок на всех страницах? Неоходимо все ссылки которые только можно - скрывать от поисковых систем. О том как это сделать в ASP.NET хорошо написал Дмитрий.

Согласно вышеуказанной формуле можно делать прогнозы на будущее! Можно самому написать скрипт по пронозу, но зачем делать то - что кто-то уже сделал это раньше… Данный сервис помимо прогноза показывает общее количество бэков на ваш сайт.

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

Я постарался подобрать утилиты независимые от платформы и технологий разработки веб-приложений. Поэтому, даже если вы пишете на PHP не спешите закрывать эту страницу ;)

FireBug удобен не только для отладки, тестирования страниц и анализа страниц, но и для выявления времени загрузки различных составляющих страницы: графики, JavaScript, CSS и XHR файлов. Большинство из вышеупомянутых фич находится в закладке Net (“network”).

YSlow для FireBug измеряет скорость загрузки страниц, используя лучшие практики для высокопроизводительных сайтов от Yahoo! Developer Network. Позволяет выявлять причины задержки времени выполнения запроса: большой размер файла, время выполнения JavaScript, и т.д. С ее помощью очень удобно сжимать внешние JavaScript’ы и CSS файлы.

Fiddler 2 – прокси, который работает с трафиком между Вашим компьютером и удаленным сервером, и позволяет инспектировать и менять его. Fiddler можно расширять с помощью скриптов на языке JScript.NET (писать их очень просто), кустомизировать меню программы, и вообще - замечательный инструмент. Использовать его можно с любым браузером. На MSDN была замечательная статья по этому поводу, где помимо всех интересных вариантов использования этого инструмента рассматривись: способ уменьшения первого времени загрузки страницы (unprimed cache), анализ HTTP заголовка в ответах с сервера, создание специальных флагов для отслеживания потенциально опасных участков (в отношении производительности).

mon.itor.us – бесплатное веб-приложение предоставляющее набор инструментов для мониторинга производительности, доступности страницы, а также показывает статистику по трафику. Вы даже можете установить время отклика вашего сайта, и, в случае “падения” вашего сайта, вам будет выслано соответствующее письмо об этом. Другим полезным функционалом (которым я и сам частенько пользуюсь) является возможность сравнивать время загрузки страниц в различные периоды времени. Это удобно, когда страница меняется довольно часто, и необходимо сравнить производительность различных решений.

Cuzillion поможет вам увидеть, как различные компоненты страницы взаимодействуют друг с другом. Использование этой утилиты полезно во время работы над структурой страницы. Cuzillion был создан Стивом Сандресом, “директором по производительности” в Yahoo! (автором Yahoo’s perfomance best practisies и YSlow).

IBM Page Dialer визуально отображает время и порядок загрузки компонентов страницы. Эта утилита встраивается в клиентский Windows Socket Stack Internet Explorer для перехвата времени загрузки, размера и других данных о компонентов страницы. Поэтому достаточно просто нажать на один из элементов на странице, чтобы появилось всплывающее окно с подробной информацией об этой части страницы. В случае возникновения каких-либо событий на странице (скажем выполнение JavaScript функции) этот компонент покажет вам всю информацию о задействованных процессах.

Httpref – open-source тулзовина для измерения производительности HTTP сервера, использующего Linux платформу. Честно говоря об этой утилите я знаю лишь по-наслышке от одного PHP-разработчика. С его слов, это очень удобный инструмент для проведения нагрузочного тестирования вашего веб-приложения.

Pylot – также open-source утилита для проведения нагрузочного тестирования. Небольшим неудобством является то, что на вашем компьютере должен быть установлен Python, но для написания самих тестов вам не нужно знать сам язык – тесты создаются в XML-формате.

Следующая тулзовина под названием PushToTest TestMaker бесплатна и с открытым кодом. Предназначена для тестирования масштабируемости приложения. С ее помощью можно проводить и нагрузочное тестирование. Из множества других подобных утилит ее выделяет интуитивный интерфейс с хорошими визуальными отчетами и аналитическими инструментами. Resource Monitor один из них и помогает отслеживать нагрузку CPU, расход памяти, нагрузку сети и многое другое. 

Wbox HTTP работает под Linux, Windows, и MacOS X. Посылая последовательно запросы к серверу в короткие промежутки времени, этот инструмент позволяет проводить стресс-тестирование вашего веб-приложения.

WebLOAD опять-таки инструмент с открытым кодом для профессионального нагрузочного и стресс-тестирования ваших веб-приложений. Скрипты для нагрузочного тестирования можно писать на JavaScript. Возможности этого инструмента не ограничиваются тестированием, в нем также можно разрабатывать и дебажить javascript код. 

DBMonster позволяет оптимизировать структуру и индексы базы данных, ровно как и проводить нагрузочное тестирование вашей базы данных. С помощью генератора тестовых данных вы сможете оценить масштабируемость вашей базы данных. Поддерживает он большинство баз данных: MySQL, PostgreSQL, Oracle, MSSQL и видимо все базы данных, которые могут работать с JDBC драйвером.

OctaGate SiteTimer простая утилита для анализа процесса загрузки чего-либо на вашу страницу. Она предоставляет визуальную картину следующих событий: начальный запрос, соединение, начало загрузки, окончание загрузки.

Ссылки по теме

Ajax performance analysis – советы по оптимизации страниц от разработчиков IBM

Fiddler PowerToy - Part 2: HTTP Performance

Web Page Analyzer

Site-Perf.com – веб-утилита для мониторинга нагрузки сайта.

Apache JMeter – Java-инструмент для проведения нагрузочного тестирования Apache серверов

The Grinder – фреймоврк с открытым кодом для автоматизированного тестирования

Способы ускорения загрузки вашего сайта

Yahoo: высокопроизводительные Веб-страницы. Часть 2

Анализируем загрузку веб-страницы

Оптимизируем загрузку веб-страницы

Практический JS: ускоряем обработку событий 

Практический JS: «отложенная» загрузка 

Создаем высокопроизводительные HTML-страницы для IE  

UpdatePanel - это контрол Microsoft ASP.NET AJAX, который позволяет довольно удобно интегрировать AJAX в ваше приложение. Но именно ввиду его удобства и простоты использования со стороны разработчика, некоторые вещи далеко не очевидны. К примеру как вызвать клиентский JavaScript по завершению очередного обновления этой панели?

Трюк заключается в том, чтобы добавить EndRequestHandler в request manager:

Вот пример формы с двумя TextBox, куда вы вводите текст, а сервер возвращает длину текста и отображает ее во втором TextBox:

<%@ page language="C#" autoeventwireup="true" codebehind="DemoJScriptUpdate.aspx.cs" inherits="CharterWeb.DemoJScriptUpdate" %>
 
 <script runat="server">
 protected void txtDataOnChange(object sender, EventArgs e) {
 txtLength.Text = txtData.Text.Length.ToString();
 }
 </script>
 <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
 <head id="Head1" runat="server">
 
 
 <script type="text/javascript">
 function EndRequestHandler(sender, args) {
 if (args.get_error() == undefined)
 alert("Your text has: " + document.getElementById("txtLength").value + " character(s)");
 else
 alert("There was an error" + args.get_error().message);
 }
 function load() {
 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
 }
 </script>
 
 <form id="form1" runat="server">
 <?xml:namespace prefix ="" asp /></asp:scriptmanager id="_scriptManager" runat="server">
 
 <asp:updatepanel id="UpdatePanel1" runat="server">
 <contenttemplate>
 Write something: </asp:textbox id="txtData" runat="server" autopostback="true" ontextchanged="txtDataOnChange">
 <br />
 Server says the length is: </asp:textbox id="txtLength" runat="server" autopostback="true">
 </contenttemplate>
 </asp:updatepanel>
 
 </form> 

 Проблема:

Недавно у меня возникла проблема: после добавления контрола PowerWeb Zoom на страницу, напрочь отказывался работать AJAX. Оказалось этот контрол добавляет в Web.config следующую строчку для корректной работы своих JavaScriptов

Объяснение:

При разработки еще ранних версий VS 2005 считалось что большинство приложений будут совместимы с XHTML, но для обратной совместимости решили оставить режим "Legacy" (non-XHTML формат страниц, аналогично страницам в ASP.NET 1.1). Иногда подобное изменение приводит и к изменению внешнего вида страниц.

Решение:

Добиться того, чтобы приложение отображало свои страницы в non-XHTML формате и при этом умело работать с асинхронными страницами невозможно, поэтому вам необходимо будет выбрать что-то одно. Хотя в некоторых случаях вы можете попробовать изменить режим на Transitional mode (XHTML Transitional) или на Strict mode (XHTML Strict).

В помощь вам будет список подобных "ловушек" при использовании AJAX, Visual Studio 2005, работы с данными и тп.