FrontExpress

An Express.js-Style router for the front-end
✔️ You already know ExpressJS then you know FrontExpress
✔️ Simple, minimal core extendable through plugins
✔️ Lighweight framework 3.55kb min+gzip
✔️ Build your front-end application by handling routes
✔️ Ideal for Single Page Application
✔️ Manage ajax requests and browser history

Official FrontExpress website

Lodash

A modern JavaScript utility library delivering modularity, performance & extras.

Official Loadash website

Underscore.js

Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects.
Underscore provides over 100 functions that support both your favorite workaday functional helpers: map, filter, invoke — as well as more specialized goodies: function binding, javascript templating, creating quick indexes, deep equality testing, and so on.

Official Underscore website

PPO

Every frontend developer has written his own utils library, and we often write methods that are easily forgotten and highly used. ppo is a super small and useful utils library for JavaScript. It and lodash underscore lazy.js almost no coupling. I sorted out the most frequently used function functions in everyday development. These functions are almost ubiquitous in your development, and they are not found in lodash underscore.

ppo little poor, gzip less than 3k, so a library you can use it anytime, anywhere without worrying about anything.

Official PPO website

Moments

Parse, validate, manipulate, and display dates and times in JavaScript.

Format Dates

1
2
3
4
5
moment().format('MMMM Do YYYY, h:mm:ss a'); // September 30th 2019, 1:55:35 pm
moment().format('dddd');                    // Monday
moment().format("MMM Do YY");               // Sep 30th 19
moment().format('YYYY [escaped] YYYY');     // 2019 escaped 2019
moment().format();                          // 2019-09-30T13:55:35+03:30

Calendar Time

1
2
3
4
5
6
7
8
moment().subtract(10, 'days').calendar(); // 09/20/2019
moment().subtract(6, 'days').calendar();  // Last Tuesday at 1:56 PM
moment().subtract(3, 'days').calendar();  // Last Friday at 1:56 PM
moment().subtract(1, 'days').calendar();  // Yesterday at 1:56 PM
moment().calendar();                      // Today at 1:56 PM
moment().add(1, 'days').calendar();       // Tomorrow at 1:56 PM
moment().add(3, 'days').calendar();       // Thursday at 1:56 PM
moment().add(10, 'days').calendar();      // 10/10/2019

…

Official Moment website

Marka

Beautiful transformable icons
built for the web.

1
2
3
4
var m = new Marka('#icon');
m.set('circle')
    .color('#FF6600')
    .size('50');

Official Marka website

LocalTunnel

Localtunnel allows you to easily share a web service on your local development machine without messing with DNS and firewall settings.

Localtunnel will assign you a unique publicly accessible url that will proxy all requests to your locally running webserver.

1
2
$ npm install -g localtunnel
$ lt --port 8000

Features

  • Secure https for all tunnels
  • Show your work to anyone
  • Use the API to test webhooks
  • Test your UI in cloud browsers

Official LocalTunnel website

ngrok

Public URLs for exposing your local web server.
Public URLs for testing on mobile devices.
Public URLs for building webhook integrations.
Public URLs for sending previews to clients.
Public URLs for testing your chatbot.
Public URLs for demoing from your own machine.
Public URLs for SSH access to your Raspberry Pi.

Spend more time programming. One command for an instant, secure URL to your localhost server through any NAT or firewall.

Official ngrok website

Prism

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.

  • Dead simple
    Include prism.css and prism.js, use proper HTML5 code tags (code.language-xxxx), done!

  • Light as a feather
    The core is 2KB minified & gzipped. Languages add 0.3-0.5KB each, themes are around 1KB.

  • Extensible
    Define new languages or extend existing ones. Add new features thanks to Prism’s plugin architecture.

  • Intuitive
    Language classes are inherited so you can only define the language once for multiple code snippets.

  • Blazing fast
    Supports parallelism with Web Workers, if available.

  • Easy styling
    All styling is done through CSS, with sensible class names like .comment, .string, .property etc

Official prism website

Passport

Simple, unobtrusive authentication for Nodejs

Passport is authentication middleware for Node.js. Extremely flexible and modular, Passport can be unobtrusively dropped in to any Express-based web application. A comprehensive set of strategies support authentication using a username and password, Facebook, Twitter, and more.

passport.authenticate(‘twitter’);
passport.authenticate(‘facebook’);
passport.authenticate(‘linkedin’);
…

Official passport website

Leaflet

an open-source JavaScript library for mobile-friendly interactive maps

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most developers ever need.

Official Leaflet website

Marked

A markdown parser and compiler. Built for speed.

  • low-level compiler for parsing markdown without caching or blocking for long periods of time
  • built for speed
  • light-weight while implementing all markdown features from the supported flavors & specifications
  • works in a browser, on a server, or from a command line interface (CLI)

CLI

1
2
3
4
5
$ marked -o hello.html
hello world
^D
$ cat hello.html
<p>hello world</p>

Browser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
</head>
<body>
  <div id="content"></div>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
    document.getElementById('content').innerHTML =
      marked('# Marked in the browser\n\nRendered by **marked**.');
  </script>
</body>
</html>

Official Marked website