Archive for the ‘Web Development’ Category
Sunday, May 23rd, 2010
On the web, people have absolutely no patience. Your link pops up in Google search, someone clicks it, and the stopwatch immediately starts ticking. If your company’s website doesn’t pop up in two to three ticks, I can guarantee that before the fourth tick visitors will click the back button and try the next links in the search results. Whether you are building your website or contracting it out, make sure your site loads quickly.
You can certainly use a stopwatch to time your site, but doing so is actually a bad idea. Your browser may store graphics and other items in its cache to decrease load times on subsequent visits, so a stopwatch may not provide an accurate indication of how long a page really takes to load for the first time visitors. Better tools are available. My favourite is Pingdom Tools at tools.pingdom.com, where you type the URL of the site or page you want to test and click the Test Now button. Pingdom Tool tests the page and displays the total time required for it to appear on the screen. Results also include a chart that displays the loading time for each object on the page, useful for identifying bandwidth hogs. If your site seems slow, it’s imortant to assess what is slowing it down. Fortunately, a couple of other free tools can help. To get started,you’ll need to install the following on your computer:
- Mozilla Firefox web browser
- Firebug
- Page Speed or YSlow
To test a page, open it in Firefox, click Tools Firebug, Open Firebug and then click the Page Speed or YSlow tab and click Analyze Performance (for Page Speed) or Grade(for YSlow). Both the tools list factors that contribute to site speed, flag areas that need improvement and provide recommendations for fixing problems.
BUILDING FOR SPEED
Both You can do a number of things right now to speed the performance of your website, including:
- Keep it simple. Don’t let window dressing slow your site.
- Combine Cascading Style Sheets(CSS) into a single file.
- Streamline your CSS by eliminating all unused styles.
- If your site is running on a blogging platform, install a caching plug-in.
- Trim images whenever possible.
- Specify image dimensions.
- Use CSS Sprites to combine background images into a single file.
- Avoid flash-based websites
- Move your website from shared to dedicated server or choose a more dependable, higher quality hosting service.
- Use a content delivery network such as Akamai Technologies to deploy contents across geographically distributed networks.
Tags: Clocks, Firebug, free tools, Google Inc., Horology, search results, Stopwatch, Technology/Internet, YSlow
Posted in Ajatus, OpenSource Software, SEO, Web Development, web | 4 Comments »
Saturday, May 8th, 2010
Deja Vu all over again as Google launches its new rejuvenated page with a contextually left-hand navigation to the page. A first look at it reminds me of Yahoo & collectively both look like Bing. As diverse as Coca Cola or Pepsi, the search engines are on similar lines at least in terms of look & feel.Google relaunched its web site this week. The average user will barely notice. And yet Google has never tested a change to its user interface more. (Hint: Anything that potentially messes with Adwords gets heavy scrutiny.). Along with a left hand navigation bar and the search results in middle it has advertisements on the right. Yahoo, on the other hand, features well with a left hand navigation bar, results in the middle & advertisements on the right hand side. Microsoft Bing, the cola of search engines has a navigation bar on the left, results in the middle & advertisements on the right.
Posted in Web Development, web | 3 Comments »
Monday, March 8th, 2010
 Typing is sooo yesterday. Google Gesture Search, a freshman out of Google Labs, lets you find stuff on your Android phone by drawing letters on the touchscreen as if you were jotting on a notepad. In addition to Android’s existing search by voice, image, and barcode, Gesture Search is yet another keyboardless input method for your touchscreen phone. At the very least, Gesture Search is a fun proof-of-concept; at most, it will hook a few dedicated touch keyboard haters. Here’s how it works. With Gesture Search running, you write letters by swiping your fingertip on your touchscreen as if it were a whiteboard. With each character you input, Gesture Search live-searches your phone’s contacts, bookmarks, and music and displays the results on-screen. Tap an app, contact, bookmark, or song to launch it or view the contact. (For contacts, tap the green phone icon to start a call.)
When you start Gesture Search you get a plain black screen with a cursor-like pointer on the footer. You draw your first letter, and Gestures puts it at the bottom of the screen and displays matches in your phone’s application list, contacts, bookmarks, and if enabled, your music library. Then you draw the next letter to narrow your results further.
As you can see, a letter that can pass as either an H or an A will match both. You can’t be a slowpoke while you swipe, either: Gesture Search can recognize letters that involve more than one stroke–like a T–if they’re timed correctly. That is, don’t wait too long to cross your T, or Gesture Search will think it’s an I. (Hint: If you’re consistently not fast enough, in the app’s settings set “Writing Speed” to “Slow.”)
If you want to delete a letter, you can: to backspace, in the footer, just draw a line from right to left as if you were pushing the delete key back. Then you can re-enter the character.
Typing is sooo yesterday. Google Gesture Search, a freshman out of Google Labs, lets you find stuff on your Android phone by drawing letters on the touchscreen as if you were jotting on a notepad. In addition to Android’s existing search by voice, image, and barcode, Gesture Search is yet another keyboardless input method for your touchscreen phone. At the very least, Gesture Search is a fun proof-of-concept; at most, it will hook a few dedicated touch keyboard haters. Here’s how it works.With Gesture Search running, you write letters by swiping your fingertip on your touchscreen as if it were a whiteboard. With each character you input, Gesture Search live-searches your phone’s contacts, bookmarks, and music and displays the results on-screen. Tap an app, contact, bookmark, or song to launch it or view the contact. (For contacts, tap the green phone icon to start a call.)When you start
Gesture Search you get a plain black screen with a cursor-like pointer on the footer. You draw your first letter, and Gestures puts it at the bottom of the screen and displays matches in your phone’s application list, contacts, bookmarks, and if enabled, your music library. Then you draw the next letter to narrow your results further, as shown above.As you can see, a letter that can pass as either an H or an A will match both. You can’t be a slowpoke while you swipe, either: Gesture Search can recognize letters that involve more than one stroke–like a T–if they’re timed correctly. That is, don’t wait too long to cross your T, or Gesture Search will think it’s an I. (Hint: If you’re consistently not fast enough, in the app’s settings set “Writing Speed” to “Slow.”)If you want to delete a letter, you can: to backspace, in the footer, just draw a line from right to left as if you were pushing the delete key back. Then you can re-enter the character.
Gesture Search is available for Android 2.0+ only. Search for it in the Market, or scan the QR Code below with your Android device to install it.
Tags: Android, computing, Google Inc., Google Labs, Input/Output, Mobile software, Smartphones, Technology/Internet, Touchscreen
Posted in OpenSource Software, Web Development | 2 Comments »
Saturday, February 13th, 2010
Google is having another go at a social media offering, and this time it looks like the company may be on the right track. Google Buzz was rolled out en masse this week, to largely positive reviews. The service has a few rough edges, but has quite a bit of potential.
If at first you don’t succeed, try again. Google is having a yet another go at a social media platform, this time with Google Buzz. Buzz meshes input from third party social media sites like Flickr and Twitter, and pulls in Google Mail, Google Talk, Google Reader, and a number of other features in a way that makes for a compelling platform. Has Google finally gotten it right? Buzz has a few glitches, but the final product is worth a look.
Last year, Google generated a ton of hype around Wave and plenty of people were convinced that Wave was going to be a fantastic collaboration tool that would mesh real-time and asynchronous communication and provide the next big collaboration and communication platform. Far from being the social media and collaboration tool of dreams, when Wave finally hit the beach it was with all the grace of a dead whale. In addition to the platform’s obvious technical flaws, the roll-out was too slow, giving only a small sub-section of users access — leaving many users with no one to collaborate with on a collaboration platform.
Google obviously learned a few things from the Wave launch. Whereas Google Wave was hyped out of proportion, Buzz was launched with a minimal amount of hype and announced as the company was ready to start rolling it out to users. Avoiding the long waits for invites, which hampered Wave’s usefulness from the start, was a smart move. Some folks may still be waiting on Buzz accounts, but most of the GMail users I know now have Buzz at their fingertips already. It took maybe 18 hours for Buzz to hit critical mass among users with existing Google accounts.
Posted in Ajatus, Web Development, web | 1 Comment »
Wednesday, October 14th, 2009
 Weave Mechanism Password as well as bookmark Synchronization is a thing of past. Welcome to Mozilla Weave, a Mozilla Labs project which is a tool designed to let you keep in synchronization with absolute ease & more importantly keep it secure. If you’re one of the many “road warriors” depending on Mozilla browsers, Weave is your ticket to a seamless Firefox experience across all your machines.If you only have one machine where you use Firefox to browse the Web, you probably don’t have much need for Weave. But if you’re using Firefox at home and at work, or any other scenario with multiple machines, you’ll definitely want to take a look at the latest iteration of Mozilla Weave. The project recently released Weave Sync 0.7 for Firefox 3.5 and later (including the 3.7a1 release)
Even though Weave is the answer to a lot of my problems, I haven’t been using it previously. I’d tried Weave before, but stopped using Weave pretty quickly because it seemed to make Firefox enormously sluggish. However, the most recent release seems quite snappy.
Using Weave is simple: Install the extension and restart Firefox. Then create a new account or enter your username, password, and passphrase if you already have an account.
One word of caution — you need to keep your passphrase handy. You apparently can’t recover the passphrase, only reset it and delete your data. This is a bit of a hassle if you (like me) have gone a longish interval between using your passphrase and have forgotten it. I have a number of “stock” strong passwords I use for services like Weave that I can cycle through, but passphrases aren’t terribly common — when I started looking at Weave 0.7, there was pretty much zero chance I’d remember what I used last time I set it up. I do know for certain what it wasn’t at this point, but that did me little good. Since I was only reviewing Weave and not depending on it previously, that wasn’t a big deal for me — but if you’re going to depend on Weave, make sure you have picked a passphrase you won’t forget!
What Weave Syncs
As mentioned, Weave does more than just sync passwords and bookmarks — though it does that. It also syncs history and tabs, and does so continuously. So, if you’re at home and logged into sync and surfing the Web at home, you should be able to pick up the same session at work after your commute.
Of course, you don’t have to sync all that. You can opt out of syncing certain things like history, tabs, passwords, etc. So if you want to sync history and bookmarks but don’t want to have your passwords backed up, it’s totally doable.
The data is also encrypted, so you shouldn’t have to worry about your data being exposed on Mozilla’s servers. If you’re truly paranoid, it gets even better. Individuals or organizations that would like to deploy Weave Sync without sending data to the Mozilla mothership can set up their own server. Yes, you can have your cake and sync it too!
The long term prospects for Weave are even better, though. Weave is actually being developed as a platform that will allow other extensions to sync data as well — so the possibilities for Weave are pretty exciting, if Mozilla can get the same kind of buy-in with Weave that they have with Firefox add-ons.
Finally, Weave also has a great story for mobile users. Weave also works with Fennec, the Mozilla Project’s mobile browser effort — so as users take up Fennec on mobile devices, they can sync with their desktop browser and mobile device. The most obvious advantage here is the ability to sync passwords with mobile devices to avoid retyping passwords on devices with tiny keyboards.
Overall, I was much more impressed with Weave this time around. Users who have a mobile lifestyle should definitely take the time to take it out for a road test. Some things remain unsynced (like extensions), but Weave Sync is a definite improvement over simpler tools like Xmarks.
Tags: Fennec, Google Browser Sync, Mozilla, Mozilla Firefox, Mozilla Labs, Password, simpler tools, Technology/Internet
Posted in Web Development, Web Infrastructure, web | No Comments »
Monday, October 5th, 2009
I always wondered why developers have to get reminded again & again to follow something which common sense should drive. Quite a handful of developers who are about to read this series will also question the fact that this is so very obvious to follow best practices & just a sensible thing to do. However, the ground reality is something different. Getting code handed over to me from other developers has taught me that common sense is actually quite a rarity in live code, and the “sensible and logical thing to do” gets pushed far down the priority list once you are in the middle of a project, and the deadline is looming. Its something which is spoiling the aesthetics of development.
Thus this decision to create an article which is an accumulation of the best practices & excellent advice gathered over my short but eventful career. I have amassed quite a few rather I have learn it the hard way. There will be lots of things to disagree with & that is the best thing-you should question what you read and thrive to find the better solution. But these practices have transformed me into a much more effective developer & wade me out of troubled waters whenever I felt the pressure to deliver.
This is going to be a series where I will be posting all my experiences while working with Javascript. Keep checking the posts for new articles or subscribe for RSS feeds for updates.
Working with strings
Concatenating strings has been a major issue which Microsoft has been grappling with its IE browsers(both 6 & 7) because of questions on performance due to garbage collection. As rumors suggested Microsoft has addressed this issue to some extent though not fully in its latest release of Internet Explorer 8. But browsers like chrome & Firefox have a slightly more efficient way of handling things strings.
Consider this example:
1
2
3
4
5
6
7
8
| var annualRevenue = 10000;
var longStringMessage = 'My name is Janmejay Mohapatra ' +
'I work for Ajatus Software ' +
'Ajatus Software is a web design & development company '+
'Ajatus Software is based in Bhubaneswar ' +
'Ajatus has an annual revenue of '+annualRevenue+
'Ajatus Motto is to work for the masses '+
'And create a better web' |
Instead of concatenation, use join:
1
2
3
4
5
6
7
8
| var annualRevenue = 10000;
var longStringMessage =[ 'My name is Janmejay Mohapatra',
'I work for Ajatus Software',
'Ajatus Software is a web design & development company',
'Ajatus Software is based in Bhubaneswar',
'Ajatus has an annual revenue of ',annualRevenue,
'Ajatus Motto is to work for the masses',
'And create a better web'].join(); |
Similarly, building up a string across conditional statements and/or loops by using concatenation can be very inefficient.
The wrong way:
1
2
3
4
| var primeNumbersStr = 'prime numbers less than 100:';
for (var i = 0; i > 100; i++) {
primeNumbersStr += i + ' = ' + checkPrime(i) + '';
} |
The right way:
1
2
3
4
5
| var strBuilder = ['prime numbers less than 100:'];
for (var i = 0; i > 20; i++) {
strBuilder.push(i, ' = ', checkPrime(i));
}
var primeNumbersStr = strBuilder.join(''); |
Tags: Ajatus Software, Best Practices, Bhubaneswar, client side scripting, Internet Explorer, JavaScript, Microsoft Corporation, performance, Technology/Internet, web design
Posted in Web Development | No Comments »
Sunday, October 4th, 2009
Firefox, one of the most popular browsers, can be the best tool for a web developers at work.
The following are some of the most popular and useful Firefox add-ons for a web developer:
-
FireBug: It is undoubtedly the best Javascript and CSS debugger created till date. The main components of Firebug are the console, the HTML inspection tool, the CSS Manipulation tool, the script debugging tool, the DOM inspector and the Net console. Each of these are extremely useful while creating or testing both static or dynamic web-pages. The console can be used to monitor all sorts of AJAX get or post requests, checking for headers, requests and responses sent or received in these requests, keeping watch on which script makes the AJAX call, etc. The HTML inspection tool can help check the HTML structure of the web page element by element as well as can help manipulate the styling for these elements and see the preview instantly, it also helps in checking out DOM manipulations made by the Javascript. The CSS, script debugging tools can be used to manipulate the script or the styling instantly.
-
Measure It: As a web developer it is very common that we require certain dimensions of the page we created to be measured on the fly. The only way to do this till now was to take a screenshot and use a photo manipulation software to get the exact dimension of the page. But thanks to Measure It we now can take the measurement of any page or image opened inside Firefox just by clicking and dragging.
-
Colorzilla: How many times does a web developer wish that he could use a color picker to get the color form the web page into hex. Now because of Colorzilla its possible on Firefox. Just select the color and check out the Hex code of the color in the bottom bar. The only con in this Add-on is that it doesn’t give an option to copy the hex code directly to the clipboard. But still its surely a life saver.
-
Web developer Tool: The much acclaimed all in one web developer tool for Firefox. It is a mix of everything that a web developer might need to inspect his website. But the sad part is the presence of all options makes it lesser usable and more confusing for a first time user. Anyways some of its important tools are the disabling features which can disable almost anything on a web page i.e. from images to scripts, the Cookies feature which can be really helpful for checking the behavior and values of the cookies on a web page, CSS tool which has similar features to firebug but in a worser UI, the Form tool to manipulate and inspect forms on a web page, images tool used for finding broken, half loaded images, images loaded from different domain and to disable images. There are few more additional features as well but the UI undoubtedly could have been better.
-
Resize Window: Any web developer knows 1024×768 happens to be one of the most common resolutions on which web sites need to look good but most web devs happen to have higher resolution screens so this add-on can help them to check out their website instantly on any resolution instantly by resizing their window.
So, if you are someone who is just entering the field of web development do not forget to load these add-ons onto your Firefox to turn it into the perfect web developer tool.
Tags: AJAX, development, DOM, DOM inspector, firefox, HTML, important tools, inspection tool, JavaScript, script debugging tool, script debugging tools, Technology/Internet, web, web design, web developer, Web developer Tool, web developer tools, web developer wish, web page element, web-pages
Posted in Web Development | 1 Comment »
|
