Web Development and Design Blog
Want to build video site like Youtube or Vimeo? You need javascript player that playing video file. Plyr is great javascript library to play video file, including youtube or vimeo. Its fully support HTML5 dan modern browser.
You can check demo here
Javascript is always evolving and growing. Web programmers require javascript library to complete their projects. Most are jquery plugins, because users jquery very much. However, many programmers that do not use jquery.
This time I want to gather useful javascript library for web developer or web programmer. Every week, on the internet, developers released a javascript library that is ready to use for various purposes.
Is a javascript library that can be used to create REST-API server in just a few seconds. This server can serve requests through a browser. The concept is simple, but can be developed further.
is a javascript library that is used to highlight programming language syntax on the web.
Is a javascript library to handle and manipulate the date on javascript.
moment("20111031", "YYYYMMDD").fromNow(); // 4 years ago
moment("20120620", "YYYYMMDD").fromNow(); // 3 years ago
moment().startOf('day').fromNow(); // 9 hours ago
moment().endOf('day').fromNow(); // in 15 hours
moment().startOf('hour').fromNow();
Is a javascript library to create animations and interactions on the web. Perhaps, with the famous engine, you can create a simple animation games or movies.
Famous now unites DOM and WebGL under a single coordinate system. Borrowing concepts from modern game development, Famous structures applications in a scene graph hierarchy that makes manipulating HTML and WebGL together simple and programatic.
Is a library to encrypt the data encryption technique that has been developed by Stanford.
SJCL is secure. It uses the industry-standard AES algorithm at 128, 192 or 256 bits; the SHA256 hash function; the HMAC authentication code; the PBKDF2 password strengthener; and the CCM and OCB authenticated-encryption modes. Just as importantly, the default parameters are sensible: SJCL strengthens your passwords by a factor of 1000 and salts them to protect against rainbow tables, and it authenticates every message it sends to prevent it from being modified. We believe that SJCL provides the best security which is practically available in Javascript. (Unforunately, this is not as great as in desktop applications because it is not feasible to completely protect against code injection, malicious servers and side-channel attacks.)
A javascript library to provide animation to the icons. This library is easy to use and lightweight.
Is a javascript library to create 2D animation. The Pixi renderer Allows everyone to enjoy the power of hardware acceleration without any prior knowledge of WebGL. Also, it’s fast. Really fast.
A javascript library to create a timeline story easily and quickly. With this library, you can create a storyline that is easily understood by the user. Layout is used similar to Plurk, but this one is much simpler.
Features
A javascript library for form validation purposes without rewriting one line of code. For those of you who want to add validation features, then parsely.js worth trying. You simply add an HTML attribute that can recognize javascript
If you need a library that can handle HTML5 canvas and image, then fabric.js very appropriate for you. You can do anything with the image, such as resize, drag and drop, add text, animations, hover and others.
Motion Slider is a responsive jQuery slider plugin for mobile and desktop that enables multi-transition and browser prefix free CSS animation to your HTML DOM elements
imgix.js is a dependency-free Javascript library that allows you to easily use the imgix API to make images on your site or app responsive to device size and pixel density.
imgix.js allows for intuitive use of imgix features like text formatting, color palette extraction, color adjustments, effects, and watermarking.
TinyTable is jquery plugin for your website which will convert your tables into mobile format
DarkroomJS is a JavaScript library which provides basic image editing tools in your browser, such as rotation or cropping.
Currently, the implemented features are:
It is fully HTML & jQuery driven no Flash Player needed. Works on desktop and mobile devices! You get the same experience on every platform because responsive design makes it look good on all resolutions. Easy to customize with a JSON.
A small, fast, modern, and dependency-free library for lazy loading.
Javascript is best and most promising ways to make better the user interface and user experience when using the web. Javascript is used to modify the UI on the client side. Excess javascript for faster execution and easy to write programs, especially when using a framework like jquery and angularjs.
Every week, more than 1000 libraries javascript released on the internet and all of them aim to make it easier for web developers create better again.
This time I collect libraries, tutorials, tools and snippets related to javascript and framework.
JavaScript Regular Expression Parser & Visualizer.
JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design’s Delightful Details transitions.
A way to write text to <canvas>
Mithril is a client-side MVC framework – a tool to organize code in a way that is easy to think about and to maintain. Mithril was created by Leo Horie, and it provides models, views, controllers, and the benefits that a virtual DOM brings. It also has a routing layer that is used for manipulating the browser’s URL.
A demo showing how to create a social news sharing app in 20 minutes with Meteor.
Javascript is backbone for web UI and best way to modification web element. In this edition, we was collected new javascript resource for your productivity and speed up your project done. And in this post, we include angular UI, angular Google map where you can easily add google map to your angular app.
Another javascript library is new jquery plugin, tutorial, image management and many more.
Let begin with angular JS.
Easy way to integrated your angular app with google map. Angular Google Maps is a set of directives (part of angular-ui) written in CoffeeScript and Javascript which integrate Google Maps in an AngularJS applications. Read more
Its a bootstrap component for angular JS. Read more
Its component for angular JS to creating grid layout or table interface. Read more
TheWall.js is jquery plugin to create grid layout for image + text, such as google image search. Read more
Plumage is a UI framework for building data intensive, private web apps, including internal tools and authenticated public services. Read more
Griddle is a simple grid component for use with React.js. Griddle is powered by React and its virtual DOM. Only the current page of the grid is rendered at any given time. Whether you have several or hundreds of records, Griddle should render your data quickly. Read more
Its a react component to integrated google map into your app. Read more
Component to build datepicker in react.js. Read more
With ProgressBar.js, it’s easy to create arbitrary shaped progress bars. This JavaScript library provides a few built‑in shapes like Line, Circle and Square but you can also create your own progress bars with Illustrator or any vector graphic editor. Read more
The code editor for web. Free and fast. Read more
High performance lazy loader for images (responsive and normal), iframes and scripts, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration. Read more
Javascript is continue to develop, in a week, developer release new useful library and resource to javascript. After release in first year, maybe it two decades ago, javscript become a backbone on client browser programming. Many game built on javascript, app, DOM modification and many more
We’are covered new resource and library for javascript. Maybe some of them dedicated for expert and newbie. Here is list of javascript resource that useful for developer and designer.
Its a ebook series that teach you javascript from basic. You will get understrand javascript from right man. Please see the introduction below
Is a javascript library to interact with CSS. Maybe its just like CSS that written in javascript, and its perfect for build dynamic display.
Its a javascript client library for Imgix. If you dont have account there, please register at imgix.com. With Imgix.js you can easily interact with Imgix server, see the code example below
<html>
<head>
<style>
.imgix-fluid-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: block;
}
</style>
<!-- include imgix.js -->
<script src="http://www.imgix.com/static/js/imgix.min.js" type="text/javascript"></script>
<script>
imgix.onready(function() {
imgix.fluid({
updateOnResizeDown: true,
pixelRounding: 5,
autoInsertCSSBestPractices: true
});
});
</script>
</head>
<body>
<div data-src="http://assets.imgix.net/coffee.jpg?fit=crop&crop=faces" class="imgix-fluid imgix-fluid-bg"></div>
</body>
</html>
Its a javascript library to support speech recognizing for web. This library need access to your microphone device. Its libary are not perfect, maybe its still in beta section, and currently in development. Read more
Its a javascript library to save client bandwidth when loading site. It implements the srcset/sizes attributes as also the picture element. Unlike other responsive images polyfills respimage plays nicely with your graceful degradation / progressive enhancement strategy. Read more
Its simple and smart jquery plugin to access viewport.
is not a javascript library, but its guide style to understanding git hub. I am including it because is useful for developer. Read more
Its a node.js add on for streaming torrent. Read more
Its a useful javascript library for detecting a language of a word or text. Read more
DataCollection.js is a JavaScript library for storage, filtration, manipulation and accession of large datasets. It is ideal for working with data returned from RESTful API endpoints. Read more
Did you have made a mathematical calculation with javascript? if ever, may you feel how complicated working on a mathematical formula with javascsript. Notation javascript difficult makes it difficult to apply a mathematical formula or physics. For that, they need a special library to handle mathematical operations on javascript.
Math.Js is a library which is specialized to handle a wide variety of mathematical and physical operations. For you who are making the application on the basis of calculation, this library is perfect and you must use. Math.js advantages are: Supports numbers, big numbers, complex numbers, units, strings, arrays, and matrices. So that your application is not limited to the number and types of data.
Download this awesome library here (development version) and here (production version)
<!DOCTYPE HTML>
<html>
<head>
<script src="math.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
// use math.js
math.sqrt(-4); // 2i
</script>
</body>
</html>
You’re ready to write down your math code.
<!DOCTYPE html>
<html>
<head>
<title>math.js | basic usage</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/mathjs/1.0.0/math.min.js"></script>
</head>
<body>
<script>
function print(value) {
var precision = 14;
document.write(math.format(value, precision) + '<br>');
}
// functions and constants
print(math.round(math.e, 3)); // 2.718
print(math.atan2(3, -3) / math.pi); // 0.75
print(math.log(1000, 10)); // 3
print(math.sqrt(-4)); // 2i
print(math.pow([[-1, 2], [3, 1]], 2)); // [[7, 0], [0, 7]]
// expressions
print(math.eval('12 / (2.3 + 0.7)')); // 4
print(math.eval('5.08 cm to inch')); // 2 inch
print(math.eval('9 / 3 + 2i')); // 3 + 2i
print(math.eval('det([-1, 2; 3, 1])')); // -7
// chained operations
var a = math.select(3)
.add(4)
.multiply(2)
.done();
print(a); // 14
</script>
</body>
</html>
I think Math.js is time saver when deal with mathematic, and i recomended its if your app has calculation feature
Follow the community at Github : https://github.com/josdejong/mathjs
Clipboard.js is simple and lightweight javascript library to handle your clipboard. Its support copy and cut data on clipboard. The idea is simple. Make clipboard handle is simple.
Copying text to the clipboard shouldn’t be hard. It shouldn’t require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn’t depend on Flash or any bloated framework.
You can using clipboard.js right now by use CDN. Access it here
Clipboard.js support modern browser
Read more about clipboard js. here
Trianglify is a JavaScript library that can be used to generate beautiful low-poly graphics right in your browsers, that can also be saved locally as SVG images
Low poly is a technique used by 3D rendering engines which is basically a low-number polygon mesh. While this technique was invented for faster rendering of computer graphics it has also recently caught on with Web designers which tend to use a lot of abstract low-poly images as backgrounds for their designs.
Trianglify works by taking some input parameters and generating a low-poly mesh in SVG format. The rendered image can be saved locally or used as a CSS background.
Trianglify required d3.js and enabled javascript on client side
Every front end designer need Vue.js. Vue.js is awesome javascript framework for building interactive web interfaces. It provides data-reactive components with a simple and flexible API. Its amazing size, just 19kb gzipped, make its faster to load.
Vue.js has feature
Note that Vue.js only supports ES5-compliant browsers (IE8 and below are not supported).
Download vue.js
Have you ever worked with URLs using JavaScript? If you want to be sure you will get problems like how to parse URLs, extract URLs and modify them. If so, then you need a javascript library that you can use to handle URLs. You will work faster, save time And write fewer code
Is a javascript library that can use to handle URL. allow developers to manipulate strings in the form of URIs (or URLs).
The library does not modify the page’s current URL, and is merely a basic string manipulation tool, but specialized in URL strings alone. URI.js works with client-side (browsers) and server-side (Node.js) environments.
A jQuery plugin is included with the download package as well.
I found the new useful javascript libary for web developers. This is 100% open source javascript libary and free to use in any purpose. Every time browsing on the internet, and I found the javascript libary, I will keep it in getpocket account. Because I know this will require a libary for next project. And because I feel this is very useful libary, I finally decided to make this post
In this post, you can found a library for reading PDF in javascript based, gesture kits to optimize the touch action on the mobile device, heatmap javascript, drag and drop for angularJS, localStorage and more.
Ok, lets begin to explore useful javascript library, dont forget to saving this post is useful, share to your social network and if needed you can write down to your notes. Read more
Is a javascript library that allows you to work with a variety of videos, including videos from YouTube and Vimeo. You can configure Libra today to work in accordance with your wishes. Excess plyr is when you embed the video on YouTube, much simpler interface that does not impress the video came from YouTube. To Websites which have a lot of video content I believe plyr is a library that is suitable to handle video content
Other plyr excess is a measure of this library is very small only 10 kilobytes and supports a wide range of features such as
Just download and view plyr demo
<script src=“path/to/plyr.js”></script>
<script>plyr.setup();</script>
<link rel=“stylesheet” href=“path/to/plyr.css”>
Download Plyr here