Tag: javascript

How to Use Reduce on JavaScript Arrays

In functional programming, being able to reduce is one of the fundamental concepts.

Reduce is used to iterate through the values in an array and condense all of the values into a single value.

Usually the value is a sum of all of the elements, but it could be used to decrement, multiply or even divide.

What is Reduce used for?

Normally, you would want to use a reduce method when you want to sum all of the values in an array and then use the total for some operation. For example, it might make sense to use a reducer when you want to get the total number of items in a shopping cart and determine the tax or determine how many items a customer purchased.

I like using reducers to avoid having to write boiler plate code for loops and being able to do really simple one line operations.

How to Use Reduce

A reduce method takes in a function as a parameter, and that function needs to take in an accumulator and the current element.

So, basically, a really simple example of how to use reduce is this:

var numberArray = [0,1,2,3]

var accumulatedResult = numberArray.reduce(function (total, currentElement) {
	return total + currentElement;

If we ran this in the developer console of Chrome, we would see this:
Example of a JavaScript Reduce Method

As I mentioned, every element of the array is added together and then the total is available in the accumulatedResult variable. We could write this as a for loop and get exactly the same result if we wanted to but it would be more code:

var numberArray = [0,1,2,3]
var accumulatedResult = 0;

for (var i = 0; i < numberArray.length; i++) {
	accumulatedResult += numberArray[i];

And, if we ran this for code for a loop in the developer console, we would see this:
JavaScript for Loop Compared to Reducer

So this means, that a reduce method cycles through the values in an array – in a way similar to a for loop but it’s able to do some mathematical operations like summing of values and store a lot less variables in code and use a lot less boiler plate.

Advantages of JavaScript’s Reduce Method

  • the reduce method is that it can handle array elements that don’t have a value. Technically the for loop above would crash if there was a null or undefined value.
  • Reduce methods are usually much shorter – and much easier to understand.
  • Reduce methods can be chained together – forEach and for loops can’t be easily which means they can’t really be used too well in functional programming.

Detecting Inactivity in JavaScript

Detecting Inactivity in JavaScript

In a lot of web applications, it can be really useful to detect whether the user is still active or not. For example, when a user is no longer active it can make a lot of sense to automatically log the user out or remind them that they’re about to be logged out. Continue reading

How to merge Objects together in JavaScript

How to Merge Objects in JavaScript

Merging objects together in JavaScript isn’t very difficult although there’s quite a few different ways that it can be done.

Note, I’m not covering deep cloning for the sake of simplicity although this can be easily done through most of these different methods.

Continue reading

5 Resources for Learning JavaScript

5 Resources for Learning JavaScript

Traditionally when somebody said JavaScript, they were talking about a language that just did stuff on the client side like form validation or the occasional animation or UI enhancement. For years now, JavaScript has been all of the rage. Most new technology startups are now using JavaScript on the frontend, and on their backend services. Continue reading

Updating Salesforce Records Using JavaScript

Updating Salesforce Records Using JavaScript

Over the last few years, Salesforce has made some really significant changes that allow JavaScript to increasingly be used. By using Salesforce’s AJAX toolkit it’s possible to do an incredible amount of customization to a standard Salesforce Page Layout without ever having to write any apex. Continue reading

Recreating PHP’s time() function in JavaScript

Recreating PHP's time() function in JavaScript

PHP’s time() function returns the current unix timestamp. JavaScript doesn’t exactly have the same functionality, but it’s pretty close. Put a different and more understandable way, it returns the current time measured in seconds since the Unix Epoch (00:00:00 UTC on 1 January 1970).

JavaScript has a similar way of getting the time but it’s in milliseconds since the Unix Epoch.

Continue reading

JavaScript IsNumeric Function

In the past, there’s been so many times I needed to tell if an object was numeric. With the below function, it’s very easy to tell if an item is numeric.

 //return false if blank, null, undefined or NaN.
 function isNumeric(v) {
   if (v == null || v == undefined || v== '') {
      return false;
   return !isNaN(v) && isFinite(v);

If your project is already using jQuery, you could always use jQuery.IsNumeric()

Resource interpreted as other but transferred with MIME type text/javascript.

When I was looking at a site with the Chrome Developer Tools, it had a little error icon that said “Resource interpreted as other but transferred with MIME type text/javascript” when I clicked it.

I couldn’t figure out my error at first, but eventually realized I had for some reason had a script tag with a src assigned of blank and then had javascript between the source tags.

<script type="text/javascript">doSomething();</script>

A blank url or src is of course a reference to the current page. I don’t know why it took me so long to figure that out, but once I changed the page I realized the error.

Hope this helps!

Dealing With Dates in JavaScript

Dealing With Dates in JavaScript

Dates and DateTimes are difficult to deal with in most languages. The Date object is a datatype that’s built in the JavaScript language. In JavaScript, the biggest problem is that the browsers aren’t overly consistent in the way they have implemented the Date object and its APIs. Continue reading

Disabling Caching on All AJAX in jQuery

It’s no secret that many of us that use javascript regularly love jQuery because it handles a lot of the cross browser issues and makes our lives so much easier.

The .ajax function makes use of caching by default, but we can override this by creating a function called .ajaxSetup and adding cache: false in the function.

$.ajaxSetup ({
    cache: false

You can of course take advantage of this and create even more verbose .ajax calls. 😉

How to Add CSS & JavaScript to a Magento CMS Page

Magento is an insanely flexible system that has a lot of potential, but of course with this flexibility comes a lot of learning.

Adding a JavaScript file and a CSS file to a specific CMS page isn’t very difficult. We should always consider adding the JavaScript file or CSS file to the theme if we’re going to use it on more than one specific page. Continue reading

Component returned failure code: 0x805e000a

Error: uncaught exception: [Exception… “Component returned failure code: 0x805e000a [nsIXMLHttpRequest.open]”
nsresult: “0x805e000a ()”

AdBlock interferes with the XmlHTTPRequest object and is known to sometimes break the way jQuery functions especially if the url triggers some sort of url filter.

You have a few options to resolve the solution:

  • suggest that users turn off AdBlock if the class called global_message exists.
  • Change the url posting or geting from.

Book Review: jQuery in Action

jQuery in Action, First Edition is written by Bear Bibeault and Yehuda Katz and is probably the simplest and easiest to understand programming book available. Target reader is somebody that already is using javascript in projects and is looking to push the limits of their web applications by using jQuery and many of it’s great plugins.

I found the book and its appendices to be extremely well written. I found the examples to be superbly written and extremely usable in my projects: there aren’t a lot of examples on basic things like selectors but there are a ton of great examples on much more advanced concepts. An additional feature that I found really helpful was the interactive lab exercises that begin around chapter two.

As a reference, which I don’t think was the primary intent, it would be difficult to use the book as some of the API is randomly spread throughout the book. The random spread does make the book a lot better though, because each chapter definitely builds well upon the previous chapter.

I completely recommend this book and can only imagine that the Second Edition improves upon the First Edition. I haven’t really found much negative about the book other than wishing the API wasn’t spread out so much, but the index is very good.

Inline vs External JavaScript

In general, we never should have embed JavaScript inside the same file as the HTML markup and should instead place the JavaScript into an external file.

The content, presentation, and interaction code should all be separate to make your life easier as a website developer.

  • Cleaner Code. Cleaner code is much quicker to find errors in, and will reduce the complexity. In addition, changes only need to be made in one file instead of in potentially dozen resulting in a significant saving of your time and money for your client.
  • JavaScript will be better cached for future use and will reduce the size of the HTML file. Users won’t need to download the file every time the user revisits resulting in very quick retrieval.
  • Different Parsing Systems. The parsing systems used for HTML/XHTML are vastly different from the parsing/compiler systems used for JavaScript are different and can introduce nested quote problems.

JavaScript And Site Performance

JavaScript and the respective frameworks have really began to gain traction over the last couple of years. I would argue that most of the JavaScript frameworks are excellent, and truly are great for the user experience and for the programmer experience.

Continue reading