Dave's Notebook

JavaScript Functions -- In-Depth

Last week I talked about JavaScript variables gotchas.  This week, we want to take an in-depth look at JavaScript functions. Why? Well, for the same reason we looked at variables last week.  If you keep using JavaScript the way you think it works instead of the way it really works, at best, you will have a much harder time debugging your JavaScript code.  Worse case, you introduce some pretty nasty bugs into your code.

So, let’s start with a pretty basic JavaScript function question.  One I would use as a question if I were interviewing someone for a hard core JavaScript job.

What is the difference between the following two ways of declaring a function?

1
2
3
4
5
function foo(){
}

var foo = function(){
}

JavaScript Functions -- In-depth

Read More

JavaScript Variable Gotchas

If you’ve been programming using JavaScript for any length of time, you’ve probably run into several of the JavaScript variable scope gotchas.  You may have even been able to fix them.  But you could prevent these gotchas if you understood better why the gotchas exist in the first place.

My goal, through a series of blog post on the topic, is to make us all better JavaScript programmers.  JavaScript is no longer a toy.  Those who survive in the new JavaScript eco system will be those who understand why JavaScript works the way it does.

I’m going to approach this topic as a series of puzzles.  This will show the issue and then we can discuss why the issue exist and what to do about it.

JavaScript Variable Gotchas

Read More

JavaScript Unit Test Code Coverage Using NodeJS

A couple of weeks ago, I showed how to get Node.JS and Gulp working with Visual Studio 2015.  Last week I showed you how to bundle, minify, and cache-bust using Gulp.  This week, we are going to use Node.js to provide JavaScript Unit Test Code Coverage.

The main tools we will be using to pull this off are Karma and Istanbul.  The test we write will be using Jasmine.

If you don’t use Visual Studio, you should still be able to adapt these instructions to your own environment.  I’ve found getting Istanbul setup kind of tricky at times.  Since everything I’m going to show you here is pure Node.JS, you can ignore the Visual Studio parts.

Let’s get started.

JavaScript Unit Test Code Coverage Using NodeJS

Read More

Using Gulp to Bundle, Minify, and Cache-bust

Last week I discussed how to setup Node.js and Gulp in Visual Studio 2015.  During that discussion, I mentioned that I’m using gulp to bundle, minify and cache-bust my HTML, CSS, and JavaScript files.

This week, my intent is to walk you through exactly how I do that.

So, if you don’t already have Node.js and Gulp installed, you may want to go back and read the article I wrote last week.

Since most of the people who read this blog are ASP.NET developers, there may be a few .NET specific tips along the way.  But the Gulp file I am going to walk you through is technology agnostic.  So if you are using some other technology, you’ll still benefit from this article.

image

Read More

Using Node.js and Gulp with ASP.NET in Visual Studio 2015

As I’ve written before, I’m using AngularJS a lot recently to write the client side of my web applications.  As I’ve gotten to the end of my current project, I found myself needing to implement cache busting and while I am at it compression.  But because I’m using a regular HTML page to serve up the shell for my single page application, using the regular ASP.NET on the fly compression wasn’t going to work for this application.

But there are a lot of tools in the Node.js space that will work.  Would it be possible to wire node.js and Gulp with ASP.NET in my existing web project? It turns out you can.

Although, at this point, it isn’t as straightforward as most other things in Visual Studio.

image

Read More

Cross Browser JavaScript Copy and Paste

I’ve searched all over the Internet for a Cross Browser JavaScript Copy and Paste solution.  I couldn’t find anything that really worked.  But I was able to put together the bits and pieces I found into a rather simple solutions. As you may have noticed, I’ve written quite a few articles about programming in JavaScript in the past couple of years because I’ve spent most of my time programming in JavaScript.  For the last three months, I’ve been working on a browser based application that needed to be able to copy and paste between the browser and an external spreadsheet.  The main struggle in making this all work correct is that what needs to be copied to the clipboard is the underlying data of the application.

Getting this all working in IE, even the most recent version that runs under Windows 10, was pretty easy.  And fortunately, the browser of choice at this company is Internet Explorer.  But, it is IE 11, which takes twice as long to do anything with JavaScript as Chrome does.  Chrome is their secondary browser and my mission has been to find a way to get copy and paste working reliably using Chrome so that the end user would have a better experience with the application.

While the work I’ve been doing has been using Angular, the solution that I provide in this article using plain JavaScript with no dependency on any framework.  I want the solution to be available regardless of what framework you might be predisposed to use.  If you use angular, or jQuery, or whatever, the code should be easy enough to adapt.

image

Read More

Increase Your Excellence Capacity

Today I saw a GREEN traffic light for the first time.

OK, that’s not entirely true.  What I mean to say is that I saw that it was green.

You see, I was born color blind.  This never really bothered me because, like most people who are handicapped from birth, I didn’t know what I was missing.

But then, I found out that there is this company that sells glasses that help color blind people see color.  They are pretty expensive, at least they seem pretty expensive when you believe you don’t really have a big problem.  But then I took the standard color blind test on their site and found out

  1. I’m color blind (duh!)
  2. there is an 80% chance that the glasses would help and
  3. I only see 2% of the available color spectrum.

Wow! Only 2%?  I knew I had issues.  But I’ve been able to function.  But only 2%.  What am I missing?

Well, my wife got me a pair of glasses for Christmas.  Unfortunately, I ordered indoor/computer glasses and what they sent are sunglasses.  I’m still trying to get that resolved. Sad smile  But just for kicks, I wore the sunglasses out while I was running errands today.  This is the first sunny day that I haven’t been stuck inside since Christmas.  The reds are redder, the yellows are yellower and, hey! Guess what?!  The green light is actually green!

So, what’s this got to do with programming?  You did know this was going to eventually relate to programming right?

image

Read More

JavaScript Alchemy with Strings, Numbers, and Booleans.

Those who are relatively new to JavaScript might have the impression that JavaScript has no variable types.  After all, we declare everything using var and we can treat

1
if(1 == "1")

The same as

1
if(1 == 1)

or

1
if("1" == "1")

But the reality is that JavaScript includes a very rich typing system with some well-known, and some little know methods of detecting types and converting from one type to another.

image

Read More

Adventures Working With Angular’s $scope

Every week when I write, I try to think back on the past week and think, “What have I learned that might be useful to others.”  Most weeks that is a pretty easy question to answer because I get most of my pleasure from learning new stuff.  But this week was different.

When I sat down to write today, I couldn’t come up with a subject that couldn’t be covered with a sentence.  More of a tweet than a blog post.  It was so bad that I decided to go run the errands that are on my list and come back to it once I got home.

Evidently, that was a good move because I think I have something that will be genuinely useful.  Although I will admit that if you’ve been working with AngularJS for very long at all, you may have already learned what I’m about to explain.

image

Read More