Javascript Archives | Page 7 of 38 | portalZINE NMN

19. August 2016

Elegant + responsive + flexible + lightweight = IZIMODAL

If you are looking for an elegant, responsive, flexible and lightweight jQuery modal solution, IZIMODAL might be the right solution for you :)

Default options:

$("#modal").iziModal({
    title: '',
    subtitle: '',
    headerColor: '#88A0B9',
    theme: '',  // light
    attached: '', // bottom, top
    icon: '',
    iconColor: '',
    width: 600,
    padding: 0,
    radius: 3,
    zindex: 999,
    iframe: false,
    iframeHeight: 400,
    iframeURL: null,
    focusInput: true,
    group: '',
    loop: false,
    navigateCaption: true,
    navigateArrows: true, // closeToModal, closeScreenEdge
    history: true,
    restoreDefaultContent: false,
    autoOpen: 0, // Boolean, Number
    bodyOverflow: false,
    fullscreen: false,
    openFullscreen: false,
    closeOnEscape: true,
    overlay: true,
    overlayClose: true,
    overlayColor: 'rgba(0, 0, 0, 0.4)',
    timeout: false,
    timeoutProgressbar: false,
    pauseOnHover: false,
    timeoutProgressbarColor: 'rgba(255,255,255,0.5)',
    transitionIn: 'comingIn',
    transitionOut: 'comingOut',
    transitionInOverlay: 'fadeIn',
    transitionOutOverlay: 'fadeOut',
    onFullscreen: function(){},
    onResize: function(){},
    onOpening: function(){},
    onOpened: function(){},
    onClosing: function(){},
    onClosed: function(){}
});

$("#modal").iziModal({

title: '',

subtitle: '',

headerColor: '#88A0B9',

theme: '', // light

attached: '', // bottom, top

icon: '',

iconColor: '',

width: 600,

padding: 0,

radius: 3,

zindex: 999,

iframe: false,

iframeHeight: 400,

iframeURL: null,

focusInput: true,

group: '',

loop: false,

navigateCaption: true,

navigateArrows: true, // closeToModal, closeScreenEdge

history: true,

restoreDefaultContent: false,

autoOpen: 0, // Boolean, Number

bodyOverflow: false,

fullscreen: false,

openFullscreen: false,

closeOnEscape: true,

overlay: true,

overlayClose: true,

overlayColor: 'rgba(0, 0, 0, 0.4)',

timeout: false,

timeoutProgressbar: false,

pauseOnHover: false,

timeoutProgressbarColor: 'rgba(255,255,255,0.5)',

transitionIn: 'comingIn',

transitionOut: 'comingOut',

transitionInOverlay: 'fadeIn',

transitionOutOverlay: 'fadeOut',

onFullscreen: function(){},

onResize: function(){},

onOpening: function(){},

onOpened: function(){},

onClosing: function(){},

onClosed: function(){}

});

IZIMODAL

15. August 2016

Use a self hosted chat service … Lets Chat

It does not have to be Slack all the time. Sometimes a self hosted open solution, is far more suited for the task ahead.

“Let’s Chat is a persistent messaging application that runs on Node.js and MongoDB. It’s designed to be easily deployable and fits well with small, intimate teams.”

BYOS (bring your own server)
Persistent messages
Multiple rooms
Private and password-protected rooms
New message alerts / notifications
Mentions (hey @you/@all)
Image embeds / Giphy search
Code pasting
File uploads (Local / Amazon S3 / Azure)
Transcripts / Chat History (with search)
XMPP Multi-user chat (MUC)
1-to-1 chat between XMPP users
Local / Kerberos / LDAP authentication
Hubot Adapter
REST-like API
Basic i18n support
MIT Licensed

GitHub

15. August 2016

Create your own bot with Nibblr

These days its all about the Bots. Slack is everywhere, its build on top of the IRC protocol and allows you to use Bots as well.

Last week I updated my own little IRC universe and looked at some of the new fresh IRC bot projects.

Nibblr is a javascript framework to create IRC bots. It packs a javascript interpreter and commands can be added through the IRC bot or through the web interface.

Nibblr @ GitHub

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