Web Design Articles

This section of Impressive Webs features articles covering front-end technologies like HTML, CSS, and JavaScript. Some of these posts are opinion pieces and others are more research-based discussions of standards and best practices, with occasional roundups.

Frontend RSS Feeds Revisited

Frontend RSS Feeds RevisitedBack in 2008, Paul Irish posted a modest list of RSS feeds for front-end developers to follow. Since that original post, he’s updated the list multiple times, and his list is now on GitHub growing to over 200 feeds.

It looks like the list hasn’t been updated in 6 months or more. Not a really big deal, but I noticed when I imported the OPML into my feed reader, there were a number of broken feeds, empty feeds, and feeds not updated in quite some time.

For a while now I’ve wanted to put together my own list of front-end feeds, so here it is.

Cursor-Over-Text Behaviour in Browsers

Cursor-Over-Text Behaviour in BrowsersBy default, in all major browsers, when you hover your mouse over text on a web page, the cursor changes from the regular arrow (the “default” cursor) to a “text” cursor.

You can see this demonstrated in the GIF below or by simply testing it out on just about any web page:

w3schools: The Ugly, the Bad, and the Good

w3schools logoFor the record, I don’t hate w3schools. Apparently, a lot of people find their website useful. And from a human perspective, I’m happy for their success. After all, it’s run by one or more people, just like you and me, who have to feed their families.

But with everything we know about SEO and web development best practices, their ability to remain at the top of search results and also be in the top 200 most-visited websites in the world even after Google has made so many updates to their ranking algorithms, baffles us all.

In this post I’ll attempt to analyze a number of things about the w3schools.com website, both good and bad (mostly bad) and see if we can’t learn a few things and draw some conclusions.

A Data-based Analysis of the CSS Standards Approval Process

on | 5 Comments

CSS LetterI recently did a complete overhaul of my CSS Values info-app. The design is basically the same, with some minor adjustments. But the website is now using a MySQL database to store all the info (as opposed to throwing everything into plain HTML) and it now includes browser support charts for every CSS property.

Much of the info is probably in need of improvement, but there’s something significant I noticed when transferring the data from the HTML to the database. It turns out, a certain bias exists with the types of properties that the W3C has approved, and I think we can use this information to speed up the standards process in the future.

input.select() — What’s the Correct Behaviour?

input.select() behaviourSome things in the specs have behaviours that browser makers are required to adhere to. But other areas are a bit gray, where there is no definite guidance on implementation, so sometimes the behaviour is different from browser to browser.

Take a look, for example, at the select() method, which allows you to use JavaScript to select the text inside an input or textarea element.

IE11 “Emulation” and Conditional Comments

IE11 EmulationSometime over the past week, my Windows 7 machine did some updates that, amazingly, included an auto-update of IE10 to IE11. This is great news. This is the first time I’ve heard of any version of IE being pushed out automatically as a “critical” update (which I assume is what it did, since I don’t ever do the optional updates and those don’t happen automatically).

Those who have checked out IE11 have probably noticed a visual overhaul to the developer tools. One particular thing I noticed is that the “document mode” and “browser mode” options that were present in IE10’s tools have now been integrated into something called “Emulation” (which you can open quickly by hitting F12 then CTRL-8).

What’s the Status of the ::selection Pseudo-element?

::selection pseudo-elementEver since HTML5 Boilerplate put the ::selection pseudo-element on the map, so to speak, most CSS developers nowadays have been including this selector as part of their universal styles.

To get cross-browser support, the ::selection pseudo-element (which is used to change styles on highlighted, or selected, text) is declared like this:

Good Code Solves Problems

ProblemIt should be a coder’s goal to make sure that every character in every line of code serves some purpose.

The quality of code is not dependent on good form, prettiness, or theoretical benefits. Code should solve problems.

HTML5 lets you omit closing paragraph tags and closing tags for list items. Some cringe at the thought of this, but it’s perfectly valid code. So if omitting extra tags helps your code become leaner and faster, then you’re solving a problem and that makes it good code.

Diversity in Sports: Still an Issue in 2013?

on | 8 Comments

Girl in Blue Jays shirtA colleague today mentioned the 2013 Toronto Blue Jays — a much improved team compared to what was fielded in 2012. It’s owned and operated by Rogers Blue Jays baseball Partnership, a division of Rogers Communications

I opened up their website and scanned through it, quite excited by the upcoming season and the game schedule. It was only when I clicked through to their team roster that I saw this: