Pixels (px) Vs. Em

Okay so this is a highly debated topic between what I believe are perfectionists in their own regard. Unfortunately for the other group, I’m going to take the side of pixels. Here’s why:

When I build a web site, I write code for it to be viewed on a computer screen. If I make a mobile version of that site, I write code for it to be viewed on a smaller mobile-device screen. And in both cases I believe that my site should render in a pixel-perfect manner across all browsers. Because that’s what is intended of me. That’s what I get paid for.

The W3C recommends using EMs on sites because of their scalable nature. What most people don’t realize is that most of the W3C’s recommendations don’t get adopted by all browsers, and that browsers themselves are customizable software. So there’s no way of determining the final outcome when you use EMs. Pixels on the other hand always deliver the desired results.

Pixels have been criticized of being too rigid. But that’s exactly why I like using them. Because they’re 100% reliable. And I believe that as developers, our jobs end in making sure our web sites render perfectly across browsers. It is the job of the Operating System and browser to make sure the user gets a customized browsing experience. For example, I’m pretty sure visually impaired users and users who have large screen resolutions browse the Internet on a 200% – 300% zoom on their browsers. Unfortunately, that’s where our web technology stands today. What’s the point of making fonts bigger yet images stay the same size?

Mobile devices will continue to rise as a popular means of browsing the Internet. But most “computer” web sites are not meant to be viewed on a mobile device. Either because they’re designed that way, or because there have less bandwidth-heavy mobile versions of the site available. In both cases, pixels play a significant role in ensuring a perfect browsing experience on a mobile device. One must not forget EMs are calculated based on pixels. So its more a question of responsive design than calculation of font sizes.

There definitely are occasions where EMs trump pixels in terms of them being a measure and not a unit themselves. And they should be used in those situations. I don’t see why percentage values (%) based on pixels can’t be used in those situations either.

IMHO pixels should be the standard in web development, not EMs. Not only because of their reliability and ease of use, but also because the pixel is the unit based on which a web page is actually rendered, not hypothetically rendered.

How to make a custom Magento payment extension for an external gateway

Magento is a great open source e-commerce platform and has emerged as the market leader in the recent past. However, it still has a steep learning curve and although the community is growing exponentially, I was not able to find a simple tutorial on how to make a Magento payment extension which links up to an external payment gateway.

In this tutorial, I’m going to attempt to show you how to make a bare-minimum extension, which you’ll need to complete because different payment gateways have different APIs, hooks and functionality. This is by no means a definitive guide, but my attempt to try and get you started. Please note this tutorial assumes that you already know how to build a simple custom extension and have average knowledge of Magento, MVC architecture and of course, PHP. This tutorial is for Magento versions 1.4 and above.

I have created a bare-minimum version of the extension which you need to download from the steps that follow. I hope the code will be self-explanatory. For information from Magento’s wiki click here.

Step #1: Click here to download the ZIP archive for this step. Extract it to app\code\local

Step #2: Click here to download the ZIP archive for this step. Extract it to app\design\frontend\base\default\template

Step #3: Click here to download the ZIP archive for this step. Extract it to app\etc\modules

Once you have done this, you need to follow the following steps to get it working:

1. Open app\code\local\Myname\Mygateway\controllers\PaymentController.php and read through the inline comments carefully. The URL that the payment gateway needs to redirect to on your web site after processing the customer’s payment (based on the naming we’ve used in this example) should be: http://www.yourwebsite.com/mygateway/payment/response . This URL will trigger the responseAction() function in the PaymentController, where we will need to validate the response sent by the gateway (to make sure it’s really from there), and if validated, process the order. The validation code is generally provided by the payment gateway.
2. Open app\design\frontend\base\default\template\mygateway\redirect.phtml . This is where we post our values to our external gateway. We can retrieve any order information and pass it on as hidden form fields, which is submitted via JavaScript.
3. Log into your Magento admin, clear your cache, and make sure the extension is enabled and working fine by navigating to System -> Configuration -> Sales -> Payment Methods and checking if you can see it there.

It is extremely important to go through all the files to get a perfect understanding of the extension. I figured the best way to learn this is to look at a working example. This took me a long time to figure out and I hope this saves a lot of effort for someone. Happy coding!

Do I need HTML 5 and can I use it now?

As of writing this post, the Internet is going bonkers about HTML 5 and how it is going to revolutionize the web as we know it. HTML 5 got a sudden surge in popularity in the last two years because many big players like Apple and Microsoft have started, or have promised to start support for HTML 5.

Although HTML 5 is expected to achieve a ‘W3C Recommendation’ status by 2022, many if not all major browsers have rebelled and have started to implement partial support for HTML 5 increasingly with each release. As things stand, HTML 5 is extremely shaky at the moment with different browsers implementing different features of HTML 5. This reminds me a lot of the browser wars from the ’90s, but the big difference is there no longer is one major player monopolizing the Internet, and browsers are now trying to be nicer to gain popularity. As current trends go, HTML 5 is gaining popularity like never before, and with good reason. It would be the next step in the evolution of the web.

But all that said, one extremely important question remains: Do I need HTML 5 and can I use it now? The answer to that question should be: yes, with the number of tools available, things are certainly looking up for HTML 5.

But …

Unfortunately, I would say NO. But allow me to elaborate. I feel HTML 5 is extremely unstable and would require an additional amount of effort to pull of successfully, if at all. If you are building an HTML 5 site for say, an iPhone, there will be no problem because you’ll have to check for compatibility for one device. But if you are looking to start a web site from scratch, or planning to upgrade your web site, I would recommend against using HTML 5 (as of the date of writing this post) because regular XHTML is supported across all modern browsers, and you don’t need HTML 5 today. When it comes to whether you can use it now, again, I would say NO because you can only partially use it now.

I would love to see HTML 5 become what it should be, and soon. Major players like Google and Facebook should impose a mandatory upgrade of all browsers to support HTML 5, and all users to upgrade their browsers. That would be the only way HTML 5 can see daylight anytime soon, other than the few bits and pieces which will slowly start to gain acceptance until it is released fully.

But until that happens, we don’t need HTML 5 immediately, and what’s worse: we can’t use it immediately.

Anahita Open Source Social Networking Platform finally launched

Anahita Screenshot

Have you seen that scene from the Matrix where we are introduced to Neo in his dark apartment and his computer’s searching the Internet for something? That’s how I was sometime in November of 2009. Only I was looking for the perfect open source social networking platform. I was very impressed by BuddyPress, but then I stumbled upon something that raised the bar so high that anything else just didn’t seem right. It was the Anahita Social Platform.

Despite several revised road maps, changes in technology and promises of public launch in January of 2010; Anahita is finally out.

This underrated social platform is absolutely stunning in terms of architecture, UI and overall design. What’s better, it runs on Joomla and the Nooku framework. It makes BuddyPress and practically all open source social networking platforms look very outdated.

Its demo currently requires an annoying form to be filled out and it does not have free documentation or a developer community, which would turn  about 90% of the their audience off, and I feel this needs to be looked into. But other than that, it is absolutely brilliant and I highly recommend this.

Looking forward to more developments from them!

Rich Internet Applications (RIA) and the future of the Internet

Flex

No doubt, RIAs (Rich Internet Applications) are the future of the Internet, today. There seems to be a surge in demand for Adobe Flex and other RIA frameworks which can be rapidly developed and with amazing results.

I’m going to highlight Flex, because its the best example I can think of to make my point. RIAs were built to bridge the gap between old browser technology and what is about to unfold in the next year or so. So, in short, Flex and other such technologies will be on the decline once HTML 5 is officially out. This is because one will not need plug-in RIA technology like Flex (which btw is basically Flash, and hence is the proprietary technology of Adobe).

This reminds me of an interesting person I met in a company I used to work for who mentioned that optimizing web sites for mobile phones was the future. I insisted otherwise, stating the simple fact that mobile technology was then leaning towards computer technology, and hence the market that was being referred to was very short-lived. And it has happened now.

This is on almost identical lines to the RIA surge we are seeing today. Flex, Flash, Sun Java, Microsoft Silverlight and all other proprietary technologies will have a run for their money once HTML 5 is out, and there would no longer be a need for these plug-ins to be installed on the browser.

What will remain, though, is good old JavaScript. Now, the second and more important point I would like to make is this: What can Flex, Silverlight and Java do that JavaScript cannot? Absolutely nothing. They are all exactly the same thing. Microsoft and Adobe have done an excellent job in creating a need in the market and tapping them in just the right places. But if they are going to survive the HTML 5 aftermath, they’d better come up with something spectacularly unique.

What I am heading at, if you haven’t already guessed the flow, is that JavaScript and AJAX are the best technologies to use (IMHO) in terms of scalability and in terms of availability of resources and developers (check my previous post on what web technology to use on your web site). If Google Maps, GMail,  Facebook, Yahoo, Bing, Twitter, WordPress, Banks, Airways, Railways and virtually every major player use JavaScript and AJAX; there is something obviously very wrong with everything else, right?

Google kills Internet Explorer 6!

Trash IE 6

Google is officially stopping support for Internet Explorer 6 this year. It seems all that campaigning was not in vain, and not unintelligent. Finally companies are standing up to the menace that is IE6. With GMail and other popular Google phasing out support by the end of this year, 2011 will be a very good year for the Internet, which incidentally coincides with the Microsoft D-day for the end of support for IE6. Either way, next year will officially be the end of Internet Explorer 6, and this year is the official “beginning-of-the-end” year!

This is what Google had to say:

“In order to continue to improve our products and deliver more sophisticated features and performance, we are harnessing some of the latest improvements in web browser technology.  This includes faster JavaScript processing and new standards like HTML5.  As a result, over the course of 2010, we will be phasing out support for Microsoft Internet Explorer 6.0 as well as other older browsers that are not supported by their own manufacturers.”

What web technology to use on my site?

Biggest Piece of the Cake

I think this should have been one of my first posts. If you’re making a web site for your business to showcase your company, etc. you will use XHTML-CSS and JavaScript for best SEO results.

But what if you have a bigger plan? What if you want to build a larger web application? What server-side language will you use?

The only person who can answer that is you. But you must get guidance from an unbiased source. Web developers tend to become fanatics of the language they are used to working with. It turns into a kind of patriotism. People will recommend a lot of web languages and frameworks and pull clients into what they are comfortable working with, as opposed to what the need really is.

You know you’ve picked the right technology to use on your web site if:

• It works without any hitches
• There is tons of help available on the Internet (documentation, forums, communities, open source)
• There are tons of companies / individuals who can take over half-way through the project
• It is the most popular

The last point is stressed because the more popular a technology is, the lesser the chance of you getting into trouble. We don’t want something that, only the person who developed your application and a handful of others know about, do we? We want something that everyone knows about, so we have more options to choose from.

In my opinion, the technology that falls under this category is PHP. This has nothing to do with the fact that I am a PHP developer. I migrated to PHP from ASP.NET because of all of the above mentioned. There are many skeptics and articles all over the Internet that might disagree, but I don’t want to end up red-faced in front of my clients who want more flexibility in developers, and scalability. The fact everyone will agree on, whatever the reasons might be for it, is that the number of PHP developers in the world outnumber any server side language by a HUGE number.

If you are looking to use a web technology in India, you can bet on PHP because it is about to become the largest PHP development community in the world. This means unlimited support and flexibility.

There are newer languages that boast better features, but don’t come close to the market share of PHP.

The closest example I can think of is: Would you pick a Windows PC with all its vulnerabilities and viruses for your office or a Linux-based computer? I’ve used Ubuntu Linux. I’ve never been a bigger Windows fan. I admit Ubuntu is far superior to Windows, but I felt isolated and let-down because Windows boasts a larger market share and all major software run on it perfectly.

In short, it all comes down to:  support and market share. If, in the future, some other technology can boast such a market share, I will migrate to it and recommend it.

Sitegrinder: The magic PSD to XHTML-CSS tool!

For a freelance designer, often, it is a concern that their designs don’t match the final web site. Plus there’s the additional development charge. On a tight budget one doesn’t think of things like SEO or excellent code. I found a magic Photoshop plugin to convert your PSDs to HTML!

That’s right. No coding requried. I wouldn’t worry too much about how accurate it is based on the good reviews it has gotten.

Without further adieu, here it is: http://www.medialab.com/sitegrinder/

How does it work? You just name your Photoshop layers according to what it expects and voila! HTML! There are very few PS plugins that are useful but this beats them all! Enjoy

Your web site, Flash and Search Engine Optimization (SEO)

Before we get into the details of how Search Engine Optimization works, you’ll have to answer one simple question:

Do you want visitors to find your web site through search engines?

If you answered “Yes!” to the above question, forget about a super fancy web site. That’s right. A super fancy web site (most definitely) is inversely proportional to the number of hits you’ll get on your web site. This means no Flash!

“But I don’t want my web site to look like just another one”,  you say? Well you’re not wrong. Every web site should have its own unique personality. Because every business is different. But unfortunately (or fortunately) search engines can currently only read what is readable (ie, text).

For best SEO results, a menu is supposed to look like a menu, a link is supposed to look like a link, and text is supposed to look like text. Why? Because that’s what search engines “expect” on your page. Picture a search spider like when you are urgently looking for something in the dark. If it’s your house you know exactly where to find things. But if you’re in the dark in your competitor’s place looking for vital information, you won’t get much because you don’t have all night and you don’t know where he/she keeps his/her stuff!

A search spider works in the exact same way. Each page gets a certain time for it to crawl. To make it easier for them to find stuff, search engines have given them a priority of important things to look for. If your web site doesn’t have what they’re looking for, then you have little to give them.

When your web site is built on Flash, what you’re actually doing is placing a Flash movie on a page. That’s it. So according to a search spider, its a page with a movie in it. Next!

I understand that it’s not the easiest thing to come to terms with. So it’s best if you leave the decision to your developer and designer to argue about. Because the designer would want your site to look the best it can, and the developer would want it to achieve the results you’re looking for.

The Indian Design Disaster

Chota Hanuman

India, in essence, is not one country. The implications of that fact cut through social and economic spheres. What many people don’t realize is that design comes straight out of the social sphere.

India is a backward country in most cases. It’s not unknown that trends take some time to reach us. And this is mainly through media. So, in short and bluntly put, Indian designs are only as good as what the designer watches on T.V or sees on the internet.

Our education system does not allow us to innovate, only imitate. The repercussions of this are experienced in our daily lives. We have been made incapable of making our own decisions, by our own decisions! So technically, we make sure we don’t lead, but follow.

Now that we’ve outlined that we have no culture or creativity of our own, the obvious answer to the design demand in India is: copy copy copy

Graffiti, Punk, Oriental styles, Spray-cans, “Sixties”, “Seventies”, Grunge etc. are design trends that we copy and implement in our designs and web sites every day. It is true that the world is moving towards a “global culture” and perhaps India will catch up to that sometime in the future, but my point is this:

Indian designers (print, web, mass media) are incapable of creating trends.

What’s worse, since there is so much out there, and since different designers and decision makers are exposed to different things, and since we can’t come up with our own ideas, the result obviously is: “The New Adventures of Hanuman” where Chota Hanuman fights a robot which looks a lot like one of the Transformers while an evil scientist looking for Hanuman’s locket (which btw, gives him his power) looks on; while the animation looks a lot like that of Popeye in the fifties back in “the west”.

Hatim!

That picture is a still from “Hatim” . I don’t blame you if you haven’t heard of it. If you note carefully, his entire attire (and sword) are not Indian! It looks a lot like something from… The Lord of the Rings! Here’s an article which will be a good read.

Raj - The Showman

Jack Sparrow? Are you serious?