Smashing Magazine we smash you with the information that will make your life easier. really.

Power Tips For WordPress Template Developers

With its latest releases, WordPress has extended its potential well beyond blogging, moving toward an advanced, robust and very powerful content management solution. By default, WordPress delivers a very lightweight, minimal system that offers only basic functionalities. But where the WordPress core falls short, there are a wealth of plug-ins that extend its limitations.

Plug-ins often offer simple solutions, but they are not always elegant solutions: in particular, they can add a noticable overhead, e.g. if they offer more functionality than needed. In fact, some general and frequently needed WordPress-functionalities can be added to the engine without bloated plugins, using the software itself.

This article presents 8 tips for WordPress template developers that address common CMS implementation challenges, with little to no plug-in dependence. These examples are written for WordPress 2.7+ and should also work in the latest WordPress-version.

Read more...

10 Useful WordPress Loop Hacks

The loop is a very important aspect of WordPress blogs. In fact, the loop is what allows you to get posts from your WordPress database and print them on the screen. A set of useful and user-friendly functions, the loop is incredibly powerful. With it, you can get a single post, a list of posts ordered by date, title or category, a list of posts written by a specific author and much more.

In this article, we'll show you 10 useful things you can do with the WordPress loop to make your blog even more powerful than it is right now.

The problem. The loop and the query_posts() WordPress function allow you to easily retrieve a list of posts published in a specific week or month. Unfortunately, getting posts published between, for example, March 17 and May 3 isn't that easy. Let's solve this problem.

You may be interested in the following related posts:

• Custom Field Hacks For WordPress
• 15 Useful Twitter Hacks and Plugins For WordPress
• Mastering WordPress Shortcuts
• 100 Amazing Free WordPress Themes For 2009

Read more...

Adaptive CSS-Layouts: New Era In Fluid Layouts?

Fluid web designs have many benefits, but only if implemented correctly. With proper technique, a design can be seen correctly on large screens, small screens and even tiny PDA screens. With bad coding structure, however, a fluid layout can be disastrous. Because of this, we need to find ways to work around most, if not all, of the cons of fluid design.

If you as a designer are going to go through all the extra work of creating a functional fluid layout, why not go a bit further and make it compatible with all resolutions, instead of just most? You can use a few techniques to create an incredibly versatile, adaptive layout that will stay perfectly functional with the constantly changing screen sizes.

In this article, we'll discuss effective techniques to create 100%-functional adaptive CSS-layouts, and provide details on other tutorials and practices.

Also consider our previous articles:

• Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?
  This article discusses the pros and cons of each type of layout. Either one can be used to make a successful website layout, as long as you keep usability in mind.
• Flexible Layouts: Challenge For The Future
  Discusses the challenges of flexible layouts for the future.
• Screen Resolutions and Better User Experience
  Introduces the issue of screen resolutions, then considers the average user's profile.

Read more...

Custom Fields Hacks For WordPress

In our previous articles on WordPress hacks, we discussed the incredible flexibility of WordPress, which is one of the biggest reasons for its popularity among bloggers worldwide. Custom fields in particular, which let users create variables and add custom values to them, are one of the reasons for WordPress' flexibility.

In this article, we've compiled a list of 10 useful things that you can do with custom fields in WordPress. Among them are setting expiration time for posts, defining how blog posts are displayed on the front page, displaying your mood or music, embedding custom CSS styles, disabling search engine indexing for individual posts, inserting a “Digg this” button only when you need it and, of course, displaying thumbnails next to your posts

Read more...

Progressive Enhancement: What It Is, And How To Use It?

Progressive Enhancement is a powerful methodology that allows Web developers to concentrate on building the best possible websites while balancing the issues inherent in those websites being accessed by multiple unknown user-agents. Progressive Enhancement (PE) is the principle of starting with a rock-solid foundation and then adding enhancements to it if you know certain visiting user-agents can handle the improved experience.

PE differs from Graceful Degradation (GD) in that GD is the journey from complexity to simplicity, whereas PE is the journey from simplicity to complexity. PE is considered a better methodology than GD because it tends to cover a greater range of potential issues as a baseline. PE is the whitelist to GD's blacklist.

Part of the appeal of PE is the strength of the end result. PE forces you to initially plan out your project as a functional system using only the most basic of Web technologies. This means that you know you'll always have a strong foundation to fall back on as complexity is introduced to the project.

Read more...

[Ask SM] Transparent Background, Positioning Problem

This is our fifth installment of Ask SM, featuring reader questions about Web design, focusing on HTML, CSS and JavaScript. In this post we’ll cover how you can style only the text inputs, refreshing a content-block automatically, how to avoid some positioning problems and create and use transparent div-backgrounds; we also discuss further CSS-related problems and deliver answers to a couple of quickfire questions.

If you have a question about CSS or JavaScript, feel free to reach me (Chris Coyier) via one of these methods: a) send an email to ask [at] smashingmagazine [dot] com with your question; b) Post your question in our forum or c) if you have a quick question, just tweet us @smashingmag or @chriscoyier with the hashtag #asksmcss.

Please note: I will do what I can to answer questions, but I will certainly not be able to answer all of them. However, I hope you use the forums to post questions because that gives you the best opportunity to get help from the community.

Read more...

Beginner’s Guide To Ruby On Rails: Part 2

Last week we published Getting Started With Ruby On Rails, the first part of our Ruby On Rails introduction. We explained basic ideas behind Ruby and presented concepts and essential components of the language. In this article you'll learn more about Rails, you will learn how to get Ruby on Rails running on your computer, and get an overview of the basic functionality of Rails and demonstrate how Rails’ main parts work together.

I assume you're already familiar with some other form of Web development, whether PHP, Python, Perl or Java, and relational databases like MySQL. First, we'll introduce Rails and Ruby and the basic ideas behind both. I'll teach you just enough Ruby so that you understand the code samples. I'll tell you how to get Ruby on Rails running on your computer, and I'll give you an overview of the basic functionality of Rails and demonstrate how Rails' main parts work together.

After reading these parts, you should have an idea of whether Rails is for you. If you get the feeling that it is, I'll point you to some good tutorials on the Web that you can use to learn Rails. I'll also provide a lot of further reading recommendations so you can dig as deep into the topic as you like.

You may want to take a look at the following related posts:

• Getting Started With Ruby On Rails: Ruby
• 10 Useful Tips For Ruby On Rails Developers

Read more...

10 Advanced PHP Tips Revisited

Here, on the Smashing Editorial team, we always try to meet the expectations of our readers. We do our best to avoid misunderstandings, and we try to spread knowedge and present only the best design practices and development techniques. However, sometimes we do make mistakes. And when we do, we apologize and do our best to correct what we've done.

In November 2008 we published the article 10 Advanced PHP Tips To Improve Your Programming. Apparently, according to negative comments to the post, it contained some errors and some statements that are just wrong. We sincerely apologize for our mistake, and we are truly sorry for any inconvenience we caused by it. However, this simple apology is not good enough.

To solve the problem, we asked Chris Shiflett and Sean Coates, two PHP gurus, to take a closer look at the article, explain its errors and make it perfectly clear what is actually right and wrong in the theory and practice. This article is a professional response to our article published a couple of months ago.

Read more...

Getting Started With Ruby On Rails

If you're a Web developer who's been curious about Ruby on Rails but has never gotten around to trying it out because you couldn't find a suitable overview of its advantages, then this article is for you. We want to bring Ruby on Rails closer to those who want to take a peek first, without going through an entire tutorial. So, this article is structured a little different from most other introductions out there; hopefully it is more useful because of this.

I assume you're already familiar with some other form of Web development, whether PHP, Python, Perl or Java, and relational databases like MySQL. First, we'll introduce Rails and Ruby and the basic ideas behind both. I'll teach you just enough Ruby so that you understand the code samples. I'll tell you how to get Ruby on Rails running on your computer, and I'll give you an overview of the basic functionality of Rails and demonstrate how Rails' main parts work together.

This tutorial consists of two articles: in the current, first article we get started with some basic concepts and essential components of Ruby on Rails. In the second part (it will be published next week) you will learn how to install the engine; you'll also take a closer look at Rails’ inner workings and discover main advantages of Ruby on Rails. Please stay tuned.

After reading these parts, you should have an idea of whether Rails is for you. If you get the feeling that it is, I'll point you to some good tutorials on the Web that you can use to learn Rails. I'll also provide a lot of further reading recommendations so you can dig as deep into the topic as you like.

You may want to take a look at the following related posts:

• 10 Useful Tips For Ruby On Rails Developers

Read more...

10 Advanced PHP Tips To Improve Your Programming

PHP programming has climbed rapidly since its humble beginnings in 1995. Since then, PHP has become the most popular programming language for Web applications. Many popular websites are powered by PHP, and an overwhelming majority of scripts and Web projects are built with the popular language.

Because of PHP’s huge popularity, it has become almost impossible for Web developers not to have at least a working knowledge of PHP. This tutorial is aimed at people who are just past the beginning stages of learning PHP and are ready to roll up their sleeves and get their hands dirty with the language. Listed below are 10 excellent techniques that PHP developers should learn and use every time they program. These tips will speed up proficiency and make the code much more responsive, cleaner and more optimized for performance.

Read more...

12 Principles For Keeping Your Code Clean

Beautiful HTML is the foundation of a beautiful website. When I teach people about CSS, I always begin by telling them that good CSS can only exist with equally good HTML markup. A house is only as strong as its foundation, right? The advantages of clean, semantic HTML are many, yet so many websites suffer from poorly written markup.

Let's take a look at some poorly written HTML, discuss its problems, and then whip it into shape! Bear in mind, we are not passing any judgment on the content or design of this page, only the markup that builds it. If you are interested, take a peek at the bad code and the good code before we start so you can see the big picture. Now let's start right at the top.

Read more...

50 Excellent AJAX Tutorials

AJAX provides Web developers with plenty of opportunities to enhance the user experience and improve the performance of their websites. There are countless ways that AJAX can be used, and fortunately there are plenty of good and useful AJAX tutorials out there to help you with your own implementation.

This post serves as a collection of useful tutorials on working with AJAX in a wide variety of ways. You’ll find tutorials on working with forms, building shopping carts, creating chat features, working with log-ins and usernames and much more.

For more on AJAX see:

• 80+ AJAX Solutions for Professional Coding
• 60 More AJAX and JavaScript Solutions for Professional Coding
• 40+ Tooltips Scripts with AJAX, JavaScript and CSS
• Tutorials Round-Up: AJAX, CSS, PHP and More

Read more...

jQuery and JavaScript Coding: Examples and Best Practices

When used correctly, jQuery can help you make your website more interactive, interesting and exciting. This article will share some best practices and examples for using the popular Javascript framework to create unobtrusive, accessible DOM scripting effects.

The article will explore what constitutes best practices with regard to Javascript and, furthermore, why jQuery is a good choice of a framework to implement best practices.

Read more...

WordPress Developer’s Toolbox

Web designers and developers are getting an increasing number of requests from clients for custom theme development, and a growing number of designers are also building their own themes to distribute for free or to sell as premium themes.

With all of the WordPress development that is going on, there is a need for an organized collection of resources to educate, inspire and equip developers to improve the quality and efficiency of their work. This post provides all kinds of WordPress-related resources to do just that.

Read more...

Top 10 CSS Table Designs

Before we start, let's review the general rules of thumb when styling tables:

Tables love space. Set the width of tables carefully, according to the content. If you don't know the perfect width, simply set the width of the table to 100%. Tables look nicer when they have "overwidth", and when it comes to tables too much width is definitely better than too little width.

Cells need some padding. Sure, each table cell relates to each other. But it doesn't mean that we have to pull them too close, right? Define some space between the cells, crammed up table cells are so much harder to read.

Treat tables the way you treat content. Tables are read similarly to the way we read text — except it's harder and it takes more time to read a table. So be careful with the amount of contrast you are giving to your table. Use soft colors — it's easier for the eyes. Don't treat your table like it's a graphical decoration. Make sure that the style you apply to it makes the content more readable, not the other way around.

Read more...

35 Useful Source Code Editors Reviewed

To edit HTML- and CSS-code you only need a simple plaintext-editor — the rest depends on your skills and your creativity. However, to make your life a little bit easier, you can use some more comfortable source-code editors with advanced editing features. These features can effectively support you during coding, debugging and testing. Powerful modern editors provide developers with syntax highlighting, diff, macros, plugins, code-snippets, preview-option and an integrated FTP-management tool. Some editors go even further and offer a complete integrated development environment with numerous features and functions.

In the list below we present an overview of 35 established or rather unknown — but useful source code-editors; you'll probably find "usual suspects" — your favourite editor or the editor you've once been working with. But you'll also find some rather unknown alternatives which are definitely worth considering when choosing an optimal source code editor.

Some of the "ancient" text-editors such as EMacs or Vi are still alive and have achieved a remarkable level of quality over years. We've presented them below proving that sometimes it is really better to consider preferring a rather old editor to a "fresh" one. The position of the editors in the list is rather random and doesn't necessarily correspond to our personal evaluation of the editors. Please notice: even although this overview presents quite many editors, it doesn't mention all of them.

Yesterday we've published a review of 25 WYSIWYG-editors. Now, what about useful source code editors? What is your favourite?

Read more...

25 Useful WYSIWYG Editors Reviewed

When it comes to coding editors, it's damn hard to a get a clear overview of all the benefits and functionalities different editors have to offer. However, in the end everybody needs one, so it's important to know which editor is best tailored to your personal needs.

WYSIWYG-editors are often criticized by real coding ninjas for bloated, dirty and not standards-complaint source code they've been producing over the last years. However, WYSIWYG-editors have become much better recently. Some of them even produce valid and elegant code.

Sometimes you need to provide your clients with some simple tools to edit or update their web-sites. And this is where the utility of WYSIWYG-editors comes in. As a web-professional you need to provide your clients with some sophisticated advice and offer a simple yet effective tool — e.g. a WYSIWYG-editor. In this article we've tried to give you an overview of both useful and deprecated WYSIWYG-editors.

Read more...

Improving Code Readability With CSS Styleguides

Once your latest project is finished, you are very likely to forget the structure of the project's layout, with all its numerous classes, color schemes and type setting. To understand your code years after you've written it you need to make use of sensible code structuring. The latter can dramatically reduce complexity, improve code management and consequently simplify maintainability. However, how can you achieve sensible structuring? Well, there are a number of options. For instance, you can make use of comments — after all, there is always some area for useful hints, notes and, well, comments you can use afterwards, after the project has been deployed.

Indeed, developers came up with quite creative ways to use comments and text formatting to improve the maintainability of CSS-code. Such creative ways are usually combined into CSS styleguides — pieces of CSS-code which are supposed to provide developers with useful insights into the structure of the code and background information related to it.

This article presents 5 coding techniques which can dramatically improve management and simplify maintainability of your code. You can apply them to CSS, but also to any other stylesheet or programming language you are using. You can browse through the references listed under the article — they containt further information about how you can achieve a well-organized and well-structured code.

You may also be interested in the articles

• 70 Expert Ideas For Better CSS Coding,
• Code Beautifying, Formatting and Compressing Tools and
• CSS Formatters and Optimizers

Read more...

Professional Web Design Forums

Web design-related forums are a place where you interact with other designers, exchange ideas or discuss your first drafts. When you have a problem, you can post the issue, and then receive feedback on possible design or coding solutions from community members. This interaction is a great way to establish contacts and build relationships. Forums are used for networking and marketing purposes. They are practical places to solve problems and can serve as a form of social diversion.

As designers and developers, we choose a forum depending on its ability to approach our needs. In best case the forum should be large enough, moderators should be cooperative and the posts should be responded quickly. There is nothing worse than posting a thread on a forum and no one replies to it.

In forums, users develop a reputation over time. The forum software can be used to track this. Some forums allow users to rate each other as well. Also, the more you participate and the more professional input you bring to the community, the more other members will recognize you and respect your opinion.

Read more...

Best Of April 2008

Every month we take a look around and select some of the most interesting web-development-related web-sites. We read articles, check out tools, analyze the advantages of new resources. Below you’ll find useful references, tutorials, services, tools, techniques and articles we’ve found over the last 30 days - an overview of web-sites you shouldn’t have missed in April 2008.

All images can be clicked and lead to the sites from which the screenshots have been taken.

Read more...