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

[Ask SM: CSS] Equal Spacing, CSS Font Replacement

By Chris Coyier, March 23rd, 2009 in CSS | 71 Comments

This is our fourth 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 distribute the horizontal space between elements evenly, how you can achieve maximum sides on images; you'll also learn best practices for CSS font replacement and 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, c) or, if you have a quick question, just tweet us @smashingmag or @chriscoyier.

Antoine Nicolas writes: Do you know how to perfectly and dynamically distribute objects horizontally in a container using CSS? This is a classic example of something that is fairly difficult to do in CSS but probably shouldn't be. I have approached this problem in a number of different ways in the past. I have revisited it a little now, and I'll present what I believe is the best solution here.

Read more...
70 New, Useful AJAX And JavaScript Techniques

By Noura Yehia, March 8th, 2009 in Developer's Toolbox | 174 Comments

As the Web grows and becomes more dynamic, more and more websites have user-generated content and tools that greatly improve the user experience in terms of usability and accessibility. Interactive solutions for lightboxes, form validation, navigation, upload, auto-complete, image cropping, slideshows, tool tips, sliders and tables are being developed that use nifty JavaScript and AJAX scripts.

When using these, developers have to carefully consider many subtle techniques to help users get things done. In this article, we present 70 new and useful JavaScript and AJAX techniques, all of which are of the highest quality and are more or less easy to configure. You will also find some very useful but better known techniques to use on almost any project you work on.

Read more...
40 Useful JavaScript Libraries

By Umut Muhaddisoglu, March 2nd, 2009 in Developer's Toolbox | 100 Comments

Popular JavaScript libraries such as jQuery, MooTools, Prototype, Dojo and YUI can be great for accomplishing common JavaScript tasks. These libraries provide many functions, whether the matter is related to events or effects or AJAX. And if one of these libraries can’t do the job, a plug-in probably exists that can.

Such flexibility is great but sometimes comes with a penalty (the size of JavaScript files being one of them). Although adopting a well-known JavaScript library is usually a wise decision, you may want to perform a task that can be accomplished by a more lightweight library dedicated exclusively to that task or that is not supported by the more popular JavaScript libraries.

Below, we present 40 stand-alone JavaScript libraries that serve specific purposes. These are not all the ones out there, but every Web designer or developer will find something helpful here.

Read more...
Ask SM [CSS/JS]: Divs of Equal Height, Dealing with IE 6

By Chris Coyier, February 20th, 2009 in CSS | 74 Comments

This is our third 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 take care of a smooth page scrolling and Internet Explorer 6 bugs. You'll also learn how to aggregate RSS Feeds, how to create dynamic width list images and how to create div-containers of equal height.

If you have a question on HTML, CSS or JavaScript, feel free to reach me (Chris Coyier) using one of these methods:
- Send your question by email to ask [at] smashingmagazine [dot] com.
- Post your question in our forum
- Or, if you have a quick question, just tweet us @smashingmag or @chriscoyier
Please note: I will answer as many questions as I can, but I will certainly not be able to answer them all. I hope that you will use the forums to post questions because that will give you an opportunity to get help from the community as well.

Read more...
50 Useful JavaScript Tools

By Jacob Gube, February 8th, 2009 in Developer's Toolbox | 87 Comments

JavaScript is a powerful client-side scripting language used in many modern websites and Web applications. In the hands of a skilled Web developer, JavaScript can enhance the user's experience of the website and provide rich interactive components and features. But even though syntactically simple in nature, JavaScript is often difficult to author because of the environment it runs in: the Web browser. JavaScript's popularity is evident in emerging technologies, such as Adobe AIR, which use it as a supported language for creating desktop-based applications.

Below, you'll find 50 excellent tools to help you achieve various tasks involved in authoring JavaScript code. You'll find useful tools to speed up your coding processes, including debugging tools to hunt down places where your scripts break, unit testing and validation tools to test your scripts in various situations, security vulnerability scanners and code optimization tools to make sure your scripts are light as a feather.

You'll also find a few new and alternative JavaScript and AJAX frameworks to help you explore options beyond the big names (i.e. MooTools, jQuery, YUI, Dojo, Prototype), in addition to useful scripts to help you accomplish a host of design and development tasks related to JavaScript.

Also, be sure to check out the following related posts:
- 75 (Really) Useful JavaScript Techniques
- 60 AJAX- and Javascript Solutions For Professional Coding
- jQuery and JavaScript Coding: Examples and Best Practices
- 50 Extremely Useful And Powerful CSS Tools
Read more...
75 (Really) Useful JavaScript Techniques

By Smashing Editorial, September 11th, 2008 in Developer's Toolbox | 227 Comments

Developers and designers are using more and more JavaScript in modern designs. Sometimes this can be a hindrance to the user and take away from the simplicity of the design, and other times it can add greatly to the user’s experience. The key is a) adding the right amount of JavaScript, and b) using the right JavaScript techniques. We have already collected various JavaScript techniques in the past – now it’s time for a new portion of JavaScript.

Thanks to the Web’s widespread adoption of JavaScript, JavaScript libraries have sprung up to help make design and development easier. Here are a few of the major JavaScript libraries that developers use: jQuery, Prototype, Scriptaculous, mootools, Dojo. These frameworks have thriving communities whose members have developed countless plug-ins that can greatly add to the JavaScript framework.

However, sometimes we need JavaScript solutions that are a little more involved or specific. Here are 75 more handy JavaScript techniques that have made websites much sleeker and more interesting.

Read more...
5 Useful Coding Solutions For Designers and Developers

By Smashing Editorial, August 11th, 2008 in CSS | 125 Comments

Often creative and truly remarkable design solutions remain unknown because we, designers, simply overlook them. Being busy with our own projects, we sometimes try to grasp the intuition behind (probably) complex and cluttered code of other designers to understand how they manage to implement particular design ideas. In fact, by just observing the code of other developers we can learn a lot from them; we can find interesting ideas and improve the quality of our work.

As you know, we, at Smashing Magazine, are quite curious folks. We are truly interested in unusual design approaches and creative solutions. Therefore we are regularly looking for them and once we found them, we analyze them, try to understand them and try to figure out both advantages and disadvantages of the technique we have found. And in this post we want to share some of them with you.

We would like to start with 5 advanced and elegant design approaches and ask you if you are interested in this series and would like to have more similar articles. Please let us know what you think in the comments to this post. Now let's dive in. You should probably have some CSS-knowledge already before starting reading this article.

Read more...
Should Links Open In New Windows?

By Smashing Editorial, July 1st, 2008 in How-To | 278 Comments

No, they shouldn't. At first glance the decision to open links in new windows or not depends on the given site and the preferences of its visitors. Visitors of the sites with heavy linking are more willing to have links opened in new windows than open dozens of links in new windows manually. Visitors of less-heavy-linkage-sites are more likely to open some specific link in new window to remain on the site and continue to browse through it afterwards. However, this is not true.

Users also don't like to deal with dozens of opened tabs and some visitors tend to quickly become angry with the disabled back-button. Furthermore, some visitors may not even realize that a new window was opened and hit the back-button mercilessly — without any result. That's not user-friendly and that's not a good user experience we, web designers, strive for.

Read more...
Style Switchers Are Back: Ideas, Examples and a Contest

By Smashing Editorial, June 5th, 2008 in Design Showcase, Events | 172 Comments

Design a style switcher and win an Apple Cinema 20 Flat Panel Display with 16.7 million colors, 400:1 contrast ratio, 0.258 mm dot pitch, 16 ms response time and 170-degree viewing angles. Yes, that's that easy. Style switchers are used to provide users with a choice of layouts, fonts, colors and views they can use to adapt the design to their personal needs. Designs with style switchers are more flexbile, more adaptive and more user-friendly as different visitors can quickly modify the design for their personal convenience.

Web designers can achieve significant usability-improvements by adding a simple style switcher to their designs. Style switchers are useful and powerful as they give users a better control of site presentation. However, this technique is almost never used and are sometimes considered to be unnecessary and useless which is simply not true. We would like to change it.

We want to motivate you to figure out how style switchers work and how you can use them to improve your designs.

Read more...
60 More AJAX- and Javascript Solutions For Professional Coding

By Smashing Editorial, April 15th, 2008 in Developer's Toolbox | 163 Comments

When it comes to design of modern web-applications, Ajax is considered as a standard approach. Interactive solutions for lightboxes, form validation, navigation, search, tooltips and tables are developed using Ajax libraries and nifty Ajax scripts. Ajax is useful and powerful. However, when using Ajax, one should keep in mind its drawbacks in terms of usability and accessibility. With an extensive use of Ajax, you can easily confuse your visitors offering too much control and too many features.

Nevertheless, it's important to know what's possible, particularly since you can develop new ideas further, improving the quality of your web applications. Since our last article 80+ AJAX-Solutions For Professional Coding many things have changed — new scripts were introduced, new creative solutions were developed, new robust development kits have been released. They all are supposed to serve a better user experience and provide more comfort for web-developers.

This post presents over 60 new useful Ajax scripts, libraries and solutions which you can use in your future projects. License agreements can change from time to time — please read them carefully before using the script in a commercial web-application.

You might want to consider checking out the following related posts:
- 30 Scripts For Galleries, Slideshows and Lightboxes presents scripts of impressive slideshows, lightboxes and galleries you can use for effective presentations of your images,
- 40+ Tooltips Scripts With AJAX, JavaScript & CSS with handy tooltips scripts for intuitive and well-designed visual clues,
- Data Grids with AJAX, DHTML and JavaScript with free solutions for data grids, developed with AJAX, DHTML and/or JavaScript.
Please notice: the overview presented below is not just a yet-another-one-collection of Ajax-scripts. It's a collection of really useful ones, the ones you can use in almost every project you'll be working on.

Read more...
Frameworks Round-Up: When To Use, How To Choose?

By Smashing Editorial, January 4th, 2008 in Developer's Toolbox | 114 Comments

by Chris Poteet

Software frameworks provide developers with powerful tools to develop more flexible and less error-prone applications in a more effective way. Software frameworks often help expedite the development process by providing necessary functionality “out of the box”. Such things include user/role management, data access, caching, and much more. These frameworks aid in helping you focus on the more important details of design and even project management by alleviating the need to reinvent the wheel for common development needs.

There are frameworks that cover specific areas of application development such as JavaScript/CSS frameworks that target the presentation (view) layer of the application, and there are others that handle more of the dynamic aspects of the application. Some include both!

In the following we present an overview of most popular web application frameworks; we cover both server-side (PHP, Java, C#, Ruby) and client-side approaches (JavaScript, CSS).

You can also take a look at
- an extensive comparison of web application frameworks on Wikipedia. The article provides a growing list of various frameworks and features they have to offer;
- the review of existing CSS Frameworks we've presented few months ago.
Read more...
80+ AJAX-Solutions For Professional Coding

By Smashing Editorial, June 20th, 2007 in Developer's Toolbox | 420 Comments

Web-developers can create amazing web-applications with AJAX. Stikkit, Netvibes, GMail and dozens of further web-projects offer a new level of interactivity we've used to give up the idea of. Modern web-applications can be designed with enhanced user interfaces and functionalities, which used to be the privelege of professional desktop-applications. AJAX makes it possible to create more interactive, more responsive and more flexible web-solutions. And it's the first step towards rich internet applications of the future.

Asynchronous JavaScript and XML isn't a new programming language, as it is often mistakingly called. Basically, AJAX is a set of XHTML, CSS, DOM, XMLHttpRequest and XML, put together and used together for the same purpose - to improve the user-server-interaction.
- To understand the idea behind AJAX, you should read Jesse James Garrett's article "Ajax: A New Approach to Web Applications" and Wikipedia: Ajax;
- to learn the basics of AJAX, you should go through some AJAX tutorials we've presented previously;
- to learn more about professional CSS coding, you should visit 70 Expert Ideas For Better CSS Coding;
- and to get a powerful and handy CSS-Toolbox for your future projects, you can use 53 CSS-Techniques You Couldn't Live Without.
In this article we'd like to present a list of over 90 useful AJAX-based techniques you should always have ready to hand developing AJAX-based web-applications. Auto-completion, instant field editing, menus, calendars, interactive elements, visual effects, animation, basic javascripts, as well as an extensive developer's suite should give you a useful and powerful toolbox you can use every day, without a need to go through hundreds of AJAX-related bookmarks. You may also want to take a look at the article 60 More Ajax and Javascript Solutions For Professional Coding.
Read more...
40+ Tooltips Scripts With AJAX, JavaScript & CSS

By Smashing Editorial, June 12th, 2007 in Developer's Toolbox | 229 Comments

Web users love informative clues. Whatever questions and misunderstandings might occur - delivering precise answers immediately is the primary task a responsive user interface should be able to cope with. To do that, developers have to consider subtle and well-thought tooltips - used correctly, they can greatly improve user experience and help users to get things done. In Web such "responsive" hints can be provided by tooltips. E.g., unclear input fields in web forms are perfect examples of a situation you might be willing to use a tooltip for. We'd like to thank Jurgen Koller for compiling an extensive list of tooltip scripts we've stumbled upon during our search. It gives many useful pointers, but we've managed to find some more. You might be willing to use Koller's post as a quick reference for your search.
Let's take a look at 43 handy tooltips scripts for intuitive and well-designed visual clues. It's nice to have them all in one place, once you need them. It's nice to be able to find them, once you don't have time to search for them.
Read more...
Data Grids with AJAX, DHTML and JavaScript

By Smashing Editorial, May 30th, 2007 in Developer's Toolbox | 111 Comments

In order to be presented effectively, information needs structure. The more intuitive data structure is designed, the better users can understand the content. Consequently, the data can be scanned and extracted in a more meaningful and systematic way. Table is a perfect example of a well-structured data presentation, which is easy to analyze and easy to handle. Used for its original purpose - to present data, not to style it -, it can convey ideas effectively. And this is what most of us are actually trying to achieve in the Web. Furthermore, the user experience can be greatly enhanced with further optional functionalities - such as sorting, filtering and fast editing. What solutions can you use to provide them in your tables? Few months ago we've covered the basics of semantically correct CSS-based tables - among other things, we've presented solutions for Zebra tables and few tables with sorting and filtering functionalities; but we've missed some important ones. Now it's time to get this right and list the rest - 17 free solutions for data grids, developed with AJAX, DHTML and/or JavaScript. In a brief and descriptive overview.
Read more...
30 Scripts For Galleries, Slideshows and Lightboxes

By Smashing Editorial, May 18th, 2007 in Developer's Toolbox | 297 Comments

Family photos, vacation snapshots or creative artistic works: whatever images you have to present, you can present them in a variety of ways. On a big screen, in slide shows or in a thumbnails gallery. However, to convey the message of presented data effectively, it's important to offer it in an attractive and intuitive way. Furthermore, the presentation itself can make images more valuable and simplify the browsing through hundreds of slides. There are literally hundreds of solutions for web-based galleries out there. We've selected 30 scripts of impressive slideshows, lightboxes and galleries you can use for effective presentations of your images. Most of them don't have any technical requirements, so you can use them right away. Let's take a look.
Read more...
14 Tab-Based Interface Techniques

By Smashing Editorial, April 18th, 2007 in Developer's Toolbox | 120 Comments

The popularity of tabs, well-known from tabbed document interfaces (TDI), is rapidly growing, challenging the creativity of both developers and designers. The development of efficient and user-friendly interfaces is quite hard to deal with, and tabs can guarantee a quick access to information without need to open and close dozens of windows at the same time. Tabs-based interfaces allow multiple documents to be contained within a single window and tabs can be used to navigate between them. And exactly this idea is being used more frequently recently. However, it doesn't have to be that complex. Using modern approaches, you can create and improve tab-based interfaces in few minutes. With CSS, JavaScript, DHTML and XMLHttpRequest (alltogether Ajax) almost everything is possible. Information isn't loaded in new windows, but loaded instantly with Ajax-based techniques. You can also use Back-button without worrying about losing your data. Let's take a look at some of the most interesting techniques we've found in the Web, searching for tab-based interface techniques.
Read more...
Tutorials Round-Up: Ajax, CSS, PHP and More

By Smashing Editorial, January 26th, 2007 in Tutorials | 133 Comments

Coding or designing a page, it's always nice to have some basic templates you can quickly modify or adapt to your needs. However, at least once you have to know, how to create this "universal" template. In this case tutorials prove to be an ultimate solution, particularly if you just want to get an idea how something works and where to start from. In fact, you don't have to re-invent the wheel all the time - you can use existing solutions, modify and improve them and publish them as well - just the way other people did it for you.

In this post we've covered over 200 Ajax, CSS, Flash, JavaScript, PHP, MySQL, RSS, XML as well as ASP, C++, Perl, Python and Java tutorials. You can also check out our list of Photoshop tutorials we've published before.

Read more...
CSS-Based Tables: Modern Solutions

By Smashing Editorial, December 29th, 2006 in CSS | 86 Comments

We coninue to present some of the best CSS-techniques which web-developers can always use working on their current web-project. Recently we’ve taken a look at the best css-based forms, today we present some useful techniques for displaying information in a tabular mode. In fact, tables can present data quite efficiently, particularly if you can use [...]
Read more...
AJAX, DHTML and JavaScript Libraries

By Smashing Editorial, November 15th, 2006 in Developer's Toolbox | 92 Comments

Ajax, DHTML and JavaScript components are important in the era of Web 2.0. Recent Web-applications tend to use them to provide more interactivity and guarantee better functionality. But what Javascript libraries can be used for a new web-project? What functions, effects and useful techniques are actually provided by them? We deliver answers. The result is an [...]
Read more...
Cheat Sheet Round-Up: Ajax, CSS, LaTeX, Ruby…

By Smashing Editorial, October 30th, 2006 in Developer's Toolbox | 170 Comments

Whether you’ve forgotten the name of a function or the property of a cascading style sheet - handy cheat sheets deliver the information you are looking for - immediately. Most cheat sheets are available as .pdf or .png-files, so you can print them and use them every day for whatever projects you’re currently working on. We present an extensive overview of useful cheat sheets we’ve found in the Web.
Read more...