DEV Community

Cover image for 10 Useful Vanilla Javascript Plugins 2020
Ibrahim Kamal
Ibrahim Kamal

Posted on • Updated on

 

10 Useful Vanilla Javascript Plugins 2020

Introduction

Modern JavaScript Frameworks makes it very easy to build complex web applications. Vanilla JavaScript refers to plain Javascript code, not extended in any way by any framework and it is good when it comes to create a small application

1. Swiper.js

  • Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

alt text

2. iTyped

  • Dead simple Javascript animated typing, with no dependencies.

alt text

3. tingle.js

  • A minimalist and easy-to-use modal plugin written in pure JavaScript.

alt text

4. Glide

  • A dependency-free JavaScript ES6 slider and carousel. Its lightweight, flexible and fast. Designed to slide. No less, no more.

alt text

5. Sticky Sidebar

  • These JavaScript plugins provide a handy way of creating sticky components. The first option is great for creating sticky headers whereas the second option is for sticky sidebars.

alt text

6. AOS

  • Animate On Scroll (AOS). Small library to animate elements on your page as you scroll.

alt text

7. jump.js

  • Jump.js is a modern, performant and customizable smooth scroll library written in pure JavaScript (ES6).

8. Magic Grid

  • A simple, lightweight Javascript library for dynamic grid layouts.

alt text

9. Wiv.js

A library for a more wiggly div.

alt text

10. Choices.js

Choices.js is a lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.

alt text

Top comments (21)

Collapse
 
ackmandesu profile image
AckmanDESU

jump.js hasn't received updates in 4 years and honestly most of the time you can simply use CSS instead

Same can be said for Sticky Sidebar...

Swiper.js is amazing but it will double your bundle size. That thing is like 150kb. I wanna use it but I cannot justify it.

I personally hate AOS. I'd much rather use sal.js, which feels like a modern alternative.

Glide is dope. I usually use tinyslider because it's lighter. I'm keeping an eye on splide.js which feels like a tinyslider v2, though.

I've never used tingle, I use a personal fork of Micromodal because it's tiny and accessible. Definitely recommended.

Can't speak for the others.

Collapse
 
ibrahimkamal profile image
Ibrahim Kamal

Thank you so much πŸ’™

Collapse
 
progapanda profile image
Khaled Alba.

Nice article indeed!
3ash! :D

Collapse
 
ibrahimkamal profile image
Ibrahim Kamal

7abeby πŸ’™ :D

Collapse
 
ibrahimkamal profile image
Ibrahim Kamal

Ψ§ΩŠΩ‡ Ψ―Ω‡ Ψ§Ω†Ψͺ Ψ΄ΨΊΨ§Ω„ في Pelcro Ω…ΨΉ ΨΉΩ…Ψ±Ωˆ Ψ§Ω„Ψ³Ω‚ΩŠΩ„ΩŠ :D

Collapse
 
progapanda profile image
Khaled Alba.

Yes :D

Thread Thread
 
ibrahimkamal profile image
Ibrahim Kamal

Ψ±Ψ¨Ω†Ψ§ ΩŠΩˆΩΩ‚ΩƒΩ… يا Ψ±Ψ¨ ΨΉΩ‚Ψ¨Ψ§Ω„ΩŠ يا Ψ±Ψ¨ πŸ’™

Collapse
 
bogdanbatsenko profile image
bogdanbatsenko

Please suggest vanilla js plugin similar to MagnificPopup.
In particular, gallery support. Slide between images in modals.
It's so frustrating not to have such great functionality in vanilla plugins.

Collapse
 
nightingale profile image
Oladipo Umar

Great ArticleπŸ™Œ

Collapse
 
ibrahimkamal profile image
Ibrahim Kamal

Thank you πŸ’™

Collapse
 
ahmed25410 profile image
ahmed25410

very good article Ebrahim

Collapse
 
ibrahimkamal profile image
Ibrahim Kamal

7abeby ya ahmed :D β™₯

Collapse
 
agktf profile image
AgkTF

Great article. Very useful.

Collapse
 
ibrahimkamal profile image
Ibrahim Kamal

Thank you πŸ’™

Collapse
 
gsarig profile image
Giorgos Sarigiannidis

I like flickity and I've been using it for years as my go-to carousel, but Swiper seems very interesting with a few extra options... Thanks for the list!

Collapse
 
ibrahimkamal profile image
Ibrahim Kamal

you are welcome πŸ’™

Swiper is very very VERY awesome.

Collapse
 
carcruz profile image
Carlos Cruz

Great contribution πŸ‘Œ

Collapse
 
ibrahimkamal profile image
Ibrahim Kamal

Thank you πŸ’™πŸ’™

Collapse
 
ibrahimkamal profile image
Ibrahim Kamal

you are welcome πŸ’™

Collapse
 
paulorodriguesjs profile image
paulorodriguesjs

A plugin worth trying:
bossanova.uk/jspreadsheet

11 Tips That Make You a Better Typescript Programmer

typescript

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!