Recently I’ve been doing some CSS training at work and one of the guys was having trouble understanding the difference between block and inline elements. I thought for a moment, and here is what I came up with to help him. Maybe it will help someone else, too.

Block-Level Elements Are Pipes

Block-level elements such as divs, paragraphs, and lists are like pipes—they typically occupy a well-defined space, and they often stack on top of each other like pieces of PVC pipe fitted together. Their job is to direct the “flow” of content where you want it to go. You can choose which kind of pipes you have and even decorate them.

Inline Elements Are Water

Inline elements like links, span, strong, and em are like water—they flow and take the shape of the container they are in. They take the path of least resistance. If the container they are in isn’t big enough, they will spill over where they’re not supposed to go. You can change the color, sweetness, and flavor of the water, but it’s still liquid.

If this analogy doesn’t help and you need more basic information, learn more about block and inline elements here and here.

How do you go about interviewing a web programmer to make sure that his code isn’t as rumpled as his shirt?

We’ve been hiring at Sebo Marketing, and my experience leads me to focus on four main areas when I talk to potential hires:

Four Parts of a Web Programmer Interview

1. General Knowledge

   It’s usually a good idea to try and take stock of a candidate’s knowledge by asking some basic questions that cover a wide range of topics in web programming to test the breadth of his or her skill set. The W3Schools has quizzes for XHTML, CSS, PHP, and many other topics. These aren’t a perfect measure of someone’s knowledge, and some of the questions aren’t all that great (Like the one in the XHTML test that asks whether or not XHTML will replace HTML), but they can help you get a general idea. If your candidate misses more than 5 or 6 questions, you may need to keep looking.

2. Specific Task Performance

   I try to give interviewees a specific task or small project that will utilize a mix of skills to solve a (limited) real-world problem. They don’t even have to finish the task—it’s useful to see how far they got and how they were going about solving the problem.

3. Portfolio of Work

   In order to learn web programming, one must do it. There’s no escaping it. If potential hires don’t have a portfolio or aren’t willing to share it, they may never have done any real work. Even first-time hires need to code something that they can show. In my mind, a candidate’s portfolio is the most important gauge of ability in the interview.

4. Overall Fit

   Even if a candidate can write AJAX in his sleep and is helping write the upcoming CSS3 spec, he still may not make sense as an employee for your company. If salary/wage requirements are too high or if a part-time hire can’t work the proper hours due to scheduling issues, for example, then things just won’t work out. Candidates that aren’t a good fit for your organization are hard to pass on when they are well qualified, but trying to compromise on requirements and needs so they can work for you is a dangerous thing.

You’re Hired!

If your candidate can answer general web programming questions, solves your sample task, has a portfolio of well-crafted projects, and fits well with your organization, offer him or her a job! If there are a few problem areas, see if the situation can be managed through training, trial hire periods, or lower pay. If there are lots of red flags, many missed questions, and no samples of previous work, be warned! Good luck with your interviews.

Before I kick off my spiel, here is the link to the List of Web-safe Fonts

Typography is an important area of design, even on the web. Fonts, leading, letter-spacing, and other typographical choices say things about your site’s character and content and influence the likelihood that site visitors will actually read your content.

Typographic Choices Are Different on the Internet

It’s different getting typography right on the web. The resolution is much, much lower than print (72 dpi instead of at least 300 dpi in print). You run into problems with fractional pixels. There’s no easy method for kerning. And many typographical choices are dramatically modified or even eliminated because users can resize and reflow the text.

The CSS2 Spec Has Helped

The CSS2 Specification has controls for some of the most important typographical decisions—there are controls for leading (line-height), letter-spacing, font size, and others. Most modern browsers support these typography declarations. Web typography has moved forward a lot thanks to the acceptance and implementation of the CSS2 Spec.

Font Choice is Abysmal on the Web

Really, the most important hurdle in web typography is font choice. There is currently no universally accepted method for embedding fonts on a page or site, and thus web designers must create images with their text in them (there is a wide selection of text-image replacement techniques) or they are limited to the fonts that can be found on the majority of relatively modern Windows and Mac systems (without even thinking about the other operating systems out there, like Linux). It’s a pretty short list.

The List of Web-safe Fonts

Alberto Martinez has maintained a very good list of universally available fonts and Windows/Mac font pairs that are very good approximations of each other. Here is his List of Web-safe Fonts.

If you exclude symbols and webdings, there are 14 total fonts on the list, many of which are very similar. There aren’t many people who are going to notice a huge difference between Times New Roman and Palatino Linotype, for example. The fonts with the most character are Impact, to be used sparingly, and Comic Sans, to be used even more sparingly.

On the bright side, it doesn’t take long to learn what your font choices are, and the web is a much more consistent place because of the limited font selection. That being said, I still hope that someday soon we’ll be able to see some kind of advanced font system in place that will unlock the world of fonts to web typographers.

To create a successful site, you must find a need and then fill it. Tabeze is trying to do just that when it comes to domain name research.

One of the basic problems of many domain name research tools is the time it takes to determine whether or not each domain is already registered or not. Another is that it can be hard to brainstorm because it is hard to keep track of your past ideas and use them for inspiration.

Tabeze Changes How Domain Name Research Is Done…

Tabeze is basically an AJAX domain name research tool. It allows you to create as many “tabs,” or domain name searchers, as you’d like. Each tab allows you to determine whether or not a domain name is registered. You can use as many tabs at a time as you’d like—I can’t usually type fast enough to use more than 4 or 5 at once. When you get a result you’d like to keep, just leave it on the page and open up another tab. It’s really cool to be able to research multiple domain names simultaneously and to be able to see all my searches on one page.

…But Has a Few Kinks to Work Out

I had problems with the page occasionally locking up if I had too many tabs running queries. That was frustrating because I have to copy down all the research I’ve done so far and reload the page. I lose the ability, unless I re-query all the previous domain names, of seeing all the research I’ve done on one page.

One feature that I really, really wanted was the ability to reorganize the tabs—I kept wanting to click and drag the tabs to reorganize them and group them into related sets. Grouping ideas is one of the best roads to great brainstorming, and I missed the ability to do that. The other feature I wanted was to query multiple domain-name extensions at once and view the results in a table or list that would normally be hidden but would appear when I hover over or click on a tab.

Tabeze Needs to Grow Up

Well done, Tabeze, finding a need and doing a pretty good job of filling it. Please, please fix the connection problems I run into sometimes and add a few features to make domain name research much easier and snappier. If the server didn’t crash, I’d use Tabeze, with or without new features. Until then, I have to stick with the Network Solutions domain name research tool.

Google recently came out with a new tracking code for its Analytics service. It has a cool new feature, but validators also choke on it.

Let’s Fix the Code

Virtually all browsers in use today understand that they should ignore what’s in between <script> tags. For the most part, we don’t have to insert comment tags <!-- --> any more. Unfortunately, most validators still choke on what they find in between script tags. So technically, you could leave comment tags out, but in practice it’s very annoying to have the validator spitting back a big pile of errors.

To “fix” Google’s tracking code (which in theory should be perfectly fine) so that it doesn’t result in validation errors, simply add comments around the contents of the script tag, like so:

A Cool New Feature

The nicest feature of the new Google Analytics tracking code is that it has Javascript code that automatically detects whether the page the code is on uses a secure, https:// connection or a normal, http:// connection. No more having to write your own detection code to include a different script.

Personally, I think adding comment tags is a small price to pay to get a tracking code that validates and automatically detects the transfer protocol. Thank you, Google.

If you haven’t learned to do a CSS rollover effect yet, it’s time to learn—they’ve become a main-stay of modern web design and do just about everything better than a Javascript rollover (there are a few exceptions, which I will discuss briefly later)

The Basics of a CSS Sprite Rollover

The basic concept of a CSS sprite rollover is to assign a background image to a link. This image contains the possible states of the link rollover. Based on which “state” is being used, we shift the background image around to display the correct portion of the image.

For example, the Lime Blog RSS feed icon is a CSS sprite rollover. Here’s the image used to create the effect:

In the default state of the link, I display the normal version of the RSS logo. The rest is hidden beyond the borders of the link (illustrated in black) like this image illustrates:

In the highlight or selected state of the link, I use the same RSS logo as a background, I just shift it so that the hover state is displayed and the default state is hidden:

Here’s the basic HTML needed:

And here’s the important part of the CSS:

Benefits of a CSS Rollover Using Sprites

There are many benefits to using CSS sprite rollovers, especially for most simple rollover applications:

• Reduce page load time

  By reducing the number of file requests and the overhead associated with each file, you reduce the load on your server, resulting in a snappier site.

• Automatic pre-loading of alternate states

  The alternate states are included in just one image that is loaded for the initial state. Once the initial state is loaded, all of the states are loaded.

• Simple updates

  You only have one image file and one CSS file to edit.

• Clean, semantic HTML

  Most Javascript rollovers result in bloated, ugly code with behavior and presentation mixed in with the content.

• Improved accessibility

  Some people have their Javascript and/or images disabled. Rollovers based solely on Javascript would break, whereas the CSS rollovers would degrade gracefully.

Shortcomings of CSS Sprites

There are a few shortcomings to using CSS to execute rollovers:

• Lack of transition effects

  Using animated .gifs, you can create some transitions, like the tabs at the bottom of the page on Corda.com, but you have to use separate images and they get big quickly.

• Limited states

  For some complex applications, it’s nice to have multiple states to an object, and CSS is limited to link, visited, hover, and active.

For most intents and purposes, however, CSS is lighter, faster, and cleaner for a rollover, and a sprite-based rollover is one of the best CSS rollover methods.

The Internet is a fantastic place. Websites are simply clamoring for your attention, and many of them will give you something for free just for stopping by. You don’t have to pay to access most web sites, either. You can browse or search for just about anything and find a free resource that fills your needs. Articles, indexes, ebooks, .pdfs, and images are everywhere.

Accessing these resources is easy, legal, and free. How you use these materials, however, can be like walking a tightrope—there are lots of ways to screw up, and many of them hurt.

Images Are Easy to Grab

If you need images for a project, it’s really easy to grab images off the web using Google Image Search, Microsoft Live Search Images, or any stock photo site. Some of them even come formatted just the way you need them. With others, a little work with a smudge tool or creative use of cropping removes watermarking and makes the images look just like they came from your copy of Photoshop or digital camera. Is it ok to gather images this way? We have to look into the definition of a copyright to know for sure.

What Is a Copyright?

Copyrights are intended to protect a creator’s rights to the content he or she created, especially with regard to financial compensation for the use of the content.

Private incentives to create are supported by the exclusive rights that owners of copyright enjoy. Copyright owners (or their assignees) have the right to carry out or authorize reproduction and distribution of their work; preparation of derivative works; and, for literary, musical, and various visually based works, the public performance or display of their work. (1)

How Do I Know Something is Copyrighted?

The U.S. Copyright Act states that a copyright exists once an “original work of authorship [is] fixed in any tangible medium of expression . . . from which [it] can be perceived, reproduced or otherwise communicated.” (2) Thus, images “fixed” to files and hard drives are copyright, by default and without notice, the moment they are created. Everything on the Internet is copyrighted—how you use content is simply a matter of what permissions the creator has given you for its use.

Infringing on Copyright Holders’ Rights and the Consequences for Doing So

Using images from websites found through a search engine image search or from stock photo sites without permission or payment is infringing on the copyright holder’s rights. This includes creating derivative works.

There are some exceptions to copyright rules that fall under “fair use,” but most of these are in relation to educational purposes or making copies of something you already paid for the right to use. It you are going to use an image or other content for monetary gain (like on a blog with ads), then you definitely need to follow copyright law.

If you infringe on a copyright holder’s rights, there are three general outcomes. You might not get caught, but then you have to live with knowing you broke the law. You might be caught and asked to pay fines or damages. Finally, you might get caught and have someone take you to court.

Getting caught does happen, too. I have recently seen at least two companies that have had to pay fines. One had to pay $240,000 for the use of images it didn’t have the rights to. It nearly sank the company.

Play by the Rules

It’s more expensive to get caught than it is to pay for images up front, and all three outcomes for infringing on copyright holders’ rights reflect very poorly on your character. If you respect copyright holders’ rights, then you can justly expect others to do the same and you can morally enforce your rights. You could also put a line on your web site or on your work that states you comply with all copyright laws. This marketing statement may help reward you for following the law. Finally, following copyright law will let you be comfortable in your own skin—you’ll be able to feel that you are an honest person.

Have you ever felt like just trashing your web site? Melting, burning, shooting, shredding, oozing? But then you realize how much work a site is and you think better of it.

Then you start to wish that you could destroy someone else’s site. Especially someone else’s site that is ugly, has invalid code, or promotes political views that just aren’t sane.

If you want to melt down your site, trash someone else’s, or simply waste some time, check out Net Disaster.

Here’s what happened when I took a machine gun to my site:

Some people have wondered: is Blog Rush against the Google AdSense terms of service?

Blog Rush, as I see it, is NOT against Google AdSense’s terms of service.

The Google AdSense blog says:

As many of you already know, our program policies strictly prohibit any means of artificially generating ad impressions or clicks, including third-party services such as paid-to-click, paid-to-surf, auto-surf, and click-exchange programs. These programs offer incentives for users to view web pages or click on ads, resulting in activity that is harmful to our advertisers.

Google wants to make sure that site and blog owners aren’t providing people with an incentive (beyond normal interest and curiosity) to click on AdSense links.

Blog Rush Is in the Clear

If you examine each part of the quote above, you can see that Blog Rush does not violate any of the statements made.

No one is paid to click on AdSense ads after they land on a page they found through Blog Rush. Doing so does not result in a reward for visitors.

No one is being paid to surf or autosurf—in money or clicks. Even if you surf your own site for an extra 1000 pages, you’ve only earned impressions. If your article titles suck, no one is going to click them. This will be even more true as cheating is weeded out of the impression system. You can see this even now—the cheaters are generating thousands of extra impressions, but no extra clicks. Click-through rates are simply falling. If someone does click through, it’s because they are truly interested in what you have to say.

Blog Rush is not click exchange—no one is using the system to agree to click each other’s AdSense links.

There is no incentive to view other web sites’ pages.

Because Blog Rush in no way affects visitor behavior in relation to AdSense ads, it does not violate the terms of service. So go ahead and join Blog Rush and see if it increases your blog traffic.

No? Good. Otherwise I’d be skewering you in this post, too.

We all know the type, though—two-faced, double-dealing, hypocritical, dealing behind closed doors, polished smile with forked tongue, amicable but back-stabbing.

A Real-life Weasel

I have a recent example. No real names or specific information will be used because I’m not 100% sure I have all the information correct and I wouldn’t want to ruin someone’s name due to inaccuracy, but this is the way things appear to me.

A young entrepreneur I know, we’ll call him Adam, had some really good ideas and decided to start a business. He figured out a process that is tricky and has a learning curve too big for the average consumer, and so he began a service to carry out the process for customers. Things got moving, but Adam quickly figured out that to hit critical mass he had to get some outside help. He asked a friend to invest in his company and a relative to help manage the business.

Being an entrepreneur, Adam continued to have good ideas related to the process he created. For some reason, he didn’t feel like sharing them with his investor or his manager. He began working on his ideas parallel to his first business. Eventually, they were developed enough that Adam left his first business to start a new business. The interesting thing is that the new business is in the same industry, performing the same service, in the same geographical area. The only difference is that his new business incorporates his new ideas and doesn’t involve his investor or manager.

Analysis of a Weasel

Why was Adam willing to stab his friend/investor and family member/manager in the back?

Maybe it was greed. He wanted a bigger share of the profits from his good ideas for himself.

Maybe it was bad personal skills. Adam couldn’t work with his investor or his manager very well, and rather than resolve issues, he decided to just leave.

Maybe it was malice. He was mad at his investor and/or manager for a perceived wrong and wanted to punish them.

We may never know with Adam, but these reasons usually point at a flaw in the weasel, not his situation or coworkers.

Consequences of Being a Weasel

Despite the immediate gains that a weasel may reap, there are some negative effects:

1. I will never do business with Adam, and I will try and persuade anyone who is considering doing business with him that it isn’t a good idea. I can only look at him with contempt for what he did, and I can’t trust him. In general, a weasel can expect to lose the trust and confidence of some (or all!) of his associates.
2. Depending on the contracts he signed, Adam may have done/be doing something illegal. For example, there are often non-compete clauses or issues of intellectual property at stake. The process may have been associated with the business and not Adam himself, which means he may be stealing his former company’s intellectual property to use in his second company. In general, if weasels take actions that are illegal (and not just unethical), they can expect to be caught eventually. The odds are certainly against them.
3. Adam may work for a while with his new business and realize that it is going to fail, that it isn’t as successful or efficient or profitable as his last business. Weasels often don’t realize how good they have it until they’ve burnt their bridges on the way to something that appears better, but turns out not to be.

There are lots of ways to be a weasel, some of which are illegal, some of which are not. The reason you would be called a weasel, though, is because they are all unethical. Be careful about how you deal with people and make promises. If you change your deal or break your promises for your own benefit, you risk being labeled a weasel and facing some or all of the consequences that come with being a weasel.