A 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.
Back 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.
By 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:
For 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.
My blog is not nearly as popular as some other websites in the industry. But I regularly get emails from people through my contact form, asking about various things, including:
I 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.
Some 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.
Sometime 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).
Ever 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:
It 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.