Learning Object Oriented Javascript

I’ve never considered myself a programmer. Developer yes, coder, sure, but not a programmer by any means. Although I took some computer science classes in college, I never learned the basic tenets of programming and instead always learned just enough to get by. Focusing on HTML, CSS, and jQuery has always been enough. With my new position at Incisent, I’ve had to dive into the deep end of some very complicated, custom Javascript. This code has huge custom classes, uses Underscore, fastFrag, and Lawnchair (three JS libraries I’d never heard of). Although it’s easy to fix bugs, given enough time, adding new features the “right way” requires a bit more knowledge.

A few weeks ago I saw this post: learning object oriented Javascript in 15 minutes or less and I knew I needed to walk through it. So I finally did. The best thing about this is that it was short. Like the title says, it took less than 15 minutes and I was able to understand some concepts that were always at the edge of my knowledge. So it was definitely successful.

From there, in the comments, someone linked to this short collection of OO JS articles. These obviously go more in depth and are helping to take my knowledge to the next level. Armed with this new information and I’m starting to really enjoy the challenges at work and I hope to apply what I’ve learned for some of my own after hours projects.

Blogging 101: How to Setup WordPress

Time to get started!

Okay, hopefully after reading my last Blogging 101 post, you have a set of keywords to target, have picked the best revenue channels to monetize your blog, and maybe even written a couple articles. All that’s missing is an actual website. There are dozens of platforms you could build your blog on, from WordPress.com, to Blogger, to self-hosting a Drupal, Joomla, or ExpressionEngine install. If you want to make money from your blog, DO NOT USE WordPress.com (.org is the self-hosted download). Here’s why:

Adsense, Yahoo, Chitika, TextLinkAds and other ads are not allowed on free WordPress.com blogs… In addition to AdSense-type ads, please do not use the following services on your blog: sponsored / paid posts including PayPerPost, ReviewMe, and Smorty; affiliate / referral links to the following domains: usercash, clickbank, clickhop, cashrocks, payingcash; clicktrackers (and any similar) and any promotion of the “I made a million on the internet and so can you” type of advertising (i.e. MLM, network marketing, cash gifting, etc.). Paid or sponsored post content is also prohibited.

From: http://en.support.wordpress.com/advertising/

I can’t speak for Blogger or other services, but I imagine their terms are the same. Even if the don’t prohibit ads now, it doesn’t mean they won’t in the future. By chaining yourself to a service, you’ll have to abide by their rules as long as you keep using their service. You will also be limited in which plugins you can install. Transferring to your own host isn’t impossible, but it can be a lot of work to update your URLs and any images you’ve uploaded. Skip the regrets by learning how to setup your own domain and hosting.

Ultimately the best and most recommended solution is a self-hosted WordPress site. The benefits of WordPress are many: 5 minute install, easy to use control panel, thousands of themes, plugins and tutorials. Trust me, unless you’re an expert web developer, and even if you are, you’ll be stepping into the wild if you build your blog on anything BUT WordPress.

Okay, so, WordPress. What now?

1. Get a domain, through something like Namecheap and get some hosting. There are lots of reliable hosts with dirt cheap pricing. You do not need to pay a premium for hosting. I wouldn’t spend more than $10/month and that might be pushing it. Personally I like Lithium, but I’ve also used apis networks and they were fine. Whichever you pick, start with the lowest price and work your way up as you need more bandwidth.

2. Install WordPress, theme, plugins, and setup your pages and initial posts. Here’s a list of recommended plugins. At the very least I suggest installing WordPress SEO (by Yoast) or anything that lets you set meta values and create an XML sitemap.

3. Setup Google Analytics, Google Webmaster Tools, register your sitemap with Google, Bing, and Yahoo.

What’s the best theme?

There is no best theme. There are literally thousands of very good choices and as long as you are in control of your sitemaps, your heading tags, and your URLs, it will be hard to go wrong. I would always suggest you pay for a theme from a reputable site like ThemeForestMojo Themes, or Woothemes and not by Googling “free WordPress theme”. Why? Because half the time (or more) those “free” themes have hidden backlinks or other malicious code. Not to mention the quality of the design will almost always be lower and your blog will look like a cookie cutter, spammy blog.

A professional, well designed theme typically runs $35. I always count this cost as part of the required blog investment along with domain name and hosting. Don’t skimp.

If you want a more detailed guide on how to setup everything for WordPress, including detail on most of the steps I’ve outline above, I highly recommend this post: A Comprehensive Checklist To Creating The Perfect WordPress Website

WIP – Work In Progress

As you can see, this blog is still a WIP. I’m planning to put my portfolio and resume back into WordPress. I’m actually thinking about changing “Portfolio” to “Projects” to allow me to better encompass all the work that I do. To me, Portfolio represents finished work and usually is more design oriented. As a Front-end Developer, I tend to work with sites that have most of the design already done. Not to mention some of my best work is in projects that aren’t “done” either because they were shelved or we’re waiting on the client, etc. Also projects is a little more informal, allowing me to simply blog about my work instead of waiting to formalize everything.

I’m using a free theme, which is fairly sparse, so I’ll try to add some color and icons and bits of design here and there to spruce it up. I don’t want to take much away from the content, but it needs some love.

In the meantime I’ll be making sure my sitemaps, analytics, and basic SEO is up and running. Just installed WordPress SEO by Yoast, now moving on to some contact forms (maybe Wufoo), Disqus, etc. Any other suggested plugins?

WordPress 101

I recently served as a tutor for two people I met over craigslist who wanted to learn more about using WordPress. Without knowing exactly what they needed to know going in I tried to prepare a general overview of how to develop a WordPress theme. But as it turns out, the “students” were on two very different levels, both far below what I was trying to teach. I talked a little too much and too long about template heirarchy and the WordPress codex. But once we started talking about their exact problems it was easy to provide quick answers. I think it worked out well and I hope I can do it again!

Here’s a list of the links that I provided them for future reference:

Official Documentation:

Tutorial Websites:

Other Useful Links:

Installing WordPress

A few tips:

  • Install WordPress in its own directory, below the root, with a unique name. I tend to use a password generator to create my directory name. Although the location of your folder can easily be found in the HTML of your site (all your CSS and image files will be inside it), this will be a smaller barrier against scripts that look for WordPress at the root or in common folders like “blog”, “wp” or “wordpress”. Keeping WordPress out of the root will keep the install cleaner and allow you to have sub-directories and other files in your root that won’t conflict with WordPress.
  • Do not use admin as your username. Previous versions of WordPress forced you to use it on first install, but with 3.0 you can now choose your own username. It doesn’t have to be crazy, although the more complex it is the safer it will be, but anything besides admin will be an improvement.
  • Do not use an English word as your password. Again, use a password generator. In addition, consider using a password repository to store your password in case you want to access your admin from another computer. But trying to use a password that is easy to remember probably means it is easy to crack.
  • Install the plugins and themes you want, remove the ones you don’t. Although the default WordPress theme (Twenty Ten), akismet, and Hello Dolly are probably very safe, its good practice to just remove any files you aren’t using. Don’t worry, you can download them again if you really want them. But by keeping them off your server, its fewer files that you have to worry about updating and if you ever run into security problems, you won’t have to worry about checking them.
  • Update your comment settings. You’ll probably want to treat most posts spam, only allow comments from people who have posted before, and generally make it hard for your blog to get filled up with spam. Get an akismet API and activate the plugin. Once your blog gets popular, you’ll be happy you had it all ready to go first.
  • Setup your permalinks. Despite it not being an option, category/postname seems to be the most recommended option for SEO purposes. Its also the most readable for humans. No one cares what the post date was, but if they want to find more posts in that category, its easy for them to do by manipulating the URL. It also allows people on other sites to trust the link more which means they are more likely to click on it.

Starting an Online Business

I’ve been doing a lot of research, reading, and thinking about how to make money online. I know its the magical pot of gold that everyone is searching for, but I really feel that with all my knowledge of web design and development I can come up with something that would really fill a niche need and help me start making some passive income. I just don’t know what that is yet. But some great sites that I have found that are helping me are:

  • StartupFreedom.com – this is a blog with a lot of great articles as well as interested video interviews with entrepreneurs who have made it big doing some kind of online business.
  • I Will Teach You To Be Rich – this one is more personal finance, but it does have some great posts on making money online.
  • Mixergy – just started checking this out the other day. It has tons of video interviews (with transcripts) of other successful players in the online money-making business. Its really surprising how many different businesses that you haven’t even heard of are making millions of dollars each year.
  • Killer Startups – a daily list of 15+ ideas for online start ups. This makes for great inspiration.

100% width text inputs

I’ve always been frustrated by 100% width text inputs. As soon as you add padding (which is a must), they extend beyond the width of their parent, because the browser assumes that width = 100% + padding. In the past I’ve simply set a fixed width, which of course caused problems in different browsers and had me pushing pixels for hours on end. But here comes CSS3 to the rescue! box-sizing tells the browser to calculate padding before the width. Magically, my form inputs now fill to the width of their parent, allowing me to update the design easily without worrying about breaking anything.

window.load

I ran into an interesting problem while working on a project for SiteGoals. We updated the code for an old design, moving it from tables to divs. This was relatively easy, except that the bottom divs needed to stretch to match the height of the tallest column. Sometimes that was the main content div, sometimes that was the sidebar items. I couldn’t fake it with a background image because of the quirks of the design and I’ve never had much luck with any of the pure CSS techniques, so I turned to javascript.

I found a pretty simple script for finding the tallest div and forcing the rest to match. The only problem I started to notice is that on the first load, before the images were cached, it was finding the height of the page BEFORE the images loaded, causing the content to spill over the set height. Since the site is in a CMS (Expression Engine), I couldn’t very quick add width and height tags to each image, nor could I expect the client to always do so in the future. So I had to find a way to set the height of the divs AFTER all the images were loaded. I thought this might be a more daunting task than it was. Thanks to a blog post I found, and with only a quick modification to my script, I was able to adjust the height AFTER the images and now the content no longer busts outside the fixed height of the div. Easy as pie!

Getting Real vs REWORK

I really admire 37signals for their accomplishments and their unique philosophies. I’ve read through most of their first book: Getting Real (which you can do for free) and just finished their newest book: REWORK. While I don’t always agree with everything they say 100%, they have a lot of great ideas that can push you in a different direction. Sometimes you have to take what you do, take what they suggest, and find a happy middle-ground. For example, they say

Don’t waste time on problems you don’t have yet… Do you really need to worry about scaling to 100,000 users today if it will take you two years to get there?

Well, no, but if your goal is to get that many users, you should probably take it into consideration while you’re planning your infrastructure. Obviously that doesn’t mean you go out and buy 100 servers on day one, but you shouldn’t just ignore the problem until it happens. At that point it may be too late to scale your code without massive reconfiguring.

They also advise you to always say no to new features. Well that has certainly worked for them and in theory it certainly does speed up development time. But they’ve also lost a lot of customers who want more features.

In the end, 37signals has built a huge business of these principles and a lot of the same principles can work for your own business, just make sure to take them with a grain of salt. Sometimes doing the opposite might even give you a leg up. Regardless, both Getting Real and REWORK are chock-full of great advice and I highly recommend picking one or both of these books up. Getting Real is available online, so definitely check that out before pulling the trigger on either. REWORK has a lot of the same content as Getting Real, but its a little more polished and has some great illustrations.

What It Is

I love my job; I’m relearning PHP and getting paid to do it! I just found out today that the sample database I’m building is going to turn into the actual database they use. Originally they just wanted me to see how feasible it would be to plop this gigantic Word document/small telephone book into a database but it has turned out so well that they want me to keep designing the entire thing. Since they don’t have PHP on their normal servers (and most of them don’t understand what it is), they gave me my own server to host it on. I feel bad for whoever ends up converting this thing into ASP two or three years down the road.

Since John (another student intern) left I haven’t worked on a project this big, so it’s great to be able to do something more than just cut and paste text changes on HTML pages. Aside from just designing and filling the database, I’m also creating user pages to display and sort the information and admin pages to let people who have no idea what PHP or MySQL are edit, add, and delete everything in the database. Honestly, aside from the Cult I think this is the biggest project I have been a part of and I am pretty much the only one doing the work, which is both daunting and thrilling at the same time.