onchange vs. oninput for Range Sliders

on | 5 Comments

Free range eggsA common UI pattern for a range slider is to allow the user to move the slider and display the value of it somewhere on the page, changing the displayed value as the user moves the slider.

I think the expected behaviour in such a case is that the value should display instantly, as the user is moving the slider, rather than the page waiting for the slider to finish moving before the displayed value is updated. I suppose there could be cases where you prefer a delay over instant results, but I think the expected behaviour is to display the results instantly.

As you’ll see in the videos below and in your own testing, the behaviour of the input event compared to the change event is not exactly the same in different browsers when applied to a range slider.

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 Ridiculously Big List of Design Tools and Resources

The Ultimate List of Design Tools and ResourcesLately I’ve been working hard on my weekly newsletter Web Tools Weekly, which focuses on tools for front-end developers.

The newsletter was originally supposed to include design-related tools on occasion, then I changed my mind and kept it mostly developer focused. Unfortunately, this left me with a huge list of useful design, color, and typography related tools that I’ve compiled over the last 6 months or so.

So here is everything I’ve compiled, dumped into one big cheesy post for your artificial browsing pleasure. :)

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.

Looking Forward to Reading: Smashing Book #4

Smashing Book #4The team at Smashing Magazine have come a long way. I’m sure many of us remember how they broke ground, paving the way for so many copycat websites. While they still have a place in their hearts for the occasional “round-up” post, they are now focused on publishing the best web design and development related content in the world.

In my opinion, now that they have branched out into print publishing and have drastically improved their review and screening process for authors and articles, I think they have overtaken the previous industry leaders and are now the #1 web development resource in the world. That’s not taking anything away from publishers like A List Apart, SitePoint, or others; those organizations have their niche, and they will continue to be big. But Smashing Magazine has, in my opinion, surpassed them all.