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

29. June 2016

Timedropper – select time with style

Timedropper allows you to select time with some style. Its a jQuery plugin and adding it is simple:

$( "#alarm" ).timeDropper();

1	$( "#alarm" ).timeDropper();

Timedropper

29. June 2016

Nette NEON – simplify your config files

“NEON is very similar to YAML. The main difference is that the NEON supports “entities” (so can be used e.g. to parse phpDoc annotations) and tab characters for indentation. NEON syntax is a little simpler and the parsing is faster.”

NEON offers PHP, Javascript and Python support.

Go and play in their Sandbox

1. June 2016

TypeIt – The most versatile jQuery typing plugin on the planet.

“TypeIt is the most versatile, user-friendly jQuery animated typing plugin on the planet. In simple use, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles HTML tags & entities.”

GitHub

31. May 2016

Plyr.io – A simple, accessible and customizable HTML5, YouTube and Vimeo media player

A simple, accessible and customizable HTML5, YouTube and Vimeo media player.

Accessible – full support for VTT captions and screen readers
Lightweight – under 10KB minified and gzipped
Customisable – make the player look how you want with the markup you want
Semantic – uses the right elements. <input type="range"> for volume and <progress> for progress and well,<button>s for buttons. There’s no <span> or <a href="#"> button hacks
Responsive – as you’d expect these days
HTML Video & Audio – support for both formats
Embedded Video – support for YouTube and Vimeo video playback
API – toggle playback, volume, seeking, and more
Universal events – no messing around with Vimeo and YouTube APIs, all events are universal across formats
Fullscreen – supports native fullscreen with fallback to “full window” modes
i18n support – support for internationalization of controls
No dependencies – written in “vanilla” JavaScript, no jQuery required
SASS and LESS provided – If you like these over plain CSS

GitHub