Web browser memory usage

Couple of days ago I found the interesting article - “Reduce your Linux memory footprint“, the author writes how to reduce the amount of memory used by applications working on Ubuntu.
For me the most interesting part was about the web browsers. The results form “Comparison of Web browser memory usage” table are not very good for Firefox.

I decide to make same test on Windows XP with the latest version of the browsers.

This is what I did:

I launched the browser, then I opened the page, when loading was done I checked the memory usage with Process Explorer (browser was maximized),
then I closed the browser.

Each test I did three time.

And the results:

BLANK PAGE

page: www.digitalinsane.com

page: www.google.com

page: www.yahoo.com

page: www.msn.com

three tabs with all above pages

It’s not hard to guess that the Opera uses less memory than the other browsers. Internet Explorer is a little bit better than Firefox (in these tests), but it ate more memory when more tabs were open.

And the verdict is:

• Opera - first place! (fast and less memory usage),
• IE7 - second place (very interesting),
• And at the last position, The really hungry Fox!

While I’m writing this post Opera and Firefox are lunched, so lets see the actual memory usage:

Opera (6 tabs opened/6 pages loaded) uses 32 320 Kb,

FireFox (5 tabs opened/5 pages loaded) uses 77 924 Kb

Hmm… Nothing else to say…

No Comments »

Browser choice?

Digging through the articles about the web browsers you can find a lot of opinions about which browser is better.

Opera users says: “My browser is faster, secure and easy customizable“,
Firefox users says: “My browser is more customizable, web services friendly, secure, and have open source code.“,
IE users says: “I’m using Internet Explorer” - forgive me, but I still can not find any benefits of using this browser. (I only run it when I have to check the pages).
Safari users says: “I have Mac and I’m using Safari” - I don’t have Mac so I can’t tell you more about this browser.

Let’s focus on the Opera and Firefox, and on which is better?

About the Opera:

1. It is fast, very fast. If you are IE user you’ll probably see the difference. Opera is based on it’s own engine (not another Gecko clone) ,and have it’s own quality. I found that it is faster than Firefox while running lots of loops (in the same time) written in JavaScript.
2. Have a mouse gestures (not extension needed) - however I never use that features.
3. Mail client.
4. Feed Reader - simple and the best, I didn’t find any extension for Firefox that could be better than this.
5. Saving the last session - very useful.
6. Easy customizable when it goes about profile files. (I use the same profiles for Opera installed on Windows XP and on Windows Vista (BETA), and everything is working great.)
7. Fine download manager (sometimes not working properly).
8. Widgets - nice, colored extension, something similar we will find in Windows Vista’s Sidebar. Useful for those who are using it :).
9. Secure - Fraud protection, popup blocker, etc.

About the Firefox:

1. Slowly start. Probably every Firefox user know about this “great” feature. I think, it is not very depended on the count of extensions.
2. Very customizable. This have its good and bad sides. You can change almost everything and use those add-ons which you are really need. However, there are many extension and you will need a lots of time to find something suitable. After installation Firefox is very “empty”, have more than IE and less than Opera.
3. Web services friendly. Yes! Especially when it goes about Google.
4. Secure. But I trust more Opera.
5. Profile files customization - same as in Opera.
6. About the rest, well, depended on how you customize it and what extension will you choose.

So, Which is better? For the very regular user, the best will be the Opera. Install and browse, you don’t have to do anything else. But if you want play with customization and you are addicted to web services, toolbars etc, the best for you will be Gecko based browser.

I’m using Firefox and Opera when I’m online and offline while I’m checking the pages. Firefox have a very helpful webmaster extensions, Google toolbar and easy cooperate with Google services - notepad, gmail, etc. - so it is useful for such a thing).

As I said at the beginning of this post: I’m using IE only for testing the pages, not for regular browsing.
Of course if you are webmaster you’ll have to have them all on your disk…

No Comments »

Space Invaders!

My first contact with “Space Invaders” was about 6 years ago. It was an assembler version found in programmersheaven.com. I think this game is a grand grandmother of all space shooter games, look at the first release date - 1978. WOW! (four years older than me :)).

Couple of weeks ago I decided to create my own version of “Space Invaders”. The code was written by me but the sprites (aliens, UFO, laser gun) is taken from the original version. Everything is written in JavaScript, with the little (read big) help of Yahoo User Interface (same as the last two games).

I had the problem with Firefox, because instead of Opera and IE, in the Firefox the use of the processor while the game was running, was very big (maybe because that a lot of loops were running at the same time). So, I have to rebuild the first project and optimize it for the Firefox. However, still you can see some delay while aliens and UFO are moving (maybe it is some proof that the Gecko engine is slower than IE’s engine :/, no it can not be!). (If you have some time you can check which browser is faster, just turn on window.setInterval(); function (three or four different at the same time) with some loops (not infinite, you can change top and left attributes of some div elements).

This game also wasn’t tested in the Safari browser. Works fine in the latest version of Opera, Firefox, and IE.

Enjoy…

Space Invaders!

No Comments »

Puzzle!

Making games (even simple games) is a challenge. The creation process is not very difficult and may be fun of course if you know what you are doing (or writing). When I have a new idea I’m asking myself if I know how to do it. This is very important thing! I have to be sure if I know how to make the key elements of the code, before writing any line I must know the algorithm which will describe these elements. So I’m making a few tests, searching for solutions on the internet, in books, or trying to figure out by myself how to create it. And the last step is writing the code (hmm, someone could say that is the first step).

Today I want to present my new project based on YUI library and Flickr API. I think the title say everything - PUZZLE. Each photo which you can find by searching Flickr, is divided in sixteen pieces and placed on the square board. All pieces are randomly set and the last piece is empty. All you have to do, is to set the pieces in their correct places by swapping empty piece with near placed pieces.

The hardest thing while creating this game was figure out how to divide images into pieces using only JavaScript. CSS give us very helpful attribute called - “background-position“. If you have image with size, for example 640×480 pixels, and you want divide it into 16 squares you have to do something like this:

640 / 4 = 160;
480 / 4 = 120;

• .square1 { background-position: 0 0; }
• .square2 { background-position: 0 160px; }
• .square3 { background-position: 0 320px; }
• .square4 { background-position: 0 480px; } - the last square on the first line
• .square5 { background-position: 120 0; }
• .square6 { background-position: 120 160px; }
• .square7 { background-position: 120 320px; }
• .square8 { background-position: 120 480px; } - the last square on the second line
• .square9 { background-position: 240 0; }
• .square10 { background-position: 240 160px; }
• .square11 { background-position: 240 320px; }
• .square12 { background-position: 240 480px; } - the last square on the third line
• .square13 { background-position: 360 0; }
• .square14 { background-position: 360 160px; }
• .square15 { background-position: 360 320px; }
• .square16 { background-position: 360 480px; } - the last square on the fourth line

This technique works well on a small images (640×480 or less), you can use it also with the largest images, however the loading time will be longer (especially in IE).

Have a nice puzzling!

Puzzle!

No Comments »

Yetris

Welcome in the new year. I spent the last three days writing another web application based on YUI (Yahoo User Interface). This time I’d like to present a very old and class game - Tetris, but because I use libraries provided by Yahoo I called it Yetris!.

I used same ideas, algorithms (maybe I should call this engine) from the code which I wrote 5 years ago. Check my post from September 22nd (2006), I showed then a simple Tetris game written by me in assembly language. The new version is written in JavaScript.

This time I look deeper in YUI documentation especially in parts that concern animation, DOM and Event, what I’ve learned you can see by playing this game (A lot or not much? :))

You can find exactly three animations:

1. Intro - brick image fade in, zooming text,
2. Game Over - falling lines fade out,
3. Yahoo YUI logo - zooming while mouse over.

I tested this game in 4 browsers (Opera, Firefox, IE 6, and IE 7) and works fine, however some unexpected things may occur. I will be grateful for any feedback about how this game works in Safari browser.

Have fun!

Yetris!

No Comments »

Plans for 2007

We are about to enter a New Year - 2007. It is the time when we are thinking about what we did wrong and right. It is an excellent time to make plans for the next year. So, I will shortly write about my plans that will concern digitalinsane.com. It’s something like digitalinsane.com to do list.

First, I want to focus more on the Yahoo services, especially on a development center, but only on JavaScript area (Ajax), I have few ideas about using YUI library. Also I will not forget about Google Ajax Search API, I’m tracking blog about this service, so if Google will add new features I’ll try to use it in my applications. It is very interesting experience building application based on a search engine, so I will play with it sometimes. Actually I’m more interested in the Custom Search Engine service and in a few other Google goodies that are not especially related with Ajax and programming. Also I would like to create few application based on Flickr API and I’ve been thinking about to make my Firefox extension and Opera widget, however I still don’t have ideas about that.

Also I am planning to create new web project, but I will not write the details right now because I have to buy a new domain, so I don’t want that someone steal the name. I can only tell that this project will be based on Ajax and I think the first version will appear in the first half of next year.

I almost forgot about Microsoft’s new OS, I just played with the beta versions and wonder when the full version will appear in shops and of course I’m curious about the price. I’m only interested in version with Aero enabled, because I heard that the very basic version will be only with standard XP-like themes…

The next year will be very interesting and I hope I’ll find the time to make all of these things and more… I wish all of you the best in the coming year! Happy new year!

No Comments »

Gproto.js library

To faster and easier build web application based on Google Ajax Search API I created very simple library - gproto.js.

Gproto.js gives you control on every part of the result. You can change the font size, font colors, background color, margins, etc., by simply assigning the style class name to specified result element. You can also put the results of each search into a different containers, hide any parts of the results, control how many results will be displayed, set the “preloader” and “not found” messages, and more…

You can download and use it for free however you have to obey Google Ajax Search API Terms of Use, because it is based on a code provided by Google.

• Documentation
• Example 1,
  Example 2,
  Example 3
• Download gproto.js

No Comments »

Image-Search

This time I used Yahoo Ajax to build my search engine. Yahoo provide more features than Google, and give us more opportunity to create better application. I’m only talking about Ajax, however with Yahoo we can build applications using Flash, .NET, PHP, Python, Ruby - see Developer Center for more information).

Google vs. Yahoo

Yahoo providing more services and more products than Google, however it is much simpler to build application based on Google Ajax. This is because when we are using Google we don’t have to care about how results are formatted, we can use standard style and put the results into some container. Yahoo give us response in XML format, so first we have to read information from XML (Same with Google when we want to use information contained in array).

I like both solution, Google Ajax gives less but it is simpler, Yahoo Ajax gives more however we need to fight with XML (It is not that hard, but we have to do that). If you didn’t see my Custom Search Engine based on Google Ajax, look here, but today I would like to present my new project Image-Search based on Yahoo Ajax.

No Comments »

Firefox 3 - Gran Paradiso Alpha 1

Mozilla has released alpha 1 version of Firefox 3 - code name “Gran Paradiso“. This version is available only for testing purposes, the full version is planned for release before the end of 2007.

Grand Paradiso uses the 1.9 version of Gecko engine and for layout and rendering - Cairo as the default graphics library. The user interface remain unchanged from Firefox 2.

The one of the important information is that Windows 95, Windows 98, Windows ME, OS X 10.2 are no longer supported platforms by Gecko 1.9 and of course Firefox 3 will not work on these systems.

Version 2.0 is the latest stable version of Firefox, Gran Paradiso alpha 1 should be used only for tests.

No Comments »

CSE and Google Ajax…

Finally I finished the new version of my custom search engine. Now it use Google Ajax Search API and lots of graphics effects and animated preloader. You can use it for searching information about music and movies, however this is only demonstration. I strove so that the code was easy to change and prepared for future implementation.

Quick manual:

When you type the query and click enter or press Search button, you will see the search results inside the panel(this may take a while depends of your internet connection speed).

Each result has its own bookmark button and responds with changing the color of descriptions when mouse pointer is over it.

At the left corner of the panel you can see vertical bar where you can choose how many results are displayed in the one query session.

The last feature you can find in the top right corner inside the panel (the red colored text) - more results… This link directs to Google page with my custom search engine, each link depends on query and the actual visible tab.

That’s all, If I will find some time I will add new features, maybe google add new ones… Will see. Have a nice play with CSE…

digitalinsane.com - custom search engine

No Comments »