Optimization
Keywords: stress tool; benchmarking; caching;A HOWTO on Optimizing PHP: optimizing PHP involves many factors which are not code related, and why tuning PHP requires an understanding of how PHP performs in relation to all the other subsystems on your server, and then identifying bottlenecks caused by these subsystems and fixing them.
Stress tools to test your Web server
Development Tools
Firefox tools
- Firefox offers many tools to streamline the development process, including Firebug to edit, debug, and monitor CSS, HTML, and JavaScript live in any Web page, Tamper Data to view and modify HTTP/HTTPS headers and POST parameters, and the DOM Inspector to examine any HTML or CSS element with a simple right click.
Check the Firebug site for tutorials; - Web Developer (firefox addon, more information here) is a browser extension that adds a menu and a toolbar to the browser with various web developer tools. Between other useful features are:
Disable:
"Disable Caching" useful when you need to make sure you are viewing the latest changes in the browser;
Cookies:Useful when programming a site that uses cookies. Examples are, disable all cookies, disable external site cookies, clear session cookies, delete domain cookies, delete path cookies, view cookie information, and add cookie;
CSS:
lets you edit the CSS of a web page in a sidebar and see the result in real time;
Forms:
gives information about the forms on a web page. The "Populate Form Fields" automatically fill out your forms when testing your site. Other options include: display form details, show passwords, convert form methods (e.g., from GETs to POSTs or vice versa), Convert Selected Elements to Text Inputs, Enable Auto Completion, Enable Form Fields, Clear Radio Buttons, Make Form Fields Writable, Populate Form Fields, and Remove Maximum Lengths;
Images:options to display the dimensions and file sizes of images on a web page;
Information:
View the structure of your page with "Display Id & Class Details" and "Display Element Information";
"View Color Information" shows a pallete with all the colors used on the page;
Miscellaneous:
"Small Screen Rendering";
Edit the HTML and see the changes in real time;
Display line guides and a ruler; etc.
Outline:
outline elements of a web page like frames, headings, table cells, tables, block level elements, external links, and even custom elements;
Resize:
see what your web page looks like at different resolutions such as 800x600;
Tools:
validate your HTML, feeds, CSS, and links. You can also get a speed report, open the DOM Inspector, Java Console, and JavaScript Console;
View Source:
Although it is easier to just hit crtl+u to see the source code, with this option you can configure a short cut to open the source code in a text editor of you choice; - 30+ Firefox Add-ons for Web Developers & Designers
Online tools
- W3C Markup Validation Service: Check the markup (HTML, XHTML, …) of Web documents. You can do it by entering a public url, by uploading the file to validade or by copy-pasting the source code into it (view the source code in the browser and paste it); A more practical way to do it is by using the Firefox addon "Web Developer";
- Link Checker checks anchors (hyperlinks) in a HTML/XHTML document. Useful to find broken links, etc;
- W3C CSS Validator - validates CSS stylesheets or documents using CSS stylesheets;
- list of other validators;
- Browser Shots: check cross-browser compatibility online;
- Wordoff.org: strip css/style and useless meta-data from your html to attain raw HTML only.
Problems: if you have tables with empty cells (<td></td>) they will be removed causing alignment/display problems;
APIs and Frameworks
SyntaxHighlighter
Script que formata código fonte com cores para exibição numa página web. Funciona em client-side através de javascript.Related Articles:
- Using SyntaxHighlighter on BLOGGER;
- 9 Useful Javascript Syntax Highlighting Scripts - artigo com várias alternativas de software para syntax highlighting em páginas web;
No comments:
Post a Comment