I thought I had beat him; but again with christ like abilities Sankho Chaudhuri has risen from the dead to take over the #1 spot for google searches under my first name.

Wanna know who he is? Well I’m damn sure not gonna give him any more link juice. I’m pretty sure the only reason he got his #1 status back was because I gave his wikipedia page another link in the first place! Terrible.

Not sure what I’m talking about? Strangely; still wondering? Check out what happened a few posts ago.

Wondering why I haven’t written anything remotely close to web development in months? Well that’s because it’s my blog – and I can.

Seriously? I’ve been insanely busy and promise I will get some new tutorials and thoughts on relevant subjects, other than my personal crusade for a better google page rank. I also will round out the design here shortly – for those unafraid of my ugly, un-styled comment form, please leave me some suggestions as to what I should do.

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.

1.) Larger click areas using CSS -or- why display: block is your friend.

So often in HTML land, we find ourselves setting up an unordered “<ul>” list of links. Very often, we style it up in CSS with a selector of someting like “ul li a”. By default, anchor, “a”, tags are inline elements. What does that mean?

Inline elements don’t take up the entire width of the container it’s in, where block level elements do. So a lot of the time, the only place you can click a link is on it’s text, because anchor tags by default are inline elements.

But you can easily create a larger click area for the link in your lists by adding the css property “display: block;” to your “ul li a” selector for your linked lists. Look at how the backend of wordpress maximizes the click area on the sidebar by enabling this:

You can see that a user’s click area for the link has increased by some 60% by setting “display: block;”. Without it, the link’s click area is limited to the text “Library” and the background may not stretch out completely, causing a break in uniformity.

It’s a little thing but that’s what this article is about. It’s just one CSS property you can change easily to enhance the overall usability. Linked lists appear everywhere – how many sidebars have you coded under the ul>li>a format? Make them better.

One note of cross browser warning – yep, IE6 again!

Of course this isn’t that easy. Setting “display: block” to a “ul li a” selector in CSS messes up the height in IE6. And for some reason – god knows why – there’s a hack that makes no sense. Just add this code to your style sheet, or your IE6 sheet, and you’ll be fine.

“* html ul li a { height: 1%; }”

I know, makes no sense. But it is IE6 we’re talking about.

2.) Account for your audience’s screen resolution -or- horizontal scroll bars are the plague! 1024!

At work, I get to use a pretty awesome 21 inch display. At home, I have a 13.3 inch laptop – which I often hook up to a 40 inch HDTV. So personally, resolution is rarely a problem for me while using the web.

But did you know the majority of web users are on a screen resolution of 1200 x 800? Might be a bit smaller than what you’re used to. The second largest population? 1024 x 768. In fact – although my laptop’s monitor is running 1200×800, I often minimize my browser window to something around 1024 x 768 so I can view the dekstop. I have a suspicion that all the 1200 x 800 users out there in internet world work in a similar way.

So when you’re specifying the layout for your next site; try and make sure those that see the site on a 1024px wide browser see the whole site – and don’t get an annoying horizontal scroll bar. I typically set my containers to something like 960px – that way there’s some nice gutter space along the sides.

It may seem like a small thing, but a horizontal scroll bar is one of those little things that take away some class, and thus usability, from your site – just ask the legions of 1024px dinosaurs like me.

If you need some help setting your browser’s viewframe to these common resolutions, look into plugins for your browser. If you’re running on Firefox, the uber popular web developer toolbar is the way to go.

3.) Accessibility – Embrace an ever growing population of users

OK; this one isn’t so easy as the first two. But it’s a burgeoning issue for web developers and you’d only do better to get prepared now for what could be a client’s greatest need tomorrow.

Along with usability, another term that’s thrown around a bit is accessibility – this refers to making your site accessible to the largest percentage of viewers. That means not just your average web browsers – you also need to make your site viewable for those in mobile phones, those on screen readers, and those viewing the internet using handicapped devices! Let’s not forget browsers made in the future – accounting for them is also a part of a site’s overall accessibility. It’s a daunting task; but the bigger the client, the bigger the necessity.

Quick note on necessity – always judge how much a client’s traffic will be composed of those on screen readers, mobile devices & handicapped tools, and decide from there how much you want to do for accessibility’s sake. But the best approach is to try and change the way you do things regularly to account for more accessibility, but without taking more time doing what you need to do.

The good thing is that we can achieve all of this through HTML & CSS. So accessibility very much so becomes a big piece of a site’s overall usability; how can the blind use your site if they can’t readily access it’s information?

But how?

Start writing your code differently. I’ll go over a few of the topics now, but I encourage you to go out and do some of your own research as well. Just remember that to make your site usable, you have to make it accessible to as many people as possible.

Standards based, Valid HTML

Writing HTML based on best practice web standards is the only way to protect the code you write today against the browsers of the future. That’s because all browsers made from today on will support web standards, and valid HTML will always be of prime importance.

If you want to validate your HTML, look into the w3c’s very own validator. If you’re running on firefox, check out the validator plugin.

Semantic HTML

If you write your HTML semantically, screen readers should be able to read a website without any CSS and view it properly. Try taking your style-sheet away for a second – the web developer toolbar does this quite easily, but it’s possible via HTML of course. How does your site look?

Did you use header tags, so headers are clearly labeled without a stylesheet? Did you use ordered, unordered, and definition lists where they were appropriate? Did you only use tables to display tabular data, and not as a layout hack? By scrolling down, do you basically get all the crucial content that the usual browser experience delivers when paired with CSS?

Semantic HTML keeps your site accessible as well as future proof – you never know what kind of new fangled devices may start interpreting your code in the future. Get ready for them to read your content appropriately today. If you’re really into the future, get ready to use HTML5 – it will change the interpretation of the internet.

I’d be remiss to mention that semantic HTML is the #1 thing you can do improve your site’s SEO.

Descriptive “title” descriptions on anchor tags, and the like

Here’s a small, easy HTML accessibility tip – on your anchor tags, especially the navigational ones, start including “title” information. Don’t just repeat the text within the anchor tags – Write a short description of where the link is going. Screen readers and the disabled rely on this information. Again – it’s also great for SEO.

But what do I mean by “and the like”? I mean that this tip is pretty non-specific. Go out and do some of your own research to find out other quick tips for accessibility. Visit sites through a screen reader and judge your experiences – taking from the good ones. More often than not, they’re just little things you can do to make your code better.

In conclusion

Usability is constantly asking yourself – “how can I make the goals of this project easier to achieve for the people that may experience it?” It’s a lot of elbow grease type work in the end – the product of several revisions and a keen eye during all parts of the process. It is not independent to design or development. But it starts with developing the mindset of making things easier for users; and things lead from there.

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.

Disclaimer:

I setup my server to run the latest version of CentOS. I’d recommend you do the same; parts of this article require it. Since I’m guessing the large majority of readers will be running a LAMP environment, (Linux, Apache, MySQL, and PHP), we’ll be installing Plesk so all those services are setup and managed for us. I’m also assuming you’re capable to using the command line in linux. If you’re not – well, this battle got a little more uphill for you, and you’ll need to scour the internetfor those resources. And finally; I’m assuming that once you have a working version of Plesk, you’ll be good to setup your site. We’re talking setup and migration, not hand holding here.

1.) Manage your DNS settings – Point your Domain to Rackspace

Some of you guys may be good at setting up your DNS manually – but most of us just use nameservers and let the host automatically set up the rest of your DNS settings. I did most of the time at least. So here’s what you gotta do.

1. Go to your current domain registrar. Make sure you unlock your domain first. Then, set the nameservers to dns1.stabletransit.com and dns2.stabletransit.com.
2. Login to the Management area – you should of gotten credentials for manage.rackspacecloud.com when you got the confirmation email with your Cloud servers access.
3. Go to “hosting,” then “cloud servers,” choose your server (I’m imagining you set this up by now) and click on the “DNS” tab up top.
4. OK – now you need to setup your settings. Basically, you just need to copy what I’ve got below. I replaced my IP address with “Your IP Here,” suggesting the obvious. And just as implied, make sure you change sankhomallik.com with yourURL.whatever. Why the *.sankhomallik.com? That’s so we can handle all subdomains through Plesk & Apache.

Alright; now we gotta play the waiting game for the name servers to shift over. But eventually; it’ll click in. We’ll be able to access our site via the IP address. But if you’re running CentOS, there’s one crucial step you need to do.

2.) Open Port 80 (the HTTP port) on CentOS

Everything that connects to a computer does so through a port – certain ports are designated for certain things. Port 80 is the HTTP port – the port through which all browser internet communication goes on. CentOS by default has it closed – god knows why. If you didn’t use CentOS, you may be able to ignore this. But if you are, then you need to do it. Check out the link below:

http://www.how-to-linux.com/2009/03/how-to-open-port-80-on-iptables-on-centos/

While you’re there – open up port 8443 if it’s not open already. You’ll need it to access Plesk.

3.) Setup Plesk, hit the ground running!

If you didn’t already know by now, the Cloud Servers Knowledge Base is awesome. There’s a lot of detailed information on managing your server. So you should check it out, but in particular check out this one article:

http://cloudservers.rackspacecloud.com/index.php/CentOS_-_Parallels_Plesk_9.0

That guide should help you install Plesk – don’t be intimidated; it’s super easy. It may even be the easiest thing to do.

Once you’ve followed all the steps in the guide setup your domain and such.

One Word of Warning

When you setup a site or subdomain in Plesk, they ask what services you want. You know, PHP and such. One thing – when you tick off “PHP,” it gives you options of how to run it – as an Apache Module, a CGI module, and a Fast CGI module. I think those are the options.

Anyway – just choose Fast CGI and make sure you also tick off the “fast cgi” checkbox. I started running my site with PHP as an Apache module, and a few times my server got shut down for taking up too many resources. If you don’t use Fast CGI, you’ll probably have the same problems. So watch out.

Let me know if this helped you guys out!

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.

A lot of the time I’ve entered projects without knowing what they’d need. I just got my coding knives out, implement some framework or CMS, and made up things as I coded along. They’red be a lot gadgetry, animations, cool shit here and there – but absolutely no focus.

When it comes to web development & design, always think about what you’re doing before you do it! Here’s what happens when you don’t:

1. Ok, here’s a cool navigation feature I saw on the web. Let me make a header and implement that.
2. Ahh, I could use text shadow here. That’d be cool, I don’t use that too often in my CSS.
3. Hmmm lemme get a PHP script up real quick so this search field can have an autocompleter…
4. Hey an ajax updater would be a nice way to pull in fresh content…
5. Hey *client name here*, check this sh*t out. See that sh*t fade in and out? Smooth ass sh*t right there, right?
6. What’s that? You don’t know how to use it?
7. You know, now that I look at this site I just made… none of this stuff works together. Nothing’s very obvious. There’s some flash and pizazz here and there, but no continuity.
8. Ok, that’s fine… I’ll just fix… everything…
9. Fuck. I wish I had thought of what I was coding before I started coding; then I woudn’t have to REDO 50% of a project.

The bold part is to emphasize the cost of just fucking around and making a site without sitting down and giving yourself some direction to follow. The less structured your projects become, it’s all the easier for it not be a “project”: it’ll just be a collage of some cool shit you know how to do.

And you may impress your friends, but whenever traffic comes into your client’s site… it leaves. And you have an upset client who demands changes, and it’s then you realize you’re going to have to recode a bulk portion of your project. All because you didn’t take the time beforehand to figure out what this project needs to do, and how it’s user will interact with it.

So padawan? Big picture first, then slowly drill down to the details. And the details only come together to make… one big picture. Make a goal in light of your client’s need, figure out what would be successful and what wouldn’t, and then achieve it through your design and it’s implementation. Or just fuck around. The choice is yours; are you a hobbyist or a professional?

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!

First, the disagreeing: on the front end, client side – HTML, CSS, and Javascript – I can’t help but disagree. Standards based markup, separation of content & styles – all of that boring shit – is crucial on the front end. At least if you want to build maintainable, transportable, and duplicatable code. There are a number of boons past just the quality of your code – SEO is largely dependent on proper content structure, which is readily ignored across the majority of websites. But that’s why only a few have great SEO qualities.

Standards aren’t the kind of shit you can just fuckin google. You have to own them; take pride in your work, and steadily incorporate them as you grow as a developer. The immediate results are cleaner code, the long term results are less time spent coding. Not to mention less time spent on cross browser checks.

I will agree that “chill” coding works in regards to back end development – the PHP, Ruby, ASP, Coldfusion, etc etc. Here’s where the line between “coder” and “programmer” is drawn, in my opinion. We (should) use these languages to determine the information domains and logic behind our web apps etc. This is where we program the basic functionalities of our websites. It’s computer science.

And most computer science is inherently lazy. The first few computer programs simply made basic business data processing – like time sheets, payroll, etc – easier to calculate and manage than having a real person do it. That’s the computer’s initial, now cryptic interest. Making shit easier.

So why not get lazy when it comes to logic? That shit is hard, and never the most obvious. It takes research, thought, and more. There aren’t many strict guidelines to follow like there are with HTML and CSS. Sometimes the solution only comes when your brain is relaxed and unfocused on the matter at hand.

I will leave with this one thought though – I’ve been coding HTML since the 5th grade (I’m 23 at the time of writing this). I had a few breaks in between then and now, but my experience is extensive. I can look at a design and quickly judge how I’d approach coding it.

My experience with back end programming, and computer science in general, is mostly limited to basic MySQL queries and math calculations as far as web development goes, and of course all the shit I forgot from school. Perhaps, in upcoming years as I further embrace the back-end side of things, I’ll have a completely different opinion on being lazy.

It seems the more I know about something, my work will only get better with that bit of “elbow grease.” But when I’m not totally comfortable, and I have to learn, a chill, hands-not-on-24-7 approach could help. Time will tell.

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.

Ajax is now a commonly used coding technique to load data from a server without refreshing the entire page. Over the years we’ve seen an abundance of web apps with advanced capabilities, all thanks to Ajax. Can’t think of one? Think of Gmail. Facebook. Every time you do a search on the internet somewhere and a window pops up finishing your sentence under the search bar, that’s ajax.

Ajax is what currently makes the internet turn; if all these sites had to turn off their Ajax features, their user experiences would crumble. I mean, have you ever used Gmail in HTML mode? Gross.

But did you think a patent was out on Ajax? Well, apparently some knucklehead company Eolas claims to have a patent.

And they’re suing everyone you know talk about. Amazon, Google, Adobe, Apple – everyone.

Now, I’m not saying people shouldn’t profit off of their good ideas, but there has to be a line drawn.

Ownership and the internet are not friendly ideas – the internet is a messy, cacophony of sharing; ownership is a structure against that concept.

The government, if it is to decide who owns what, should make concessions. When you own something that could be more beneficial to society if it were shared than owned, then the government should stand up and say it’s not for anyone to own. More importantly – if what you own does not make any money in-and-of-itself, it’s my opinion that you own nothing.

Ajax is a technology that everyone any coder can easily use to create a Web app; it isn’t an idea that makes money, it’s just an idea that makes my job cooler.

Eolas – Stop being dicks, and please don’t sue me.

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.

OK, here are the 6 major steps to adding Facebook connect.

1. Register a new app on Facebook
2. Throw an HTML file into your site’s base directory
3. Alter your frontend to allow FBML, and add facebook connect login / register buttons
4. Alter your database a bit
5. Attach some facebook code wherever you validate whether a user is logged in or not
6. Create an additional registration page if necessary
7. Create a page to delete facebook users if they disconnect

And that’s it, as far as “connecting” your site goes. How you use the API is up to you to decide, and to figure out. Personally, I just throw in some FBML here and there to show user’s information, and allow them to Log in and Register via facebook.

I could write steps 1 – 3 over – but it’s already on the Facebook developer’s wiki, in an entry titled Trying Out Facebook Connect. Assuming you’ve made any attempts to add Facebook Connect prior to reading this article, you’ve probably done these steps as advised from the Facebook developer’s wiki already. But if you haven’t check it out and get it done. Go ahead, I’ll give you some time.

…..

…..

…..

Ok, you’re done? You’ve registered your app with Facebook? You’ve added the xd_receiver.htm file to your site’s root directory? You’ve included the buttons to allow users for you to use their facebook info? You’ve tested it out, and been able to connect to your application using your own Facebook credentials?

Good, you’re done with steps 1 through 3 and you’re ready to use Facebook connect with your PHP / MySQL web app. Let’s get started by altering that database.

4.) Alter your database

I’m gonna assume you have a “users” table in your database, or some similiar table where you hold all your user info. All you’ve gotta do is add one column to the end of this table – I call it fbid, and it’s used to hold – how did you know? Yep. The user’s Facebook ID as it appears in Facebook’s own database.

This is half of what Facebook connect does – it allows Facebook users the choice of allowing outside apps to their Facebook ID while they are logged into Facebook. The other half is held within the API, FBML, FQL, and more. Don’t know what any of that is? Check out the Facebook Developer’s Wiki.

Now, after a user has added your app to their Facebook account, you can access their Facebook ID, and retreive info from Facebook’s database using the ID.

How and when do you enter the ID? That’s step 6. We have to get the facebook ID first, early on in our App’s call stack.

5.) Attach some facebook code wherever you validate whether a user is logged in or not

Not all login systems are alike, but usually near an application’s call stack is where you find out whether or not a user has a valid session or existing cookie going with your web site. To detect whether or not someone is logged onto facebook, you have to include the Facebook Platform’s PHP API, downloadable here.

OK, so now if anyone is looged into facebook, you’ll be able to get their Facebook ID! Hopefully you put this code near where you validate a user’s authenticity, cause now you have another thing to check. Look through your database for a user who’s facebook ID value (the field you placed in step 4) matches the $fb_id you instantiated in the previous code. If you are, consider them logged in as if they had an active session or cookie. Or hell, give them a new session and log them in however you want.

Use the $fb_id for whatever FBML or FJQS you need. And you now have the power of the Facebook platform and all the functions contained within that API, all at your command. Do the research on Facebook’s developer site to find out what you can do with the API.

But how did you know what user had a Faceboook ID that matched the cookie? Remember, when they first confirmed they wanted to connect Facebook with your site, you added them into your database? No? Well we haven’t done it yet, so don’t worry too much.

6.) Create an additional registration page (if necessary)

Immediately after someone allows you to use their Facebook ID by confirming using the facebook connect button you placed on your site in step 3, a javascript callback function may be used to add more info. Here is where you take their Facebook ID and store it in your database so you can recognize when they are logged onto facebook, and thus your site.

Now you have a cboice to make – yes you can get a user’s First and Last name, the names of their friends, their marital status, their favorite books, etc etc, but you can’t get their email address. For a lot of sites, like CabCorner, an email address is required to be a user in the database.

So what’s your choice over? Do you need more information that facebook can provide you via their API, FBML, etc, or not?

If not, then you can place a simple AJAX function in the login button as the callback, like so.

On the AJAX page, use the previously instantiated $fb_id variable to get the user’s Facebook ID, and whatever else you need to put a new user into your database. From there, step 5 will work to login the user after the page refreshes. Then you can ask them to use Facebook Connect as a login authentication system!

However, maybe you need to get their email address. Then, simply change the callback onlogin function to a redirect.

Point the window.location command to another page where you setup a form to ask for the user’s email or whatever else you need to register them into your site. Just make sure to include their facebook id using $fb_id.

Create a page to delete facebook users if they disconnect

OK, so people may not want to stay connected to your app. Deal with it. Not just emotionally – you need to create a callback page. Within your facebook app’s settings page, accessible via your Facebook account on facebook.com, you can set a URL to be called by Facebook after a user decides to “disconnect” from your site.

So make a page where the $fb_id is used to login a user, then delete or disable their account, and log them out of your site.

And that’s it! If you’ve read this far, hopefully this helped. Yes, it was mostly a tutorial of hand holding – not custom coding. But now you can let Facebookers login to your site while they’re inevitably logged into facebook! Leave any comments below on mistakes I’ve made or suggestions please. If there’s a big demand, I might write a tutorial on how to tie in your Zend Framework app with Facebook connect.

Until then, happy coding!

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.

However, the recession hit strong, and now because I have very little credit (good or bad), no one wants to give me a credit card, and I can’t really afford a new Mac off of straight cash.

What’s more is those new windows commercials hits home (aka my wallet) hard. Laptops running windows are just flat out more cost-effective. A thousand dollars gets me a top of the line laptop, as long as it’s running Windows.

What does a thousand dollars get me from the apple store? Well, how about their bottom of the litter macbook. Their lowest tier laptop is the same price of a technological stud running windows.

I just can’t bring myself to buy a Mac now, no matter how cool it is, or how much better of an operating system it runs. It’s just not a good value, and I’ll always regret it. However, if I do spend the cash to get a new Windows laptop, well, I’ll always regret not getting a Mac – at least for the next few years that is.

What can tide me over for now? My PC friends, here’s the rocketdock. While it won’t make the Windows kernel any better, it will make your desktop prettier.

It’s simply a program to emulate one of Mac’s extremely user friendly ideas – the launching dock. That cool thing that hangs around the bottom of your desktop (or side, or top – your choice!) and lets you load programs quickly. 

So while I can’t buy that Mac I’ve always (the last three years) wanted, and I can’t not buy the Mac I’ve always wanted (aka buy another PC), at least I can pretend I have a mac, in an extremely superficial way at least.

Oh, and for those who hate Vista just because it gobbles up resources – the rocket dock only takes up about 5 – 8 MB’s of ram at a time.

Check it out!