Sankho Mallik's Web Log.

I use a few different browsers during my working day. To do my simple browsing, email checking, etc etc, I use Google’s chrome – because it’s fast. To do any web development; I use Firefox – because of the plugins. I can’t work without Firebug, the w3c Validator, and the Web Developer tool bar.

But near the end of a project, there comes that time to check the… other… browsers. Internet Explorers 6-8. I don’t use IE for even accidental surfing – strictly for cross browser checking. So I haven’t changed it’s settings or anything, and I’m forced to view it’s default home page.

Yeap. MSN.com.

Somehow, whenever I’m in the middle of debugging a site under IE6, I always manage to learn some new facts courtesy of Microsoft’s top notch web editors.

Bill Gates(‘ company) drops some knowledge on you:

1. The average annual salary of an janitor… in 1958. ($3,455)
2. The ever pressing issue of “Who looked hot” at the People’s Choice Awards
3. Fruit bats get kinky, just like us
4. Miley Cyrus! Not Hannah Montana Anymore!??
5. Old people get married at Whole Foods. Good old fashioned, hard hitting online journalism.
6. Does this city make my butt look big?
7. Puppy CPR

More to come!

Not a serious post, but, I am kind of a big deal.

Just wanted to let you know that I’m now the #1 result in google when you search “Sankho.”

Given the number of people I’ve ran into who share my name (1), along with the number of people I know in web development who share my name (0), this may seem like an easy task.

If it weren’t for wikipedia.

For weeks, which felt like decades, I’ve been wondering about this Sankho Chaudhuri fellow. How can a dead Indian sculptor’s wikipedia page be deemed as more important or relevant in the eyes of google than me?

Google, has though forsaken me? Even after I stopped using because I was too lazy to download a cracked copy gave up on Microsoft office for Google documents?

No longer! I now top the charts! Though I must admit that I pray that my link won’t positively affect the sculptor’s wikipedia page’s page rank, and thus invalidate this whole post by bumping his dead ass back to the top. That’d be ironic.

Front end development is all about the end user, and their experience with the website. Usability is judged upon the quality of a user’s experience while interacting with the object in question; in this question, a website.

Recently, six revisions put out a great article on usability. It took a very general view; taking concern over a site’s feature set and general design. Most articles I’ve read on the web focus on usability from a pure designer’s perspective; I’m here to drop some knowledge about how to enhance the usability of your site from a developer’s perspective: using HTML, CSS, and equality for all. Sort of a joke.

(more…)

When it comes to Magento, I’m mostly a frontend developer. I’ve written some modules – some of which I’m working on sharing with you, public –  but for the most part I stick with it’s core functionalities and just edit the template HTML & CSS files.

As such, I found myself wondering how I could add a new class name to the body tag in the HTML. I at first checked the skeleton template files in the page/ directory of the template; and it just referenced a function. After a little hunting, I found out the correct way to add a new class in Magento – via the layout files.

If you don’t get the layout file concept of Magento, you really ought to look into it. I’m not here to enlighten you about that.

Anyway – you can add new body classes on a per module basis. So let’s say we want to give all the “my account” pages a body class of… account-control. This can be very useful to add a generic style across the board to each account page that is separate from the styling of the rest of the site.

You’d need to find the appropriate module block (I believe it is customer_account) and paste the following code in

That’s it! Make sure you refresh your cache if necessary, and refresh the account pages after logging into a user account. Check the source – an additional body class of “account-control” has been added!

I wasn’t as specific as I could have been about things in this article; let me know if you have any troubles and I’ll update as necessary for all you n00bs.

Cheers

So in my previous post, I’ve brought light to the fact that I shifted servers for my site, resulting in unexpected down time.

Why unexpected? My brash, unwitting decision to jump on the Rackspace Cloud Server service. Not to say anything poor or negative about it – being on the Cloud Servers has been a fun (wait for the keyword) learning experience. And with a little work, I got my site back up.

To do so, I installed some Plesk control panel software to manage my server, just like so many shared hosting sites I’ve been on! This time though; I have complete control over the server – full root access and the ability to do whatever I want. However, I don’t really wanna do too much besides get my site up and manage my domain!

So I’ll go over the steps and point you in the right direction to get your site setup on Rackspace Cloud servers as well, and give you the ability to easily manage your site using Plesk. I’m not gonna write things out for you though, so be warned – I’ll just go over the steps and point you in the right direction to the appropriate tutorials.

(more…)

But you may have not been able to reach me for the past few days.

Sorry about that – just had a few hiccups while moving my domain + hosting onto the rackspace cloud.

I was attracted to cloud hosting by it’s price and a previous positive interaction with Rackspace through a client. Naively, without much reading and a quick trigger finger, I purchased some cloud hosting.

Little did I know I was escaping my safe world of Panels and easy DNS administration – this was a little more complicated than moving some files around.

When you sign up onto the rackspace cloud, you’re literally portioned off a bare bones linux machine. You choose the distro; and that’s it. Everything else you have to setup yourself. A little daunting for those of us not totally comfortable setting up our own servers; not all developers are necessarily IT guys, and I certainly am not.

But as you can see, I made it out alive and am posting again! Will provide further details in a “5 minute” tutorial of how to get your website up and running on the rackspace cloud servers in no time!

For me, one of the most annoying things about Magento is the fact that the home page needs to be written in the Admin’s CMS. For that matter, any “custom” page you wanna build in Magento has to be done through the CMS.

I heart my text editors, and I hate writing HTML code into a CMS. It’s just not friendly. Tab indenting is impossible; if you hit tab your browser thinks you wanna select the next button! Think a textarea is gonna give you code hinting? Forget it!

Futhermore; I’m not a big fan of hosting files whose code I must edit regularly within the database. It’s just not practical.

Brad Frost recently blogged about the power of using Magento’s CMS blocks. I’m gonna take it one step further – let’s use the short code Brad Frost shows us in his blog to create custom pages that we can control through PHTML files in our theme; not code that is stored in the database. All you have to do is follow these steps:

1. In the backend, create a new CMS page. Make sure to choose the appropriate layout (in the sidebar, click “custom design”) and enter in the page’s title, as well as it’s URL reference.
2. Instead of writing your code in the textarea, stick this guy in there:
   {{block type=”core/template” name=”yourPageTitle” template=”cms/custom/your-file.phtml”}}
3. In the above line, replace “yourPageTitle” with your page’s title – this isn’t terribly necessary, but good practice.
4. More importantly, replace “cms/custom/your-file.phtml” with the directory that your PHTML file will be stored within the template folder of the theme you’re using. I store all my files in the “cms” folder under the template folder, and I created a folder called “custom” to store all my custom PHTML files. You can do the same or choose your own path; whatevs.

And that’s it! Save the page within the CMS, write some code into the PHTML file, and you should now be able to visit the URL you specified and see the code you wrote OUTSIDE of the CMS!

Just read the latest article at Fuel your Interface entitled “Three Big Mistakes that Can Make or Break your Design Career.” Super informative; one of the three tips were to never sit around waiting for work to come – go find it! In this day of social media, personal branding, and transparency, there’s no reason to wait for anything. Go out and get it!

The third tip was to not stretch yourself thin. I’ve personally committed this foul many a time. And everytime, it results in me stressing out, having a lesser quality of life (dramatic, but serious), and most importantly, my work suffers in one of two ways: It’s either terribly late or not as good as it can be. And both of those are unacceptable flaws; so don’t ever take more work than you personally can handle! Try to find someone who you can outsource work to; they may come back to you with work just when you need and don’t expect it.

But the second tip really interested me. Jokingly, it’s referred to as the “Garmon principle” – Garmon being some friend of the author (sorry to belittle your existence, dude named Garmon). From the article:

The first thing you should do is close your laptop, put away your cool bag of tricks, and think. Think, “What would be the perfect site for this? What would it look like? If there were no boundaries, what is the coolest thing, or the most functional way, to make this happen?” Also think, “What will make this worth existing as much or more than the next guy’s interface?” Once you have decided what the best possible solution would be, figure out how to do it. If there is something in your original idea that just simply isn’t possible, then amend it. “Re-idea,” if you will. But never, ever, EVER sit down and start doing things simply because you know how to do them. Because the truth is, no one really cares how much you know about coding or development. The people who are looking at this site aren’t thinking about what it took to make it, or how many advanced lines of code you wrote. They’re thinking about how it is now, as a whole.

So much sense! My feedback after the jump.

(more…)

Yeah, sure, I’d love to see all IE6 users stop using their browsers too, but that’s not what I’m proposing here for IE8 users.

IE8 is a huge improvement in comparison to browsers of the past. Unfortunately, it’s still another browser that we web developers have to perform a cross browser check.

What’s even more frustrating is that IE8 comes with a “compatibility mode,” where users can force IE8 to render code as if it were IE7. This is of course to “make up” for developers who didn’t check their code in IE8.

WTF would Microsoft ship a new browser, with the option to have it act like an older browser? Makes no sense to me; however, I WILL take advantage of this fact to save me time in producing a web site.

Just stick this meta tag RIGHT BELOW the opening head tag. Anywhere else and it’s libel not to work.

And that’s it! If you were having issues in IE8 but NOT IE7 – have issues no more. This meta tag forces compatibility mode to be “on” for whoever browses this site using IE8, and renders the code as if it were IE7. If it’s working, you should not be able to click on the torn page icon for compatibility mode on the right of the url bar.

Correct:

Incorrect:

So now, all you gotta do is make sure your code is Kosher with IE7 – if that’s true, then just stick this meta tag in and not worry about IE8!

Note to Microsoft: Just adopt webkit already! Let me use my rounded corners in your market share majority browser damnit! I’m sick of all this alpha filter crap! If you can do that for IE9, I’ll stop ignoring IE8 developments completely.

I spend most of my working hours on the front-end side of web development, so I tend to be pretty anal about… everything. Work related, that is.

So my buddy Neil Sarkar recently wrote about being lazier when it comes to programming. Though there’s some wavering of topic, the main idea is that as programmers, it’s not so important to know everything all the time – it’s more important to know what you need, when you need it.

This is all based on the premise that everything you don’t know – or used to know – is only a Google search away.

While reading, I found myself agreeing and disagreeing all at the same time. Or maybe separate times. Anyways, more past the break!

(more…)

Skip reading me, and read Brad Frost’s review of the book to your left.

Magento is a beast. While it continues to pickup accolades for it’s robust e commerce feature set, developers round the world can’t help but find it difficult to work with.

As someone who’s been working with the system for some 6 or so months now, I’m nowhere near an expert. But one thing I know, is that unlike other CMS’, you can’t just jump right into it… not easily at least.

With wordpress, I started learning how to make custom themes + plugins before I really embraced blogging with it myelf; and for the most part this was fine. By the time I started blogging myself, I already knew the ins + outs of the whole system via development.

This just isn’t true with Magento. Even after I had figured out the difficult things like how to customize a theme, or how to make a extensible module, I was still learning about how the system did what it’s supposed to: manage products.

Packt publishing recently put out a new book on Magento, giving it the title of “Beginner’s guide.” If you’re just getting into Magento, or considering making the jump, this might be agreat read for you.

But don’t take my words for it. Read Part 1 of Brad Frost’s review here.

Whenever I see pictures like the one to the left, I wonder how long it took the designer to do.

But that’s because I’m stupid, and often forget that I’m something of a computer programmer.

Check out this site Wordle. It’s f*ckin awesome. Just enter in your own text, or choose a url to read text from – the image I made off of their site is in fact generated from text off of my blog.

It takes seconds, and there are a bunch of font / color / styling options. And all of them = awesome.

Oh yes - There will be lawsuits.

This has to be one of the more absurd (internet related) schemes for profit that I’ve heard. But it does bring me one step closer to a real life version of that scene in hackers when the feds bust into my apartment to arrest me. Or maybe a different, more lawerly, subpoena-eee version of that story. Keep reading.

(more…)

UPDATE c/o of Brad Frost – Doing this will invalidate your CSS! However, this is appropriate because 1.) We know exactly what is keeping our CSS from validating and 2.) We did it anyways to get something we want to work in another browser.

This is one of the few situations where it’s ok to ignore the ! in your web developer bar.

——————————————————————————-

So I made a slight joke about progressive enhancement in a previous post, but let’s be real for a second: If you could easily get all your site features working the same way in every browser, you would.

Well, as far as IE6 – 8 go, you can get opacity to work. Normally we’d code opacity into our stylesheet like so:

It’s super easy to get this CSS rule to comply in IE6+ – but it does involve the inclusion of another CSS invalidating Microsoft filter effect. However, it’s really short and easy to remember, so there’s no excuse for not having opacity affects / rollovers in IE!

And that’s it! Whatever you wanted to be transparent will also work in IE6+! Obviuosly, instead of “0.6″ you’d type in “60″ for the filter rule.

There are actually a bevy of cool features available via Microsoft’s filter rule… too bad it only applies to their browsers, selfish bastards. Here’s a great post containing a lot of CSS2+ matching rules to Microsoft’s filters.

So, until Microsoft buckles under the ease of Webkit, at least get your opacities to be cross browser compliant, people!

Honestly, it’s not that Microsoft makes IE. It’s just a shitty browser. Every rendition.

IE8 makes the furthest step away from mediocrity, but here are my major two gripes: No webkit support, meaning I still have to use a rounded corners plugin to get things done. And really – why have a compatibility mode? I don’t even test for IE8, I simple include a meta tag, which I’ll probably write about in a later post.

Anyways! It appears IE is dying, in small margins, but death is a slow process. Check out the article at CNet for more.

http://news.cnet.com/8301-30685_3-10388289-264.html

So recently a client had me upgrade their copy of Wordpress from 2.6.something to the latest 2.8.4. Things went fine; themes and plugins didn’t need updating, but the next day I got an email complaning about how the posts weren’t publishing at the times they were set to, and were returning a status in the admin as “missed schedule.”

It took me a LONG time to figure this one out. And I didn’t really figure shit out, but finally found the appropo hack at this forum. Just reposting what you gotta do to get this working; for some reason it’s not posted everywhere. There are some other ways of correcting what’s going on; but if you don’t have root access to your hosting server like I don’t, you gotta figure out a way to make it work with just code. Here’s a line that’ll do it for you; place it in your wp-config.php file.

- Taken from Otto32’s comment on the wordpress forum, check it out for a great explanation or read my shittier one below:

Basically, there’s a file called wp-cron.php that’s called everytime wordpress loads, and runs anything that’s scheduled; from the future planning of posts to some plugins that use the schedule feature. Every time someone hits your blog, if it’s been a long enough time since it’s last run, wordpress sends a request to wp-cron.php.

If the posts aren’t publishing, it may be the way your server is reacting to an HTTP request from itself. So you ahve to use a different type of request, by putting the above code into your wp-config.php. There are ways to alter your server to accept requests from itself; but for my client, I didn’t have root access, and only could edit the wordpress code itself. So this fix is certainly better than others.

Let me know if it helped.

Gotta love that Wordpress. It seems like instead of doing a real, thorough QA, they rely on us to bitch and wine when shit doesn’t work until a.) one of us figures it out, or b.) we complain enough until they figure it out.

Then again, at least it’s a pure open source solution, unlike those greedy bastards at Varien who decided Magento was worth more than the price of a growing community.

But again, I digress.

So, are you among the dozens in this post that can’t upload their images after installing the new Wordpress v 2.8?

Me to. At least I was until I figured out a small solution. I commented on the above post with the information below.

In the wordpress admin, go to “settings,” then “miscellaneous.”

The first input field should be for the directory to which you store your images… for me it was the absolute path to my wp-content/uploads directory so it looked sort of like this

/a/lot/of/directories/until/blog/wp-content/uploads

And that was the error… simply replace whatever is in those fields to

wp-content/uploads

Notice there is no backslash at the beggining! As long as you’re storing your files in the same directory as any normal wordpress user, this ought to work. Basically the trick is to not use the absolute path to the folder and just use whatever folder is under the main wordpress directory.

Make sense?

If this hack manages to work for you, let others know! Or, if it didn’t, let me know so I don’t feel so good about myself (this can be accomplished with numerous other approaches as well).

Honestly, it’s pretty easy to do. But when searching for documentation, it wasn’t easy to find exactly what I wanted to do, so I figured I should blog about it.

What I needed was a way to easily connect my existing web application with facebook connect. What’s Facebook Connect? In a nutshell, it allows users to log in and register to your site via their facebook credentials. Here’s some more in – depth detail if you’re looking for more information; this tutorial assumes you know what the deal is with Facebook Connect and want to get it onto your application soon.

I added facebook connect to a site running PHP and using MySQL for the database; this tutorial assumes you will be doing so as well. I used Facebook’s PHP API to connect my site, and the same goes with that. If you’ve ever build a facebook application before, you’re familiar with Facebook’s API.

The last assumption I make is that you have already built a site with a full user login system, your site allows cookies, and caters to javascript enabled browsers. Basically, you built this site of yours after 2002 or so.

After the break we’ll get to it.

(more…)

I’ll admit it; I’ve used PC’s all my life. I’ve been a slave to Microsoft ever since I can remember typing “win” into a dos command line to fire up a brand new installation of Windows 3.11.

Of course it's a Macbook! Can't you see the apple?

But times have changed, and I’ve grown more and more jaded with my relationship with Microsoft. Lately, things have taken a turn for the worse. The relationship has gotten pretty abusive ever since Vista got involved. We’re seeking counseling by way of a hard drive format and bootleg copy of XP.

And though I’m faithful, I can’t help but be jealous of my friend’s Macs. The slick interface, the lack of bugs, the UNIX based filesystem – it all looks so SEXY from this side of the error-prone, “ten-yarder” type of beauty on Vista’s yard. After getting an iPhone, I was resolved to save my money and get a Macbook down the road.

(more…)

After developing database driven websites for awhile, a few common issues come up.

USA! USA!

One of them is getting all the states of the US & their abbreviations into the database, most likely for some sort of user registration. This was exactly the problem I faced a little while ago.

And like anyone who learned the majority of their internet skills on the internet itself, the first thing I did was a google search, and found this blog post at firewall pro.

It contains a CSV and SQL tables to easily input into your database all the U.S. states and their abbreviations, so you don’t have to.

Thanks goes to Scott for publishing the work so we can get back to actual programming!