Angular.js Demos, Examples, and Resources

Angular.js, a powerful JavaScript framework developed by Google and designed for building web-apps, has seen a lot of adoption in the last few years. My last Google Maps demo made me think a lot about data binding and Angular.JS, and I have actually created a pen with Google Maps powered by a pre-built Angular.js directive. But, I want to take a step back and dedicate a post to various Angular.JS resources, from guides and tutorials to demos and examples to actual projects and directives.
Read more

OpenLayers jsFiddle Examples

It has been a while since my last jsFiddle canvas examples post and I want to do these more frequently. JSfiddle is a great resource for learning as you can quickly visualize all pieces of the code (CSS, JavaScript, and HTML). It is also very popular, so you can often find some great demos and examples which can help you with your work. This time around, I am going to focus on OpenLayers examples in jsFiddle:
Read more

Creating and Exporting SVG Graphics with JSON and D3

Recently, I have been playing around with SVG or Scalable Vector Graphics. SVG is a XML-style language for describing two-dimensional vector graphics supported by modern browsers. One of the main advantages of using vector instead of bitmap to serve graphics is that you can be resolution independent (larger scale does not lose quality) but there are other advantages, like smaller size and no HTTP requests (SVG is embedded into html), styling through CSS, animating with JavaScript, and editing. I am not going to get into the basics of SVG as these tutorials have already done a great job explaining SVG in detail:

• SVG Tutorial from Mozilla – Explains the internals of SVG
• What is SVG? – Guide to SVG
• SVG Drawing Basics – Drawing Basics with Scalable Vector Graphics
• A Look Into: Scalable Vector Graphics – Excellent SVG Tutorial
• Why Aren’t You Using SVG? – SVG tutorial from NetTuts
• Getting Down with SVG – Get started using SVG inside your HTML
• SVG Paths – Understanding SVG Paths

Read more

Learning HTML5 Canvas through jsFiddle Examples

Let’s learn more about Canvas through some examples posted on jsFiddle. Below you will find a ton of hand picked links to some awesome demos and examples of how you can use Canvas:

Cool Canvas Image Effects

• Canvas image reflect
• Canvas image cutup border
• Canvas drag and capture image
• Canvas Animated Beams
• Canvas moving tiles
• Canvas auto drawing movement
• Canvas Image Drag and Drop (broken image effects)
• Canvas Cool Image Generation
• Canvas Image Drag and Drop with Image Transitions
• Canvas Scrath it Image Ticket
• Canvas Flip Image by 90 degrees
• Canvas Loading Image jquery plugin
• Canvas Droid Image
• Canvas Image Cutup
• Canvas Image Flip
• Canvas Draw image on Background Image

Read more