CodeinWP CodeinWP

Dear Microsoft, You Missed the Boat

By / / 111 Comments

Dear Microsoft, You Missed the BoatDear Microsoft,

I’m a web designer and developer who has been working with a variety of tools and languages in the web development industry for about 10 years now, mostly dealing with front-end tools and coding practices. Although I’ve spent a lot of time with you and your various technologies, I feel obligated to tell you that you missed the boat. Let me explain why.

About 9 years ago you released what was at the time the most standards-compliant web browser in existence, for which you even had the backing of Jeffrey Zeldman. Around that time, you were taking the browser market by the collar and showing it who’s boss. At one point, as you know, your browser held a 95% market share.

Read Article ➝

Not Another CSS3 Click Chart Update!

By / / Comments Closed

CSS3 Click ChartThe CSS3 Click Chart has been updated to include 4 new CSS3 properties, a few of which I’ve only recently come across.

At this point, most of the cool and trendy stuff has been included in the chart, so nothing new that I add will be of great interest, but I’m continually researching and discovering new properties and enhancements that are part of the CSS3 spec, so I’ll continue to add them over time.

Read Article ➝

Better Page Corner Ads with CSS3 Transforms

By / / 26 Comments

Improving Page Corner Ads with CSS3 TransformsThe other day I came across a useful site called ScriptSrc.net that allows you to get up-to-date script tag links that point to your favourite JavaScript libraries.

The site has a clickable corner ad promo to get people to “spread the word”. I thought using CSS3 there would be a better way to position such a corner advertisement (or promo, or whatever), because the clickable area for the ad on ScriptSrc.net is actually too big. In some cases, you might prefer the clickable area to be bigger, but I think it’s always best to keep the clickable area limited to the actual ad.

Read Article ➝

Center Multiple DIVs with CSS

By / / 70 Comments

Center Multiple Divs with CSSAt some point, you may have a situation where you want to center multiple elements (maybe <div> elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center.

There really should be a similar simple way to center multiple elements evenly spaced. It would be nice if CSS had a property called “box-align” which you could set to “center” then the child elements would be centered evenly within their parent.

Well, you can achieve something similar by taking advantage of CSS’s flexibity with “recasting” elements (for lack of a better term).

Read Article ➝

Is WordPress Screwing Up Your SEO?

By / / 41 Comments

Is WordPress Screwing Up Your SEO?Ever since WordPress burst on the scene and gained huge popularity among designers, developers and Joe Blow bloggers, it has become shockingly easy to create SEO-friendly content. WordPress handles everything for you: Pretty spider-friendly URLs, semantic content, accessibility, and structurally accurate heading tags.

Wait — scratch that last one. I’ve always been suspicious that WordPress’s HTML heading structure was slightly off, and recently my suspicions have been (evidently) confirmed. Two articles have provided some important info to help front-end developers, content strategists, and SEO experts structure their content in a more accessible, semantic, and SEO-friendly manner.

Read Article ➝

More Additions to the CSS3 Click Chart

By / / Comments Closed

More Additions to the CSS3 Click ChartCSS3 is fun to mess around with, and this info chart has certainly kept me busy while helping me to become more familiar with the newest techniques in CSS.

I’ve made updates and modifications to the click chart, including a few improvements to some of the already-existing examples, to make them more specific. The changes are listed below, or you can skip the boring descriptions and just use the demo button to view the updated chart.

Read Article ➝

jQuery Tutorial for Beginners Downloadable PDF

By / / 44 Comments

jQuery Tutorial for Beginners Downloadable PDFA little over a month ago, I published a fast-paced jQuery tutorial that went through a bunch of the syntax basics, to help those new to jQuery get up and running with it as quickly as possible.

In the comments, someone named Kelly said they saved the page as a PDF. I thought that was a great idea, so I thought I would reformat the entire tutorial as a PDF for easy downloading and printing.

Read Article ➝

What is Inline-Block?

By / / 28 Comments

What is Inline-Block?If you’ve been developing with CSS for some time now, you’re certainly familiar with the inline-block value for the display property. The most common use for this property/value pair is when getting IE6’s margins to behave.

To briefly explain what I’m talking about, if you float an element in IE6 and give it a margin setting on the same side as the direction of the float, the margin will (strangely) be doubled. You could fix this with an IE6 hack with a margin setting that’s half the value of the original, or you could (in many cases) give the element’s display property a value of inline-block (again in an IE6-only hack or stylesheet). This will resolve the issue in most, if not all circumstances.

Although this IE6 workaround for floated elements has probably been the most useful way to implement the inline-block value, it could serve a much more legitimate purpose if the value itself is better understood.

Read Article ➝

Updates to the CSS3 Click Chart

By / / 12 Comments

Updates to the CSS3 Click ChartI’ve added five new items to the CSS3 Click Chart. I also added a couple of filter hacks for IE, and corrected some syntax examples.

Each item on the chart includes a clickable heading that opens an info panel on the bottom of the screen displaying a basic description of the item, along with example syntax. To accommodate the fact that the chart is now more than one screen, I’ve integrated Alen Grakalic’s Easy Slider jQuery plugin.

Read Article ➝

⭠ Newer Articles Older Articles ⭢