The document provides an overview of several JavaScript utility libraries, including Datedropper for date selection, Timedropper for time selection, and Drop for dropdowns. It also covers Vivus for SVG animations, Hammer for touch gestures, PurifyCSS for cleaning unused CSS, and Egg.js for implementing easter eggs on web pages. Each library includes links to their respective websites and GitHub repositories, along with basic usage instructions.

1. UTILITY LIBRARIES TO
MAKE YOUR LIFE EASIER
_by Oleksii Prohonnyi

2. DROPPER
DATE
TIME

3. DATEDROPPER: About
 Datedropper is a jQuery datepicker plugin.
 Website: http://felicegattuso.com/projects/datedropper/
 Github: https://github.com/felicegattuso/datedropper/
 Features: animate, init_animation, format, lang, lock, maxYear,
minYear, yearsRange.
 Styles: dropPrimaryColor, dropTextColor, dropBackgroundColor,
dropBorder, dropBorderRadius, dropShadow, dropWidth,
dropTextWeight.

4. DATEDROPPER: Usage
 Load resources:
<script src="js/datedropper.js"></script>
<link rel="stylesheet" type="text/css"
href="js/datedropper.css">
 Identify container:
<input type="text" id="departure" />
 Bind the dropdown:
<script>$( "#departure" ).dateDropper();</script>

5. DATEDROPPER: Example

6. TIMEROPPER: About
 Timedropper is a jQuery time plugin.
 Website: http://felicegattuso.com/projects/timedropper/
 Github: https://github.com/felicegattuso/timedropper/
 Features: autoswitch, meridians, format, mousewheel,
init_animation, setCurrentTime.
 Styles: primaryColor, textColor, backgroundColor, borderColor.

7. DATEDROPPER: Usage
 Load resources:
<script src="js/timedropper.js"></script>
<link rel="stylesheet" type="text/css"
href="js/timedropper.css">
 Identify container:
<input type="text" id="alarm" />
 Bind the dropdown:
<script>$( "#alarm" ).timeDropper();</script>

8. DATEDROPPER: Example

9. DROP

10. DROP: About
 The fast and capable dropdown library. Built on Tether.
 Website: http://github.hubspot.com/drop/docs/welcome/
 Github: https://github.com/HubSpot/drop
 Methods: open, close, remove, toggle, isOpened, position, destroy.
 Options: target, content, position, openOn, constrainToWindow,
constrainToScrollParent, classes, remove, beforeClose, hoverOpenDelay,
hoverCloseDelay, focusDelay, blurDelay, openDelay, closeDelay,
tetherOptions.
 Browsers: IE9+

11. DROP: Usage
 Include dependencies:
<link rel="stylesheet" href="drop-theme-arrows.css" />
<script src="tether.min.js"></script>
<script src="drop.min.js"></script>
 Initialize the plugin:
var drop = new Drop(
target: document.querySelector('.drop-target')
content: 'Welcome to the future!'
position: 'bottom left'
openOn: 'click‘
);

12. DROP: Example

13. VIVUS

14. VIVUS: About
 Vivus is a lightweight JavaScript class (with no dependencies) that
allows you to animate SVGs, giving them the appearence of being
drawn.
 Website: http://maxwellito.github.io/vivus/
 Github: https://github.com/maxwellito/vivus
 Configuration: animation type, path timing, animation timing,
scenarization.

15. VIVUS: Usage
 Identify SVG:
 <svg id="my-svg“>…</svg>
 <object id="my-svg" type="image/svg+xml"
data="link/to/my.svg"></object>
 <div id="my-div"></div>
 Bind the plugin:
<script>
new Vivus('my-svg', {duration: 200}, myCallback);
</script>

16. VIVUS: Example

17. HAMMER

18. HAMMER: About
 Hammer helps you add support for touch gestures to your page,
and remove the 300ms delay from clicks.
 Website: http://hammerjs.github.io/
 Github: https://github.com/hammerjs/hammer.js
 Features: handle touch events, remove 300ms delay.
 Gestures: rotate, pinch, press, pan, tap, swipe.

19. HAMMER: Usage
 Initialization:
var stage = document.getElementById('stage'); // get a reference to an element
var mc = new Hammer.Manager(stage); // create a manager for that element
var Rotate = new Hammer.Rotate(); // create a recognizer
mc.add(Rotate); // add the recognizer
 Subscription to events:
mc.on('rotate', function(e) {
// do something cool
var rotation = Math.round(e.rotation);
stage.style.transform = 'rotate('+rotation+'deg)';
});

20. HAMMER: Example

21. PURIFYCSS

22. PURIFYCSS
 A function that takes content (HTML/JS/PHP/etc) and CSS, and
returns only the used CSS.
 PurifyCSS does not modify the original CSS files. You can write to a
new file, like minification.
 If your application is using a CSS framework, this is especially
useful as many selectors are often unused.
 Github: https://github.com/purifycss/purifycss
 Build presets: grunt, gulp, webpack.

23. EGG

24. EGG
 Egg.js is a simple JS library that has no prerequisites and allows you to
easily add web easter eggs by watching the user's key strokes.
 Website: http://thatmikeflynn.com/egg.js/
 Usage:
var egg = new Egg("up,up,down,down,left,right,left,right,b,a", function() {
jQuery('#egggif').fadeIn(500, function() {
window.setTimeout(function() { jQuery('#egggif').hide(); }, 5000);
});
}).listen();

25. THANK YOU FOR ATTENTION

26. Oleksii Prohonnyi
linkedin.com/in/oprohonnyi
slideshare.net/oprohonnyi