12. August 2016

Cleave.JS formatting your input

Credit card number formatting
Phone number formatting (i18n js lib separated for each country to reduce size)
Date formatting
Numeral formatting
Custom delimiter, prefix and blocks pattern
CommonJS / AMD mode
ReactJS component

Cleave.JS

12. August 2016

Generating fantasy maps with Javascript :)

Generate fantasy maps with Javascript, as we know them from paperback fantasy novels.

This is a really fascinating read.

From a grid of points, to rough outlines, to adding some erosion, rendering terrain, cities & borders, placing labels , to the final map. All nicely documented, with interactive maps to play with ;)

Fantasy Maps

12. August 2016

Build faster websites with a flat-file CMS like Grav

“Grav is a Fast, Simple, and Flexible, file-based Web-platform. There is Zero installation required. Just extract the ZIP archive, and you are already up and running. It follows similar principles to other flat-file CMS platforms, but has a different design philosophy than most.

Grav comes with a powerful Package Management System to allow for simple installation and upgrading of plugins and themes, as well as simple updating of Grav itself.”

Grav@GitHub

12. August 2016

IMAP2Slack with Node.JS

Simple Node.JS solution to post incoming emails to a channel at Slack.

Imap2Slack@GitHub

10. August 2016

Lightgallery.js … full featured image & video gallery

Fully responsive.
Modular architecture with built in plugins.
Touch support for mobile devices.
Mouse drag supports for desktops.
Double-click/Double-tap to see actual size of the image.
Animated thumbnails.
Social media sharing.
YouTube, Vimeo, Dailymotion, VK and HTML5 video support.
20+ Hardware-Accelerated CSS3 transitions.
Dynamic mode.
Full screen support.
Supports zoom.
Browser history API.
Responsive images.
HTML iframe support.
Multiple instances on one page.
Easily customizable via CSS (SCSS) and Settings.
Smart image preloading and code optimization.
Keyboard Navigation for desktop.
Font icon support.
And many more.

Lightgallery.js

10. August 2016

baffle.js to obfuscate and reveal text in DOM elements

“A tiny (~1.8kb) javascript library for obfuscating and revealing text in DOM elements”

// Select elements and start.
let b = baffle('.someSelector').start();

// Do something else.
someAsyncFunction(result => {
    // Change the text and reveal over 1500ms.
    b.text(text => result.text).reveal(1500);
});

// Select elements and start.

let b = baffle('.someSelector').start();

// Do something else.

someAsyncFunction(result => {

// Change the text and reveal over 1500ms.

b.text(text => result.text).reveal(1500);

});

Baffle.js

10. August 2016

Grunticon … a Grunt.js task to make SVG usage easy

“Grunticon is a Grunt.js task that makes it easy to use SVGs (Scalable Vector Graphics) for crisp, resolution independent icons, logos, illustrations and background images. SVGs aren’t supported everywhere so Grunticon auto-generates bitmap (PNG) fallback images and loads the right format for compatibility with pretty much any browser.”

Grunticon

10. August 2016

Transformicons … Animated icons, symbols and buttons using SVG and CSS

Transformicons are animated symbols/buttons/icons that morph using a combination of SVG, CSS and HTML.
They also offer a builder to tweak the set.

transformicons.add('.tcon') // add default behavior for all elements with the class .tcon
              .remove('.tcon-menu--xcross') // remove default behavior for the first icon
              .add('.tcon-menu--xcross', {
                  transform: "mouseover",
                  revert: "mouseout"
              }); // add new behavior for the first icon

transformicons.add('.tcon') // add default behavior for all elements with the class .tcon

.remove('.tcon-menu--xcross') // remove default behavior for the first icon

.add('.tcon-menu--xcross', {

transform: "mouseover",

revert: "mouseout"

}); // add new behavior for the first icon

Transformicons

26. July 2016

The Vanilla Javascript Repository

It does not have to be jQuery all the time :)

Vanilla Javascript Repository

26. July 2016

jQuery Complexify – accurately inform users of password strength

“Complexify is implemented as a jQuery function that can be called on input fields. The function takes options and a callback that will be called with the results of the validation.

The valid argument passed to your callback function is a boolean that indicates whether the password met the minimum level of complexity. The complexity argument is a percentage where 100% represents a ‘very good’ password (approximately 25 random characters).”

Complexify