<p><strong>AlertifyJS</strong> is a javascript framework for developing pretty browser dialogs and notifications.</p>



<h2>Features</h2>



<h3>Feature-rich</h3>



<p>Packed with awesome features! Modal and Modelss view modes, Move, Resize and more!</p>



<h3>&nbsp;Extensible</h3>



<p>Extend existing dialogs, or create your own! using AlertifyJS is very straightforward.</p>



<h3>&nbsp;Unobtrusive notifications</h3>



<p>Unobtrusive notification messages can be used to give feedback to users.</p>



<h3>&nbsp;Themeable</h3>



<p>Three themes right out-of-the-box (AlertifyJS, Semantic and Bootstrap). <a href="https://alertifyjs.com/examples.html#semantic" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">view example</a></p>



<h3>&nbsp;Responsive</h3>



<p>Whether you use a desktop, laptop, tablet or mobile device. Have no worries!</p>



<h3>&nbsp;i18n and RTL Support</h3>



<p>Different language or a right-to-left layout! AlertifyJS got you covered. <a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://alertifyjs.com/examples.html#RTL" target="_blank">view example</a></p>



<p><strong>AlertifyJS not only provides a replacement for default browser dialogs, it makes it super easy to create your own!</strong></p>



<pre class="wp-block-code"><code>if(!alertify.myAlert){
  //define a new dialog
  alertify.dialog('myAlert',function(){
    return{
      main:function(message){
        this.message = message;
      },
      setup:function(){
          return { 
            buttons:&#91;{text: "cool!", key:27/*Esc*/}],
            focus: { element:0 }
          };
      },
      prepare:function(){
        this.setContent(this.message);
      }
  }});
}
//launch it.
alertify.myAlert("Browser dialogs made easy!");</code></pre>



<h4><strong>Let's Start</strong></h4>



<ul><li><a rel="noreferrer noopener" aria-label="Getting Started (opens in a new tab)" href="https://alertifyjs.com/guide.html" target="_blank">Getting Started</a></li><li>Components<ul><li><a rel="noreferrer noopener" aria-label="Alert (opens in a new tab)" href="https://alertifyjs.com/alert.html" target="_blank">Alert</a></li><li><a rel="noreferrer noopener" aria-label="Confirm (opens in a new tab)" href="https://alertifyjs.com/confirm.html" target="_blank">Confirm</a></li><li><a rel="noreferrer noopener" aria-label="Prompt (opens in a new tab)" href="https://alertifyjs.com/prompt.html" target="_blank">Prompt</a></li><li><a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://alertifyjs.com/notifier.html" target="_blank">Notifier</a></li></ul></li><li><a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://alertifyjs.com/factory.html" target="_blank">Dialogs Factory</a></li><li><a rel="noreferrer noopener" aria-label="Examples (opens in a new tab)" href="https://alertifyjs.com/examples.html" target="_blank">Examples</a></li><li><a href="https://alertifyjs.com/tutorials.html" target="_blank" rel="noreferrer noopener" aria-label="Tutorials (opens in a new tab)">Tutorials</a></li></ul>



<p><em><strong>Credit goes to AlertifyJS@<a href="https://alertifyjs.com/">https://alertifyjs.com/</a></strong></em></p>

AlertifyJS is a javascript framework for developing pretty browser dialogs and notifications.



Features



Feature-rich



Packed with awesome ...

AlertifyJS - Browser dialogs made easy! - TCMHACK

AlertifyJS - Browser dialogs made easy!

<p><strong>Paper.js</strong> is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.</p>



<p>Paper.js is based on and largely compatible with&nbsp;<a rel="noreferrer noopener" href="http://scriptographer.org/" target="_blank">Scriptographer</a>, a scripting environment for Adobe Illustrator with an active community of scripters and more than 10 years of development.</p>



<p>Paper.js is easy to learn for beginners and has lots to master for intermediate and advanced users.</p>



<p>Paper.js is developed by&nbsp;<a rel="noreferrer noopener" href="http://lehni.org/" target="_blank">Jürg Lehni</a>&nbsp;&amp;&nbsp;<a rel="noreferrer noopener" href="http://jonathanpuckey.com/" target="_blank">Jonathan Puckey</a>, and distributed under the permissive&nbsp;<a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="http://paperjs.org/license/" target="_blank">MIT License</a>.</p>



<h2><a>Getting Started</a></h2>



<ul><li>First of all, take a look at some of paperjs&nbsp;<a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="http://paperjs.org/examples/" target="_blank">examples</a>.</li><li><a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="http://paperjs.org/download/" target="_blank">Download</a>&nbsp;Paper.js or check out the latest version from paperjs&nbsp;<a rel="noreferrer noopener" href="http://github.com/paperjs/paper.js" target="_blank">Github Repository</a>.</li><li>Want to learn Paper.js? Why not start now with one of our&nbsp;<a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="http://paperjs.org/tutorials/" target="_blank">Tutorials</a>.</li><li>If you have any questions or comments, please join the paperjs&nbsp;<a rel="noreferrer noopener" href="http://groups.google.com/group/paperjs" target="_blank">mailing list</a>.</li><li>To stay up to date,&nbsp;<a rel="noreferrer noopener" href="http://twitter.com/paperjs" target="_blank">follow paperjs on Twitter</a>.</li></ul>



<h2><a>Overview</a></h2>



<p>Paper.js is not simply a wrapper around the Canvas, it offers much more:</p>



<ul><li>A Scene Graph / Document Object Model for vector graphics: Work with nested layers, groups, paths, compound paths, rasters, symbols etc.</li><li>The handling and drawing of these graphic items is automatic and optimised, allowing you to construct or modify your items and styles and leave the drawing commands to Paper.js.</li><li>A well designed and battle hardened Application Programming Interface (API).</li><li>PaperScript, a simple extension of JavaScript, allowing the scoped execution of scripts without polluting the global scope, the execution of multiple scripts per page in their separate sand-boxed scopes while sharing the library code, and adding support for operator overloading to any object.</li><li>There is a good reason for the word Vector in Vector Graphics. Paper.js treats Vector Mathematics as a first class citizen by making working with vectors and geometries as simple as possible through its core types such as&nbsp;<a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="http://paperjs.org/reference/point" target="_blank">Point</a>,&nbsp;<a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="http://paperjs.org/reference/size" target="_blank">Size</a>&nbsp;and&nbsp;<a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="http://paperjs.org/reference/rectangle" target="_blank">Rectangle</a>. The manipulation of&nbsp;<a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="http://paperjs.org/reference/point" target="_blank">Point</a>&nbsp;and&nbsp;<a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="http://paperjs.org/reference/size" target="_blank">Size</a>&nbsp;objects is further simplified in PaperScript, where direct math operations using normal operator syntax are possible on such objects as if they were plain numbers.</li><li>Construct paths and manipulate their curves and segments in very convenient and fine-grained ways.</li><li>Inspect and manipulate the precise bounding box of any item, supporting complicated stroke styles with different stroke ends and miter limits.</li><li>Smoothen curves, and simplify path segments by fitting curves through points.</li><li>Simulate dashed strokes which are currently lacking from the Canvas object, at near native drawing speed.</li><li>Most blend modes known from Illustrator and Photoshop supported through emulation in JavaScript: multiply, screen, overlay, soft-light, hard-light, color-dodge, color-burn, darken, lighten, difference, exclusion, hue, saturation, luminosity, color, add, subtract, average &amp; negation.</li></ul>



<p>Read paperjs&nbsp;<a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="http://paperjs.org/tutorials/" target="_blank">tutorials</a>&nbsp;to learn more about the features of Paper.js.</p>



<h2><a>Browser Support</a></h2>



<p>Paper.js is aimed at modern browsers with support for the Canvas object and EcmaScript 5. Even though in theory it is possible to write code that works in older browsers (Yes Explorer 8 and below, we are looking at you!), paperjs currently do not support them out of the box. Let’s go forward!</p>



<p><strong><em>Credit goes to PaperJS@<a href="http://paperjs.org/">http://paperjs.org/</a></em></strong></p>

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Obj...

Paper.js — The Swiss Army Knife of Vector Graphics Scripting - TCMHACK

Paper.js — The Swiss Army Knife of Vector Graphics Scripting

If you're working on a project that requires data visualization, check out these five great open source libraries and see which one fits your needs!

In this post, we will talk about top 5 best open source&nbsp;<a href="/category/javascript/" target="_blank" rel="nofollow noopener noreferrer">JavaScript</a>&nbsp;chart libraries. Every site and dashboard are incomplete without charts and graphs so it is very important to find the right chart library for our application. The following libraries will help you to create customizable and beautiful charts for your application.
<h3 id="d3js-data-driven-documents">D3.js — Data-Driven Documents</h3>
D3.js is an open source JavaScript library used for manipulating documents based on user data. It is a powerful tool which gives life to the data with the help of HTML, SVG, and CSS. D3 allows developers to bind arbitrary data to a DOM and then it applies the data-driven transformation to the DOM.

For Example: Consider an array of numbers, You can use it to generate an HTML table or you can use the same data to generate interactive&nbsp;bar or pie charts.

Official Website:&nbsp;<a href="https://d3js.org/" target="_blank" rel="nofollow noopener noreferrer">https://d3js.org/</a>
<h3>Google Charts</h3>
Google Charts is an open source chart library which is powerful and very simple to use. It has many interactive charts to display and render live data. It has a rich chart gallery that include options like pie charts, bar charts,&nbsp;Scatter Charts, donut charts, etc. Moreover, various customization options are available with the charts.

It also has charts like Histograms, timelines, trend lines, Sankey Diagrams, etc.

Official Website:&nbsp;<a href="https://google-developers.appspot.com/chart/" target="_blank" rel="nofollow noopener noreferrer">https://google-developers.appspot.com/chart/&nbsp;</a>
<h3>Chart.js</h3>
Chart.js is a community maintained chart library and by using it we can create responsive charts for your website. Using it we can generate mixed charts and it has great rendering capacity in modern browsers. It has very good documentation and samples available.

<a href="http://jtblin.github.io/angular-chart.js/" target="_blank" rel="nofollow noopener noreferrer">Angular Chart</a>&nbsp;is built on top of the Chart.js library, and for Angular projects it will be really easy to implement Angular charts.

Official Website:&nbsp;<a href="http://www.chartjs.org/" target="_blank" rel="nofollow noopener noreferrer">http://www.chartjs.org/</a>
<h3>Chartist.js</h3>
Chartist.js is also an open source JavaScript library similar to Chart.js. It has&nbsp;rich and response charts available. Using it, we can generate SVG charts that are DPI independent. It has support for most of the modern browsers and good community support. It has support for some other technologies like Node, Angular, Jjava, Wordpress, Ember, React, and Meteor.

Official Website:&nbsp;<a href="http://gionkunz.github.io/chartist-js/" target="_blank" rel="nofollow noopener noreferrer">http://gionkunz.github.io/chartist-js/</a>
<h3>n3-charts</h3>
n3-charts is also an open source JavaScript chart library and it makes the life of the Angular developer easy. n3-charts is built on top of D3.js and AngularJS, hence it posses more powerful charts and it's easy to implement.

Official Website:&nbsp;<a href="http://n3-charts.github.io/line-chart/#/home" target="_blank" rel="nofollow noopener noreferrer">http://n3-charts.github.io/line-chart/#/home</a>

If you're working on a project that requires data visualization, check out these five great open source libraries and see which one fits your nee...

AlertifyJS - Browser dialogs made easy!

Paper.js — The Swiss Army Knife of Vector Graphics Scripting

Top 5 Best Open Source JavaScript Chart Libraries