JavaScript is one the most powerful and dynamic interpreted language that has been standardized in the ECMAScript language specification. It is considered as one of the three core technologies of Internet content production along with HTML and CSS. Today, the majority of websites employ JavaScript and all the modern web browsers support it without the need of any plugins. Moreover, this high-end language is prototype-based with top class functions that make JavaScript a multi-program language, supporting object-oriented, imperative and functional programming styles.

What are regular expressions?

Regular expressions are patterns that are mainly used to match character combinations in strings. While in JavaScript, they are also objects that used with the exec and test methods of RegExp and with the match, replace, search and split methods of String.

JavaScript regular expressions (suffixes):

• g – global
• i – case-insensitive
• s – single line
• m – multi-lines

Regular expressions (masks):

• ^ – start of string
• $ – end of string
• (…) – grouping
• !() – but this group
• . – any character
• (x|y) – either x or y
• [xyz] – among x y or z
• [^xyz] – any but x y or z
• a? – holds a once
• a+ – at least a once
• a*zero – or several times a
• a{5} – five times a
• a{5,} – at least five times a
• a{1, 4} – a between 1 and 4 times

Regular expressions (Quantifiers)

• n+ – Matches any string that contains at least one n
• n* – Matches any string that contains zero or more occurrences of n
• n? – Matches any string which comes zero or one occurrence of n
• n{X} – Matches any string, containing a sequence of X n’s
• n{X,Y} – Matches any string that contains a sequence of X to Y n’s
• n{X,} – Matches any string that contains a sequence of at least X n’s
• n$ – Matches any string with n at the end of it
• ^n – Matches any string with n at the beginning of it
• ?=n – Matches any string that is followed by a specific string n
• ?!n – Matches any string that is not followed by a specific string n

2017’s top JavaScript plugins

Cheat sheets are all very well and good, but sometimes you just need a plugin or two to make your JavaScript experience better. 2017 is nearly half gone; let’s take a look at some of the top plugins that have hit the ecosystem thus far.

Lory: The Lory is one of the top plugins that is a touch-enabled photo slider. Unlike others plugins that are available, it doesn’t use the lightbox effect. Rather, this plugin enables you to embed slideshows with number of slides, fixed or variable widths and fix them into any container element.
Using this tool is extremely easy, so you can customize the swipe options with JavaScript. Moreover, the plugin’s GitHub page has enormous source code samples and live demos you can try to see if this could fit into your next project.

Tingle: Today, modal windows are all the fury from email captures to interface notifications. Tingle is a widely-used plugin that takes modal windows to the next level with the basic CSS transitions and a completely clean JS options API for customization.
You can check out a live demo on their site with different features, including buttons and embedded videos. Moreover, you can apply custom CSS classes, attach internal content and even develop callback functions with JavaScript options. It will also help you to develop callback functions after the modal opens and closes.

Jump.js: A lot of developers know how to code hyperlinks, which help users to jump across the page. However, how many devs want to write their own smooth scrolling library? The answer of this question is none. Jump.js is a valuable plugin.
To use this plugin, you just need to drop it and add the function call to whatever links require smooth scrolling. Within minutes, you will be up and running in no time with essentially no maintenance whatever.

Plyr: Usually, I do not recommend using external video players; however, Plyr is one of the phenomenal plugins. This default player feels like a premium interface with closed captions, the space key shortcut to play/pause media and fullscreen mode.
Moreover, you can embed native HTML5 videos or external videos from YouTube/Vimeo. It also comes with a custom audio player for a similar visual without the video pane. No doubt, it is a wonderful and widely used video/audio media player running on HTML5 and vanilla JS. It is completely free and easy to customize with least efforts.

DropZone: DropZone is a totally free drag-and-drop JavaScript library that can be used to upload anything on the web. Generally, drag-and-drop is the common behavior in upload forms, whereas it is a highly popular feature and hard to develop from scratch.
But DropZone is one such plugin which is full of documentation. You can find much more information and a live demo on the official Dropzone website. It is popular for working right out of the box with very little customization required. You are allowed to expand this library with your own JS code that makes this plugin more than just a plugin.

baguetteBox.js: baguetteBox.js is the most advanced plugin, which can be used to develop reusable lightbox effects with an unlimited number of pictures. The plugin supports all the touch/swipe gestures for mobile users and it is completely responsive.
It even supports some of the extra features, including CSS3 transition effects, image captions and more. Moreover, this plugin is the dependency-free and open source, so it is completely recommended to go with it.

Headroom.js: With Headroom plugin, you can target your website’s navbar and auto-hides past some of the points. The plugin will also make the navbar re-appear whenever the user scrolls back up the page.
It is popular for its lightweight, high-performance JS widget, which enables you to react to the user’s scroll. What’s more, the header on this website is a live example as it slides out of view at the time of scrolling down and slides back.

Conclusion

One of the best things about JavaScript is the community. These cheat sheets and plugins would not have been possible without the help and knowledge of developers all around the world. JavaScript’s community makes it possible to create and build together, whether you’ve just started or have been in the business for years.

Thanks to these cheat sheets and plugins, the hassle of work can be made easy and effortless to save time and money. In any case, there’s always going to be professionals for help if the problem proves too insurmountable. Either way, good luck and good coding!