Drawing simple line patterns using HTML5 canvas

By John Negoita on Monday, September 12th, 2016 in Javascript. No Comments

In this tutorial I will show you how to draw a line pattern using JavaScript and the HTML5 canvas. Drawing with HTML5 canvas is not too difficult and it only requires some basic HTML and JavaScript knowledge. At the end of this tutorial you know how to do simple drawing using HTML5 canvas and JavaScript and how to  write code to create line patterns and colored stripe patterns that you can use for website backgrounds for example. Level: Beginner Duration: 10 min Skills required: HTML, JavaScript We will create several line patterns that will look like this: Let’s start …

How to use jQuery plugin with WordPress plugin tutorial

By John Negoita on Monday, August 22nd, 2016 in Javascript. 2 Comments

I’ve ran several times into the problem of how to use jQuery plugin with WordPress posts and pages. Every time the solution was rather complicated having to modify the theme or to directly modify the HTML source of the post or page. In this post I will show you how to easily use jQuery plugin with WordPress. For this I will use a WordPress plugin for jQuery plugins and at the end of the post you will find the download link for this free plugin. What we want to achieve is to create a WordPress plugin that allows to easily integrate a …

How to get the return a value from a AJAX asynchronous call with jQuery and AngularJS $http

By John Negoita on Friday, August 12th, 2016 in Javascript. No Comments

Web applications often make use of dynamic views. These require some JavaScript skills usually and I think that one of the most common use of JavaScript for web apps with dynamic views is the AJAX asynchronous call. With AJAX one is able to load data within a page without having to reload the whole page making the dynamic part a smooth experience for the end user. AJAX asynchronous calls with jQuery jQuery is one of the most popular JavaScript library to date. To make AJAX calls with jQuery one would have to write something like: $.ajax({

What is CouchDB equivalent of SQL not in or not equals?

By John Negoita on Thursday, June 23rd, 2016 in Javascript. No Comments

I’ve started using CouchDB mainly as a database for mobile apps. However I found it useful also as a backend for server side web applications. I’m a beginner with CouchDB and in one of my applications I needed something simple. I wanted all documents except the ones with a certain value for a field. The value of the field was not known in advance, so I started searching in the documentation for the CouchDB equivalent of SQL not in or not equals. The answer I found online There is no equivalent did not really satisfy me, so I gave it a …

Pros and Cons for Creating Simple Pie Charts with 3 Popular JavaScript Chart Libraries

By John Negoita on Wednesday, June 15th, 2016 in Javascript. 4 Comments

In this post I will discuss how to create a simple pie chart using 3 popular libraries: D3, Google charts and Infographic Charts library. I will be looking at the pros and cons of each library. We will try to use the libraries such that the end result looks as similar as possible and then compare the code written to get the result. Note: This tutorial demonstrates how to create a pie chart using JavaScript, which is a client library. It is outside the scope of this tutorial to show how to create dynamic pie charts. To create dynamic charts …

Advanced Angular JS animation examples – Part 2

By John Negoita on Monday, June 13th, 2016 in Javascript. No Comments

So, in Angular JS animation examples part 1 we saw how to setup everything needed for Angular JS animations. We also saw a few simple examples of how Angular JS animations work. In this tutorial we will build on top of the previous examples and see some more advanced AngularJS animation examples. Showing and hiding elements with AngularJS animations In Angular JS if you want to show or hide elements you can use the ngShow or ngHide attribute (I should say directive). This will check against the truthfulness of the passed in expression and either hide or show the element. So, ng-show=”true expression” …

AngularJS animation examples Part 1

By John Negoita on Friday, June 10th, 2016 in CSS, Javascript. 2 Comments

Web apps look better with animations. If you want to start off quickly with simple animation just read my 5 min tutorial on CSS animations. In real life however you will probably have to integrate animations in applications a bit more complex like for example an Angular JS application. In this post I will try to show you some AngularJS animation examples. I will use the following tools for building my animation examples: AngularJS – the framework in question AngularJS Animate module – this is the module for animations in Angular; it comes as a separate module that you have to add …

Google and Microsoft working together on AngularJS 2

By John Negoita on Friday, March 6th, 2015 in Javascript. No Comments

I was sure taken by surprise by this unlikely collaboration between Google and Microsoft announced at the ng-conf in Salt Lake City. The Angular team from Google paired up with the TypeScript team from Microsoft to develop together on the AngularJS 2 framework. See Microsoft announcement here. Microsoft developed TypeScript is a superset of JavaScript that offers additional features but compiles back into plain JavaScript. I have never worked with it and have no clue how it even looks, but the news about AngularJS 2 for sure arouse my interest. AngularJS is one of the most popular JavaScript frameworks and I’ve been using …

Javascript functions this, that and the other

By John Negoita on Monday, November 3rd, 2014 in Javascript. No Comments

Javascript functions this reference When working with Javascript functions this refers the current object, which depends on the context of the function. For example if you have a top level function, then this references window, if the function is defined in an object, then this will reference the object instance, while if the function implements an event handler, then this will reference (most of the times) the DOM element that triggered the event. In this post I will shortly describe how I usually handle Javascript functions this references. Some methods might be more elegant than the other, but in the end it’s just a matter of …

Charts and Graph Tags Infographic Library v1.0.1 Preview

By John Negoita on Monday, January 13th, 2014 in Javascript. 4 Comments

The Infographic Charts and Graph Tags library developed by coding-dude.com (hey, that’s me) kicked as quite a success. I’ve received very positive feedback from the users and also a few very interesting feature requests. Therefore I decided to include these feature requests and release it as version 1.0.1. This version has just been submitted and can be downloaded here. In this post I would like to show to you some of the new features added to version 1.0.1. Piechart and doughnut changes added the “label-type” attribute to piechart/doughtnut which allows representing either percentage (“percent”), value (“value”) or hiding the slice …