Categorie: tips+tricks

50 Extremely Useful And Powerful CSS Tools

We love useful stuff. For months, we have been bookmarking interesting, useful and creative CSS tools and related resources. We have been contacting developers, encouraging them to improve their tools and release their handy little apps to the public. Last year we prepared and published some of them in a series of smashing posts about CSS. Now again is the time to give these tools the attention they deserve. Big thanks to all designers and developers who contributed to the design community over the last months and years. We — our community and the design community — truly appreciate your efforts.

Below, we present 50 extremely useful CSS tools, generators, templates and resources. We did not include “traditional” CSS tools, such as Firebug or the Web Developer extension, but tried to focus on rather unknown tools that are definitely worth a look. Some tools are new and some are old, but hopefully everybody will find a couple of new useful or at least inspiring tools.

We strongly encourage you to develop these tools further, build on the ideas presented here, release new tools for the public and let us know about them. We would love to feature your handy tool in our next review.

Smashing Magazine – 50 Extremely Useful And Powerful CSS Tools

Opera: Web Standards Curriculum

As the most standards-compliant Web browser, Opera is dedicated to promoting Web standards across the globe. Web standards make the Web available to anyone, on any device, anywhere in the world.

Opera has created the Web Standards Curriculum (WSC) in association with the Yahoo! Developer Network. This tutorial course takes students from complete beginner to having a solid grounding in standards-based Web design, including HTML, CSS, and JavaScript development. The course is supported by top companies and organizations such as the Web Standards Project (WaSP) and Yahoo!.

Split into more than 50 focused articles, students can follow the curriculum from start to finish or simply read articles that interest them the most. Each article contains essential theory, practical examples, and exercise questions. The first 41 articles are now published, and roughly ten ones covering JavaScript basics will follow ASAP, to complete the course.

Why should you incorporate the Opera WSC into your curriculum? Web standards in a Web site promote efficiency, ease of maintenance, accessibility, device compatibility, and search optimization. The Opera WSC features the most up-to-date practices in Web standards. Best of all, the course is free, requiring no expensive textbooks.

Opera – Web Standards Curriculum

Character encoding

Character encoding can be wickedly difficult to get right, especially when you want to start using UTF-8. It seems there is always at least one part of the chain from your brain to the end user’s browser that has problems with UTF-8.

Two articles that try explain character encoding are The Definitive Guide to Web Character Encoding and UTF-8: The Secret of Character Encoding. I won’t pretend to fully grasp character encoding, but after reading these articles I believe I at least understand it a little better.

456 Berea Street – Character encoding

Rich IntelliSense for jQuery

A while back we updated VS2008 IntelliSense to not fail when referencing jQuery. However, getting IntelliSense for chained calls and rich summary/parameter hints still required adding special comments to a few thousand lines of jQuery. If you didn’t have the time, you could download such a file from friendly members of the community such as James and Brennan.

Visual Web Developer Team Blog – Rich IntelliSense for jQuery

Essential Visual Studio Tips & Tricks that Every Developer Should Know

In this blog entry, I list the essential tips and tricks that every developer who uses Visual Studio 2008 should know. I wanted to keep this list brief. I also wanted to focus on only those tips and tricks that I use on a daily basis. Almost all of these tips and tricks are just as useful regardless of whether you are building an ASP.NET Web Forms or ASP.NET MVC application.

Stephen Walther on ASP.NET MVC – Essential Visual Studio Tips & Tricks that Every Developer Should Know

  1. You don’t need to select a line to copy or delete it
  2. You can add a namespace automatically by pressing CTRL-.
  3. Never create properties by hand
  4. You can remove and sort unnecessary using statements
  5. Use CTRL-k+c to comment out code
  6. You can close all documents except the current one
  7. You can open a database by double-clicking the database file in App_Data
  8. You can copy a file or folder into a project by dragging and dropping
  9. Use CTRL-SPACE to perform statement completion
  10. Add new items by pressing CTRL-N or CTRL-SHIFT+A
  11. You don’t need to type file extensions when adding a file

Migrate apps from Internet Explorer to Mozilla

When Netscape started the Mozilla browser, it made the conscious decision to support W3C standards. As a result, Mozilla is not fully backwards-compatible with Netscape Navigator 4.x and Microsoft Internet Explorer legacy code; for example, Mozilla does not support as I will discuss later. Browsers, like Internet Explorer 4, that were built before the conception of W3C standards inherited many quirks. In this article, I will describe Mozilla’s quirks mode, which provides strong backwards HTML compatibility with Internet Explorer and other legacy browsers.

MDC – Migrate apps from Internet Explorer to Mozilla

CSS Sprites2 – It’s JavaScript Time

A sense of movement is often the differentiator between Flash-heavy web sites and standards-based sites. Flash interfaces have always seemed more alive—responding to the user’s interactions in a dynamic way that standards-based web sites haven’t been able to replicate.

Lately that’s been changing, of course, with a resurgence in dynamic interface effects, helped along by JavaScript libraries that make it easy—libraries such as Prototype, Scriptaculous, Moo, YUI, MochiKit (and I could go on). It’s high time to revisit the CSS Sprites technique from four years ago, and see if we can’t interject a little bit of movement of our own.

A List Apart: Articles: CSS Sprites2 – CSS Sprites2 – It’s JavaScript Time

URL Rewriting in IIS 7

I started to use URL Rewriting on a Windows 2008 Server running Internet Information Server 7.  At the time of writing, a technical preview of the module is available here: Using URL Rewrite Module.

After installing the module, I was able to configure a first rule that rewrote an incoming URL in the form of http://server/en/catalogue/123/abc123 to http://server/Catalogue.aspx?l=en&cat=123&sub=abc123, exactly the way I wanted it.

But when opening the page, I saw my layout and styles were gone.  Not difficult to know where the problem is, because stylesheets and images are loaded from the client with their path relative to the requested page.  In this case a reference to "style.css" will be loaded from http://server/en/catalogue/123/style.css instead of http://server/style.css, as the client doesn’t know we’re using URL rewriting on the server.

To get around this problem, several options are possible.  I’ll list few of them here, some good, some even worse.  Of course, these are not the only ones, but these were the ones I looked at to solve my problem.  Other solutions might be even better, so any input and feedback is welcome. My solution is much easier and fits my needs.  It’s posted below the other options.

  1. Override the Render() method of your base page or masterpage: URL rewriting breaks ASP.NET 2’s themes
  2. Use RewritePath Method (String, Boolean) with the second parameter (rebaseClientPath) set to false. (Huh? custom code?)
  3. Move your images and stylesheets out of the App_Themes folder (WTF?): URL Rewriting and folders with dashcommerce
  4. Hardcode your links to stylesheets and images (OMG!)
  5. I’m not going to list any more options as it’s getting worse and worse…

But why don’t you use the power when you’re using the force?

I wrote a rule that is processed before any other rule, and which takes any url pointing to file in an App_Themes folder (or just a stylesheet, which is also possible in the same way):

  • Pattern: ^(.+)/App_Themes/(.+)
  • Rewrite URL: App_Themes/{R:2}
  • and check "Stop processing of subsequent rules"

If you make sure that this rule is processed before the other regular rules by moving it to the top in the ordered list, than all references to theme files (stylesheets, images,…) are correctly served and your layout remains correct.

ASP.Net Load Testing and Optimization Toolkit – So you want to be a hero

One of my passions is optimization. There’s no code related task I like more than making something run better, faster, snappier – from tweaking UI registry keys to stripping out crap code – I want results. Usually if something is noticeably slow on the user’s end, there’s something fundamentally wrong that can be made faster – a lot faster.

PHP vs .Net – ASP.Net Load Testing and Optimization Toolkit – So you want to be a hero

Exception handling best practices in ASP.NET web applications

Exception handling plays an important part of application management and user experience. If implemented correctly it can make maintenance easier and bring the user experience to a higher level. If not, it can be a disaster.

How many times have you seen the error message that doesn’t make any sense or at least provides some valuable information, or even better – how many times have you seen the famous error screen with exception message and a complete stack trace on yellow background? Too many times, I would say. This is why, among other things, some of my colleagues were very interested in exception handling techniques and best practices.

The goal of this article is to provide an overview of what exception handling is from the user perspective and the perspective of people who maintain the application, and to show the best practices of how to implement useful error handling in ASP.NET web applications. This article is related to my previous articles CSS Message Boxes for different message types and Create MessageBox user control using ASP.NET and CSS since this two articles describes how to show user-friendly messages.

Janko At Warp Speed – Exception handling best practices in ASP.NET web applications

Testing IE Versions Just Got a Little Easier

Testing your sites on different versions of Internet Explorer has always been notoriously difficult mainly due to the fact that Microsoft prevents you from running to different versions of the browser in Windows. Sure there have been solutions to get around this limitation but in my experience, they’ve always caused unexpected results and instability for the operating system or required you to run a VM. Not ideal.

Ajaxian – Testing IE Versions Just Got a Little Easier

Google Doctype – Google Code

Google Doctype is an open encyclopedia and reference library. Written by web developers, for web developers. It includes articles on web security, JavaScript DOM manipulation, CSS tips and tricks, and more. The reference section includes a growing library of test cases for checking cross-browser and cross-platform compatibility.

Google Doctype is 100% open.

* Open source
* Open content
* Open to contributions from anyone

Google Code – Google Doctype