Semantic Tabs
I converted jQuery SemanticTabs to another version of VanillaJS. The result was amazing.
You can read jQuery SemanticTabs again in case you forgot what this plugin is all about. I just recovered the typo of the name of the plugin to SemanticTabs instead of SemanticTags.
I converted the library from jQuery to VanillaJS because some people don't use jQuery on their Server-Side Rendering. jQuery is slow and is too much for converting semantic HTML content to tabs. First, you need to load jQuery, that's about 31 kB. Second, you need to load the library, jQuery SemanticTabs, that's 1.2 kB. So, the total is about 32 kB. Let's compare it with the VanillaJS version, that's about 1.4 kB. The difference is significantly drastic.
Most people hate jQuery because of its performance. It is heavy. Most people hate VanillaJS because of its development. Of course, we code longer in the VanillaJS. As you can see, the difference is about 0.2 kB heavier on the VanillaJS version. The jQuery version is shorter because jQuery did the job.
Feel free to use SemanticTabs if you like the idea of semantic tabs, npm install semantic-tabs. Also, feel free to contribute to the development. The library is written in TypeScript. Maybe you can make it lighter.
Usage
There is a demo included in the repository.
- Load the library. Make sure you load the minified version, semantic-tabs.min.js.
- Call the function,
SemanticTabs(). Eg;SemanticTabs('#semantic-tabs');.
Related Articles
- Object-Oriented Programming in TypeScript
- Callback, Promise, Async, and Await in TypeScript
- TypeScript with MySQL
- Simple REST API with TypeScript
- TypeScript Crash Course