Jim Nielsen

Stop Direct Spam Comments in Wordpress

I recently redesigned my wordpress theme for iOS Icon Gallery and Mac Icon Gallery.

The old themes provided the ability to comment through the interface. Due to a lack of real comments and a surplus in spam comments, I decided to entirely remove the ability to comment from the interface.

Removing the Ability to Comment From the Interface Is Not Enough to Keep Out Spam

Once my theme went live, I was still getting spam comments in the Wordpress backend. I asked myself, ”how are comments still appearing in the Wordpress backend when I don't have a single comment form on my website?“ After some Googling, I discovered this was due to spambots posting data directly via the using wp-comments-post.php.

Further Stopping Spambots

To prevent spambots from posting to Wordpress via a URL, you can block access to wp-comments-post.php via the .htaccess file. Simply include these rules in your .htaccess file (thanks to catswhocode)

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} POST
    RewriteCond %{REQUEST_URI} .wp-comments-post.php*
    RewriteCond %{HTTP_REFERER} !.*yourdomainname.* [OR]
    RewriteCond %{HTTP_USER_AGENT} ^$
    RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]
</IfModule>

Note: Be sure to change the yourdomainname part!

That Doesn't Help You?

If this doesn't seem like the best fix for you, try looking at this article from WP Tuts+ detailing easy and efficient ways to combat spam comments.

The Incredible (Frustrating) Potential of Google Glass

Here's a video showcasing the potential of Google Glass:

All I could see in this video is Google Glass' potential for frustration. My experience in paying for a coffee would most likely go something like this:

[me paying for coffee, speaking to glass]

Me: Ok glass, pay for coffee, use my credit card

Glass: Using debit card ending in 4516

Me: No glass, I said credit card

Glass: Which credit card would you like to use?

Me: My American Express

Glass: Which American Express would you like to use?

Me: My gold card

Glass: Error. Sorry, you don't have a "gold" American Express card. Valid types are cards ending in: 4512 and 7483

Me: I don't know, use the card ending in 4512

Glass: Processing … transaction cancelled. Trying again … it appears you don't have any money on this card. Trying American Express card ending in 7483 … processing

[speaking to cashier]

Me: Sorry, it will just take another second, my card isn't going through. I always have trouble with that card. American Express always stops transactions on it, I wonder if it's beca...

Glass: Stopping transaction...

Me: No Glass! I wasn't talking to you. Keep using that card.

Glass: Transaction stopped. What would you like to do now?

Me: Ok Glass, let's try this again. Pay for coffee.

Glass: You don't have any valid credit cards, but you can add a new one. What's the number?

Me: I don't' want to say my credit card number out loud.

Glass: Error. What do you want to do now?

Me: Damnit glass. Ok pay for coffee. Use PayPal

Glass: Password please?

Me: Damnit I can't say my password here in front of everyone!

Glass: Password please?

Me: Ugh, damn you glass.

[speaking to cashier]

Me: I'm sorry, I'm going to have to just not get this coffee

[walking out the door, speaking to glass]

Me: How much does a used Google Glass go for on eBay?

Glass: Searching Google for used glass gophers on eBay

Why Do We Sketch?

When an idea strikes, what do you do with it? The commonly-held belief is that you sketch the idea on paper, as a sort of refinement process. Why? Because ideas, especially visual ones, are conceptually rough and difficult to articulate. Sketching an idea on paper can be a process of refinement. Through sketching, an idea becomes sufficiently polished to warrant actual implementation.

However, there is another purpose to sketching that is often overlooked. Sketching isn't always about slowly shaping and fine-tuning a single idea. In Smashing Magazine's recent publication The Mobile Book, Dennis Kardys writes a chapter called “Hands on Design for Mobile” in which he points out this disparate purpose to ideation and sketching:

We often think of sketching as a way to generate and communicate ideas, but it can also be a weapon to dismantle them. The goal of sketching ... isn’t to produce drawings that inform the final design ... The goal is to drive out those stubborn, thorny ideas and make room for new ones. Only then can we look anew and achieve a deeper understanding of what we’re designing.

Sometimes you work with ideas like a mason works with stone. You start with a large, unformed block of stone and slowly chip away at it until you arrive at the finished product. However, sometimes you work with ideas like a farmer doing a controlled burn. You burn everything down to make room for new growth. Only then do you see anew things hidden beforehand.

• tips

Filler Content: Tools, Tips and a Dynamic Example via Webdesign Tuts+

Here's a link to my most recent article. I talk about how to leverage filler content in your design process.

Because a lot of website design used to take place in Photoshop, manually copying/pasting text from the web was the best method for ‘filling in’ a design with dummy content. However, now that a lot of website design takes place in the browser, why not have the computer do all ‘filling in’ work for you?

It's a new era for designing in the browser.

Filler Content: Tools, Tips and a Dynamic Example

• published-articles

An Analysis of Infinte Scrolling

Have you ever felt exhausted by infinite scrolling?

Infinite scrolling merely tempts you to continue reading, wasting time and decreasing productivity in the process ... Even more annoying is that scroll bars do not reflect the actual amount of data available. You’ll scroll down happily assuming you are close to the bottom, which by itself tempts you to scroll that little bit more, only to find that the results have just doubled by the time you get there.

I've encountered this many times. It's exhausting. The worst part is that you keep telling yourself “just a little further” because you perpetually see the scroll bar two-thirds of the way down the page and don't want to feel as though you're missing out on any information.

Yogev Ahuvia wrote a great article over at Smashing Magazine that analyzes the benefits and drawbacks of using infinite scrolling. It's worth a read.

• short-insights

Unintended Visual Relationships

Establishing a grid is a great way to organize and structure design elements. In addition, by breaking the organization and structure of the grid you can emphasize visual relationships between design elements.

Drawbacks to Grids

Recently I came across a subtle and often overlooked side-effect of grid-based design: unintended visual relationships. An example of this can be found in the Wordpress theme Portfolium

Overall, it's a well executed grid-based design: organized and structured; however, the alignment of the navigation to the thumbnail grid suggests visual relationships that are nonexistent.

For example, take a look at the words at the top of the page: they align to the thumbnail grid. This suggests a columnar relationship between each navigation item and the thumbnails below them. However, no such relationship actually exists.

Rows, Columns, or Neither?

This type of unintended visual alignment is confusing. The words in the navigation align with the columns below them, suggesting some type of organization or categorization. Even the light grey lines below navigation item are visually separated which helps reinforce the idea of a column layout. Even so, there is no relationship between the navigation items and the thumbnails below them.

On the other hand, if you wanted to suggest a relationship between the navigation items and the thumbnails below them, the alignment of Portfolium would be ideal. For example, if you wanted to separate and categorize the thumbnails by column, this type of alignment would work very well:

A Better Alignment

In the example of Portfolium, not aligning the navigation to the thumbnail grid would break the grid and provide a visual separation between the sections of image thumbnails and navigation. In addition, making the light grey line at the top a solid, unbroken line helps visually separate the header from the content.

It's possible that the creators of Portfolium had a purpose in mind when designing the theme the way they did. However, I don't see it. Take care to always be aware of how your grid elements are being aligned. In grid-based design, it's easy to unintentionally suggest visual relationship that don't exist.

• tips

Coming to Appreciate Art

I have a confession: for some time now I've been cynical of art. More specifically modern art. For example, here is a piece of art I encountered at the Museum of Modern Art in New York City:

I can't help but ask myself: how is this art? Even more puzzling: how does it have a place in the world-renowned MoMA? At first-glance, this piece seems on par with something my four-year-old nephew could create. Then, as a web designer, I am reminded most people think websites are something their nephews could create too.

What's my point? I realize I don't understand or appreciate art because I am ignorant of it. People don't understand or appreciate web design because they are ignorant of it. As a general rule of thumb, the more you immerse yourself in something and learn its intricacies and rationales the more you come to appreciate and respect it. That goes for modern art or web design. Get to know the things you criticize. Generally, the more you know the less you will criticize.

So Is It Art or Not?

The question still remains, what is art? Is that scribbled piece of canvas art? Here's a tip from Milton Glaser, a celebrated graphic designer, on determining what is and is not art:

you cannot tell art by virtue of medium, or function, or anything else except by the fact of its raising your consciousness to a degree that you are attentive. And so if something produces the state of attentiveness, whether it’s a drawing, or a guy making a cheese sandwich, we can call it art, at least by my description

According to Glaser, if something "produces a state of attentiveness", whether it's Van Gogh's Starry Night or this seemingly scribbled mess, you can call it art.

As you may have noticed, that scribbled mess at the MoMA brought me an incredible amount of introspection and reflection. It raised my consciousness to a degree that I was attentive. I suppose that is why it has a place at the Museum of Modern "Art".

• short-insights

Team Color Codes

I recently participated in the Arc90 Hackathon. I originally volunteered for a different project as part of a team, but due to scheduling conflicts my team disbanded. I was left with the option to work on a solo project, which resulted in Team Colors: a single-page website that serves as a reference for HEX values for professional sport teams:

Unfortunately, the Hackathon took place while I was absent from the office (travelling to Utah for the Christmas break). So a lot of my work was done on a plane and working from home. I started Team Colors by sketching out some ideas for the page hierarchy and navigation:

After thinking through and sketching out how to present each team and its corresponding brand colors in a responsive manner, I turned to writing some pseudocode that would power the interaction of the site:

Once I got everything down on paper, the fun part of building began. The hardest part was finding the actual HEX values for each team. There were some obscure, outdated forum posts scattered across the web. In the end Wikiepedia was my best reference, although it did not provide the brand colors in the user interface. I found them in the underlying HTML/CSS using Chrome developer tools.

Technical Overview

Here's a quick overview of the technology used:

• The page is responsive, built using HTML5, CSS, and the CSS preprocessor Compass
• All the data (team names, hex values) is stored in a single JSON file. This makes updating the page quite simple. You just add a new league with teams, or a new team in the appropriate league with its corresponding HEX values. Then add the team's logo into the images directory and you're done!
• Most team logos are SVGs, making them crisp on HiDPI devices. If a team logo isn't avaiable in SVG, a PNG fallback is used.
• Progressive enhancement is used thoroughly:
  • Images are served by javascript after page load to reduce HTTP requests on the initial page load
  • All league/team data is loaded in a single page. Javasript is used to create a the drop-down control for sifting through teams by league and showing/hiding content.

Don't Forget

You can view Team Colors here. Don't forget to checkout some of the other amazing Arc90 Hackathon projects, or read about the hackathon.

Build a Responsive, Single Page Portfolio with Sass and Compass via Tuts+ Premium

My latest tutorial teachs how to build a responsive, single page portfolio with Sass and Compass.

The tutorial incorporates modern web development techniques such as:

• Responsive design
• HTML5
• CSS using Sass and Compass
• Typography via Google's Web Fonts service
• API calls using jQuery
• Pure CSS horizontally-scrolling carousel supporting touch interactions
• HiDPI support via icon font usage

You have to be a premium subscriber to see the entire tutorial. However, you can check out a preview on Tuts+ Premium. Or, there's an alternative preview along with a working demo at Webdesign Tuts+.

• published-articles

Freebie Resources: Don't Assume, Double Check

Seemingly high-quality freebies, who doesn't love them? They save lots of time. However, be careful to double check and properly adjust any small details that may be misaligned. As they say, design is in the details, and sometimes you can't always rely on someone else having invested in those details.

Here's a vector freebie I got online today. I imported the shape into Photoshop and noticed a 1px offset in symmetry:

I know you might be thinking, "1px offset? Nobody will even notice that." And you know what? You're right. One little 1px offset in an image that's 16x16 pixels probably won't be noticed by many people. However, the accumulation of many 1px offsets in your digital creations will be noticed! It's worth practicing some self discipline because it will help avoid sloppy work.

Ahhh, isn't this much better?

Don't assume the freebie is pixel-perfect, especially when transferring it between software applications. Keeping up your guard and not making assumptions will prevent slipshod work.

• tips