Vuido Create Native Desktop App

Vuido makes it possible to create lightweight, native desktop applications using Vue.js. Application using Vuido can run on Windows, OS X and Linux, using native GUI components, and don't require Electron.

There another solution to create native desktop application that running on cross platform, Vuido make it real

Vuido makes it possible to create lightweight, native desktop applications using Vue.js. Application using Vuido can run on Windows, OS X and Linux, using native GUI components, and don’t require Electron.

Instafeedjs LIbrary to Show Off Instagram Photos on Website

instafeedjs

Sometimes we want to display our photos on instagram on a website, exactly personal website. Or if you are a photographer and want to display uploaded photos on instagram on a website as a porfolio, maybe this javascript libraries is suitable for you.

Instafeedjs created by  steven schobert which is useful for displaying instagram photos easily. This library already supports hastag and username. So, you can display photos based on hashtag or username.

 

6 Of the Best Tools That Make JavaScript Development a Breeze

6-Of-the-Best-Tools-That-Ma

As you may know, delivering optimal user experience has become a crucial issue, and so it has become more important than ever that your website maximizes UX. This can be achieved, by making your site adjust to different mobile platforms. Since JavaScript work across almost all the browsers and platforms, you can ensure that your HTML web page will render across different browsers. Besides this, there are many other factors that makes JavaScript one of the most dominant programming languages today.

In fact, many developers favor using JavaScript for creating web pages, since it is easy to learn and requires using simple programming syntax. Most importantly, there are plenty of remarkably useful JavaScript tools available over the web that can help you in performing many different web development distinctive tasks in a quick and effective manner.

In this post, we’ll help you know about some of the best JavaScript tools, such as:

jQuery UI

If you want to design highly interactive web apps or need to use jQuery widget library for your web development project, without having to write plenty of code, then the jQuery UI is worth a try. Essentially, this is an ideal tool for creating great user interfaces (UI’s) that work across many different platforms and browsers.

Converse.js

It goes without saying that Facebook is arguably the most popular site in the social media landscape. And one great feature of this social media network that is widely used by people around the world is the chat application. If you want to create a Facebook inspired chat application, then Converse.js tool is exactly what you need. This tool help in creating a chat application that can be connected to the XMPP/Jabber server. Furthermore, the chat application come loaded with a rich feature-set, including both single and multi-user chatrooms support and many more.

Epoch

The increasing demand for immersive data-driven experiences has made “Data visualization” the latest fad on the web. Fortunately, there are many tools out there that helps in displaying data in the form of stunning visual representations. However, most of these tools compare with the JS library called D3.js – used for data visualization purposes. Based on D3.js, Epoch is a JavaScript tool that offers smooth and high-performance real-time charts. With the help of Epoch, you can add charts that provides real-time updates to your users, resulting in enhanced user experience.

JS Hint

Often when working on complex projects, use of typos and language gotchas often bother JavaScript developers. Well, codebase is bound to become huge at some point of time, and likely you might miss out the mistakes you’ve made while writing the code. However, those mistakes will waste a lot of your debugging time. But, using JS Hint tool, you can detect errors and several other potential issues when writing the code. The best aspect about this tool is that it is flexible and fine-tune with your coding guidelines and the environment you want to use for code execution.

Reveal.js

Creating presentations isn’t a new concept, but

Reveal.js help make the task of creating presentations more impressive. A HTML5 framework, Reveal.js help create interactive powerpoint slide containing swipe gesture, transition styles (like fade, zoom, etc.) and so on. Want to create a website that presents information in the form of a story? Well, then Reveal.js will prove a viable tool for you, as it will help you present your message in style.

Gremlins.js

Have you been looking for a way to perform a monkey test on the browser and Node.js? If that’s the case, then Gremlins.js JavaScript library will serve as a viable tool for you. Whether you want to check your app for bizzare user interactions, detect and fix memory leaks and so on, the Gremlins.js let loose a pack of undisciplined gremlins, so as to evaluate how robust your web apps are. Gremlins will carry out any random user action such as click anywhere in the opened window, and other actions to see if your app breaks or not. If your app fails to break, it clearly suggests that your app is robust.

Conclusion

If you want to speed up your development tasks, then utilizing the above discussed JavaScript tools will definitely help you accomplish your objective in the best manner possible.

Fresh and Useful Javascript Library for Web Developers

javascript-library

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.

JSON Server

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.

Download

Highlight.JS

is a javascript library that is used to highlight programming language syntax on the web.

highlight.js

  • 125 languages and 63 styles
  • automatic language detection
  • multi-language code highlighting
  • available for node.js
  • works with any markup
  • compatible with any js framework

Download and info

Moment.js

Is a javascript library to handle and manipulate the date on javascript.

moment.js

Code example

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();

Download

Famous Engine

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.

famous engine

Info and Demo

Stanford Javascript Crypto Library

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.)

Download

Iconate.js

A javascript library to provide animation to the icons. This library is easy to use and lightweight.

iconate.js

Download

Pixi.Js

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.

pixi.js

Download Demo

 TimelineJS

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.

timelinejs

Download Example

Social Unlocker jQuery Plugin

social unlocker jquery plugin

Features

  • 3 social networks support
  • Fully customizable mask and components
  • 7 unique design styles
  • Support different social unlock styles
  • Mobile devices ready
  • Fully Responsive
  • Cross-browser compability
  • Unlimited number of locked content on same page

Download

Parsley.js

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

parsley.js

Download Demo

Fabric.js

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.

fabric.js

Demo

Motion Slider Jquery Plugin

motion slider jquery plugin

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

Download

Imgix.js

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.

imgix.js

Download

TinyTable for Responsive Table

responsive tinytable jquery plugin

TinyTable is jquery plugin for your website which will convert your tables into mobile format

Download

DarkroomJS

DarkroomJS is a JavaScript library which provides basic image editing tools in your browser, such as rotation or cropping.

darkroomjs

Features

Currently, the implemented features are:

Crop
Crops the image by selecting a zone with your mouse. This supports several options like ratio and dimensions control (min/max).
Rotation
Adds two buttons to let you rotate hte image to the left or the right.
History
Allows to undo and redo any changes on the main image.
Save
Transform back the canvas into image. This is mainly a proof of concept to show how plugins work. 

Download

Responsive FlipBook jQuery Plugin

jquery responsive flipbook

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.

Download

Layzr.js

A small, fast, modern, and dependency-free library for lazy loading.

layzr.js

Demo

Jquery Facedetection : Simple Way to Detect Human Face for Web

jquery facedetection

if you’re want to creating app that detection human face, you’re in right place. I found best jquery plugin to do that : simple human face detection. Its called : Jquery facedetection and use great algoritm by Liu liu.

Jquery facedetection will return value in array that contains :

  • x: Y coord of the face
  • y: Y coord of the face
  • width: Width of the face
  • height: Height of the face
  • positionX: X position relative to the document
  • positionY: Y position relative to the document
  • offsetX: X position relative to the offset parent
  • offsetY: Y position relative to the offset parent
  • confidence: Level of confidence

So, you can use the array return to your app.

Oh shit, this jquery plugin also ability to detection face in video, wow its very amazing. And you can grab this plugin for free.

If you’re interest to develop this jquery plugin, you can join at github  or download directly or see the amazing demo

New Javascript Resource Edition #4

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.

Regulex – A Regular Expression Visualization

regulex

JavaScript Regular Expression Parser & Visualizer.

Demo

SVG Morpheus

SVG Morpheus

JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design’s Delightful Details transitions.

Demo

TXTJS

txtjs

A way to write text to <canvas>

Demo

Mithril Javascript Framework

mithril mvc framework

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.

Download

Tutorial : Creating a Social News Sharing App in 20 minutes with Meteor


A demo showing how to create a social news sharing app in 20 minutes with Meteor.

Read more

 

Tagator : Simple Jquery Plugin to Creating Tag Input Style

Its very long time no new post here, and this afternoon, i am begin to posting again.  I am very busy in offline work and some problems, and i hope these problems are over. Ok, back to web development and design blog, i love this blog very much.

I am currently in property project, its a website with featuring sell-and-buy property (real estate).And from that project, i found new useful jquery plugin to creating tagging input, just like in wordpress admin screen, when you’re writing a post.

The name of this jquery plugin is : Tagator.

Tagator is jquery plugin to creating tagging input style, as note its just a style, will not effected to your core app.  Check out below for screenshot

tagator plugin

You can check demo here

To using tagator, just type the tag you want and press enter. Just it.

You can read documentation of tagator here

Owl Carousel : More that Just a Content Slider

owl carousel

Owl Carousel is another slider image/content for web. If you’re using bootstrap, they are also has carousel feature, but if you dont like it, you can use Owl Carousel. Owl Carousel is slider with more feature and you can use it in flexibility level. And best part of this plugin is, 100% optimized for touch device.

To use Owl Carousel, you  need jquery, here is order of use

<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
 
<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
 
<!--  jQuery 1.7+  -->
<script src="jquery-1.9.1.min.js"></script>
 
<!-- Include js plugin -->
<script src="assets/owl-carousel/owl.carousel.js"></script>

When you’re done with that document, you’re ready to action with owl carousel.

Ok, lets download owl carousel. Download now

New Javascript Resource #2

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.

Angular Google Map

angular google map

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

UI Bootstrap for Angular JS

ui bootstrap

Its a bootstrap component for angular JS. Read more

Ng-Grid for Angular JS

ng-grid

Its component for angular JS to creating grid layout or table interface. Read more

TheWall.js

thewall.js

TheWall.js is jquery plugin to create grid layout for image + text, such as google image search. Read more

Nightmare JS

nightmare js

Read more

PlumageJS

plumagejs

Plumage is a UI framework for building data intensive, private web apps, including internal tools and authenticated public services. Read more

Griddle for React.js

griddle for react.js

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

React Google Map

react google map

Its a react component to integrated google map into your app. Read more

React Datepicker

react datepicker

Component to build datepicker in react.js. Read more

Progressbar.JS

angularjs

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

Brackets.io

bracket

The code editor for web. Free and fast. Read more

Lazysizes

lazysize

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

 

New and Useful Javascript Library for Designers and Developers

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.

You Dont Know JS

Its a ebook series that teach you javascript from basic. You will get understrand javascript from right man. Please see the introduction below

Read more

JSS

Is a javascript library to interact with CSS. Maybe its just like CSS that written in javascript, and its perfect for build dynamic display.

jss

Read more

Imgix.js

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>

Read more

JuliusJS

juliusjs

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

Respimage

respimage

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

Jquery Viewport Plugin

Its simple and smart jquery plugin to access viewport.

jquery viewport

Demo

Git-it

git it

is not a javascript library, but its guide style to understanding git hub. I am including it because is useful for developer. Read more

Peerflix for Node.JS

peerflix

Its a node.js add on for streaming torrent. Read more

Franc

franc

Its a useful javascript library for detecting a language of a word or text. Read more

DataCollection.Js

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

 

RectiveJS : Minimalist Javascript MVC Framework with HTML DOM Manipulation

EmberJS and BackboneJs is most used javascript MVC framework, developer prefer to use it, because its popular and has a live community. But, if you want to use javascript MVC framework that more small than them, RectiveJS is one solution for you.

Introducing, RectiveJS. It is a small javascript framework that ability to manipulation inert HTML DOM. So, you can update HTML DOM instanly. Just like what EmberJS do, RectiveJS featured with Two-way binding, animations, SVG support and many more.

In history, RectiveJS has been founded by theguarding for its newspaper app, in order user can be more enjoyed when reading the news. Then, this library released as javascript library, and can be accessed by developers. You can be contribute at Github and follow its twitter.

Some example app of this library can be acces here

  1. Todo app
  2. Simple rating app
  3. Infinite Scroll

Interact with HTML5 localStorage and sessionStorage Easier with Jquery Storage API

jquery storage api

Yesterday we wrote about Jcanvas, which is a jquery plugin to interact with HTML5 canvas element. Now, we would like to share information about HTML5 localStorage and sessionStorage API. The second element is the new feature of HTML5 and start widely used by developers to make their applications more perfect, especially HTML5-based games. HTML5 localStorage allows us to store information on the local storage medium, almost similar to a cookie.

By using javascript, we are much easier to interact with HTML5 localStorage and sessionStorage API. To that end, we recommend to use jQuery Storage API. Storage API jQuery is a jquery plugin that allows us to interact with HTML5 localStorage and sessionStorage API

JQuery Storage API Features

  1. To store object easily, encode/decode it with JSON automatically
  2. Ability to define namespace and use it as a specific storage
  3. Magic getter and setter to have access at an infinite object level with one call
  4. Add jquery.cookie and manage your cookies with this API
  5. You want use storage on old browsers? Add jquery.cookie & JSON and JQuery Storage API use cookies to simulate storage!

You can download it here