JavaScript Lightweight Modern Drag & Drop Libarary : Draggable JS

    JavaScript Lightweight Modern Drag & Drop Libarary : Draggable JS

    Draggable is a modular drag & drop library, allowing you to start small and build up with the features you need. At its most basic, Draggable gives you drag & drop functionality, fast DOM reordering, accessible markup, and a bundle of events to grab on to.

    Features:

    • Works with native drag, mouse, touch and force touch events
    • Can extend dragging behaviour by hooking into draggables event life cycle
    • Can extend drag detection by adding sensors to draggable
    • The library is targeted ES6 first

    ECharts : Interactive Charting & Visualization Library

    ECharts : Interactive Charting & Visualization Library

    ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library.

    Particle Effects for Buttons with Anime.js

    Particle Effects for Buttons with Anime.js

    Today we’d like to share a little effect library with you that can be used to create bursting particle effects. The idea is to desintegrate an element into particles and making it disappear (and vice versa). This effect looks really interesting on buttons, so we’ve created a little collection that showcases a bunch of different styles for the effect.

    Mobile Friendly Responsive Table with jQuery

    Mobile Friendly Responsive Table with jQuery

    A mobile-friendly table solution, which persists headers for each table-cell on mobile devices.On mobile devices the orientation changes from horizontal to vertical, and each cell is prepended with its respective table header as a label.

    Currency.js : A javascript library for Handling Currencies

    Currency.js : A javascript library for Handling Currencies

    Currency.js is a lightweight ~1kb javascript library for working with currency values. It was built to work around floating point issues in javascript.

    Pico.js : A face-detection library in JavaScript

    Pico.js : A face-detection library in JavaScript

    The pico.js JavaScript library enables the detection of faces in images.

    Highlights of the library:

    • open-source code.
    • has real-time detection capabilities (200+ FPS in a practical setting).
    • just 2kB when minified.

    Nano ID : Unique string ID Generator for JavaScript

    Nano ID : Unique string ID Generator for JavaScript

    Nano ID is a tiny, secure, URL-friendly, unique string ID generator for JavaScript.It uses cryptographically strong random APIs and guarantees a proper distribution of symbols.It uses a larger alphabet than UUID (A-Za-z0-9_~) and has a similar number of unique IDs in just 21 symbols instead of 36.

    jQuery Accessible simple Tooltip window using ARIA

    jQuery Accessible simple Tooltip window using ARIA

    This jQuery plugin will provide you an accessible and simple non-modal tooltip, using ARIA.

    Password Strength Visualization with JavaScript

    Password Strength Visualization with JavaScript

    Today we’d like to share a little reimplementation of an interesting effect with you. The idea came from this Reddit entry which describes a method of showing an image less pixelated the stronger the password entered is. You can see the idea in action on the signup page of Colibro. We thought this was an awesome idea and wanted to experiment with it, and also with the reverse logic.

    Creative Upload Interaction with JavaScript & Canvas

    Creative Upload Interaction with JavaScript & Canvas

    Well in this tutorial we will see how to implement a creative component to upload files, using as inspiration the previous animation by Jakub Antalík. The Idea is to bring better visual feedback around what happens with the file after is dropped.

    We will be focusing only on implementing the drag and drop interactions and some animations, without actually implementing all the necessary logic to actually upload the files to the server and use the component in production.