This content originally appeared on Bits and Pieces - Medium and was authored by Adarsh gupta
No fancy libraries, just regular, raw HTML
It's no wonder that HTML can do some stuff that we might even think that it is an external library. If efficiently used we can even hack NASA (I'm just kidding). So let's look into some cool features of HyperText Markup Language.
1. Color Picker
Create a color picker by simply using the <input> tag and giving it a property of type=’color’.
2. Accordion
The <summary> tag defines a visible heading for the <details> element.
The heading can be clicked to view/hide the details.
You can create simple accordions using this method, without the need to implement CSS classes and JavaScript click handlers that toggle visibility whenever clicked.
3. Make a call
Call someone direct from your website.
4. Progress bar
You can use the <progress> element which will represent the completion of something.
5. Autocomplete
The <datalist> tag is used to provide an “autocomplete” feature for the <input> elements.
We can see a drop-down of predefined options as you type.
6. Emoji
Many UTF-8 characters cannot be typed on a keyboard. Some keyboards and devices also do not have an emoji input. However, emojis can always be displayed using numbers (known as ‘entity numbers’).
We can use this method to produce emojis in HTML.
Conclusion
Here we discussed a few HTML-only things that might save you time, and avoid the need to complicate things by incorporating CSS and JavaScript.
I hope you have found this useful. Were any of these tips new to you? If so, be sure to let us know in the comments.
Build modular, reusable React components with Bit.
Monorepos are a great way to speed up and scale app development, with independent deployments, decoupled codebases, and autonomous teams.
Bit offers a great developer experience for building component-driven monorepos. Build components, collaborate, and compose applications that scale. Our GitHub has over 14.5k stars!
Learn more
- Building a React Component Library — The Right Way
- 7 Tools for Faster Frontend Development in 2022
- Microservices are Dead — Long Live Miniservices
6 Cool Things You Can Do With Regular HTML was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Adarsh gupta
Adarsh gupta | Sciencx (2022-01-14T18:53:36+00:00) 6 Cool Things You Can Do With Regular HTML. Retrieved from https://www.scien.cx/2022/01/14/6-cool-things-you-can-do-with-regular-html/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.