Google Chrome Developer Tools

There happens to be a developer tool built into Google Chrome that helps you debug your javascript, manipulate the DOM, and check the performance of a webpage. Of course at this point, most of us are wrapping up our work on our projects, so the discovery of this tool might not help anybody immediately in this class, but some of the features could help you down the road.

The Google Chrome Developer Tool functions a lot like Firebug does for Firefox. With this tool you can breakdown the code of a webpage, manipulate html, css, and javascript codes, and test the speed/latency of your code. Below you can find a video showcasing how to use the developer tool to manipulate your code.




My favorite feature of the devtool is that you can check the speed of your application. They call this feature "Profiling and Optimizing". It allows you to record a page as it loads and then tells you which part of the code is using the most resources or taking the longest. If your code is taking a long time to load, you can use this tool to troubleshoot the problem. You can also create stops in your javascript code to troubleshoot problems as well. Essentially, it functions just like putting an alert box in your code. The benefit of this tool is that you don't have to keep uploading new iterations to the server. You can perform all of your testing without touching your real code, thus saving you from having to rework a page after over-testing it. The video below demonstrates this functionality.



After a bit of use, I like the Chrome Developer Tool more then Firebug. It is easier to work with then Firebug and I find it runs lighter and faster then Firebug too. I think it would be a very useful tool for us to use in our presentations of our projects, since we can display the functionality of the site as well as the underlying code without any hassle. Anybody else agree?

Proxy

Well I was wondering what to write and figured out that I could mention something about Proxy servers. I am sure most of you know about it already but still I would like to put out some information.

In computer networks, a proxy server is a server (a computer system or an application program) that acts as an intermediary for requests from clients seeking resources from other servers. A client connects to the proxy server, requesting some service, such as a file, connection, web page, or other resource, available from a different server. The proxy server evaluates the request according to its filtering rules. For example, it may filter traffic by IP address or protocol. If the request is validated by the filter, the proxy provides the resource by connecting to the relevant server and requesting the service on behalf of the client. A proxy server may optionally alter the client's request or the server's response, and sometimes it may serve the request without contacting the specified server. In this case, it 'caches' responses from the remote server, and returns subsequent requests for the same content directly.

A proxy server has many potential purposes, including:

• To keep machines behind it anonymous (mainly for security).^[1]
• To speed up access to resources (using caching). Web proxies are commonly used to cache web pages from a web server.^[2]
• To apply access policy to network services or content, e.g. to block undesired sites.
• To log / audit usage, i.e. to provide company employee Internet usage reporting.
• To scan transmitted content before delivery for malware.
• To scan outbound content, e.g. for data leak protection.

A proxy server that passes requests and replies unmodified is usually called a gateway or sometimes tunneling proxy.

A proxy server can be placed in the user's local computer or at various points between the user and the destination servers on the Internet.

A reverse proxy is a (usually) Internet-facing proxy used as a front-end to control and protect access to a server on a private network, commonly also performing tasks such as load-balancing, authentication, decryption or caching.

Web proxy

A proxy that focuses on World Wide Web traffic is called a "web proxy". The most common use of a web proxy is to serve as a web cache. Most proxy programs (e.g. Squid) provide a means to deny access to certain URLs in a blacklist, thus providing content filtering. This is often used in a corporate, educational or library environment, and anywhere else where content filtering is desired. Some web proxies reformat web pages for a specific purpose or audience (e.g., cell phones and PDAs).

AOL dialup customers used to have their requests routed through an extensible proxy that 'thinned' or reduced the detail in JPEG pictures. This sped up performance but caused problems, either when more resolution was needed or when the thinning program produced incorrect results. This is why in the early days of the web many web pages would contain a link saying "AOL Users Click Here" to bypass the web proxy and to avoid the bugs in the thinning software.

Firebug

Can't figure out why your page looks like garbage? Wanna see how someone has used html and css to make a wicked awesome website? Then download the Firebug extension for Firefox.

In my latest post, I talked about using different width and padding settings to render a page (almost) perfectly on a user's screen, regardless of screen resolution. Well frankly I didn't really get much out of the descriptive material the author provided on their page. I didn't help to look at their CSS, since I had to jump back and forth from HTML to CSS to see what was being styled where.

This is where Firebug comes in. As an extension to Firefox, the program simply runs through the browser. You can use it to shift through their HTML, and Firebug will hightlight on the page which areas are using that portion of the html. It also provides you with a sidebox showing the CSS specifically provided for that portion of the HTML and it shows you what CSS it inherits. Defininetly a way cool feature! I recommend checking it out if your having any trouble styling your webpage.

Here is a picture of Firebug at work:

CSS Page Widths

Through my light experience in web design, I have been frustrated with setting my page widths. Why is it that when I design my page in the lab it looks great but when I look at it on my laptop at home it suddenly looks huge!? I have tried using several combination's of fixed and percentage widths, but nothing ever comes out looking like I want it to.

With the use of max and mix page widths, you can change the way your page is rendered based on the users browsers settings. The example I found is on the 'CSS Tricks' website. They have a page called "Perfect Fluid Width Layout" where the show a good example of a page that varies in width. Their min-width is set to 780px for those users with a low resolution screen and the max-width is set to 1260px for users with high resolution screens.

I think the real trick to their page comes with their combination of padding and width settings. With the main div box has a variable width setting, the boxes within it have a fixed width. Their spacing is determined by the padding settings. Both are then maintained while the browser changes size. I might have to practice this method more to fully understand it, but on paper it makes sense. I recommend checking out their page and use firebug to see how it works.