Tag Archives: Javascript

Use Node.js to Extract Data from the Web for Fun and Profit

Posted by on August 25, 2013 18 comments

Node.js

Need to automate pulling some data from a web page? Or want to mash up some unstructured data from a blog post with another data source. No API for getting at the data… !@#$@#$… No Problem… Web scraping to the rescue. What is web scraping?… you may be asking… Web scraping consists of programmatically (typically with no browser involved) retrieving the contents of web pages and extracting data from them.

In this article, I’m going to show you a pretty powerful set of tools for scraping web content quickly and easily using Javascript and Node.js.

Read more »

Make Your UI More Responsive with HTML5 Web Workers

Posted by on April 19, 2013 11 comments

HTML5 Web Workers

Argh!!… Your web application has to sort a lot of data and you get the dreaded error message… “A script on this page may be busy, or it may have stopped responding…” Or maybe you’re writing some image processing code that takes forever on large images… Your UI is non-responsive. What are you going to do!!?… You could try to break up the work into small pieces and use timers to spread out the work. But what a PITA!

What if JavaScript had the ability to run your code in the background and not interfere with the responsiveness of your UI. What if you could spawn a thread to do long running computations such as image filtering and sorting. Well with HTML5 Web Workers you can do just that! In the rest of this article, I’m going to teach you how to use Web Workers within your own applications. Click here to try the sample app.

Read more »

How You Can Do Cool Image Effects Using HTML5 Canvas

Posted by on April 6, 2013 11 comments

You need to know how image filters work!  You’re writing an HTML5 application that works with images and you’d like to let your users dynamically alter the brightness of their images. Or maybe you’d like them to be able to give their image a vintage look…. or convert it to black and white to give that sense of drama…

Wouldn’t it be great if you knew how to apply cool image effects such as these from JavaScript dynamically? Would you like to learn the code behind how these image filters work? You totally can… This article will give you the fundamentals for basic image processing using the HTML5 Canvas API. You’ll learn how to write code that accesses an image’s pixel data and transforms this pixel data programmatically to perform cool image effects. Click here to try the sample app.

Read more »

Lights, Camera, Action!

Posted by on March 23, 2013 Comments Off on Lights, Camera, Action!


So You Want to Access Your Webcam from Javascript?

Web Real-Time Communications or WebRTC is an exciting new HTML5 technology that not only gives JavaScript the ability to do peer-to-peer (P2P) audio/video conferencing and P2P data communications between browsers, it also lets you have programmatic access to attached cameras and microphones. Prior to WebRTC you had to rely on a browser plugin such as Adobe Flash to be able to do similar things. But recently there has been a big push to add these capabilites as intrinsic features to web browsers with Google really leading the charge and through standardization efforts by the W3C WebRTC working group. It is a brave new world in that only some browsers have added WebRTC support and even those that do can have subtle (and some not so subtle) differences in both interface and implementation. But more and more you’re seeing real applications appearing that are using WebRTC in very cool and interesting ways. One great example of WebRTC in action is a PhotoBooth-like app called WebCam Toy. This application should give you a sense of the possibilites that WebRTC is opening up.

In the rest of this article, I’m going to walk you through the minimum code needed to get your webcam to display video in your browser. The latest versions of Chrome or Firefox are recommended for running the code included in this article and for experimenting with WebRTC. If you already have one of these browsers you can try out my example.

So lets get started…

Read more »