Cool JavaScript UI and CSS tools you should try!

If you are wondering to find yourself a great JavaScript library, you have come to the right place. In this article, I will not talk about JavaScript tools that are too popular, but only about the little-known gems that are under-noticed in the overcrowded JavaScript ecosystem.

The tools I will introduce in this article, in which some are libraries and some are frameworks. However, most of these tools are emerging technologies with great potential, waiting to be exploited by you. Do not talk around and find out which tools are named!

1. Deno js

In 2018, Ryan Dahl (The Father of Node) during a presentation on “10 Things I Regret About Node.js”, he explained how badly Nodejs has grown. So he got to work and an improved tool called Deno.js was born. That’s right, Deno is an anagram of Node and is essentially the collection of everything Ryan missed out on building in Node.js.

One of Deno’s standout features (as opposed to Nodejs) is its advanced security protocols. When you use it, Deno will limit the access of the application, if not authorized, it cannot access the file, network or environment. You need to use command-line arguments to change this limit.

And the great thing about Deno is the built-in TypeScript without having to install any external tools. Parallel support both .ts and .js when writing code. And execution is very simple with the command deno run .

Deno imports libraries via URL, reducing the bloat of node_modules on Node JS. This is also a drawback of Deno because the number of default libraries is still not much, not as diverse as Node, it will take a while for the community to contribute to better and better.

Here is an example to import a Deno package:

import { assertEquals } from “https://deno.land/std/testing/asserts.ts";

When you feel that NPM will be too troublesome for a certain project, you should give it a try with Deno.

2. Svelte

Svelte is a component framework – like React or Vue. Especially, Svelte is a compile-time framework and doesn’t need any specific runtime framework. It has the smallest size out of all the frameworks. Svelte does DOM renderring through reactive programming, which results in faster than Virtual DOM most of the time. As a result, Svelte delivers the fastest rendering of all frameworks.

Svelte is quite compact and simple. To get started, simply run the following commands in the terminal:

Svelte is a good choice if you are planning to build a small project (as a component or a simple web app).

3. Ext JS

Ext Js (Extended Javascript) is a pure Javascript framework for building interactive Web applications using techniques like Ajax, DHTML, and DOM. Ext JS is interoperable with jQuery and Prototype. It is considered as the most comprehensive framework for building an interactive we cross-platform application.

Articles and books about Ext Js are few and not as rich as other Javascript libraries. The best way to learn Ext Js is to come here to consult the documentation.

4. Gatsby JS

Gatsby is a “static site generator” built from the ReactJS core. It is a framework for creating a static web, optimizing the speed and security of the website. Switching between pages in the website is also very fast because all the styles, html and javascript will be loaded on the first load, the content is downloaded as JSON and displayed, no need to reload the entire page. when clicking turn page.

Besides, because Gatsby.js specializes in creating static websites, the implementation of commenting and searching systems must rely on 3rd party services such as: Disqus, Facebook …

But if you prioritize speed and performance, well-supported platforms, SEO Optimizer and finally PWA (Progressive Web Apps), please go through Gatsby.

5. Polymer

Polymer is a JS library developed by Google and used in Google Earth and Youtube. It uses web plug-ins to build web applications and provides the ability to combine JS, CSS, and HTML as a custom element while enhancing native technologies in the browser rather than relying on JS library.

One of the key features of Polymer is Shadow DOM. It provides polyfills (web component specifications) to create custom and reusable elements. Programmers reusing components -> don’t have to add div tags just to fulfill design requirements.

6. Bulma CSS

Bulma is an open source and free framework that is great in terms of saving time and effort and is becoming increasingly popular, because it is so simple to learn and use. It is built on Flexbox and added a 2-dimensional layout.

In particular, Bulma is purely CSS, no JavaScript, you just need to include a .css file in your project to get started, no .js required. Bulma contains great UI components like tabs, navigation bar, box, panel and more, this framework is designed to give you a clean and attractive user interface.

7. CSS Tachyons

Tachyons is a lightweight yet comprehensive CSS toolkit based on a mobile-first architecture. It helps you build highly responsive web apps with minimal coding effort, especially on the CSS front. The entire library weighs no more than 14kb! So even after you add images, other lighter JS tools, you can still keep your website size under 100kb.

To use the Tachyons library, you can download it here .

Thank you for taking the time to read the article!

Reference : https://medium.com/swlh/8-interesting-javascript-ui-and-css-tools-you-must-try-in-2021-446884728ff5