Performance Comparison of Web Browsers

Source: http://sixrevisions.com, by: Jacob Gube

This article reports a research about performance of major web browers include Firefox 3.5, Google Chrome 3.0, Internet Explorer 8.0, Opera 10, and Safari 4.0. Browsers were tested 3 times with unprimed caches except during caching performance benchmarks.

• Javascript Speed: The fastest is Google Chrome (542.3ms), and the slowest is Internet Explorer (6.305.5ms). However, Safari becomes a big competitor of Google since its speed is only about three hundreds different from Google (863.9ms).
• CPU Usage: When Google Chrome is able to be the winner of five (3.0%), Internet Explorer should accept itself as a losser (13.1%). But again, Safari becomes Google competitor since it gains position as a second winner (4.4%).
• DOM Selection Speed: At this point, Opera is proved as the browser which is very responsive on asynchronous page updates (27ms), followed by Safari (30ms), and Google Chrome (39ms).
• CSS Rendering Speed: There is a big difference between the fastest and the slowest here. When Google Chrome is able to render in 91ms, Internet Explorer is only able to render in 793ms.
• Page Load Time: In this case, the differences between 5 browsers are not too much. When Firefox as the fastest proved 1.34ms, Google Chrome proved 1.45s.
• CSS Rendering Speed: There is a big difference between the fastest and the slowest here. When Google Chrome is able to render in 91s, Internet Explorer is only able to render in 793ms. That speeds are followed by Opera in 1.50s, Safari in 1.61s, and Internet Explorer in 1.61.
• Browser Cache Performance: When the test proved Google Chrome is able to load in 0.72s, the test also proved Safari is only able to load in 0.89s.

Since the overall performance shows that Google Chrome now is the winner of five major web browsers, I am very interested to download and use that browser for my internet activity. This finding is very surprising because it has been a long time I've believed that Firefox is the best browser.

10 Essential Chrome Extentions for Web Developers

Source: Mashable: The Social Media Guide, by: Samuel Axon

This article introduces extensions supported in Chrome and some tools that can be used in Firefox. The extensions might enable people to use Chrome as the main workhorse.

• Firebug Lite: To inspect a page for errors then quickly edit to fix them.
• Tab: To open any website in a tab that's actually running Internet Explorer instead of Chrome.
• Eye Dropper: To give useful information on any color on a website you're viewing in Chrome.
• Chrome SEO: To give information which is important for search engine optimization.
• Lorem Ipsum Generator: To generate filler text for your websites.
• Resolution Test: To help you make sure the site's formatting looks ok to users.
• Speed Tracer: To record how much time your web application is spending on various tasks.
• Measure It: To give dimensions of any element present in a website you're looking at.
• Pendule: To help web developers with well-laid-out control panel full of miscellaneous tasks like viewing source, script validators, a color picker, etc.
• Built with: To give a profile of the website you are hanging out at. A list of the technologies (such as widget, analytics tracker, frameworks) is included.

These sophisticated tools encourage me to quickly change my Firefox to Google Chrome :)

Related links: http://www.mashable.com/2010/02/24/developer-chrome-extensions

How Many Ideas Do You Show Your Clients?

Source: Smashing Magazine, (2009/12/28), by: Graham Smith

This article gives tips could be used to make your ideas or portfolios are succesfully impressed and accepted by future employers.

• When too much choice can be a bad thing for clients, consider a few choice which is able to represent your brilliant imagination, interpretation, and ability to think outside box.
• Know your client's psychological angle includes their personality and business-related issues.
• Have a solid brief to pre-empt undesirable outcomes by familiriazing yourself as much as possible with your client and their business
• Have understanding that a true collaboration requires the commitment of at least two people: the designer and client.
• When the brief and communication are solid, communication can simply use email or Skype, otherwise, take phone.
• When you have lazy communicators, consider if the project is worth to be taken.

This article challeges me to start thinking about ideas that are able to impress future employers and familiriazing myself to the future employers and their business orientations.

Related links: http://www.smashingmagazine.com/2009/12/28/

30 HTML Best Practices for Beginners

Source: http://net.tutsplus.com, (2009/04/14), by: Jeffrey Way

1. Always close your tags to avoid validation and glitch issues at every turn.
2. Declare the correct DocType. HTML 4.01 is suggested.
3. Never use inline styles unless if the pages has been completely coded.
4. Place all external CSS files within the head tag to make pages faster to be load.
5. Consider placing Javascript files at the bottom to make pages faster to be loaded.
6. Never use inline Javascript. It's not 1996.
7. Validate continuously to avoid strange whitespace issue.
8. Download firebug as a tool providing Javascript debugging and extra padding inspector.
9. Use firebug and learn it as well.
10. Keep your tag name lowercase.
11. Use H1-H6 tags for semantic reasons.
12. If building a blog, save the H1 for the article title.
13. Download ySlow to analyze areas which need improvement.
14. Wrap navigation with an unordered list for semantic reasons.
15. Learn how to target IE as demanded by IE.
16. Choose a great code editor such as Coda, Espresso (Mac), or InType, Notepad++ (PC).
17. Once the website is complete, compress! 18) Once you've completed the markup, reduce the number of elements on the page.
18. All images require attributes for accesibility and validation reason.
19. Stay up late to study Javascript closures and other codings.
20. View source to learn the coding.
21. Style all elements to show off.
22. Use Twitter to have networking tool in your industry.
23. Learn Photoshop.
24. Learn each HTML tag.
25. Participate in the community to teach yourself and learn more.
26. Use a CSS reset.
27. Line 'em up to understand why the element is placed.
28. Slice a PSD.
29. Don't use a framework when first getting started. Beginners need sometimes to study it to avoid confusion.

This article is very helpful for me to avoid errors in creating HTML pages and gives basic knowledge about terms and coding techniques in HTML.

Applying Mathematics to Web Design

Source: Smashing Magazine, (2010/02/09), by: Adit Gupta

This article promotes mathematics theories and its ability to exhibit order, symmetry, and limitation which can be used in variety of themes, styles, and elements of web design.

Golden Rectangle: Comes from Golden Ratio theory, an irrational mathematical constant with a value of approximately 1.618033987. It is possible to be applied for photo galleries, portfolios, and product-oriented websites.

Fibonacci Design: Design based on the Fibonacci sequence of numbers which the first two are 0 and 1, and the remaining is the sum of the previous two. It is best suited to blogs and magazine layouts.

Five elements or Kundli Design: The technique comes from the Indian horoscopes which are also called Kundli. The steps are 1) draw a square, 2) cross the two diagonals, 3) join the mid-points on each side of the square to get the Kundli figure. This chakra is best for displaying product informations and portfolios.

Sine Wave Design: Is a mathematical function that describes a smooth repetitive oscillation. It is best suited for a simple and original web design, create a single-page layout, graphics or infographics.

Other techniques such as Rule of Thirds and Musical Logic are also beneficial for web design.

I might use math already when designing my web without knowing which mathematics theory I've been or should be used. This article gives me new knowledge and inspiration to explore and apply various mathematics theories for my web design.

Related links: http://www.smashingmagazine.com/author/adit-gupta/