Helpful Articles

Today we are pleased to feature the Polaris UI icon set that includes useful UI components and 48 beautiful icons. This freebie was created by the team at Designmodo. As usually, you can use the set for all of your projects for free and without any restrictions.

Polaris UI Kit

The Polaris UI Pack is a set of beautiful UI components, which includes Edit Boxes, Check Boxes, Radio Buttons, Page Navigation, Menu, Buttons, etc. You can use this set in any of your projects, and even learn with it, by examining each component to see how it is put together.

Components are made in Adobe Photoshop using Shape Layers (vector elements). Therefore, you can increase or decrease the size of each element without any loss of image quality.

Larger preview

Linecons Icon Set

In addition, the the pack includes a set of icons, called Linecons. The set contains 48 fully scalable vector icons with outline styles. Each icon is available in following formats:

1. Embedded in a Web font,
2. AI (Adobe Illustrator),
3. PSD (Adobe Photoshop),
4. PNG (Original size and 512×512),
5. SVG (Universal Vector File) and
6. PDF

Larger preview

Larger preview

Larger preview

Download The Freebies For Free!

You may freely use it for both your private and commercial projects, including software, online services, templates and themes.

• Download the UI kit (.zip, 6.88 Mb)
• Download the icon set (.zip, 5.95 Mb)
• The official release page

Thank you very much, the creative minds behind Designmodo! We really appreciate your effort.

---

© Smashing Editorial for Smashing Magazine, 2013.

One of the best patterns for browsing a small collection of featured products is the carousel. Unfortunately, many mobile app implementations do not offer an engaging or satisfying carousel experience and are not effective at driving conversions.

In this article, we’ll use the analogy of a real-world amusement park carousel to explain what makes for an authentically mobile user experience, and we’ll give you the design, the complete source code and a downloadable mini-app, which you can use today to add an enjoyable and effective carousel to your own app on phones and tablets.

How It Works

The carousel is fairly simple. The customer is able to view several images of products across a row, and they can swipe horizontally across the row to navigate to the next set of products. An arrow indicating the direction of the carousel’s movement is usually provided as a clue to how to interact with it. Optionally, the next set of products in the queue may be partially hidden, creating what we call the “teaser,” indicating that more content will be visible by swiping.

Example

One excellent example of this pattern is the Amazon app’s home screen.

The carousel on the home screen of Amazon’s app is excellent. Larger preview.

This implementation of the carousel uses the teaser method to hint at the required interaction, showing only a small tantalizing glimpse of the naked CAT5E Ethernet cable, which is (and I have this from most reliable sources) completely irresistible to Amazon’s more impressionable customers, who can’t help but swipe across to see more of the naked cable and get to more of the content.

When And Where To Use It

The carousel is a fantastic pattern to show off featured items and relevant new arrivals. For example, new items matching the customer’s last search in their local area would be a sure winner.

In fact, consider using a carousel any time you have a small set of products (8 to 20 items) that are easily recognizable from just their picture. Augmenting the mostly visual content with a small amount of overlaid text is also sometimes effective. For example, in the screenshot below of the Pulse app on a 7-inch Android tablet, the carousel’s visual content is augmented with a semi-transparent dark-gray overlay, which provides the date and name of the comic. Without this overlay, the thumbnails of the carousel, especially in the first row, could be easily misinterpreted as belonging to a single comic.

The visual carousel content with semi-transparent overlay helps with comprehension in the Pulse app. Larger preview.

I am a huge fan of semi-transparent layers in mobile design. This example is particularly effective because the overlay on the thumbnails is semi-transparent and thus does not interfere with viewing the thumbnails, all the while augmenting the carousel experience in a way that is both visually appealing and informative. (Well, it does interfere just a bit, but it keeps interference down to a minimum while making best use of the small screen space.) The example also demonstrates that a carousel is an exceptionally great pattern for the large swiping gestures that small and large tablets invite.

Why Use It?

The carousel is an attractive and still fairly underused control for presenting visual information. It takes full advantage of the multi-touch gesture of swiping available on a mobile device. The carousel is easy and intuitive to operate and takes full advantage of the compressed real estate on mobile devices, where few words are needed to support the content.

Other Applications

One of the best features of a carousel is that it works well for a wide variety of device sizes and screen resolutions. This includes the ever-tricky horizontal orientation, for which the carousel works even better than in the vertical orientation.

The carousel adjusts to various screen sizes, and it works even better in a horizontal orientation. Pictured here is Amazon’s app. Larger preview.

Whereas the usefulness of traditional search results is severely hindered by the lack of vertical space, a well-designed carousel shines by showing off even more inventory.

Also noteworthy is the presence of the “See all” link, which points to the featured products.

The “More like this” link in this carousel navigates to a list of search results. Larger preview.

A “More” link is an excellent idea if your carousel has a small subset of items (8 to 20) that fails to meet the customer’s desires but piques their interest. In this case, the entire carousel control serves as advertising of sorts, enticing the customer to explore the relevant area of Amazon’s massive inventory.

Caution

As with any pattern, many implementations of the carousel do not feel quite right. One instance is NewEgg’s “Shell shocker” carousel:

NewEgg’s carousel has a few issues. Larger preview.

Some recommendations based on the UX problems in NewEgg’s implementation might help.

Make the Scrolling Smooth

To begin with, NewEgg’s carousel is structured more like the iTunes cover flow feature on iOS, with a large central element and two partial elements on the periphery of either side.

The cover flow screen in iTunes on iOS emphasizes the central element. Larger preview.

Like Amazon’s carousel, NewEgg’s can be swiped faster to advance more quickly through the list of products. However, NewEgg’s carousel moves very jerkily because of the structure of the central element, making it hard to see the intermediate states while scrolling — a major disadvantage. Seeing the two peripheral elements change is particularly hard — things hop all over the place, instead of smoothly swimming by the way they do in Amazon’s app. Higher-end and traditional carousels accelerate and decelerate smoothly and provide a pleasant, mellow, smooth ride. A carousel should be a high-end visual viewing experience that induces calm in the user, not stress. All parts of the control, including transitions, should behave accordingly and work together smoothly.

Indicate the Scrolling Direction

NewEgg’s carousel appears to be scrollable in both the left and right directions, causing a confusion: Is this carousel meant to represent a circle? Have I seen everything already, or do I need to keep scrolling? Amazon uses Android 4.0’s standard “blue parallax” visual treatment to signal the end of the line, a much better approach.

Amazon uses Android 4.0’s standard “blue parallax” to signal the boundaries of the carousel ride. Larger preview.

Just as a real carousel has papier-mâché horses that point you unambiguously in the right direction (you wouldn’t sit backwards on a horse now, would you?), so must your own carousel show which way the ride goes.

End the Ride Quickly

Good carousel implementations indicate the end of the list with the same parallax treatment seen at the beginning, and they present only 8 to 20 items, after which the ride is over and the customer can get off the carousel. Most importantly, the customer needs to exit the ride with the feeling of still wanting more. By contrast, NewEgg’s carousel seems to go on forever, so the customer does not get off until they feel bored (or, more likely given the jerky transitions, weak in the stomach). A much better approach would be to accompany the last element in the carousel with an obvious built-in “More like this” link, as shown below.

Show a “More like this” tile at the end of the carousel. Larger preview.

A “More like this” link can be used to jump into search results, which are more efficient for scanning large quantities of data and which are more likely to be relevant because of the sheer volume of items. Think of the “More” link as a premium combo ticket that grants admission to all of the remaining delights at the amusement park, conveniently presented after the cheap introductory carousel ride is over. Kind of puts a different spin on the entire carousel pattern, doesn’t it?

Make Sure Your Horses Look Amazing

No matter how smooth the ride is or how far or how fast the carousel goes, the best carousels have the best-looking horses, period. Make sure your horses (i.e. thumbnails) tell the story you want your audience to be told. For example, Amazon’s thumbnails are much better looking than NewEgg’s, although sometimes even the e-commerce giant screws up the ride, dropping thumbnails entirely:

Amazon’s carousel sometimes misses thumbnails. Large preview.

It goes without saying that ghost horses make for a terrible ride, even on Halloween (unless you’re the Headless Horseman). Which brings up my next point: some products are just not that visual, making them poor candidates for inclusion in a carousel. A classic example from my first book, Designing Search: UX Strategies for Ecommerce Success (Wiley 2011), is coffee — Peet’s Coffee to be exact. Even though Berkeley, California-based Peet’s makes some of the world’s most divine premium coffee, all of the thumbnails are identical pictures of a generic coffee bag and some spilled beans.

Some thumbnails, like these coffee bags from Peet’s, are not good candidates for the carousel pattern. Large preview.

Carousels are way more fun when the horses are all different; likewise, these generic bean-bag thumbnails are not good candidates for inclusion in a carousel pattern. A much more interesting horse would have been a close-up photo of a bean variety, or a map of a coffee-growing region, or a Tufte-style diagram of coffee taste attributes such as acidity, earthiness and body.

Even for products that have good thumbnails, presenting enough information can be a challenge. Including the right text in the individual tile is especially important for information scent; this could include key specifications such as processor speed, hard drive capacity and so on for the kind of technical gadgets sold by NewEgg. Picking an image resolution that can handle the amount of detail you are trying to show is also key. For example, can you tell what the item below is by looking at the small thumbnail and truncated description?

A small thumbnail and overly short description lead to “pogo-sticking.” Large preview.

Only by drilling down into the item do we see that it’s actually a screwdriver set. A larger thumbnail and better description would have helped a great deal and reduced the “pogo-sticking” (i.e. the frustrating navigation back and forth between carousel control and details page), which ruins the entire ride.

Having to pogo-stick between the carousel and details page ruins the ride. Large preview.

If the picture tells only half the story and you have to include a great deal of text, then you might find yourself having to increase the size of the individual element to the point that the carousel is no longer the best choice of presentation. For such items, think twice about whether you even really need a carousel, and whether a simple vertical list (more akin to a themed roller coaster) would make for a better experience.

Code

Carousel code can be fairly straightforward. One way to implement an ultra-simple demo using Java is shown below. Plugging cute pictures of puppies into the carousel, you should end up with a mini-app that looks something like this:

Mini-app with a puppy carousel. Large preview.

First, we define how many items to show, and compute the width of the carousel item based on the screen’s width. (You may need to use more sophisticated code that computes a dynamic INTIAL_ITEMS_COUNT if you’d like to accommodate longer carousels for tablet devices.)

/**
* Define the number of items visible when the carousel is first shown.
*/
private static final float INITIAL_ITEMS_COUNT = 3.5F;

// Compute the width of a carousel item based on the screen width and number of initial items.
final DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
final int imageWidth = (int) (displayMetrics.widthPixels / INITIAL_ITEMS_COUNT);

Next, for the purposes of this demo, we will create a static array of pictures. In a real app, this list would come from a database, of course.

// Get the array of puppy resources
final TypedArray puppyResourcesTypedArray = getResources().obtainTypedArray(R.array.puppies_array);

Then, we simply populate the carousel with items in the array and display it by overriding the onPostCreate() function. While onPostCreate() is mostly intended for framework use (according to the documentation), we can use it for this simple demo to simplify things a bit.

// Populate the carousel with items
ImageView imageItem;
for (int i = 0 ; i < puppyResourcesTypedArray.length() ; ++i) {
// Create new ImageView
imageItem = new ImageView(this);

// Set the shadow background
imageItem.setBackgroundResource(R.drawable.shadow);

// Set the image view resource
imageItem.setImageResource(puppyResourcesTypedArray.getResourceId(i, -1));

// Set the size of the image view to the previously computed value
imageItem.setLayoutParams(new LinearLayout.LayoutParams(imageWidth, imageWidth));

/// Add image view to the carousel container
mCarouselContainer.addView(imageItem);
}

This code is provided free of charge and distributed under the GNU General Public License v3. See the README_LICENSE file for details. Download the complete source code for the app.

Try It Out

If you want to see how the carousel app runs, the completed puppy carousel mini-app is available for you to download and try out. To install it, I recommend using an app installer (I use the one made by FunTrigger, which you can get free from the Play market).

Here’s how it works. Connect your Android device to your computer. You should see the Android file-transfer window open automatically. Download the APK source file (download the entire package), and place it in the “App Installer” directory (you may have to create it).

Place the APK file in Android’s file-transfer window. Large preview.

Now you will be able to launch the app installer on your device, navigate to the right directory, and tap the icon for the APK file that you want to install.

Use the app launcher to install the app. Large preview.

After a few customary Android disclaimers, the app will be installed in the normal apps area on your device, and you can launch it from there.

Conclusion

The carousel pattern is a microcosm of mobile design: deceptively simple. It is also a somewhat new Android pattern, and pitfalls abound. Nevertheless, if you take the time to get it right, the carousel is a fantastic pattern for showing off featured items and relevant new arrivals, as well any items that are highly visual. It dovetails perfectly with the local context by showing new items that match the customer’s last search in their local area. Finally, with the right implementation of the carousel, you will be supporting touch gestures on today’s Android devices to the fullest extent, fitting more products on the screen and making them accessible with a natural swiping gesture.

When designing your carousel control, think of it as you would its real-world namesake, the carnival ride. Make sure your horses look amazing; indicate the scrolling direction; make the scrolling smooth; and end the ride quickly, providing an exit to more of your inventory. We’ve provided you with the Java code and a demo implementation of the carousel pattern, so now you have no excuse not to try it!

(al)

---

© Greg Nudelman for Smashing Magazine, 2013.

We’ve all been total newbies. In fact, I spend most of my time still feeling like one. So researching this article was a great opportunity for me to do some more learning, and to share all of that good stuff with you.

I reached out to people from across the WordPress community to ask what advice they would give to people just starting their WordPress journey. I talked with developers, designers, support reps, security experts, hosting companies, theme shops, plugin developers and just about everything in between.

This article is a result of their insight, and I hope that it provides some encouragement and guidance to newbies — whether you’re a user or a developer — as well as some tips for advanced WordPress users who continue to learn throughout their lives. With that in mind: WordPress community, take it away!

Get Involved With The Community

WordPress has a tight community with active contributors from all over the world, so it’s no surprise that a bunch of people within that community recommended newbies start chatting with others. Having a desire to learn and get help will get you far. As Japh Thomson pointed out:

“There’s a lot to learn, and this is the best way to ensure you’re learning the right way to do things. It also means that as you learn, you can give back, which helps the community to grow. As you give back, you’ll find this actually helps you learn even more!

Being a part of the WordPress community is a mutually beneficial arrangement, and a fantastic way to build your skills and experience.”

There are plenty of places to get involved. If you’re a developer you could check out the weekly WordPress core developer chats on the #wordpress-dev channel on the freenode IRC (Internet Relay Chat) network. Just listening to what’s going on in the chat will help you to understand the direction of the codebase and the decisions that have been made. You’ll also learn who is doing the talking, i.e. who the project leaders are.

WordPress community members chatting at the WordPress community summit. (Image source: Andrea R)

When Brad Williams started out with WordPress, he just hung out in the #wordpress chat. Within a few months he went from asking questions to answering them, and made some new friends while he was at it.

If IRC isn’t for you, sign up for WordPress.org and use the Codex and the forums to start learning. While you’re there, you can help out by fixing any problems that you see in the Codex, or replying to support forum questions that you might know the answer to.

You can also follow WordPress people on Twitter, comment on blogs and go to WordCamps and Meetups. “Being a part of that conversation,” says Kailey Lampert, “is vital to anyone who wants to learn.”

Take the time to learn who is who in the WordPress community. As Remkus de Vries says:

“The most important thing is to check your surroundings. You can’t enter a community without knowing who the key players are and what the rules are. Learning that is also learning WordPress. No matter what you’d like to get out of the community, you have to be willing to put the time in there without expecting anything monetary in return. Think of it as earning your ‘street cred.’ The more you make yourself visible, and there’s lots of ways to do that, the better you’re helping yourself and the project.”

As a developer, you can get involved by open-sourcing your software and distributing it. This could involve writing a plugin or a theme and putting it on the WordPress repository or GitHub. “Not only will you gain the respect of other developers and community members, you’ll learn so much about what it means to be part of the WordPress community,” says Drew Strojny. “You’ll get feedback and ideas to help improve whatever you built or contributed and you’ll likely learn something along the way.”

Simon Wheatley pointed out that there is space for everyone in the WordPress community:

“If you are a developer, look out for places you can start to get involved in code contributions to plugins or to core WordPress. If you are a business person or you are using WordPress, look for opportunities to get involved in local events and meet other users. The more contact you have with the community, the better your experience will be. WordPress is written by people who see something they want to improve and get involved with the code, WordCamps and meet ups are organized by people who see a gap and get involved in helping improve the community, documentation is written by people who don’t understand something and get involved in creating explanations… getting the idea? Get involved!”

The other great thing about getting involved is that you’ll make friends and create a support network, which means if things do go wrong in the future, there’ll be people around who can help you out.

Thanks for input from: Japheth Thomson, Mason James, Eric Mann, Kailey Lampert, Dre Armeda, Ronnie Burt, Simon Wheatley, Jared Atchison, Brad Williams and Remkus de Vries.

Learn

By far, the most common advice that I was given for beginners was based around learning. This encompasses everything from setting up your first WordPress website to starting out with developing for WordPress. Learning is your first step to becoming a pro in WordPress, whatever your area.

Ben Balter points out that WordPress has its own way of doing things:

“There’s the computer-sciencey way (formal MVC, elegance on paper), and then there’s the WordPress way (think actions/filters, the loop). It’s a lot more intuitive in many ways, but if you’ve been trained the wrong way, it could take a minute or two to unlearn. WordPress purposely breaks certain formal design patterns, and almost always walks away with a solution that is more elegant for the user AND the developer.”

If you’re a developer coming to WordPress for the first time, you might wonder why WordPress does things in such a WordPressy way. Once you dig deeper you will start to find it enjoyable!

Image source: opensourceway.

And if you’re coming to WordPress for the first time to build yourself a website, Jan Dembowski has this great advice:

“Don’t be intimidated. Once you have gotten your own installation of WordPress software running, understand that the magic happens via the PHP files and possibly mod_rewrite’s .htaccess rules.

Everything hitting a WordPress installation starts with a Web request, gets processed and data gets pulled from or inserted into the database. Poof! The Web page is generated. All you had to do was sign in, publish a post and suddenly you’re publishing on the internet.

If you don’t know how it all works that can be intimidating especially if something is not working the way you thought it would.”

Don’t be Afraid to Experiment

“One of the best ways to get familiar with a new product is to tinker,” says Collis Ta’eed. Sometimes the best way to learn is to take stuff apart and put it back together, to break things and to be forced to fix them.

You should take Andrea Rennick’s advice to both users and developers to “be fearless!” Even if everything goes totally wrong, you can install a new copy of WordPress and start again.

Or, as Helen Hou-Sandi says:

“Be curious about what’s out there and don’t be afraid to figure it out for yourself. Whether that means figuring out how to get a test or playground site up and running somewhere so you can try out themes and plugins without worrying about your live site, or actually reading through the code of some of those themes and plugins to see how it’s done (or shouldn’t be done), don’t get stuck in ruts or consider the first thing you read to be gospel. It’s kind of like saying ‘do your research,’ but think of it more as encouraging curiosity rather than doing homework. In the long run, you’ll know more, and who knows — maybe you can even help somebody out who’s now in your former shoes!”

If you want to truly get rid of your inhibitions, learn how to install a local development environment. Michael Krapf suggests that your first WordPress website should be a testing playground. There are plenty of tools out there that you can use to get set up. Try out installing WordPress with MAMP on your Mac or with XAMPP on Windows. Kurt Payne recommends trying out ServerPress Desktop Server.

Don’t be afraid to experiment! (Image source: opensourceway)

Add content to your website and manipulate it. Try out themes and plugins. If you’re a developer you can create themes and plugins. You’ll be able to take your time troubleshooting without worrying about having taken your website down.

If you’re starting out in development, Pippin Williamson has this advice:

“Just build something. Too many beginning developers get caught up with trying to make sure they do it right the first time, but that isn’t that important when you first start. Everyone makes mistakes, and you learn a heck of a lot faster from your mistakes than you do from attempting to learn how to do it perfect the first time.”

Remember that the scope of things that people do with WordPress is changing. Jake Goldman points out that the 2012 WordPress survey highlighted the content management system (CMS) as the most dominant use case, but that WordPress as an “app engine” is the greatest area of growth. “Other tools might offer a better fit,” he says, “but I’ll guarantee WordPress is a capable contender. Frame the way you think about WordPress in the context of a rich ‘framework’ for building great Web applications with an out-of-the-box CMS configuration, take the time to really understand its architecture, and challenge yourself to apply WordPress to challenges way outside of the box. You’ll open up a whole new world.”

Thanks for input from: Pippin Williamson, Collis Ta’eed, Marko Heijnen, Andrea Rennick, Paul Hughes, Andy Stratton, Helen Hou-Sandi, Michael Krapf and Kurt Payne.

Read

The internet has so much information out there that it can be difficult to know where to start looking. A great place is WordPress.org. Both the forums and the Codex are great resources for learning and understanding how WordPress works. Catia Kitahara started using WordPress after a recommendation from someone on a mailing list. The first place she looked for help was the Codex. Before you start asking questions of people, have a look in the Codex and the forums to see if there is already a solution.

And there is plenty of advice outside of the Codex. The internet is full of WordPress tutorials that will help you to achieve your goals. A word of caution though: If you find a tutorial or code snippet, check the date of the post. WordPress has a fast release cycle, and a lot changes over the years. The post may still be entirely legitimate, but some will be out-of-date and may cause you confusion.

As a documentation writer, I know how little people actually read the things I write, and if the documentation actually got read people would find themselves in much less trouble. I’m not the only person aware of this.

As Joshua Strebel says:

“The old joke that people don’t read, and that they read instructions even less, is as true as it has ever been. You can do your part and make the WordPress world a better place by becoming a savvy user that wants to understand and learn versus the type that refuses to think and just wants things done for them.

We have found in our business that encouraging and guiding the customer to digest the support information we have provided and educating them on not just the How but also the Why, leads to a more satisfied and happy user. Once the unknown becomes known, everyone is happier.”

Thanks for input from: Eric Mann, Joshua Strebel, Slobodan Manic and Cátia Kitahara.

Write

You learn best when you are explaining what you do to other people. It’s a well-worn saying, but true nevertheless. You may have lots of knowledge on a specific subject, but can you break it down and explain it to other people? Once you’ve done that, you know that you’ve really got a grasp on it yourself.

The first place you could start writing is on your blog. If you’ve discovered a solution to a WordPress problem, write about it and share it with the world. This way you’re helping out people who have the same problem. It’s also a great thing that a blog has a feedback loop. If you’ve got something wrong, or if there is a better way to do it, someone will tell you.

Try out different ways to reach your goal. (Image source: opensourceway)

Brad Williams knows all about it:

“Some of my earlier WordPress posts were a big help to others and some were actually incorrect. What I learned from this is other WordPress developers would read my posts and correct any mistakes I might have made in my code samples. This actually made me more comfortable with releasing my code to the public because I realized the WordPress community ultimately just wants to help, not make fun of small coding mistakes.”

This is my own experience as well. Of course, if you get something wrong there may be people who get snarky with you, but largely the WordPress community wants to help you to improve. Good content on blogs benefits the entire community.

Once you’re comfortable with writing on your blog, why not try writing on the WordPress Codex. This is another place where you can test to see if you can make your ideas as clear in writing as they are in your head.

Thanks for input from: Brad Williams and me.

Learn the Basics

When it comes to theme development, Andy Stratton points out that he learned on default themes such as Classic and Kubrick, which were much simpler than the latest default — Twenty Twelve. Twenty Twelve shows off WordPress beautifully but it’s not the most useful tool for absolute beginners. Look for simpler themes to learn from, and learn by working through simple tasks. Here are some things Stratton suggests you try:

• Creating a theme that lists blog posts, has a single post template and page template;
• Implementing comments on a single post template;
• Implementing a custom output for comments;
• Implementing date, category and tag archives;
• Implementing a widgetized sidebar;
• Creating a custom widget;
• Create a child theme that does nothing;
• Create a child theme that changes how single posts are displayed.

“Tackling these challenges individually is similar to project management techniques of splitting larger tasks into more manageable pieces. You will learn more and start to relate how these things fit together. Eventually, you would have mind-mapped most of the template and theming structure for WordPress.”

Thanks for input from: Andy Stratton.

Read the Code

If you’re a developer, you shouldn’t just be looking at the Codex or online tutorials. These will get you started but they won’t provide you with everything you need to become an expert developer.

Alex King points out that “the documentation says what the code is supposed to do, while the code says what it actually does.” Documentation can lag behind the code, especially when core patches are merged. And while you’re poking around in the code, you may find other things that are immediately helpful and that you can file away for the future.

Image source: opensourceway.

When Konstantin Obenland started out with WordPress, he started out by looking at the code. He opened files and read them. This gave him an idea of what functions were available, how the APIs work and what was going on internally.

“The biggest challenge for me was to get an idea of where actions and filters were available and how I could alter behavior. Since they are what we work with to tweak core, I would encourage developers new to WordPress to grasp the concept of actions and filters and learn about which one to use in a given context.”

Thanks for input from: Alex King and Konstantin Obenland.

Other ways to learn

Other people had suggestions of different ways to learn:

• Stratton suggests that you get paid to learn by taking on new freelance projects that offer a little bit of new stuff for you to learn. Tell your client that it may take you a little longer and that it will require a learning curve. By the end of the project you’ll have been paid for a good job done, and you’ll have acquired a new skill.
• When he started to develop themes, Magnus Jepson learned by customizing free themes he liked instead of building from scratch. “I had basic knowledge of CSS/HTML and PHP before, but by looking at how other themes worked I gained knowledge and was able to build my first custom theme for a client.”
• Ryan Duff reminds you that “you also need to be receptive to comments and criticism. Talking to others online, whether it is in forums, IRC, etc… That networking and learning will allow you to discover early on the who, what, when, where and why of WordPress.”

Build

It’s great to learn, but it’s also fun to build. If you want your WordPress website to be sustainable and secure, it’s worth putting some planning and thought into what you’re going to do. If you’re building your first WordPress website, think about the design and the functionality that you want. If you’re a developer, take some time to actually understand what it is that you’re doing.

Here’s some advice from Mike Little:

“It is so easy to search the Web and find some code to copy into functions.php that’s supposed to do what you were looking for. But if you don’t understand it, you won’t be able to fix it if doesn’t quite work, or change it to make it work differently. Equally importantly, you will eventually learn to spot bad code from good, and there is a lot of bad code out there in the wild that unfortunately finds it’s way into people’s websites. I include in that statement code that used to be good code, but is now old and out-of-date. I see a lot of code implementing some functionality that got incorporated into core WordPress aeons ago (that’s at least a year in Internet Time).”

If you’re a user or developer, a little bit of understanding goes a very long way. Planning your website and taking things slowly will help you to learn and understand along the way. With that in mind, here’s some advice for building your website.

Take Things Slowly

When you’re building your first website, don’t just rush in and think you can master everything at once. “Starting a new blog can quickly become overwhelming,” says Rachel Baker. “Don’t try to master theme design, plugin development, SEO, community building and writing viral content before you even begin writing your first blog post. Set small achievable goals to stay focused and keep up momentum.”

Learn to go slowly.

Just because there are lots of different things that you can do with your blog doesn’t mean that you need to do them. Amy Hendrix suggests that you have a plan for what you want your website to be and design what you’re going to use based on that plan.

“There are a zillion themes and plugins for WordPress that can add all sorts of shiny widgets, gizmos and gadgets to your site,” says Dougal Campbell. “Your first priority is to make sure that your site is easy for your readers to use — if you add too much clutter it can detract from your message.”

Remember that your website is for delivering a message and you should always keep your audience in mind.

That said, you should plan to go big, suggests Mika Epstein:

“You start small, with a good foundation and make it solid. Build your site with thought. ‘If I use ugly permalinks now, what happens if I want to change it later?’ You can’t know the future, but you can make reasonable assumptions. Make a hard list of your needs and your wants and be absolutely brutal with yourself. You know the difference between a need (gas for the car) and a want (a new car, when yours runs just fine).”

Thanks for input from: Mika Epstein, Rachel Baker, Amy Hendrix and Dougal Campbell.

Choose your plugins and themes wisely

When you start out with WordPress, it is very easy to think “OMG IT’S FREE!”and then get overexcited by all of the free plugins and themes out there. It’s important to keep in mind that just because something is free, it doesn’t mean that it’s good. And equally important within WordPress is that just because something is commercial, that doesn’t mean it’s good either. There are plenty of powerful, secure, free WordPress themes and plugins, and plenty of poor quality commercial themes and plugins. Learn to distinguish between them.

“Don’t install crappy themes and plugins,” says Rarst. “If you are not confident to know which are good — don’t rush to install any straight away or get someone to help you with choosing.”

You should avoid using Google to search for free plugins and themes, and certainly avoid any torrent/warez websites offering commercial themes and plugins for free. Get what you need from reputable plugin and theme shops. Emil Uzlec notes that the ratings system in the WordPress repositories makes it much easier for you to make a choice about what you’re installing on your website.

Both Andrew Norcross and Mark Jaquith suggest that you put some thought into your selection of plugins. Norcross suggests that you focus on what you’re trying to achieve and then find the right tools to achieve that. A clear idea of what you need helps to sift through all of the tools out there.

And, as Jaquith points out, what you need could actually be in core. “Don’t go crazy and add every one you see that you think might be useful,” he says “Get to know the core software first before you add a bunch of stuff.”

Thanks for input from: Rarst, Andrew Norcross, Mark Jaquith, Emil Uzlec and Sinisa Komlenic.

Know Your WordPress

WordPress and WordPress.com are two different things. Cristi Burcu suggests that you learn the difference between WordPress.org and WordPress.com so that you can decide which one is right for you. In brief:

• WordPress is open source content management system for building and hosting a website on a Web server.
• WordPress.com is a network of blogs that runs on that software.

They are two different entities. If all you want is a blog and aren’t interested in setting up and controlling your own website, then it’s worth checking out WordPress.com.

“It’s free,” says Chris Wallace “and you don’t need to understand any of the technology behind it. In just five minutes, you can be up and running with a shiny new website which has loads of bells and whistles.”

If you want more than a blog, or you want more control, you can use WordPress, the software. When you install the software, you can install any plugins and themes that you want, and have much more control over your website. Plenty of hosts offer one-click installs of WordPress. You can sign up for hosting, click a button and WordPress will be installed via a script. Or, you can sign up for a managed WordPress host like Page.ly, ZippyKid or WP Engine, which come pre-installed with WordPress and specialize in WordPress hosting.

Vid Luther quotes Andrew Spittle, who said “don’t pay less than a shrimp dinner for hosting.”

Thanks for input from: Silviu-Cristian Burcă, Chris Wallace, Vid Luther and me.

Don’t Reinvent The Wheel

Whether you’re building your own themes, starting to build for clients, writing custom functionality or coding plugins, remember that there is a lot of code out there and, since we’re in the WordPress ecosystem, it’s all open source. A great time to start thinking about building upon someone else’s code is when you are building themes.

Christine Rondeau notes that “there are tons of starter themes out there from super stripped down to others full with custom options.” Find one that suits your needs and learn it inside out. This will make it much faster for you to code websites.

(Image source: Zen Sutherland)

This advice filters into any aspect of development. Timothy Wood recommends looking for things that have already been done and finding ways to improve on them.

“The community is full of solutions that are not completed, it is the iterations that improves the solution to be extensible. I believe part of WordPress’s weakness is that a hack is considered a solution because the end goal is the visual or deliverable for implementation. Often the (give back to) community is overlooked in favor of hacking to just get it done.”

By working with other people’s code, instead of in a vacuum, you can help them to improve and give back to the community.

Thanks for input from: Christine Rondeau and Timothy Wood.

Ask For Help

Everyone needs a little bit of help from time to time, and there’s no shame in asking for it.

“There’s no such thing as a dumb question. those of us who have been around a long time have pretty much seen all the questions people ask. We really would be happy to point you in the right direction. Don’t be scared, most of us do not bite.”

That’s from Andrea Rennick, who you’ll often find helping out on the WordPress.org support forums.

As well as the support forums, Syed Balkhi suggests trying WordPress Stack Exchange and Quora. He does mention, however, that these places are staffed by volunteers. People don’t get paid for their time so be nice and polite. Take the time to research your question beforehand. The volunteers will appreciate that you’ve taken the time to do so, and you’ll have a better experience overall. Just landing on a support forum and saying that your website is broken doesn’t help anyone.

And remember, once you’ve gotten help from other people, you can help out by answering questions from others. As Mario Peshev says, “doing support is one of the smoothest ways to gain know-how in a platform and be aware of the common questions and problems.”

Thanks for input from: Andrea Rennick, Mario Peshev and Syed Balkhi.

Find a Mentor

Frederick Townes says that starting a business in open source requires passion for solving a specific problem. He suggests that:

“Early on, make sure you identify mentors that can help you with various aspects of your business as it develops: secure and scalable code, marketing strategy, customer development and support, etc. Be transparent, communities and companies are made up of people, offline relationships make all the difference in not only understanding customer / community needs, but it’s also essential to keep things simple and master the art of creating value.”

Image source: opensourceway.

Finding a mentor will help you to feel less like you’re out on your own, and there’ll be someone there who can provide you with advice, whether that’s on the business or technical side of your business.

Thanks for input from: Frederick Townes.

Make Use Of The APIs

WordPress has a bunch of APIs built to make your life easier. Ryan Hellyer suggests that programmers avoid writing unneeded code logic as much as possible. WordPress has many ways of handling the internal logic and those who don’t use the APIs often end up doing things incorrectly.

Konstantin Koshenin gets into detail about how the APIs offer easy solutions:

“There’s a lot of code in WordPress that is designed to make your life easier. Don’t use cURL or file_get_contents, there’s the HTTP API (wp_remote_* functions). Don’t design your own jobs system, there’s WP_Cron. Don’t do AJAX requests to your PHP files and include wp-load.php, there’s a lot of great stuff to deal with remote requests. Don’t write your own rewrites engine, there’s the powerful WP_Rewrite API. Other APIs to learn: WP_Query, Options API, Transients API, Shortcodes API, (my favorite) Settings API, Caching APIs and the new Customizer and Media APIs.”

WordPress has a lot going on for you to make use of, so it’s crazy to start writing things for yourself before checking out what it has to offer. And as Aaron Campbell says, “reinventing the wheel is not only a waste of time, but more likely to break in the future.”

Thanks for input from: Konstantin Kovshenin, Ryan Hellyer and Aaron Campbell.

Find A Focus

Finding a focus is great advice for anyone who’s out to get work or make a career in the WordPress ecosystem. While there is a lot of work around, the people who do really well are those who find their niche and dominate it.

Boone Gorges points out that this could be a specific market, such as verticals like music or restaurant journalism ,or a technical focus on a specific aspect of WordPress — BuddyPress, Multisite or a specific framework. He says:

“Specialization has lots of benefits. You get to know your part of the codebase, making it faster to do new and interesting things. Getting your work done faster means making more money. Expertise leads to a better reputation, and reputations are easier to earn in a niche market. The better your reputation, the more you can charge. And if your focus is on one of the non-commercial parts of the WP ecosystem, like bbPress or BuddyPress, your expertise will make it possible to get involved in the free software project in ways that might be easier than cracking into WordPress core.”

This type of focus doesn’t apply only to developers. Tammie Lister is right when she says that the “WordPress world would suffer if we were all developers.” Find the thing that you’re good at and specialize in that area — the WordPress room has plenty of space for designers, writers, support pros, entrepreneurs, business people and all the other types who make up the WordPress ecosystem.

Thanks for input from: Boone Gorges and Tammie Lister.

Go To Events

WordCamps and Meetups, or any sort of WordPress event, are a great way to learn more about WordPress. WordCamps are normally large one or two day conferences, sometimes followed by a “hack day” or “dev day” during which developers get together to work on WordPress. They usually have some sort of social element where you can learn more about your WordPress peers.

(Image source: Stefano Coviello)

Meetups are smaller events. They are usually more regular, lasting a few hours with one or two speakers. While WordCamps often have people from all over a country, Meetups are usually focused on a specific local area. You can learn about WordCamps on WordCamp Central, or find some Meetups on Meetup.com.

Brad Williams recommends that developers go to events to meet other developers — he promises that they don’t bite (I will hold him to this promise).

Kim Gjerstad suggests that you find some people to have a beer with:

“It’s good to go out and meet other people and ask their opinion so if you can find a WordCamp or find a WordPress beer after hours, go out and meet people and talk to them. It’s a whole other level of learning when you meet people, and there is so much advice to be given.”

Thanks for input from: Kim Gjerstad and Brad Williams.

Final Words Of Wisdom

• If you want to read just one website for tips to get started with your blog, Paul Gibbs recommends reading WordPress.com’s Get Focused page.
• Seisuke Kuraishi says you should keep WordPress updated, as “this is the easiest way to keep your website secure and bug free.”
• If you’re a blogger, Eric Mann suggests that you reach out. “Blogging is never done in a vacuum.” Comment on other people’s blogs, respond to comments on your own and interact with the community.
• Another one for bloggers, this time from Vid Luther. Focus on your content. “People come to your website to read and consume what you have to say, interesting content is key. Anything else is bike shedding.”
• If you’re starting a WordPress business, start it based on something that you need, says Vladimir Prelovac. “For example a certain plugin functionality, theme niche or a specific service. This way, even if the business does not take off, you will at least satisfy your own need by building it.”

Conclusion

I want to finish this article with some excellent advice from Isaac Keyet. Isaac is the Mobile Group representative at WordPress.org. His advice is applicable to anyone:

“Just jump in. If you have an idea for a great blog or website, set something basic up quickly (there are good free or cheap WordPress hosts out there) and start writing. As you go, you’ll learn more about what works and what doesn’t, as well as what your readers like the most. There really is no time like now, and too many great ideas never see the light of day because their inventor didn’t take that first step.”

Jump in, get started, don’t be afraid and always feel that you can ask for help. The WordPress community is a pretty welcoming place. Find some of the people mentioned in this article and follow them on Twitter; they continue to come up with WordPress advice that you’ll be able to use as you continue your WordPress learning experience.

Hang out in the WordPress chat room, help out on the support forums, go to WordCamps and Meetups. Everyone starts out as a beginner, but with WordPress it’s easy to get far. All you need is a little bit of patience, commitment and enthusiasm. Eventually you’ll be the one offering the advice.

Got any advice of your own? Let us know in the comments!

(cp) (il)

---

© Siobhan McKeown for Smashing Magazine, 2013.

We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork. And as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one—desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going on for over five years now, and we are very thankful to all the designers who have contributed and are still diligently contributing each month.

This post features free desktop wallpapers created by artists across the globe for February 2013. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!

Please note that:

• All images can be clicked on and lead to the preview of the wallpaper,
• You can feature your work in our magazine by taking part in our Desktop Wallpaper Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

February Theme

Designed by Ricardo Gimenes.

• preview
• with calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1600×1050, 1680×1200, 1920×1200, 1920×1440, 2560×1440

I Believe I Can Fly

Designed by Elise Vanoorbeek from Belgium.

• preview
• with calendar: 1024×768, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
• without calendar: 1024×768, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Happy Valentine’s Day

Designed by Steffi Ulm from Germany.

• preview
• with calendar: 1024×768, 1280×1024, 1680×1050, 1680×1200, 1920×1080
• without calendar: 1024×768, 1280×1024, 1680×1050, 1680×1200, 1920×1080

Dear Love

“Spread the love!” — Designed by Abel from Singapore.

• preview
• with calendar: 1280×800, 1366×768, 1680×1050, 1920×1080, 2560×1440
• without calendar: 1280×800, 1366×768, 1680×1050, 1920×1080, 2560×1440

This Is Love

Designed by Katerina Bobkova from Ukraine.

• preview
• with calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050, 1960×1080
• without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050, 1960×1080

Like The Cold Side Of A Pillow

Designed by Sarah Tanner from USA.

• preview
• with calendar: 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440
• without calendar: 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Zombie Love

Designed by Cheloveche.ru from Russia.

• preview
• with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
• without calendar: 395×512, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

Moody February

“Shades from a February evening walk: twilight sky, fallen leaves, new growth.” — Designed by Dangerbrain from USA.

• preview
• with calendar: 320×480, 1024×768, 1920×1080, 1920×1200, 1920×1440, 2560×1440
• without calendar: 320×480, 1024×768, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Photoshop Life

“Each layer in the layers panel is a day in the month of February. The inactive tabs are the months before and after. The tools in the panel are to apply weather, activities and food. If only life could be as simple as a photoshop document with the ability to undo or apply filters to everyday life.” — Designed by Debbie Burkhoff from USA.

• preview
• with calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Flower

Designed by Jong S. Kim from United States.

• preview
• with calendar: 1600×1200, 1680×1050, 1920×1080, 1920×1200, 1920×1440
• without calendar: 1600×1200, 1680×1050, 1920×1080, 1920×1200, 1920×1440

Dance

“Be a free spirit, unwind & splash your moves and make the world jive with you.” — Designed by Ngangbam Kishor from India.

• preview
• with calendar: 1024×768, 1024×1024, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
• without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Abstract

“A view of 2 frozen planets, lots of blue tints.” — Designed by Rutger Berghmans from Belgium.

• preview
• with calendar: 1280×800, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
• without calendar: 1280×800, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

You Complete Me

“Dedicated to one of the most famous lines in romantic movies’ history. The incomplete heart has been created by photographing a floating lantern in slow shutter speed !! Happy Valentine’s Day :).” — Designed by Krutika Anand from India.

• preview
• with calendar: 1280×800, 1440×900, 1680×1050, 1680×1200, 1920×1080, 1920×1200
• without calendar: 1280×800, 1440×900, 1680×1050, 1680×1200, 1920×1080, 1920×1200

Ripped Away

“Abstract self portrait with added on acrylic medium.” — Designed by Ashley Rose from USA.

• preview
• with calendar: 1024×1024, 1152×864, 1280×800, 1440×900, 1680×1050, 1920×1200
• without calendar: 1024×1024, 1152×864, 1280×800, 1440×900, 1680×1050, 1920×1200

Winter

“A winter themed background for the last month of winter.” — Designed by Yasmine Damiri from the Netherlands.

• preview
• with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080
• without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080

Year Of The Snake

Designed by John Patrick Buenaobra from Philippines.

• preview
• with calendar: 1280×800, 1440×900, 1680×1050, 1920×1080, 2560×1440
• without calendar: 1280×800, 1440×900, 1680×1050, 1920×1080, 2560×1440

Whats Love Got To Do With It?

“A different angle to love and the innocence attached with it. My depiction of February.” — Designed by Debjani Bhattacharya from India.

• preview
• with calendar: 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050
• without calendar: 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050

Be My Valentine

“The month of love.” — Designed by Jana Engelhardt from Australia.

• preview
• with calendar: 320×480, 640×960, 1024×768, 1024×1024, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200
• without calendar: 320×480, 640×960, 1024×768, 1024×1024, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200

Lost Without You…

“February, the month of love. This wallpaper is dedicated to all those people out there who have found that one person in life. They would understand this feeling of being lost, if that person is not around to share your joy, sorrow, success, failure. Happy Valentine’s Day!!” — Designed by Charuta Puranik from India.

• preview
• with calendar: 320×480, 1024×768, 1280×1024, 1366×768, 1920×1080, 1920×1200
• without calendar: 320×480, 1024×768, 1280×1024, 1366×768, 1920×1080, 1920×1200

She Loves Me

“Ah February, the 14th is the day when we dare a little more than usual, or we await something special from that one person – the better friend, or the better half!” — Designed by Rihards Gromuls from Latvia.

• preview
• with calendar: 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440
• without calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Jackalope

Designed by Sasha Endoh from Canada.

• preview
• with calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1600×1050, 1680×1200, 1920×1200, 1920×1440, 2560×1440
• without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1600×1050, 1680×1200, 1920×1200, 1920×1440, 2560×1440

Valentine

“Love is in the air…” — Designed by Nicolas De Rechter from Belgium.

• preview
• with calendar: 1280×720, 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
• without calendar: 1280×720, 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Groundhog

“The Groundhog emerged from its burrow on February 2. If it is cloudy, then the Spring will come early, but if it is sunny, the groundhog will see its shadow, will retreat back into its burrow, and the Winter weather will continue for six more weeks.” — Designed by Oscar Marcelo from Portugal.

• preview
• with calendar: 1280×720, 1280×800, 1280×960, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
• without calendar: 1280×720, 1280×800, 1280×960, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Love Affairs

“Love is in the air this February! The last month of winter is always very romantic and inspires us to open our hearts and express our feelings to ones we love very much. This February calendar illustrates an unusual story of a young couple, who met each other by an accident.” — Designed by Brianna Davis from USA.

• preview
• with calendar: 1024×768, 1024×1024, 1280×800, 1280×1024, 1366×768, 1680×1050, 1920×1080, 1920×1200, 2560×1440
• without calendar: 1024×768, 1024×1024, 1280×800, 1280×1024, 1366×768, 1680×1050, 1920×1080, 1920×1200, 2560×1440

A Lost Woman.

“Instead of going with something happy and loving, I decided to make a wallpaper for those who have lost an important woman. To me, the picture means the following: The man is together with a woman he loves. But when looking in the mirror he sees the woman he should be married to. I believe all men have that one girl they loved with all their heart but could never conquer.” — Designed by Maarten Van Isterdael from Belgium.

• preview
• with calendar: 800×480, 1280×720, 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Joy Of Life

“…I get most Joy in life out of Music.” This famous quote from Albert Einstein together with the firsts notes of Handel’s Recorder Sonata in G minor, inspired me to create this wallpaper. I am willing to create a series of wallpapers about the Joy of Music. We’ll see!” — Designed by Yiannis Kranidiotis from Greece.

• preview
• with calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440
• without calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440, 2560×1440

Elemental Micah: Just Exhale

“I would draw one A5 image perday for five days and post it off and this was one of them. It’s strange to think that after those humble beginnings, it would end up being the cover of my graphic novel. This is something I’m very proud to show you and everytime it pops on your desktop, I hope it’ll remind you of the love that might have been…” — Designed by Michael Georgiou from the United Kingdom.

• preview
• with calendar: 1024×768, 1280×800, 1600×1200, 1680×1050, 1920×1200, 2560×1440
• without calendar: 1024×768, 1280×800, 1600×1200, 1680×1050, 1920×1200, 2560×1440

It’s Valentine’s Day!

“February is usually the coldest month of the year, but it is also the month of love…So Warm those days with the Valentine’s day wallpaper!” — Designed by Webolution from Greece.

• preview
• with calendar: 320×480, 1024×1024, 1280×800, 1280×1024, 1366×768, 1680×1050, 1920×1080, 1920×1200, 2560×1440, 2560×1600
• without calendar: 320×480, 1024×1024, 1280×800, 1280×1024, 1366×768, 1680×1050, 1920×1080, 1920×1200, 2560×1440, 2560×1600

February Flowers

“A little bit of romance, a little bit of vintage: Happy Valentine’s Day this month!” — Designed by Kari Andresen from USA.

• preview
• with calendar: 1023×1024, 1280×800, 1440×900, 1680×1050, 1920×1200
• without calendar: 1023×1024, 1280×800, 1440×900, 1680×1050, 1920×1200

Spring Kites

“Here is a wallpaper that celebrates the kites festival in India.” — Designed by Aadheesh Rajput from India.

• preview
• with calendar: 640×480, 800×450, 800×600, 1024×768, 1280×960, 1400×1050, 1440×1080, 1600×1200, 1600×900, 1680×945, 1680×1260, 1920×1080, 1920×1440, 2560×1440

Every Day Should Be Valentine’s Day

“Valentine’s Day is a big business today. I personally don’t celebrate it, because I think if you love someone every day should be Valentine’s Day. 🙂 That’s what this wallpaper is all about. The two birds – Milo and Pipita – are a wallpaper series and usually they argue about things men and women argue about ;), but as it’s the Valentine Edition I just went with something cute.” — Designed by Nicole Bauer from Germany.

• preview
• with calendar: 320×480, 640×960, 1024×768, 1024×1024, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
• without calendar: 320×480, 640×960, 1024×768, 1024×1024, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440

Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.

A big thank you to all the designers for their participation. Join in next month!

What’s Your Favorite?

What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below.

---

© Smashing Editorial for Smashing Magazine, 2013.

In the construction industry, a “firewall” is a specially-built wall designed to stop a fire from spreading between sections of a building. The term spread to other industries like car manufacturing, and in the late 1980s it made its way into computing. On one side of the wall is the seething electronic chaos of the Internet. On the other side is your powerful but vulnerable Web server.

These computer firewalls are actually more like fire doors because they have to let some stuff through. They monitor all the electronic traffic coming in and out of a network. They follow a strict set of rules to determine what is allowed and what is blocked.

This article explains in more detail how they work, the different types of firewalls available, what they are good at and not so good at, and how to configure them to protect a typical Web server.

Protocols And Ports

A computer is like a big housing complex. Every computer on the Internet has a numerical address, known as an IP address. At each address are two very large blocks of apartments. Each block contains 65,535 individual apartments. The vast majority of them are empty, but a few, especially the lower ones, have very communicative residents. All communication is by mail.

A computer is like two big blocks of apartments. Ten points if you can identify these apartment buildings.

The two blocks are called TCP and UDP. Residents of the TCP block only accept certified mail, and they are guaranteed to reply to you. Once you’ve started exchanging letters with someone in TCP, you can be sure they’ll see the conversation through to the end. The UDP block is a bit shabbier. Its residents only reply if they can be bothered. They usually do, but there are no guarantees.

Each resident has a different job. For example, the family in apartment 80 of the TCP block handles website inquiries. You can write to them with a request like “send me the home page for www.smashingmagazine.com” and they will duly reply and send back the data.

The couple in UDP apartment 53 are responsible for DNS. They translate domain names into IP addresses. Sometimes letters get lost, but that’s okay. The information they handle in UDP is not as critical. The sender can always ask again.

All addresses in the postal system therefore have three parts: computer IP address, block and apartment. So as an example: 80.72.139.101, TCP, 80. In reality, the block is the protocol, and the apartment is the port number. TCP stands for Transmission Control Protocol and UDP is User Datagram Protocol. Their main difference is that TCP creates and maintains a conversation (i.e. connection) between the two computers, whereas UDP does not. Therefore TCP is more reliable but slower.

Sender’s Address

In the example above, the web-serving family at 80.72.139.101, TCP, 80 are sitting around reading books, just waiting for letters. They never start their own conversations or connections. They are always on the receiving end.

But the sender also has an address. Whenever you browse for a Web page in your Web browser or on your smart phone, your computer assigns you an assistant in one of its apartments, generally one that is way up high in the building. A typical conversation between your Web browser and a Web server somewhere might look like this:

• From 99.99.99.99, TCP, 63454: “Dear 80.72.139.101, TCP, 80, It has come to my attention that you handle enquiries relating to the website www.smashingmagazine.com. Can you please send me the /books/ page? Yours truly, A Web Browser.”
• From 80.72.139.101, TCP 80: “Sure no problem. Here it is: <!DOCTYPE html> <html>…”
• From 99.99.99.99, TCP, 63454: “Thanks. That’s all. Bye.”

Apartment numbers below 1024 are more secure than the higher numbers. They have CCTV, and they are reserved for privileged tasks like website and FTP serving. The higher apartments are more ephemeral. People are moving in and out all the time. They are used for things like requesting Web pages and initiating FTP connections.

Danger

But not everyone is on the straight and narrow. Here is a sample conversation between a dodgy client living above a café and a trusting SSH resident on a vulnerable server. SSH is a method for connecting to a remote computer and running commands on it. The SSH resident always lives in the TCP block, usually in apartment 22:

• From 88.88.88.88, TCP apartment 58123: “Dear SSH server, I want to establish a connection with you. I would like to login as the user called root.”
• From 80.72.139.101, TCP, 22: “Sure no problem, what’s your password?”
• From 88.88.88.88: “smith”
• From 80.72.139.101: “That’s incorrect. Try again.”
• From 88.88.88.88: “jones”
• From 80.72.139.101: “Still wrong. Try again.”
• From 88.88.88.88: “bloggs”
• From 80.72.139.101: “Great. Hi Mr. Root, long time, no see. What do you want to do today?”
• From 88.88.88.88: “I think I’ll view the file /etc/passwd, the one with all the user names?”
• From 80.72.139.101: “Here’s the information you requested… Anything else?”
• From 88.88.88.88: “Yes — show me all files containing the word ‘credit card’”
• From 80.72.139.101: “Sorry. That took a while. But here you go:…”
• From 88.88.88.8: “Thanks, that’s all, bye.”

The first part of the SSH conversation above: logging in as root, getting the password wrong twice, asking for a file.

Levels Of Protection

The server depicted above is vulnerable. Anybody can send a letter to 80.72.139.101, TCP, 22. If they can guess the password correctly, then they have full access to the server and all its files. This section discusses four basic levels of protection which you can apply to a server to prevent this, and to only allow trusted people to communicate with your server.

Although SSH is just one of many services that can run on a server, it is a good one to start with because it offers the most control over the server. If a hacker breaks into your FTP or SMTP server, they can do damage, but not as much as with SSH.

Good Passwords

SSH does have its own built-in protection because it requires a user name and password. A first basic step in securing a server is to choose complicated hard-to-guess passwords.

Whenever the resident in apartment 22 receives a letter, he first asks for the correct password. If you can’t get it right, then he won’t help you. He’s a trusting person though. You can usually have as many tries as you’d like. Every three tries, you might have to resend your initial opening letter, but he generally won’t mind.

Refusing Connections

The SSH conversation above was partly faked. If you really try to SSH to 80.72.139.101 (the IP address of Smashing Magazine’s Web server), you will get this:

SSH connection refused.

This means that the resident in 80.72.139.101, TCP, apartment 22, is receiving his mail, but is immediately sending it back. He has a piece of paper taped to the back of his door which lists all the people who he is allowed to correspond with. He checks the sender’s address against the list. If you’re not on it, he refuses to engage in any correspondence. But he does send a polite note back which says, “Sorry, connection refused.”

This kind of protection is provided by software like TCP Wrappers on UNIX servers. The blocking is done at an application level using the files /etc/hosts.deny and /etc/hosts.allow.

With this type of blocking, it is still conceivable that a particularly cunning sender could convince the resident in apartment 22 to open a letter and read it. Also, it relies on the individual residents to take note of and obey the lists. Although the guy in apartment 22 in very conscientious, other residents may be less so.

Software Firewall

A software firewall is like a concierge who filters all the incoming mail before it is even distributed to the residents. He has a similar piece of paper on his desk. He checks the sender’s address against the list. If your address isn’t on the list, your letter goes straight in the bin. No follow-up or polite apology. Nothing. You wait around for a couple weeks and then give up. He also filters outgoing mail, consulting his list to see which residents are allowed to write to the outside world.

Technically it looks like this:

SSH connection timed out — either there is nobody home or there is a firewall in a the way.

This type of blocking is done at the operating system level. A software firewall makes sure the letter never even gets there. See this page for a nice explanation of the difference between TCP Wrappers and software firewalls.

Hardware Firewall

A hardware firewall is like having a well-trained security expert in your local post office. She has a similar list as the concierge, detailing who is allowed to send letters to whom. She might be protecting just your IP address, or she might be working for dozens of addresses at the same time, or maybe even the whole community. She scrutinizes every single bit of mail going into and out of your town. Anything she doesn’t like, she chucks. As above, you’ll just get a “connection timed out” message.

This is the ultimate in firewall security. The letters don’t even make it to the front gate. No chance at all that he’ll mistakenly pass on a letter to the resident in apartment 22.

Of course, you can implement all these levels of protection. And you can have multiple hardware firewalls. You could have one at your local post office, another at the bigger sorting office in the city and another that filters all mail coming into your county, state or country.

Note that in practice, a “hardware firewall” is just a computer which is wholly dedicated to being a firewall, and is physically separated from your Web server. The firewall itself is still a piece of software on that computer.

Stateless and Stateful Firewalls

The concierge and the security person filter incoming and outgoing mail. If they are new on the job, they are like stateless firewalls, i.e. packet filters. They treat all mail equally. When you send a letter to apartment 80, apartment 80 will send a letter back. That reply is checked against their lists. Your letter only gets through if mail from apartment 80 is allowed out.

After a while, they move up the pay scale and become stateful firewalls. They are trained to differentiate the outgoing mail between brand new outgoing letters and replies to previous letters. Consequently, their lists of rules can be a lot shorter. They can be told to deliver all letters that are part of an established correspondence, and throw away almost all new outgoing mail. So when you send a letter to apartment 80, the reply from apartment 80 is automatically allowed back through. But if on some lonely winter’s evening, apartment 80 suddenly decides to start up its own letter writing campaign, it won’t get through.

The next section looks at how the piece of paper with all the rules is formatted.

Firewall Rules

Whether you use a software or hardware firewall, you will hopefully get some sort of visual management tool. There are many firewalls available, each with its own way of doing things, but they generally stick to the same concepts. They mainly vary in their complexity. Some give you complete control but also require a lot of knowledge and effort. Others are simple but far less flexible.

This section introduces the terminology and shows two examples of firewall configuration interfaces.

Firewall Terminology

This is what the piece of paper on the concierge’s desk might look like:

1. Letters from any sender in any apartment to the TCP building, apartment 80 – deliver; replies to those letters from apartment 80 – deliver
2. Letters from the address 99.99.99.99, any apartment number, to the TCP building, apartment 22 – deliver; replies to those letters from apartment 22 – deliver
3. Any other letters to or from the TCP building – throw away
4. Any other letters to or from the UDP building – throw away

Whenever the concierge receives a new letter, he compares the sender’s and recipient’s addresses to each of these rules in order. When he finds a matching rule, he follows the instruction, which is to either deliver the letter or throw it away.

The overall effect is that anybody in the world can correspond with the Web server in apartment 80, but only the trustworthy people living at 99.99.99.99 can write to the SSH server in apartment 22. All other attempted communication is thrown away. This is how that would translate to a real software firewall like IPTables:

Rule	Protocol	Direction	Type	Remote IP	Remote port	Server port	Action
1a	TCP	incoming	any	any	any	80	Allow
1b	TCP	outgoing	established	any	any	80	Allow
2a	TCP	incoming	any	99.99.99.99	any	22	Allow
2b	TCP	outgoing	established	99.99.99.99	any	22	Allow
3	TCP	any	any	any	any	any	Deny
4	UDP	any	any	any	any	any	Deny

Most firewalls, however, will hide the gory details of new and established connections. They will assume that all replies to established connections are allowed through and only deal with the new connections. The table can then be much shorter:

Rule	Protocol	Direction	Remote IP	Remote port	Server port	Action
1	TCP	incoming	any	any	80	Allow
2	TCP	incoming	99.99.99.99	any	22	Allow
3	TCP	any	any	any	any	Deny
4	UDP	any	any	any	any	Deny

If these rules were applied to a hardware firewall, there would also be a server IP address, as hardware firewalls usually work on behalf of more than one server. In that case, the table could just have source and destination and no direction. like this:

Rule	Protocol	Source IP	Source port	Destination IP	Destination port	Action
1	TCP	any	any	80.72.139.101	80	Allow
2	TCP	99.99.99.99	any	80.72.139.101	22	Allow
3	TCP	any	any	any	any	Deny
4	UDP	any	any	any	any	Deny

To allow outgoing requests, the source and destination would be switched, with the server’s IP address 80.72.139.101 appearing in the source IP address column. Also note that the remote and server protocol are always the same.

Firewall Example

Some firewall configurations provide tables and forms similar to the one above and you just have to fill in the blanks. The example below is the software firewall tool provided by Plesk 9.5.4. Plesk is a common server management application. To see the screen below, click “Modules” on the left, then “Firewall,” “Edit Firewall Configuration” and “Add Custom Rule.”

Adding a new rule to the firewall in Plesk 9.5.4.

This has most of the fields shown in the table above: direction, action of allow or deny, server port, protocol and remote/source IP address. The mini-table above blocks both directions within the same rule (rules 3 and 4). In many configurations, these have to be done separately by setting up the rule and choosing a direction of incoming or outgoing.

In this interface, there is another choice for direction — forwarding. Port forwarding allows letters to be forwarded from one port to another. It is commonly used in household broadband routers, which allow several computers to share a single IP address by mapping ports.

For example, your laptop might have a local IP address of 192.168.1.10. When you request a Web page (with your sender’s address like 192.168.1.10, TCP, 60000), your letter first goes to your broadband router, which puts your letter in a brand new envelope with a new sender’s address (such as 78.78.78.78, TCP, 12013) and forwards it to its destination (such as 80.72.139.101, TCP, 80). When the router gets the reply, it remembers that apartment 12013 is just a forwarding address, so it puts it in a new envelope and forwards it to you (at 192.168.1.10, TCP, 60000). A typical Web server would not need to do port forwarding and so the firewall would block all forwarding.

The Plesk firewall is just a friendly interface for the UNIX firewall IPTables. The command iptables -L shows the current rules as above.

Another Firewall Example

The screenshot below is from the shared hardware firewall configuration tool provided by the host UK Fast. You have to pay extra for this service. In exchange, you can log into the UK Fast website and add, modify and remove rules:

A hardware firewall configuration interface for allowing incoming and outgoing traffic to TCP ports.

This interface is very simple. It already knows your server IP address and it assumes that everything not listed is denied. The only thing you can do is add allowed ports.

The ports relate to the server port for incoming connections and the remote port for outgoing connections. As above, this only deals with new connections. Established requests are allowed through automatically. So the first incoming rule on the left states that anybody in the world can access port 80 on the server (the web-crazy family).

The first outgoing rule on the right allows the server to request port 80 on other servers. You may wonder why your Web server would ever need to do this. Surely it is not spending its free time browsing the Internet. But it is necessary for things like PayPal Instant Payment Notification, where your server sends a request to PayPal to double check that a payment has been received. Similarly, most of the other outgoing rules allow your server to send emails, check email accounts and do FTP.

There is no mention of the remote IP address on this screen. That is configured separately by clicking on “Admin Config” and is shown in the next subsection.

Subnets

The UK Fast hardware firewall has a separate screen for entering remote IP addresses. They have a preset list of restricted ports (such as 22 for SSH and 8443 for Plesk), and only the IP addresses shown are allowed to communicate with those ports. All other ports (like 80 for Web serving) are allowed to correspond with anybody. You lose some flexibility this way, but it makes it very easy to configure.

Entering a list of source IP addresses which are allowed to connect to restricted ports.

This screen also introduces subnets. Up till now, all the rules have dealt with single IP addresses like 99.99.99.99, but you can also enter IP addresses in ranges.

IP addresses consist of four numbers between 0 and 255. (There are newer ones with six numbers but they are still relatively uncommon.) It would be nice to be able to enter ranges by putting things like 99.99.0-255.0-255. Unfortunately you can’t. Instead you enter a starting address like 99.99.0.0 and a mask like 255.255.0.0. Similarly the range 77.77.77.0-255 is entered as the address 77.77.77.0 and the subnet mask 255.255.255.0.

You can enter smaller ranges such as 77.77.77.8-15, which would be 77.77.77.8 with subnet mask 255.255.255.248. It’s confusing because it invokes binary, but there are lots of detailed subnet explanations available.

All the Fields

Here is a summary of the different fields discussed in this section:

• Rule number: remember that rules are checked and applied in order
• Protocol: either TCP or UDP
• Direction: incoming, outgoing or forwarding
• Remote IP address: such as 77.77.77.0
• Remote subnet mask: such as 255.255.255.0
• Remote port or port range
• Server IP address
• Server subnet mask
• Server port or port range
• Action: allow or deny

Sometimes the interface will have source and destination instead of direction, remote and server. In this case, they are the same for incoming mail, but reversed for outgoing. In other words, remote equals source for incoming but remote equals destination for outgoing.

The next section discusses the ports in more detail. The concierge’s piece of paper is very limiting. A real Web server will look more like the hardware firewall example above.

Configuring A Firewall For A Web Server

The Web server family usually lives in apartment 80. Many other popular computer services have a preferred apartment too. This section lists and describes some of the most common ports used by a standard Web and email server, and then provides recommendations on setting up your own firewall.

Ports

These are some of the well-known official ports you may come across. Some firewalls don’t even show the port number, only the service which usually uses it.

Protocol	Port	Used by	Description
TCP	20	FTP (active mode)	FTP operates in active or passive mode, as requested by the person doing the FTPing. In both modes, commands are sent to the server on port 21. In active mode, the server initiates a new connection from port 20 to send data back. In passive mode, there is an extra incoming connection to an unprivileged port (>=1024). So for FTP to work, you either have to allow outgoing connections from port 20 (active) or incoming connections from port 21 to port>=1024.
TCP	21	FTP	FTP is the File Transfer Protocol. Restrict it by IP address so that only trusted people can FTP to your server, or turn it off completely and only allow Secure FTP, which runs as part of SSH over port 22.
TCP	22	SSH	Secure Shell allows people to login and run commands on your server. This is very useful for server administration, but should be restricted by IP address.
TCP	23	Telnet	Telnet is an insecure version of SSH. It is usually completely denied.
TCP	25	SMTP	SMTP is the Simple Mail Transfer Protocol. It handles two tasks. As a Mail Submission Agent it receives email for all the email accounts set up on your server. As a Mail Transfer Agent, it can also forward email to other servers. The submission tasks are now handled more often by port 587. And the transfer tasks are usually configured to require a password, and relaying (forwarding email for accounts not even listed on the server) is turned off completely to stop SPAM relaying. Either way it needs to be allowed.
UDP and TCP	53	DNS	DNS stands for Domain Name System. It translates domains names like www.smashingmagazine.com into IP addresses. DNS data is transferred between servers using TCP, and DNS queries are handled with UDP. Unless your server is acting as a DNS server, only outgoing UDP needs to be allowed. This allows your server to look up domain names. For instance, if you have a website which does PayPal Instant Notifications, then your Web server probably POSTs a request to www.paypal.com, but first it needs to translate that into an IP address, so it needs to initiate a request from UDP 53. Alternatively, you can put the translation into your /etc/hosts file (on UNIX) so that the DNS request is not required.
TCP	80	HTTP	This is your Web server. Allow it so people can browse your websites.
TCP	110	POP3	POP stands for Post Office Protocol. If your server hosts email accounts, this port allows people to check their email.
TCP	143	IMAP	IMAP is the Internet Message Access Protocol. It is a more sophisticated alternative to POP3, as it not only stores your incoming email but allows you to create folders too. The person who creates the email account is the one who decides whether it should be POP3 or IMAP.
TCP	443	HTTPS	This port is the default for a secure Web server, which requires an SSL certificate.
TCP	465	SMTPS	This port was originally used for a secure version of SMTP. This is now done using the normal SMTP port 25.
TPP	587	SMTP	Port 587 is the official port for submitting email messages to a server.
TCP	3306	MySQL	Deny or restrict only to trusted IP addresses that connect directly to your MySQL databases from across the Internet.
TCP	8443	Plesk	Plesk is a server management tool. It runs as a mini-Web server, accessed via your Web browser. If you have a hardware firewall or a definitely permanently static IP address, you can restrict this by IP address. If you use Plesk’s own software firewall, then restricting by IP address is dangerous in case your IP address ever changes, or your office burns down or you need to access it from somewhere else.
TCP	10000	Webmin	Webmin is another server management tool. The same caveats apply as with Plesk.
TCP	1024- 65535	Outgoing requests	One of the first scenarios in this article was a person using a Web browser. In this case, a high numbered port on the client (1024 or above) connects to the Web server’s port 80. If your Web server looks up a Web page (as in PayPal IPN) it connects from one of its own high numbered ports. On many UNIX computers, the available range is set in the file /proc/sys/net/ipv4/ip_local_port_range. It is often from 1024-4099 or 32768-61000.
ICMP	n/a	Ping	Ping is used to check if a computer is reachable over a network. It uses a different port-less protocol called Internet Control Message Protocol. Some firewalls will also give you control over this.

Full Configuration

For a basic Web and email server with the Plesk management interface, you could configure your firewall to:

• Allow incoming connections from anywhere to TCP ports 25 (SMTP), 80 (Web server), 110 (POP email accounts), 143 (IMAP email accounts), 443 (secure Web server), 587 (SMTP)
• Restrict incoming connections to ports TCP 22 (SSH), 8443 (Plesk unless you use Plesk to configure the firewall)
• Allow outgoing connections from any port on the server to the remote TCP ports 25 (SMTP), 80 (web), 443 (secure web), 587 (SMTP) and UDP 53 (DNS lookups)
• Deny everything else

If you allow additional services, you will need to open up additional ports. This could include automatic backups, security scans or remote database access.

Checking With Telnet

All computers come with a Telnet client which allows you to connect to a Telnet server on port 23 and run commands. But the Telnet client can also connect to other ports, so it is a very useful way to check a firewall.

To use it, you’ll need to open a Terminal or Command Prompt. On a Mac with OS X, go to Applications → Utilities and run Terminal. On a PC with Windows, go to Start → All Programs → Accessories and select “Command Prompt.” If you use Ubuntu Linux, it’s under Applications → Accessories, and in a similar location for other flavors of Linux.

Once you’ve got the Terminal open, try typing something like this followed by “Enter”:

telnet www.smashingmagazine.com 21

First telnet will translate www.smashingmagazine.com into an IP address and then it will try to connect to its port 21. In this case the connection is refused, which means the FTP server isn’t running at all or is being blocked at the application level. Here are a few more examples:

Using telnet to probe www.smashingmagazine.com.

Ports 21 (FTP) and 25 (SMTP) refuse the connection. Port 23 (Telnet) doesn’t even reply, which may mean that it’s blocked by a firewall. Port 80 (Web server) connects successfully. I could then have issued an HTTP command like:

GET / HTTP/1.1
Host: www.smashingmagazine.com

Followed by a blank line. That would have given me Smashing Magazine’s home page. Instead I pressed Ctrl + ] to close the connection and then quit from Telnet.

Personal Firewalls

Firewalls are not just for servers. Many personal computers also have software firewalls, like the Windows Firewall on Windows Vista or the Mac Firewall in Mac OS X. Underneath, these probably operate in the same way as server firewalls, but a lot of the details are hidden. They often just have an on/off switch which blocks all incoming traffic, with the ability add exceptions by application rather than by port. There are more sophisticated third-party products available which allow for port and IP address restrictions.

Configuration screen for Windows Firewall in Windows XP Service Pack 2.

Configuration screen for Mac OS X firewall which is a graphical interface for the underlying UNIX software firewall called ipfirewall.

Firewall Pitfalls

Firewalls are great for blocking traffic from unwanted sources. If you have access to a firewall, it is advisable to at least limit FTP and SSH to trusted IP addresses. In some senses though, they are very crude. They either allow or deny. They do not care about the contents of the letter.

Things That a Firewall Can’t Block

Therefore, a firewall cannot block SPAM, viruses or hacks.

If your SMTP port 25 is open, then email can be sent to it. There might be 10,000 emails an hour discussing the finer points of Viagra, but they all look legitimate to a firewall. They might contain attached EXE files which will take over your computer once opened, but the firewall won’t notice.

Similarly, all standard Web servers have port 80 or 443 open. The firewall cannot tell the difference between a valid request for your home page, or a piece of software canvassing WordPress installations to look for weak spots, so it can post a Trojan Horse PHP file containing a mini-shell which will notify a hacker somewhere and allow your server to be used for denial of service attacks.

Finally, if a clever hacker somewhere figures out how to gain control over a server by issuing specially formatted requests to your IMAP port 143, the firewall won’t lift a finger.

Therefore, even if you have a firewall, you still need to worry about SPAM and viruses in emails, and you still need to keep your server software and websites up-to-date with the latest security patches.

Locking Yourself Out

Software firewalls have an extra pitfall. It is entirely possible to lock yourself out of your own server. The example above showed a software firewall configured within Plesk, which usually runs on port 8443. If you mistakenly blocked port 8443 and saved the configuration, then you would not be able to login again and undo it. This could also happen if you restricted Plesk by IP address and then your IP address changed.

You would then have to login via SSH and manually figure out how to reverse the rule by editing IPtables. If you had also blocked SSH, your only recourse would be to call the hosting company. They might have to attach a physical keyboard and screen to your server in order to login and remove the rule.

Conclusion

This article has covered the basics of firewalls, and has hopefully given you a clear idea of how they operate. The analogy to a pair of massive apartment complexes is not perfect, but provides an insight into the world of ports.

In conclusion, if you have access to a firewall, you should use it. For software firewalls, you can safely restrict SSH and FTP by IP address and block any other services you are not using. For hardware firewalls, you can reliably restrict access to Plesk or your chosen server management tool.

Credits of image on start page: Wikipedia.

(cp)

---

© Paul Tero for Smashing Magazine, 2013.