When HTML is better than Javascript?
Do you know the main problem with HTML and CSS? Nobody knows them! All right, some people do, but their knowledge is often regarded as a collection of fun-facts rather than useful tech tips. On many occasions I saw libraries offering additional functionality for HTML with Javascript — exactly the ones that are already inbuilt in HTML natively! And here are my favorite examples:
Autocomplete
This is one of the most commonly created functionalities added to multiple libraries and offered as separate micro-libs from the times of jQuery till npm et al. What if you need to quickly iterate over dozens of options? What if you want to find not only those which begin with particular letter but also those which contain particular character or string?
Well, meet <datalist> tag:
Of course it can be styled, and it is fast as hell. Even if you need additional functionality (like case check) it is easier to work with already existent tag than create it from the ground up.
Progress bars
Progress bars provide a nice way to inform users that their wait is not pointless because something is actually happening. According to Google, if a website doesn’t render within 3 seconds about 80% of users will close it. But not with progress bar! These funny widgets can give us even up to 10 seconds additionally when informing the user that loading is progressing. Again: relevant tags are in HTML specs, but since not many people have heard of them — they are not frequently used. Check out <progress> and <meter> tags:
Especially take a closer look at <meter> as it provides out-of-the-box color scheme for minimal, average and optimal amount of whatever it is measuring.
Accordion
Accordions are in almost every CSS library, and almost always use javascript. No wonder after all HTML cannot do that. Oh, wait!
They are the <details> and <summary> tags nicely combined. Of course you may not like its rather rudimentary look, but — hey! CSS? Anyone?
Tooltips
I’ve spent a fair amount of time coding nice and responsive tooltips that appear on top of their parent elements and place themselves so that they are never hidden behind the screen boundaries. Of course there was a lot of absolute positioning and Element.getBoundingClientRect() involved. And then some senior dev said — why you don’t use plain HTML when no additional styling is demanded? He meant attaching the title attribute to my text tags. It can be added to any HTML tag — but it doesn’t mean it should be! Bear in mind that there is this nice <abbr> tag that can be styled, provides the same functionality and is way better when semantics and accessibility is considered:
Reverse a string
When I started learning JS, one of the first tasks was to reverse a string and display it on the screen. Sure, reverse() will work, but when it is needed to override current text direction just for display, then <bdo> might be just what you need:
No one uses it and no wonder — after all we should rely on our data delivered from state rather than view when reversing a string or array, but I think it is nice to know this little hack if your document contains two or more languages some of which are written right-to-left.
Last but not least
While we’re at it I just must appreciate two incredibly functional tags that deal with a lot of heavy lifting in declarative manner when it comes to displaying sound and image: <audio> and <video> tags of course. Yes, everybody knows that they can display controls on demand, loop, autoplay or run from specified moment. But they give much more than that: they deal with credentials for CORS connections, select particular elements for control display (yes — they are selectable!) and may even disallow your video to be played via remote devices such as Chromecast, Miracast or even HDMI! Ha! You didn’t know that, did you? Additionally <video> element offers picture-in-picture mode. Ain’t that sweet?
Just take a look at their evergrowing specs HERE and HERE. These two deserve a separate article with deeper analysis of their functionality and possible gotchas.
So — there it is. And — before all the programmers jump on me — I am aware that most of those tags/elements provide basic functionality. And I agree that with some JS addition you can achieve more. The question is — do you really need it? Because — if not, and good ol’ CSS can deal with the looks — I strongly believe you really shouldn’t reinvent the wheel.
Happy coding!
