Jim Barrett's Blog
Jim Barrett's Blog covers design case studies, tutorials, and op-ed on the web design industry as a whole. Jim is also an amateur chef, so every once in awhile you might find a recipe for really good stir fry or a tasty salmon dish.
Aliso the Geek
Aliso the Geek is Alison's development blog. It focuses mostly on WordPress development, but includes information and opinion on many other programming languages. It's also the home of the popular WordPress plugin, SimpleMap, and its support forums.
From Alison ⋅ March 10 2010, 3:16 am
The most common searches in the search engine traffic to my site (from Mint).
I’ve had Mint installed on my website for a while. I like the up-to-the-minute stats, so I can sit there and watch the page refresh every 2 minutes and see the numbers change.
I’ve also known about MintPopularPostsWP for a while, but I’d never used it before. It uses Mint to determine your most popular posts by page views instead of the number of comments. (Way more accurate!) Notice I have the list of popular posts in my sidebar now.
One of the things that has blown my mind about my blog is that second most popular post being so popular. My Big Nerd Ranch posts get a lot of traffic because they linked to my blog as a review of the class I took, but that doesn’t explain the other post’s abnormal popularity. I didn’t write a lot of iPhone posts after my trip to the Ranch, so it’s not the general focus of my blog anyway; I’m known more for my WordPress stuff. So how does this post pull traffic from any remotely related Google search for this iPhone code?
Well, it happened through the magical algorithms that search engines use to determine ranking. The more hits a page gets, the more reputable it is to a search engine, and the higher it goes on the list. The higher it goes on the list, the more hits it gets. The more hits it gets, the higher it goes… and so on. Somehow my page became the #1 search result on multiple search engines (check out the images below).
I’m not trying to brag or complain here. It’s just really weird that a blog about WordPress programming gets the majority of its search traffic from one little iPhone development post. Don’t get me wrong—traffic is good—but this little quirk is also responsible for my blog’s high bounce rate.
Anyone else have a weird search engine experience to share?
Related Posts
Facebook
del.icio.us
Digg
Reddit
StumbleUpon
Technorati
MySpace
LinkedIn
From Alison ⋅ March 4 2010, 3:07 am
Remember back when I wrote a post explaining how to make a dynamic duotone-effect pages menu in WordPress? Well, I turned it into a widget. Now even the not-so-code-savvy can put a chic duotone page menu in their sidebar.
Head over to the WordPress plugin repository to download it (and rate it)!
The widget control panel
Related Posts
Facebook
del.icio.us
Digg
Reddit
StumbleUpon
Technorati
MySpace
LinkedIn
From Alison ⋅ February 24 2010, 6:36 pm
I’ve been post-less for a little while, I know… Life happens, things get busy, you know how it is.
For now, I’m posting a Sugar I made for Espresso. For those who don’t know what I’m talking about, Espresso (by MacRabbit) is a web developing program that I’ve been trying out. It’s been the only thing sweet enough to get me to switch from Coda. Extensions for Espresso are called Sugars.
I made a Sugar for WordPress template tags. There had been some interest in one on the MacRabbit forums, but none had been made yet. I figured I’d give it a shot.
It contains CodeSense/auto-completion for all the WordPress template tags listed here. I haven’t done the conditional tags yet, and there are still some core functions left out. Rest assured they will be included in an updated version, soon.
Updated in version 1.1:
- Added all the functions in the Function Reference (includes conditional tags)
- Added snippets:
- The Loop
- A custom loop
- Dynamic page title (404/archive/page/search/etc.)
- register_sidebar function & parameters
- HTML stylesheet link
- Theme info header for style.css
- Quick reference of query_posts parameters (a huge commented section of code, listing the parameters from the query_posts Codex page)
- Fixed weird autocomplete behavior after typing an underscore (either not continuing to complete, or starting the match over again)
Here it is:
Related Posts
Facebook
del.icio.us
Digg
Reddit
StumbleUpon
Technorati
MySpace
LinkedIn
From Alison ⋅ February 15 2010, 2:01 am
ColorBoxes admin view
ColorBoxes is my latest WordPress plugin, allowing users to easily insert alert-style messages (just like the one above) at the top of any page or post. Just like SimpleMap, this plugin was born out of a need on a client’s website. I needed a foolproof way for these alerts to be made without going into the HTML editor and making <div> tags with custom classes.
It works by setting post meta values, just like a Custom Field would. It’s lightweight, fast, and easy-to-use. Go ahead and download it here!
Related Posts
Facebook
del.icio.us
Digg
Reddit
StumbleUpon
Technorati
MySpace
LinkedIn
From Alison ⋅ February 11 2010, 11:05 pm
I have recently (in the past few months) purchased a few excellent books on WordPress, WordPress development, and web development in general. I must say that after reading these, I am a little embarrassed at some of the code I’ve put out there in older plugins and themes.
I recently had the privilege of rebuilding the website for Minnesota Voters for Animal Protection, and developing the site in WordPress opened my eyes to a lot of tricks, shortcuts, and standards that I hadn’t used before.
In the spirit of learning new WordPress development techniques, I thought I’d share the ten resources I use the most. These cover a lot of best practices that are a great baseline for solid plugin & theme development. Here they are, in no particular order:
This might be the most-clicked bookmark on my computer. It’s such a fantastic, quick reference to look up the arguments/syntax/existence of almost any WordPress function.
I feel lucky that my coding style matches that of the WordPress team almost completely; I had very few adjustments to make. Developing for WordPress in their coding style makes your code easier for others to read and modify later (if you’re making open-source stuff). Also, if your style is all over the place, this will help you achieve consistency.
I keep this bookmarked because it links to the pages in the codex I refer to the most. The list of filters & hooks, and examples of their syntax, is especially helpful for me.
This is the most concise and easy-to-follow guide on this topic that I’ve seen.
Smashing Magazine is a fantastic place for finding useful, plug-and-play code snippets that might change the way you develop forever.
More great stuff from Smashing Magazine, this time focusing mostly on the admin area.
I wanted to list a lot of these posts, but then my entire list would have been Smashing Magazine articles! Here’s their list of WordPress posts.
Like Smashing Magazine, there are a lot of code snippets here that work very well for specific things.
This website is a great resource for unlocking more advanced, CMS-like functionality in WordPress. Their book is one of those I mentioned at the beginning of my post.
This might be how I learned 99% of what I know about WordPress development, whether directly or indirectly. You’d be surprised at how quickly you can find what you need by searching for a function name or throwing “wordpress” in front of your keywords.
Refer back to these sites often! The blogs update frequently, and the codex entries are great standards to keep bookmarked in your browser.
Related Posts
Facebook
del.icio.us
Digg
Reddit
StumbleUpon
Technorati
MySpace
LinkedIn
From Alison ⋅ February 7 2010, 3:44 pm
9.5 out of 10
Mass Effect 2 is the long-awaited sequel to Mass Effect, a fantastic RPG from Bioware. The wait was well worth it! Mass Effect was quickly my favorite video game of all time when it came out, so I had high hopes for the sequel. It met and exceeded all of my expectations.
Just as in the first game, Mass Effect 2’s story blew me away. While the storyline in Mass Effect felt important (in that you’re saving the galaxy from an enemy), this one felt dire. The immediate threat is only to humanity, but it implies there is something much bigger happening behind it. Through dialogue, side missions, and interaction with the man funding your existence, this story pulls you in even more than the original did.
And don’t worry, this entire review is spoiler-free. Anything that wasn’t made really obvious by the advertising is left out.
Story and Team Members
Thane is a cold assassin with a surprising story to tell.
Both your new squad members and the NPCs in the game are more interesting and have deeper stories this time around. You start the game working with Cerberus, a radical pro-human splinter group trying to stop human colonies from disappearing. For those that did side missions in the first game, you’ll remember Cerberus, as you destroyed several of their bases looking for Admiral Kahoku and his men. Your character in Mass Effect 2 remembers them as well.
You have to assemble a new team, because it’s been two years since the events of Mass Effect and your old team members have gone their separate ways. (The reason for the two-year void is explained early on in the game, but I won’t spoil it here.) A huge portion of the main plot missions in the game is actually devoted to recruiting these new team members (there are 11 this time, not just 6). This makes each team member feel much more important and much more unique. My personal favorites are Archangel, a vigilante from an anarchist space station, and Thane, a very surprising assassin. Trust me, the fact that they are both romantic options for a female Shepard is not the reason they’re my favorites.
Your original crew members do make appearances in the game, and a couple even join your team again. If Wrex survived the first game, his entrance in Mass Effect 2 is easily the best reunion of them all. Playing through that scene in the game left me with a huge smile plastered on my face.
Talking to your team members outside of missions is even more enjoyable this time around. Instead of just three of your team members having side missions, all of them have “loyalty missions” that, when completed, allow them to open up to you a bit more and trust you as their leader. These missions can play a role in their survival and yours, so doing them is a good idea.
Gameplay
Jack, a.k.a. Subject Zero. She's just as badass as she looks.
Combat
All of the annoyances of the first game seem to be completely gone in this one. The combat, especially, is greatly improved. It has a much quicker flow and doesn’t get interrupted as much by your power wheel, since you can map three controller buttons to powers now instead of just one. Your squad is also smarter and faster: They will move out of the way if you’re lining up a shot with them in it, and they will take cover as soon as they’re under fire (usually). You also don’t have to fight with them for cover—they will move out of the way for you.
The combat AI being better applies to enemies, too. They’re smarter at dodging your shots when they see you aim, at flanking you as quickly as possible, and at activating emergency shields when they’re almost dead. It’s a pain in the butt on Normal difficulty, more of a pain on Veteran, and extremely frustrating on Hardcore. I haven’t tried Insanity yet. Of course, all this just makes it much more satisfying when you win the battle.
Instead of worrying about your weapons overheating, you’re using a more conventional ammo system with your weapons. Technically it’s not ammo—it’s thermal clips that you eject to prevent the weapon from overheating—but it works just like ammo would, and gives you an ammo count based on the number of clips you have. Ammo upgrades are replaced by ammo powers, which you can apply to any or all of your weapons. Some ammo powers can even be evolved to apply to the entire squad. When you turn on Squad Disruptor Ammo when you’re fighting synthetic enemies, it makes you feel a little sorry for the Geth you’re tearing apart.
Dialogue & morality
Dialogue got an upgrade, too, with the new Interrupt system. During certain scenes you will get a chance to interrupt the conversation with a dramatic response, either Paragon or Renegade. Sometimes, the morality choices you’ve been making thus far determine which type of interrupt it is. These dramatic additions are really fun to watch, and it takes a second playthrough (or more) to appreciate what happens if you make the choice you didn’t make the first time.
Morality is still determined by dialogue and decisions, but unlike the first game, you can get both Paragon and Renegade bonuses in the same conversation. You can build up both meters to a pretty high level (my first playthrough, which didn’t focus on one side or the other, got almost 80% full on both Paragon and Renegade meters). The availability of Charm and Intimidate options in dialogue are determined purely by these meters instead of skills you have to spend points on. This is another thing that makes the game feel more natural overall.
A little bonus to the morality choices is something that has been in other games before, like Infamous. When you consistently make Paragon choices, your face (which begins the game with scars) will heal over time and eventually show no scars at all. If you choose the Renegade path, your scars worsen (and because of the type of injury and repairs you have had, the cybernetics in your face glow red). You could end up with a really evil-looking Shepard.
Equipment
One of the best fixes in Mass Effect 2’s gameplay was the removal of the inventory system. There aren’t 100 different weapons or armor you can get in the game; there are only a few weapons of each type, and their effectiveness more or less scales with your level. Also, they’re applied to the entire squad at once. This means when you find the upgrade to your pistol, your entire squad automatically uses the better pistol. Armor is a little different. You can buy armor upgrades, but they only apply to you. Instead of being new suits of armor, they are pieces of armor you can swap out—different greaves, helmets, and chestpieces, for example. You can also customize the look of your armor with different colors, materials, and patterns.
The Final Mission (spoiler-free, don’t worry)
This image is the closest thing this review has to a spoiler.
There has been a lot of buzz over the final “suicide mission,” and with good reason. It’s unlike anything you’ve seen before in either Mass Effect game. The decisions you make throughout the game, the squad members you choose for certain tasks, and the upgrades you’ve gotten will all play a part in the outcome of your mission. You can get any number of endings—you could all survive, you could all die (including Shepard), and anything in between. Something I had read in advance was that this was a “permanent death” for Shepard if you don’t make it. While I’m not sure how true that is, since I haven’t had a Shepard die yet, for the other team members’ survival you can reload the game to before they died and try again.
I strongly encourage anyone who has yet to play the final mission to not look anything up beforehand. Experiencing it with no actual knowledge of what would happen was like being part of an intense action movie where all bets were off. My husband and I were literally gasping and shouting at the edge of our seats during some cutscenes. Once you get through it the first time, looking up the possible consequences of certain decisions will help alleviate your confusion if one of your squad seems to randomly die for no reason. (Yes, that happened to me. A loud “What the hell?!” was heard throughout my entire home.)
Importing a Mass Effect 1 character
If you haven’t played the first Mass Effect, but you want to play Mass Effect 2, I recommend buying the first game and the official guide to it, and blasting through it in 8 hours or so, doing as many side missions as you can. The rewards (or consequences) of a lot of the side missions you did in the first game will show themselves in this one. Surprise visits, happenstance meetings, and even out-of-the-blue emails will make you stare at the TV with your jaw on the floor. Some will be from small decisions or side missions, and others will be from huge choices made during plot missions of the first game. The best ones will leave you wondering how many geniuses work at Bioware.
In addition to the extended depth of the story, you will get simpler bonuses for importing a Mass Effect character, such as extra resources, extra credits, or even starting at a higher level with some skill points to spend. If you play through this game with a fresh character instead of using an import, you are doing yourself a disservice.
In Conclusion
Overall, I’d give this game a 9.5/10. It would be a perfect 10 if not for a few quirks here and there, like the tediousness of scanning for resources so you can buy upgrades, or the occasional clipping error that gets your character stuck in plain sight during an intense firefight. If you like RPGs in any way, shape, or form, you need to play Mass Effect 2.
Related Posts
Facebook
del.icio.us
Digg
Reddit
StumbleUpon
Technorati
MySpace
LinkedIn
From Alison ⋅ January 30 2010, 4:11 pm
As I work on my first playthrough of Mass Effect 2, I’m taking notes to post my own review of it once I’m done. In the meantime, here’s a great video I came across on YouTube that applies the rules of Mass Effect to day-to-day life. My favorite things in particular are the jogging and the conversations. This guy nailed it!
Related Posts
Facebook
del.icio.us
Digg
Reddit
StumbleUpon
Technorati
MySpace
LinkedIn
From Alison ⋅ January 27 2010, 8:29 pm
*JUST KIDDING…
…but developers, seriously, get crackin!
Related Posts
Facebook
del.icio.us
Digg
Reddit
StumbleUpon
Technorati
MySpace
LinkedIn
From Alison ⋅ January 23 2010, 10:58 pm
I just finished making a new print stylesheet for AlisotheGeek.com. For any website with a sidebar or a background image, print stylesheets are essential. Using “File » Print” is so much more intuitive for users than searching for a “Print this page” button on a website, and creating print-friendly versions of all your pages is a tedious, time-consuming task (especially if you have a blog). A print stylesheet is an elegant alternative.
Set up a print stylesheet
For those who don’t know how to make a print-specific stylesheet, it just takes the addition of one attribute to your CSS links in the <head> section of your site:
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
The “media” attribute tells the browser to pay attention to stylesheets only in those situations. Add ‘media=”print”‘ to your stylesheet link for a print stylesheet. If the “media” attribute is left out, that stylesheet is called in all display situations, including print.
Hide unnecessary information with display: none
In the case of my website, I decided to hide things like the sidebar, the email subscription form, and the social media/bookmarking links at the end of each post. Do this with a simple display: none; at the top of your stylesheet. The user isn’t trying to print out your sidebar; they’re trying to print the article they just read.
Add back any global styles to make your printed page match your website
This step is only necessary if you left your main stylesheet out of the mix for printed pages. You will probably want your fonts to be the same on paper as they are on a screen, so make sure to re-insert those styles in your print stylesheet. The same goes for classes that apply global formatting to elements, such as floating images left or right.
Add extra information to your website to display only in printed pages
On my website, you’ll notice that the only thing in the footer is the copyright statement. When it’s printed, the URL “alisothegeek.com” appears in the right side of the footer. This is something I added in my footer (you can see it in the source code) and I set it to hide in my main stylesheet, but not my print stylesheet. Things like this can give a little extra clarity to users who print an article and later forget where it came from.
Also, the header on my site is one giant background image, with no text. Many modern browsers automatically turn off background images when they print pages, in order to save ink or toner. For the benefit of a user printing my site (and for the benefit of screen readers & search engines) I do have text in the header of my site, and CSS is hiding it on the screen. This way, it shows up on printed pages but not in the browser. I also added my logo next to that text using an <img> tag so it would still print.
Make hyperlinks useful on a printed page
Printing out a hyperlink is just like printing out text that’s underlined. It means no more to the reader than regular formatted text. To keep hyperlinks useful on a printed page, I added this code to my CSS (taken and modified from this article at A List Apart):
.entry a:after {
content: " [" attr(href) "]";
font-size: 80%;
font-weight: normal;
}
This adds the URL after each hyperlink in my post’s content (which is div class="entry") in slightly smaller font surrounded by square brackets. This way, a printed article still retains the benefits of its hyperlinks.
Make final touches to keep it looking classy
Take some time and print out some test pages. Make formatting tweaks as necessary to make sure you didn’t miss anything from your main stylesheet that you want to keep in printed form. Add padding or margin where it will help things look nicer. For many websites, a printed page is a lot wider than the main content area is on the screen, so take that into consideration as well.
I hope this post helps some website builders out there with print stylesheet creation. It’s something that is often overlooked in website design, but something users really appreciate when it’s done right. Happy coding!
Related Posts
Facebook
del.icio.us
Digg
Reddit
StumbleUpon
Technorati
MySpace
LinkedIn
From Alison ⋅ January 21 2010, 4:31 am
Just like many fellow programmers out there, when I first started publishing my own code for the world to see and use, it wasn’t the greatest. I didn’t fully understand the WordPress API and all the tools it had to offer. I have since learned a lot about how to write WordPress plugins “the right way”—the most efficient, clean, and safe way, that is. WordPress has functions, classes, and hooks that work right out of the box to make plugins easier to code and less risky to use. Here are a few of my favorite tips.
1. Use the $wpdb object for all database queries
If you only read and follow one of these tips, make it this one. Setting up database connections with mysql_connect over and over again is a waste of code. If you’re in anything other than a standalone processing script, $wpdb is ready to go with just one line of code:
global $wpdb;
(If you are using a standalone script for something, just include two files to make $wpdb work: wp-load.php and wp-includes/wp-db.php.)
There are different functions for the $wpdb class to make different kinds of database queries (see the WordPress codex page for details on them all).
On average, I find that using $wpdb saves two to three lines of code for each time I make any sort of database query. For example, this:
$name = mysql_real_escape_string($name);
$result = mysql_query("INSERT INTO $myplugin->categories_table (name) VALUES ('$name')");
if (!$result)
die("Could not insert into database. ".mysql_error());
turns into this:
$wpdb->insert($myplugin->categories_table, array('name' => $name), array('%s'));
One of the most important reasons to use $wpdb instead of mysql_query is that it automatically protects the database from MySQL injection attacks. More details about that are on the codex page as well.
2. Call jQuery using wp_enqueue_script
One of the most frustrating things I’ve seen responsible for my WordPress plugins not working is that other plugins are calling jQuery the wrong way:
<script src="../../../wp-includes/js/jquery/jquery.js" type="text/javascript"></script>
WordPress has its own way of handling calls to jQuery (and other common Javascript libraries). It’s called wp_enqueue_script. This is how WordPress would have you call jQuery in a plugin:
wp_enqueue_script('jquery');
So if WordPress itself needs to load jQuery, or an additional plugin calls it in this way, then it’s only loaded once, and it’s loaded in no-conflict mode. This means that there won’t be two jQuery scripts of different versions competing for attention. And if you prefer an external reference to jQuery (such as the one from Google Code), there is a method for doing that in a WordPress-friendly way, too (see step 2 on this linked page).
3. Use unique class & function names
If you have a function in your plugin called “load()”, then what happens if another plugin is activated on a user’s blog that uses a function called “load()”? Well, crap explosions happen. Plugins break. Solving this problem is easy: name all your functions something unique to your plugin. My personal method is to come up with a two- or three-letter representation of my plugin (like “sm” for SimpleMap) and use that as a prefix to all my function names. For example:
sm_display_map()
Easy as pie.
4. Prep all text for localization from the get-go
Even if you don’t include any translation files with your plugin, someone out there might want to write one for you (or for themselves). It’s pretty tedious to go back through your existing code and prep the text for translation, so make it a habit right away. First, you have to pick a key for your plugin’s translation files (this is usually just the plugin name or slug). Then you have to surround any text that gets displayed to the user with the following code:
__('This is the text to be translated.', 'PluginKeyHere');
Note: ‘PluginKeyHere’ would be the key you picked. For example, in SimpleMap this is ‘SimpleMap’.
The double underscore at the beginning will return the translated string to PHP. If you want to echo the string, instead of adding echo before the double underscore, you can use this shorthand:
_e('This is the text to be translated.', 'PluginKeyHere');
More details on localizing your plugin can be found in the WordPress codex.
5. Write a good README file
This is something I highly recommend. When I’m searching for a plugin to install, an inadequate or poorly written README file will often make me go back to my search results and keep looking. Writing a good README file shows that you care about the people using your plugin. If you treat it like it’s just a step WordPress forces you to take to submit a plugin to the repository, it’s going to make you look like an ass, and users won’t want to try your plugin at all.
To top it off, Mark Jaquith has recently released a plugin that makes good use of your README files on your own blog. It’s called I Make Plugins, and it automatically populates pages on your blog to promote the plugins you’ve created. You can see it in action here on Aliso the Geek.
Well, that’s all for now. More tips are sure to come in the future! If you have any suggestions, please leave a comment and share them!
Related Posts
Facebook
del.icio.us
Digg
Reddit
StumbleUpon
Technorati
MySpace
LinkedIn
