Beast-Blog.com
Mike Cherim's Professional and Personal Web Log

If you’re a person who spins around fast when someone shouts “hey, you, web developer,” you probably use HyperText Markup Language (HTML) lists often — or you should anyway. But do you use them correctly and effectively? Let’s take a closer look at the three list types available, figure out what they’re best used for, and how to do so properly. Also, let’s see about putting them to use creatively, with imagination and a little bit of style.

Continue reading “Using HTML Lists Properly” »

I’ve come up with an idea that might be useful for obfuscating an email address using your Cascading Style Sheet or CSS. Not a linked email address, but one just posted on the page as text. Trouble is adding an email address to a web page as text or as a link means it will be harvested by ‘bots. Because of this, many people use something like email[at]domain[dot]com in hopes of hiding it. It is my understanding that can be harvested too, though. So I came up with something that may prevent that. For a bit, anyway.

Continue reading “Obfuscating your Email with CSS?” »

I’m making two announcements for the price of one today: One is the completion of my PHP AutoRun System; The second is my first use of the AutoRun system in the making of this “How to Make a CSS Web Site” tutorial. The idea for this goes back at least six months. It took me a while to make it happen because it’s, well, pretty involved, and I’m a busy guy. Finally, though, I have completed this project. I’ll explain here what these two things are all about and maybe get some [hopefully positive] comments and feedback.

Continue reading “Introducing PHP AutoRun and a CSS Tutorial” »

The “offset” class is a name I give to any element hidden off-screen using the Cascading Style Sheet, CSS, and every style sheet I make contains this class. You may call it “offscreen,” “offleft,” “offpage,” or whatever works for you, but regardless of what you call it, how it works and what it offers users remains the same: on-demand accessibility. But I discovered a downside recently.

Continue reading “Enhancing Accessibility with Offsets, Cautiously” »

More and more people are using WordPress as a Content Management System (CMS), and for good reason. It’s well supported, produces good mark-up, and it’s flexible. But when using it as a CMS it suddenly becomes very important to optimize the support of WordPress “Pages.” Unlike post, archive, and category links, a web site’s “Pages” have the utmost importance. This article will teach you how to produce a dynamic WordPress “Pages” navigation menu that looks good and behaves as a main navigation menu should.

Continue reading “Building a Dynamic WordPress Nav Menu” »

Is the dialogue (dialog) class semantic? Is it proper? I don’t know, but it’ll look right when writing dialogue on the web. Stories and other works are well served with a dialogue style paragraph. It’s ubiquitous in written works and literature throughout the print world so it serves the reader well to carry this style over to the web. According to William Strunk of Strunk and White’s The Elements of Style fame — which is arguably the authority on proper writing, a paragraph is a “unit of composition,” but when writing dialogue, it’s each unto its own, so to speak.

Continue reading “Writing Dialogue/Dialog on the Web” »

I recently published one of my mad experiments, CSS: Text Shadows (see the experiment page itself) and I linked to one of the best solutions I found on the web when doing some research. The innovator, Scott Jehl, got in touch with me to explain the merits of his method. He was very reasonable and appreciated what I had done so I decided to post here to have some open dialog (I will invite Scott to give his views in full). And I’d like to hear from others as well.

Continue reading “CSS: Text Drop Shadows” »

Onmouseover and onfocus events in JavaScript, and :hover and :focus pseudo element actions using CSS, open up a world of interactivity on the web for both mouse and keyboard users alike using most browsers. (I wrote most browsers because IE doesn’t recognize the pseudo element :focus and must use :active, and that’s only on anchors.) Font colors can change, backgrounds can change, static images can be replaced with new images. In fact, swapping out imagery can be the root of some of the more creative uses. But like everything, the more you offer means the more it can cost in terms of user resource demands and smooth interactivity.

Continue reading “Preloading On-Demand Images with CSS” »

First of all I will state that I had this article in my drafts, started with a single line: “What’s in a name?” I was going to offer something I felt was logical topic of conversation regarding naming classes and IDs for what they are so as to remember them and so they would make sense to you and your client. However, between then and now I had an unintentional but highly valuable discussion with some fellow Web Standards Group members. The topic will remain the same, but the advice I’m going to offer has been altered. I’m thankful I got the information I did before writing and publishing this article because I can now offer a more well-round article. The reason is some of the advice I was going to offer would have been a bit off mark and possibly misleading and I want nothing more than to offer solid information here. I was going to tell you that a logical class name for, say bold text (not to be confused with emphatic text using the <strong> element), would be .bold. I was wrong on some levels. While on the surface it may seem like a logical choice, it’s maybe not the best choice. I now realize it’s often best to name style classes not to define the style, but rather to be indicative of the function of the style. Why is it styled this way?

Continue reading “Class & ID Naming Conventions” »