Toontuts @toonlite - Tumblr Blog

New Post has been published on http://www.attuts.com/draw-walkpath-in-svg-svg-animation-html5/

Draw WalkPath in SVG - SVG animation | HTML5

Today we are going to see how can we draw a walkpath over a vector map. For vector map, we are going to use SVG, since SVG graphics are designed for use on the web or on web pages, basic knowledge of HTML / XHTML, XML, CSS and JavaScript are highly recommended for the understanding of the tutorial. I have recently finished a project that contains functionality to show walkpaths to the seat on the map of the application. If someone asked me to develop just kind of project using html and javascript, few years ago then definitely I would choose flash. Following library and element we are going to use in this project

Jquery

SVG

Lazy line painter

Lazy line painter library help us in order to animate vector paths.

I wanted to share the demo before starting the tutorial, it would help us in better understanding. I tried to make this tutorial easy and simple. Click on icons to see the action.

Let’s start with vector map, I got a nice map of brazil from the amcharts , that I modified in illustrator and placed “you are here” with three Capitol icon.

First embed the SVG to HTML, there are numerous way to embed and load SVG to HTML. Below is the SVG code that i am using

As you see in the above code that “you are here icon” has school ID and capitol has “hit” class. With “hit” class, we assign click interactivity to SVG element. Before end of SVG code, you may notice that we have drawn an empty < g > element with id, this help us in drawing vector animation or walkpath.

Open any vector program, I used adobe illustrator and draw a path over that map and after finishing path drawing, save it as SVG format. For tutorial, I drawn three vector path and captured coordinates from the SVG using notepad and assigned it to javascript object. Code is below

var pathObj = { "shape3walkpath": { "strokepath": [ { "path": "M325.39,153.886c0,0-139.89-79.156-227.89,10.729", "duration": 1000 } ], "dimensions": { "width": 612, "height": 792 } }, "shape1walkpath": { "strokepath": [ { "path": "M341.133,156.85c0,0,164.967,29.16,144.167,208.405", "duration": 800 } ], "dimensions": { "width": 612, "height": 792 } }, "shape2walkpath": { "strokepath": [ { "path": "M332.052,159.443 275.21,272.5 342.32,331.17 371.03,366.27 381.37,403.5 387.592,411.38", "duration": 2000 } ], "dimensions": { "width": 612, "height": 792 } } };

We may also capture these data in json and load it via jquery but for the sake of tutorial simplicity, I put that on an object format. As I mentioned earlier that “hit” class call lazy line painter method to draw walk path. Here is the code.

$(".hit").click(function(e){ $($(this).attr('id')).lazylinepainter( { "svgData": pathObj, "strokeWidth": 2, "strokeColor": "#e09b99" }).lazylinepainter('paint'); })

Erase Walkpath Erasing any vector line is simple, follow these lines.

$(object).lazylinepainter('erase');

#HTML5

•18+ Adults Only

Watch Anya Live on Cam

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.

✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality

Anya is LIVE right now

FREE

Free to watch • No registration required • HD streaming

New Post has been published on @Tuts - Free Tutorial Resource for Javascript, anguarjs, Jquery

New Post has been published on http://www.attuts.com/how-to-resize-html-elements-using-css3/

How to Resize HTML Elements using css3

CSS3 offers the user the ability to change elements in size. You can use the statement: resize determine which elements are resizeable.

So far, the resizing of elements is only by Mozilla Firefox , Google Chrome and Safari browser support.

Example:

A triangular symbol with which you can change the size of the element horizontally as vertically will appear in the lower right corner.

HTML Code:

<p>Hello World</p> <div>Hello World</div> <h1>Hello World</h1>

Css Code:

p,div,h1{ width:200px; resize:both; // resize and overflow property required to work. background: cornsilk; overflow:auto; }

Working example:

The following values for resize can be specified:

none: The user has no control options to resize the element available. both: The element has the ability to size in both axial directions to change by the user. horizontal: The element has the ability to be relevant only in the horizontal direction (width) by the user to change. vertical: The element has the ability to be relevant only in the vertical direction (in length) by the user to change.

This allows multi-line input fields ( textarea ) influence.

Determine Maximum and Minimum Size

The statement min-height ( max-height , min-width , max-width ) you can determine how large an item or area at least (maximum) should be.

Working Example:

#CSS Tutorials

New Post has been published on @Tuts - Free Tutorial Resource for Javascript, anguarjs, Jquery

New Post has been published on http://www.attuts.com/web-forms-disable-autocorrect/

Web Forms : DISABLE AUTOCORRECT

The following article briefly explains how to disable the auto correction for form fields. One of the main problems of the auto correction is often that users are so focused on the typing that you notice the automatic auto correction later or not at all. So, it for incorrect input or frustrated users can come – especially on mobile devices.

It is however easily remedy, if you decide not the browser for potentially critical input fields, but specifically turns off the auto correction.

When does it make sense to switch-off the AutoCorrection? One should consider whether the dictionary of the operating system can assist the user in this field, or rather has weaknesses. Example: At the shipping address in an online shop, there are fields such as last name or Street, where the auto correction with high probability more bother than help.

#HTML5

New Post has been published on http://www.attuts.com/get-and-remove-colour-from-the-image-html5/

Get and Remove colour from the image- HTML5

Canvas has opened countless possibilities for Javascript Developers, it boon not only develop cool animation and games stuff but also a variety of way to develop other stuff, which is not possible in image tag. Today we are going to explore, one of the capability of canvas which makes it more robust HTML5 technology. You may have seen some site where you upload a product photo with white background and it turns white into transparent pixel, you see product with transparent pixel and some time you need to show or provide transparent image in “png” format. Yes, you are right, we are going to remove color from the static image.

Before we start, let’s have a look what we are going to build. Try “Edit Me ” button at bottom and switch it into editable mode, click on pixel you want to remove from the image, finish edit button to transfer editable image back to image tag.

This tutorial is comprised following concepts

How to get color from the image on click

How to remove color on basis of RGB Values from the image.

Let’s set up a program where on click of edit button we replace image with canvas and on press of “finish edit” we transfer our canvas output to image and remove canvas.

First set up a structure. In this structure we are going to draw image into canvas HTML5 and transfer canvas data to image.

HTML Code:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>@tuts tutorial</title> </head> <body> <div class="container"> <img src="http://www.attuts.com/wp-content/uploads/2015/01/attus.jpg" alt="source: fashionara.com" width="500" height="494" id="imgEle" /> <div id="tag">Image</div> </div> <div> <button id="btn">Edit Me</button> </div> </body> </html>

Css Code:

#btn { height:40px; color:white; background:green; width:500px; } .container { position:relative; width:500px; height:494px; } #tag { position:absolute; right:0px; top:20px; background:black; color:white; padding:10px; min-width:80px; text-align:center; }

Javascript Code:

Full Code:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>attuts.com</title> <script src="http://code.jquery.com/jquery-latest.min.js" ></script> <script> var imgObj; var canvasObj; var toggleButton = false // toggling bottom button action $(document).ready(function(e) { $("#btn").click( function (e) { if (!toggleButton) { toggleButton = true; imgObj = document.getElementById('imgEle'); $(imgObj).remove(); $(".container").append($("<canvas id='canEle' width='500' height='494'></canvas>")); canvasObj = document.getElementById("canEle"); var ctx = canvasObj.getContext("2d"); ctx.drawImage(imgObj, 0, 0); // drawing image into canvas $("#btn").text('finish Editing'); $("#tag").text("Canvas"); } else { toggleButton = false; $(".container").append($('<img width="500" height="494" id="imgEle" />')); document.getElementById("imgEle").src = canvasObj.toDataURL('image/png'); // transfer canvas data to img $(canvasObj).remove(); $("#btn").text('Edit Me'); $("#tag").text("Image"); } }); }); </script> <style> #btn { height:40px; color:white; background:green; width:500px; } .container { position:relative; width:500px; height:494px; } #tag { position:absolute; right:0px; top:20px; background:black; color:white; padding:10px; min-width:80px; text-align:center; } </style> </head> <body> <div class="container"> <img src="http://www.attuts.com/wp-content/uploads/2015/01/attus.jpg" alt="source: fashionara.com" width="500" height="494" id="imgEle" /> <div id="tag">Image</div> </div> <div> <button id="btn">Edit Me</button> </div> </body> </html>

Working Example – Toggle Image to Canvas and Canvas to Image:

Why we need to change image to canvas? So here is the answer. Through canvas method, we convert our image to imageData and from that data we are able to get pixel. Let’s check how to pick color from the canvas data. Now we are only modify our javaScript code.

How to get color from the Image on click?

$(canvasObj).on('click',function(event){ var x = event.pageX - this.offsetLeft; var y = event.pageY - this.offsetTop; var rgbdata = ctx.getImageData(x, y, 1, 1).data; var Rv = rgbdata[0]; var Gv = rgbdata[1]; var Bv = rgbdata[2]; console.log("R Value is "+ Rv + " Green Value is " +Gv+ " Blue value is "+Bv); });

Working Code : Refer to working code for more clarification.

As you see I modified my javaScript, We assigned a click listener to my canvas that draw our image into canvas and covert output into ImageData rectangle form. getImageData() method returns ImageData object which contains pixel information . On canvas click, we are passing four parameters to .getImageData() method, these parameters ensure we get piece of information that we required from the imageData rectangle. Parameters x and y is the point from where we want to get the information while 1,1 is the pixel block from the rectangle. Data property returns RGB color pixel and Alpha value which we are going to use to remove those pixel value from the image.

Now another interesting part comes,

How to remove color on basis of RGB values from the image.

Ok so here is the trick, since we access the image data, we are able to get all pixel length. We loop through all pixels of the imageData and where we get the value of our choice we set the alpha to 0. Once Loops ended we assign back the new formed imageData to canvas.

Note. Each pixel has its own color channel RBG + Alpha channel (transparency) which represent from 0 to 255.

Below is the implementation.

// get the image data object var image = ctx.getImageData(0, 0, 500, 494); // get the image data values var imageData = image.data, length = imageData.length; // Matching Pixel var r=0, g=1, b=2,a=3; for(var i=0; i < length; i+=4){ if ( imageData[i+r] >= Rv && imageData[i+g] >= Gv && imageData[i+b] >= Bv ) // Change Alpha to 0 when pixel match {imageData[i+a] = 0;} } // after the manipulation, reset the data image.data = imageData; // and put the imagedata back to the canvas ctx.putImageData(image, 0, 0);

Above implementation only remove the single matching pixel from the image. If we required to remove large amount of pixel values than we need to add threshold. Following implementation contains threshold, we made some changes in above code.

var threshold = 20 for(var i=0; i < length; i+=4){ if ( imageData[i+r] >= Rv-threshold && imageData[i+r]<Rv+threshold && imageData[i+g] >= Gv-threshold && imageData[i+g]<Gv+threshold && imageData[i+b] >= Bv-threshold && imageData[i+b]< Bv+threshold ) // if white then change alpha to 0 {imageData[i+a] = 0;} }

If in case you missed demo, here is the link http://jsfiddle.net/attuts/dsxLjovx/1/ and below is the complete working demo, experience it.

#HTML/Web Designing #HTML5 #JavaScript and JQuery #Tutorials

New Post has been published on http://www.attuts.com/javascript-based-face-detection-method/

Javascript based Face Detection Method

I’ve been always excited to know the concept behind tagging the faces, detection and recognition of faces on webcam and image. Although I know it’s beyond my imagination to get the logic and algorithms required to develop a face recognition software or plug-in. I get inspired to write a tutorial, when I get to know about Javascript libraries that helps in recognizing smile, eyes and face structure. There are many libraries available either purely javascript based or required java language with pro and cons.

Today we are going to explore tracking.js, it is lightweight javascript library developed by Eduardo Lundgren that enables you to do real-time face detection, color tracking and tagging friends. In this tutorial, we are going to see, how we can detect face, eyes and mouth from the static image.

At the end of the tutorial you find a working example of the tutorial with some more trick and tips and more technical details.

First we need to set up our project, download the project from the github and extract the build folder and place according to your file and directory structure. In this tutorial, i have been used the following file and directory structure.

Folder Structure

Project Folder │ │ index.html │ ├───assets │ face.jpg │ └───js │ tracking-min.js │ tracking.js │ └───data eye-min.js eye.js face-min.js face.js mouth-min.js mouth.js

You may see that “js” folder contains Javascript files that we extracted from the build folder of tracking.js. Let me show you the html code of index.html

HTML Code

In above html code we have included four javascript files of tracking.js that helps us in detecting face, eyes and mouth from the image. Now we write a code to achieve detect faces, eyes and mouth from the static image. I deliberately use this image because it contains multi-faces with different expressions and poses.

To make this work, we are modifying our previous code in head section of html.

HTML Code

<!doctype html> <html> <head> <meta charset="utf-8"> <title>@tuts Face Detection Tutorial</title> <script src="js/tracking-min.js"></script> <script src="js/data/face-min.js"></script> <script src="js/data/eye-min.js"></script> <script src="js/data/mouth-min.js"></script> <style> .rect { border: 2px solid #a64ceb; left: -1000px; position: absolute; top: -1000px; } #img { position: absolute; top: 50%; left: 50%; margin: -173px 0 0 -300px; } </style> // tracking code. <script> window.onload = function() { var img = document.getElementById('img'); var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']); // Based on parameter it will return an array. tracker.setStepSize(1.7); tracking.track('#img', tracker); tracker.on('track', function(event) { event.data.forEach(function(rect) { draw(rect.x, rect.y, rect.width, rect.height); }); }); function draw(x, y, w, h) { var rect = document.createElement('div'); document.querySelector('.imgContainer').appendChild(rect); rect.classList.add('rect'); rect.style.width = w + 'px'; rect.style.height = h + 'px'; rect.style.left = (img.offsetLeft + x) + 'px'; rect.style.top = (img.offsetTop + y) + 'px'; }; }; </script> </head> <body> <div class="imgContainer"> <img id="img" src="assets/face.jpg" /> </div> </body> </html>

Result

Code Explanation.

tracking.ObjectTracker() method classified the object you want to track where it accept parameter as an array.

setStepSize() specify the block step size.

We bind our tracking object with “track” event, soon object tracked, tracking object would trigger the track event.

We got Data in Object Array form where values are width, height, x and y coordination of each object (face, mouth and eyes );

Result Conclusion. As you may see that result vary according to shapes, there are improvements required but we admire and really appreciate the efforts in developing such kind of API.

Working Example:

Working Example with Image.

More Resources – Javascript based Face Detection https://github.com/auduno/headtrackr https://github.com/auduno/clmtrackr

We are planning to produce a tutorial based on face tracking and image tagging on HTML5 Canvas and webcam video. You may refer my previous post on webcam accessing on client side, which helps you in knowing way to access user’s webcam.

#HTML5 #JavaScript and JQuery

•18+ Adults Only

Watch Anya Live on Cam

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.

✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality

Anya is LIVE right now

FREE

Free to watch • No registration required • HD streaming

New Post has been published on http://www.attuts.com/desaturate-the-image-using-css-and-css3-transitions/

Desaturate the image using CSS and CSS3 transitions

Hello, today, nobody will be surprised on beautiful effects on sites. Some for the past 10 years, most of transforming images were done by either in flash or some other technologies. Here, we are going to do today. If you have seen my previous post of webcam and video using HTML5, you may apply same effect to canvas to apply real-time effect on webcam streaming.

Learn how to desaturate the image using CSS (Grayscale image css), and do it beautifully.

So, let’s start with a simple, we need a beautiful Image, take this:

Source : fanpop.com

We need it to desaturate (Desaturate the image CSS-remove color, make a picture black and white). For that (and graphics) in CSS3 has a special filter tool.

Here we apply.

Solution: Desaturate the image Using CSS3

First, in HTML we use IMG tag, in that image we apply CSS3 filters.

Now we apply css3 properties to our image

.imgcls{ -webkit-filter: grayscale(1); -moz-filter : grayscale(1); -ms-filter : grayscale(1); -o-filter : grayscale(1); filter : grayscale(1); filter : gray; }

Now our picture becomes black and white.

Working Example:

If I am not wrong, you are looking much more interesting, where the picture also responds to user actions.

I suggest that when you hover over the image, it gradually became colored.

In fact, it is not difficult to do, and does not need to know Javascript.

Animate our image using CSS3

Let’s provide little bit modification to previous style.

.imgcls { -webkit-filter: grayscale(1); -moz-filter : grayscale(1); -ms-filter : grayscale(1); -o-filter : grayscale(1); filter : grayscale(1); filter : gray; } .imgcls:hover { -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; filter: none; /* IE 6-9 */ }

Working Example:

This will allow the image when the mouse pointer moves over it with the mouse, it becomes a color and desaturate on mouse out. It’s time to add some transition effect to our image.

.imgcls{ -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -ms-filter: grayscale(1); -o-filter: grayscale(1); filter: grayscale(1); filter: gray; /* IE 6-9 */ -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .imgcls:hover { -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; filter: none; /* IE 6-9 */ }

Working Example:

The “all” option in the transition ensure that the rule will work for all css styles and the second parameter is the time of the animation.

In the first option, you can specify a specific property (such as height, to animate the height only), and for the second time in seconds (can be in decimal is 0, 1s).

There are much more effects that you can apply on image, canvas, video and any display container.

blur()

brightness()

contrast()

url()

opacity()

drop-shadow()

hue-rotate()

invert()

sepia()

More Useful Links

W3C Filter Effects Specification

Bennett Feely’s Filters Gallery

MDN Docs

https://github.com/Schepp/CSS-Filters-Polyfill

Browser Support

Chrome Safari Firefox Opera IE Android iOS 31+ (-webkit-) 7+ (-webkit-) 35+ 18+ (-webkit-) nope 4.4+ (-webkit-) 6+ (-webkit-)

#CSS Tutorials

New Post has been published on @Tuts - Free Tutorial Resource for Javascript, anguarjs, Jquery

New Post has been published on http://www.attuts.com/webcam-and-video-using-html5-send-video-image-to-server/

Webcam and Video Using HTML5 - Send Video Image to Server

For a long time, Developers have been using flash/flex or non html technologies to use webcam. With the growth of HTML5, it’s now easier for Html front end developers to use webcam and video without any plug in or third party resource. This article comprised following topics

Html5 API to access user’s webcam

Take screen-shot of video using canvas

Display into IMG tag

Export or save image via php

I tried to make this tutorial simple that any novice may get it easily. Let me show you how we can access user’s webcam. Let first we setup our HTML structure.

HTML structure.

<video id="videoEle" width="640" height="480" autoplay></video> <button id=”camOnButton” > Turn On my webcam</buton> <button id=”saveImgButton” >Save Image</buton>

For the sake of this tutorial, I am not using any fallback or null check, but as good developer you should take care of these things. Above html structure contains basic html and dimension of 640 X 480.

1. HTML5 API to access user’s webcam

Javascript Structure.

Experience Code : http://jsfiddle.net/attuts/evfn4hb9/ Once user clicks “Turn On My Webcam “ button, Javascript check the browser support for the webcam access API. Once ensure, browser ask for the permission to open the webcam. Video element gets the source from the API. Wow so far so good. Now next step is to take screenshot from the video and show it into canvas. This is pretty much simple. Let’s update the above html and Javascript code a bit for the canvas.

2. Take screenshot of video using canvas

HTML Structure.

Javascript Structure.

var canvas = document.getElementById("canvasEle"), ctx = canvas.getContext("2d") document.getElementById(“saveImgButton”).addEventListener(“click”,function(){ ctx.drawImage(vidObj, 0, 0, 640, 480); });

To avoid confusion I update the code with new integration. http://jsfiddle.net/attuts/svcf41o6/2/

Without any use of Javascript library or any plug-in we successfully have taken image from the user’s web camera that is incredible achievement. As we know that canvas has animation and drawing support that help us in exploring more creative things with images. Now our next step is to show that image into html IMG tag.

3. Display into Img tag

HTML structure

Javascript

document.getElementById(“imageEle”).src = canvas.toDataURL('image/jpeg'); // for Png use 'image/png'

Basically canvas element has a method called toDataURL(), that turns canvas element into base64 encode string. Php provide us advancement to save that data or image to server. Through jquery POST or GET method we can send canvas base64 encoded string data to php.

4. Export or save image via php.

Javascript/Jquery

var data = canvas toDataURL(); $.post("savefile.php", { // php file location imageData : data // imageData is the post request variable }, function(data) { window.location = data; });

Php Code

<?php $data = $_POST['imageData'] $result = base64_decode($data); $fp = fopen("savefile.jpg", 'wb'); fwrite($fp, $ result); fclose(); ?>

Eventually, with the use of javascript , html5 API and PHP we able to save image taken from user machine to server. Hope you enjoy and learned from the tutorial. 

#HTML5 #JavaScript and JQuery

New Post has been published on http://www.attuts.com/aw-snap-solution-video-tag-dispose-method/

"Aw, Snap!" Solution | Video Tag Dispose Method

I was developing an idle play module which contained sequential video rotation. So I used video element to show those high resolution mp4 video using mix of javascript and jquery.

So memory management was the big concern since it was desktop application which has to run for longer time in client machine. When it tested using memory profiler, it had been shocking that the size of the video to be stream was getting increase with each subsequent load of new video and it never dropping back to the baseline.

Following is the code used to delete the video from the DOM.

var vdPlayer = $("#container video")[0]; vdPlayer.remove();

After 6 hours of application runs, The “Aw, Snap!” error in Google Chrome appears on current tab where the video was running in sequential order. This because when a page crashes unexpectedly, there are different reasons of a page crash but mine is related to when chrome is out of memory. The most common fix of the problem is to reload the page again.

Here is the solution.

var vdPlayer = $("#container video")[0]; vdPlayer.pause(); vdPlayer.src=””; // passing empty value vdPlayer.load()// loading video with an empty source vdPlayer.remove(); vdPlayerParent.empty(); // Parent of the video element (optional);

Right ways to dispose a video from the DOM, is first clear the source and load the video with an empty source before removing the video from its container. This way we can prevent memory leakage where video discard from the DOM first and then .remove() method removes the element from the DOM. Please note that if your video tag has any event attached, remove that event before providing an empty source. This way you ensure that no reference is attached with the element.

#JavaScript and JQuery

New Post has been published on @Tuts - Free Tutorial Resource for Javascript, anguarjs, Jquery

New Post has been published on http://www.attuts.com/talking-javascript-explore-speech-synthesis-api-js/

Talking Javascript - Explore Speech Synthesis API Js

You can use Web Speech API and speech synthesis Javascript API to add speech to text and text to speech capability respectively to your page. It will help you in building speech recognition utility for web, mobile and desktop. You can achieve this with just a few lines of code. This post contains basic and important features of API. Start with Basics

Initialize the synthesis API with message and call speechSynthesisis.speak method with message. var speakmsg = new SpeechSynthesisUtterance(“Thanks for speaking”); window.speechSynthesis.speak(speakmsg);

However, interestingly you may add more feature or parameter to control and give effect to voice by altering pitch, volume, voice and language. Here is the example: var speakmsg = new SpeechSynthesisUtterance(); var voices = window.speechSynthesis.getVoices(); speakmsg.voice = voices[10]; speakmsg.voiceURI = 'native'; speakmsg.rate = 1; speakmsg.volume = 1; speakmsg.pitch = 2; speakmsg.text = 'Thanks for speaking'; speakmsg.lang = 'en-US';

speakmsg.onend = function(e) { console.log(‘on end function’); };

speechSynthesis.speak(speakmsg);

You may have notice that the second line contains .getVoices() method and third line contains .voicesproperty. getVoices() method give you an array of all available voice in the browser but some voices doesn’t support alteration. We explore more on that .getVoice() method but first check other options too; like .volume which takes 0 as minimum value and 1 as maximum value. Likewise .rate takes 0.1 to 10 values.

Explore Voice.

Through .foreach method in .getVoice(), you may check available voices . Here is the code. var voices = window.speechSynthesis.getVoices().foreach( function(voice,index){ console.log(“voice name : ” + voice.name + “ index is ” + index ); } );

Use different voice

var voices = window.speechSynthesis.getVoices(); speakmsg.voice = voices .filter( function(voice) { return voice.name == ‘Google UK English Male’; })[0];

Fallback Method

Since not all browser support its feature fully, safari for IOS7 support partially, while chrome has fully support. So below is the fallback method. if ('speechSynthesis' in window) { // Run you code, it support speechSynthesis. }

if (‘SpeechRecognition’ in window) { //Run you code. It support Speech Recognition. }

#JavaScript and JQuery

New Post has been published on http://www.toontuts.com/ng-if-in-angularjs/

Ng-if in AngularJS

The directive ng-if in AngularJS appeared in newer 1.1, and the truth, which are a much more orderly and cleanest way to carry out our work.

Thanks to them we can do checks with control if structures really easily, let’s look at a quick example of how to use them.

Example of ng-if in AngularJS

Assuming that we bring a variable from a variable called controller, we can check in the following way if its value is equal to 5, for example.

Limits your needs and imagination, put them so simple is to create control structures in our templates with the directive ng-if in AngularJS.

#AngularJs

•18+ Adults Only

Watch Anya Live on Cam

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.

✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality

Anya is LIVE right now

FREE

Free to watch • No registration required • HD streaming

New Post has been published on http://www.toontuts.com/calling-data-with-factories-and-services-on-angularjs/

Calling data with factories and services on AngularJS

In this tutorial we will see how to use factories and services in AngularJS, which are nothing more than small factories functions and objects for later, as we shall see, to be able to inject our controllers, very useful and necessary. Here, as we have said, we can store functions, arrays, objects and everything you want to have available to inject where do we need, in our case we will create an array for the factory and another for the service, in this way we will see how to use them after in a view.

Download the file angular.js

Create the file app.js and put in the following code, this file will be where we believe the entire application in order to not lengthen the tutorial, but it should be clear that the best thing to do is to evenly distribute the application to have it organized, a controllers folder where to save controllers, a folder models where to save factories, services or any type of data to consume, one for the templates etc.

Simple it is to create factories and services, thus, them have created, injected into a controller, and how much do use the controllers or the module in a view as we will have both the factory as a service available to display the data. Now simply we must create the index.html file in the root of the application, and go inside the returned data as we know.

<!DOCTYPE html> <!-ng-app makes reference to the name of our module - > <html lang="es" ng-app="app"> <head> <meta charset="UTF-8" /> </head> <body> <! - here add factoryController driver it will show where the data - > <div class="row" ng-controller="factoryController"> <h1 class="subheader">The factory information</h1> <ul class="panel callout radius"> <li ng-repeat="factory in factories"> <p>Id: {{ factory.id }} Name: {{ factory.name }} Age: {{ factory.age }}</p> </li> </ul> <h1 class="subheader">Service information</h1> <ul class="panel callout radius"> <li ng-repeat="service in services"> <p>Id: {{ service.id }} Name: {{ service.name }} Age: {{ service.age }}</p> </li> </ul> </div> <script type="text/javascript" src="js/angular.js"></script> <script type="text/javascript" src="js/app.js"></script> </body> </html>

And that’s it, this simple way we have seen how to use services and factories, and also how to use them in our controllers, I hope to be useful.:)

#AngularJs

New Post has been published on http://www.toontuts.com/how-to-configure-cloudflare-on-our-website/

How to configure CloudFlare on our website

Table of contents.

Introduction.

Environment.

Steps.

References.

Conclusion.

1. Intro

In this tutorial we will see that it serves CloudFlare. CloudFlare protects and accelerates any website online. Once your web site is a part of the CloudFlare community, your internet traffic is routed through their intelligent global network. Automatically optimizes the delivery of your web pages so that visitors get the faster loading times and improve performance. Also block threats and limit abusive bots and crawlers lost your bandwidth and server resources.

2. Environment.

The tutorial is written using the following environment:

Hardware: HP Pavilion dv7 Notebook PC (Intel Core 2 Duo 2.26 GHz, 4 GB RAM, 450 GB HD).

Operating System: Windows Vista Home Premium.

Code Editor Notepad + + v6.3.2

Graphic Editor GIMP 2.8.6

3. Steps to configure CloudFlare.

Let CloudFlare.

Checked by clicking on Sign up now .

We introduce our email account, password, read, accept the terms of use and we click on Create acount now

Add the domain of our site.

We hope to be scanned our DNS to configure them later.

When we click scan runs on Continue.

Blue Text Notice: We’ve added an FTP subdomain that does not pass through the CloudFlare network to access your old data to your FTP putting ftp.xyz.com. You can change the default name of the subdomain to something other than ftp for extra security.

Notice blue text: We have added a subdomain that allows you to access your server directly without going through the CloudFlare network. You should use this domain to access services such as SSH, FTP and Telnet. You can change the default name of the subdomain for greater security.

Clicking on record I’ve added all missing continue, we Cloudflare set automatically.

CloudFlare Settings for xyz.com: performance and security values recommended for your web site are presented in the image above. Take a moment to review them. You can also perform these settings later from your account of CloudFlare. Here we have used the Free Plan. Between one of its characteristics we see that it does not support web safe https SSL. Hire another Plan.

Image with configuration plans and prices:

Update your name servers: The last step is to update the name servers for xyz.com. To do this, you will need to go to your DNS provider and change your name servers. Once updated, please, return to this page and click on the link I’ve updated my nameservers, continue.

Completing the process: waiting for the change of the name servers to abby.ns.cloudflare.com and phil.ns.cloudflare.com. Please wait for 1and1 INTERNET AG up to 24 hours to complete this process (info).

Once passed 24 hours approximately observed which are already updated the name servers. If we go to our website, we can see that it loads faster and has better performance.

4. References.

CloudFlare.com

5. Conclusion.

This way, we get our website quicker and have significant improvement in performance and a decrease in spam and other attacks.

Currently the majority of hosting providers give him in their plans, and there are plugins for different CMS like WordPress.

#HTML/Web Designing

New Post has been published on http://www.toontuts.com/what-is-difference-between-pxem-and-rem-html-css/

What is Difference Between px,em and rem : HTML-CSS

You don’t know may be not but there are several units of measure when it comes to define the size of the font for a web page in CSS. Today I propose to speak of 3 units in particular: px, em, and rem.

The pixel is a unit of absolute measurement (such as pt or cm) which means that a value of 1px is 1px from the screen. The advantage of the pixel is that it isn’t variant and can be the used easily to set the size of our different fonts. But in the era of all responsive what happens if I want to enlarge or reduce the size of my texts easily? With pixel it’s impossible we are forced to manually reset all values.

% and em

It is there that the % and em intervenes. These two units are relative units that define the size of the font relative to the size of the parent.

Equal to the computed value of the ‘font-size’ property of the element on All which it is used. (W3C) [# http://dev.w3.org/csswg/css-values/ em-unit]

If our body defining a font-size of 16px then a h1 2em will have a size of 32px. We understand pretty quickly the benefit of this method, it allows to set the dimensioning of the elements relatively to a base value. Where it gets interesting is that we can use this unit of measure to size our elements in automatic manner based on the font size.

body{ font-size: 16px; } .ButtonInput{ display: block; height: 2em; line-height: 2em; / / 2em => 2 * 16 = 32px } .ButtonInput .big {font-size: 32px;} / / The size of the button will be automatically doubled

However in the case of nested elements em might be a problem:

li{font-size: 1.2em;} / / Li will have a font-size of 1.2 times the font size / / But a nested li li li will have a font size of 1.2 * 1.2 => 1.44 times greater

The em is always relative to the parent just change the font size of the parent element to see the change in size. What is sometimes not necessarily the expected effect?

rem

The rem is a unit that acts like em but that solves the previous problem inheritance (rem = root em). It is not based on the parent element for its size but on the root element. 1rem and take its value from the font-size of your document (body or html). This allows for a much more predictable than the em behavior. Unfortunately, the rem is not supported by IE8 and Opera mini (thus providing a fallback in px or em).

Why use rem / em instead of px?

Originally em possible to solve an accessibility on the “old” browser problem. When they resized your user page (CTRL + scroll) Browser increased the font size of your website, which had the effect of breaking all.

Fortunately modern browsers no longer use this method which has now been replaced by a true zoom. All your items (even those pixels) are resized according to the zoom level.

So why continue to use em or replace you say? Relative units allow easier maintenance of the site. Set all sizes relative to a base makes it easier to change the value while maintaining consistency in the proportions (which has never changed its font-size in the middle of a project).

However use em or replaced for sizing elements may be questionable because there is no longer the constraint imposed by the zoom ancient browser. However it can be an interesting idea if you want to change the font size to use the media query (eg enlarging the font on a desktop or mobile display while keeping the proportions).

#HTML/Web Designing

New Post has been published on http://www.toontuts.com/lannn-stack-in-production-environments/

LANNN Stack in production environments

I have previously spoken of MÉAN Stack for web application development, replacing the classic LAMP.

Today I want to tell you of another stack, more focused on production, called stack LANNN environments and what means this curse? It is an acronym for Linux in AWS (Amazon Web Services) configured with Nginx and Node.js and a database NoSQL.

Why Linux?

With Linux you use free software and makes you more cheaply than one based on Windows or Unix. The installation may seem complex at first, but there is a large community and is only a matter of time before you learn how to handle yourself with it (a Frontend tells you). With Linux you’ll benefit from reliability, safety, low cost and Open Sources licenses. Ubuntu is one of the most widespread distributions

Why AWS (Amazon Web Services)?

Buy a dedicated server is a thing of the past, the future is in the cloud (the famous ‘ Cloud’). AWS were pioneers in the great challenge of flexibility and stability on servers. Using AWS only pay for the time you use it. They have dozens of services that you can configure with whimsy (servers, databases, storage…) Access to dozens of pre-built images of operating systems (Ubuntu, Windows, etc.) They are the best choice for a scalable service and where you pay as you go grow.

Why NGINX?

Nginx is much better and faster than Apache. It provides great scalability and performance. Nginx works in the style of Node.js is oriented events and handles all requests in a same thread. Apache is based on processes and each generates a thread connection which ultimately slows performance. It can also be used as a reverse proxy that filters all incoming traffic and redirect to the appropriate servers . Thus adding another layer of security architecture.

Why NODE?

Node is based on the V8 JavaScript engine in Chrome platform. This allows building fast and scalable web applications . It is based on events, is a model of I / O is non-blocking and light at the same time efficient. Node is an ideal solution for applications that require intensive use of data in real time (video games, chats, messaging, APIs , notifications, etc …) this makes it perfect for anything from the simplest web to an advanced distributed architecture.

It is a very new technology but it is growing rapidly. Large companies such as Linkedin or Airbnb are starting to build his stack on it and reduce the number of servers needed.

Why NoSQL?

NoSQL is the new generation of database systems. Its keys are: Ultra-fast, stable, Atomic, distributed, without schema, prepared to handle Big Data, concurrency and connectivity.

In summary, this is the technology stack of a modern web application in a production environment, high-demand and user requests. It’s the future and not to leave it aside.

#NodeJs

New Post has been published on http://www.toontuts.com/whatsapp-send-gif-animations-through-video-conversion/

WhatsApp - Send GIF animations through video conversion

GIF animations have long been a revival in the network and of course, the user would also like to send this. However, this is not easily possible on all messengers.

So it works well for WhatsApp only indirectly. Because shipped to a GIF, only the first frame is displayed. However, there is the possibility to convert the animation into a video. There are several options, such as online Convert . You just need to select the target format and upload the file or drag from the dropbox and a short time later save the video. But this way is not quite as nice, but at least it works also on the Smartphone and not only on the PC.

Another option would be to upload the animation running on a free host service or in a cloud, and then send it with Link .

#news

•18+ Adults Only

Watch Anya Live on Cam

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.

✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality

Anya is LIVE right now

FREE

Free to watch • No registration required • HD streaming

New Post has been published on http://www.toontuts.com/firefox-28-with-vp9-support/

Firefox 28 with VP9 support

Mozilla has released the new browser version in final version with Firefox 28 which supports the VP9 video codec and Opus for audio files. Chromium had this support against end of 2013.

Firefox 28 provides relatively little innovation – on the surface, the user sees at most in the presentation of HTML5 audio and video player a slightly different volume control, which is now displayed horizontally instead of vertically. So it can be operated easily. Who uses Firefox on OS X, looks in the notification center of the operating system now also alerts the browser.

Beneath the surface, however, has done some things. So Firefox 28 supports the video codec VP9 and Opus for sound files in WebM container files. In order to include subtitles in HTML5 video, there is the format WebVTT (Web Video Text Tracks). Firefox supports the format from the current version 28

The mobile version of Firefox 28 for Android was released. Besides the already mentioned support for VP9/Opus and the new volume controls Mozilla has improved somewhat crude nature of the text label. Who wants the awesome bar does not disappear, that can change in the settings.

Firefox 28 is available for Linux, Windows and OS X Download ready, users of other systems such as FreeBSD can download the source code and compile the browser itself. The Android version is on the Google Play Store or F-Droid distributed.

Only with the next version of Firefox, there are changes on the surface again, because Firefox 29 introduces the Australis. The new surface cleans up the user interface and reduces the number of buttons. The tabs are greatly changed and slide close to the upper edge of the browser. The active tab is strongly curved edges, the outlines of the remaining riders are only hinted at and be just yet then visually separated, when the user moves the mouse over a tab.

Firefox 29 should appear on April 29, 2014 and include also the synchronization service of for Firefox accounts (FxA).

#news

New Post has been published on http://www.toontuts.com/registration-and-authorization-of-users-on-twitter-and-facebook-with-node-js/

Registration and authorization of users on Twitter and Facebook with Node.js

First of all, we need to Node.js and MongoDB installed in our computer. Node is the backend that utilize and MongoDB is non-relational data base, based on documents JSON. We can PLS any other database (eg, MySQL or any other). I do it with Mongo because it seems to me to be simpler and is based on JavaScript, which I’m a Taliban

http://nodejs.org/download/

https://www.mongodb.org/downloads

We then create a base application framework structure with Express. In this way we create a “skeleton” files and folders with a “hello world” with Express.

Install the dependencies that we will use. Mongoose is the driver that helps us connect to MongoDB and implement schemes of the models we save in the database. Passport is the library that allows us to streamline the process of authenticated and user registration with Node.js. Passport-twitter and facebook Passport- specific libraries are to login with Twitter and Facebook and we can use social networks Passport without implementing a local method with Passport-Local.

With the prefix -save the dependencies we remain etched in package.json

We create a user model ( /models/user.js ) which indicate that we want to store data in the database for our users. In this example we will save the name, vendor, ID, photo of the user and a field where we will store the date on which the user was registered in our APPLICATION.

Configure Passport ( /passport.js ) we use import libraries and functions that allow us to login.

With seriealizeUser and deserializeUser we get the user object is stored in the application session and so we can use it along.

With TwitterStrategy and FacebookStrategy use strategies provides Passport authentication, pass them as parameters secret API Key and API platforms that give us when they checked in an application, and return us various objects, including the object “profile” that contains all the user information returned by Twitter or Facebook and we can remove the attributes we want for our application (name, ID, photo, etc. ..)

A good practice is to keep separate API Keys climbed the source code repository, a file config.js then import from where we need it.

The main application file in the Express server and therefore would be something like this ( app.js)

This would be the Jade template that renders the index: ( /views/index.jade ). As you see we apply logic within the template. If there is a user objects that are activated in the application and therefore we ask you to show us the photo and the name and link out. If there is no user object is that we are not activated therefore indicated to show us the links to register / login with Twitter and Facebook

if(user) ul li img(src="#{user.photo}") li Welcome #{user.name} li a(href='logout') Exit else ul li a(href='auth/twitter') Login with Twitter li a(href='auth/facebook') Login with Facebook

To create an application on Twitter we can go http://dev.twitter.com and register a new application. Indicate the name and the website URL and callback fields we put “example.com” it does not allow us to Localhost. With facebook is similar, the URL is http://developers.facebook.com and in this case if we can tell that our application works on localhost.

#NodeJs

Trending Blogs

Last Seen Blogs

Toontuts