dcm | Kevin Chisholm

Apr282020 by dcmNo Comments

JavaScript Email Address Validation

Prompting a user to input an email address is fine, but you want to implement JavaScript email address validation in order to prevent back-end issues.

In this article, you will learn about JavaScript email address validation. You can check to see whether someone has input a valid email address into a field before sending it to the database using email validation techniques such as this one. Continue reading “JavaScript Email Address Validation” →

Apr212020 by dcmNo Comments

Lodash sumBy – An Introduction

JavaScript

The Lodash sumBy method allows you to add the values of the objects in your array, specifying the objet property that should be targeted.

In this article, you will learn about the Lodash sumBy method, and how it can be helpful in your website or application. These examples assume that you already know what Lodash is, and that you have it loaded in your project.

Continue reading “Lodash sumBy – An Introduction” →

Apr142020 by dcmNo Comments

JavaScript Array.prototype.forEach

Array.prototype

The JavaScript Array prototype forEach method allows you to iterate over an array without the need to set a variable.

A forEach loop is a powerful tool that can simplify your code and help reduce the number of lines required to complete a task. The JavaScript Array prototype forEach method is like a for loop but is designed especially for use with arrays. A for loop is not tied to an array and is more general purpose.

Example 1

To cycle through every element of an array without the JavaScript Array.prototype.forEach method, we would use a for loop, like Example 1. We need a variable to hold the current iteration number and we usually use the lowercase letter i to store the iteration number. We also use the Length property on the array to get its size and store that value in a variable called arrayLength. Then we can use a for loop to iterate through the array as long as the value of i is less than the value of arrayLength.

The JavaScript Array prototype forEach method removes the need for the extra variables, and you can see by comparing Example 1 with Example 2, that it helps make it easier to read. Let’s look at some examples of how the JavaScript Array prototype forEach method can be helpful, and how to use it.

Example 2

In Example 2, we use the JavaScript Array prototype forEach method and an anonymous function to print the value of every element in an array.

The code records.forEach(); tells the computer to start at the first element in the array named records, and for each iteration, do what it says in parentheses. In this case, it will update the variable (record) and pass that value to an anonymous function.

We call it an anonymous function because it doesn’t have a name. It has only the function itself between the brackets {}. We could name it processRecords or something, but since we aren’t going to use this function elsewhere, it’s unnecessary. The function does the work of printing the value to the screen with the console.log command. Console.log prints the value of record to the screen.

Example 3

In Example 3, we use an arrow function as a shorthand way to write the anonymous function from Example 2. It’s more concise and more comfortable to read, but we still update the value of record and pass it to the anonymous function where console.log prints it on the screen as we do in Example 1.

Example 4

In Example 4, we use a traditional standalone function called processRecord that also passes a variable called record to console.log. It cannot set the value of record, nor iterate through the array. To iterate through the array and set the value of record, we use the arrow function with the JavaScript Array prototype forEach method.

For each iteration in this example, we set the value of record and send it to the processRecords function where it will pass the value to console.log.

We would use this example when we want to access the processRecords function from other places in our code.

Syntax

Now that we have taken a look at a few different ways to use the Array.prototype.forEach method, let’s dig a little deeper and look at the syntax to see what else we can do.
arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);
arr = Name of the array that we are iterating. We have been using records.
callback = The function we are calling each iteration. We have used anonymous and processRecords.
currentValue = The value of the current array element. We have been setting this to record.
index = The current element id or number. We will be using index as well in upcoming examples.
array = The array we are using the forEach method to iterate through. This variable refers to the entire contents of the array, not the name. We will be setting this to originalArray in upcoming examples.
thisArg = The value to use as this when executing a callback. This value is for updating values in the array, among other things.

Now that we have looked over the syntax of a JavaScript Array prototype forEach method let’s look at a few more examples. So far, in our first three examples, we have only passed the current value to the callback function in the form of a variable called record, but we can also pass the index, array, and thisArg values as well.

Optional Values

There is one thing to remember about the optional values of index, array, and thisArg. You must assign the variables in order. To assign a variable to the array value, you must also assign one to index. If you only want to know the value of index, there is no need to assign a variable to array and thisArg.

Example 5

Example 5 is the same as Example 1, but in this example, we have assigned variables to each of the optional values.

The variable record = current value
The variable index = index
The variable originalArray = array
The variable thisArg = thisArg

We send each of these values to the anonymous function on each iteration. In our example, we still have console.log print the value of the record variable to the screen, but you can change it to index, originalArray, or thisArg to see those values.

Example 6

Example 6 is the same as Example 2, but with two of the three additional values included. Notice that like Example 5, we could change console.log to print the values of index or originalArray to the screen, but to have access to the thisArg value, you would need to assign it before the arrow function.

Example 7

Example 7 is the same as Example 4. Once again, we split the function and the forEach method into two parts, and we also add two of the three optional variables to the list of information sent to the function on each iteration. If you want to use the thisArrg value in this situation, you will need to declare it before the arrow function in the forEach method and in the parameters of the processRecord function.

Conclusion

Hopefully, after reading over these examples, you have a better handle on the JavaScript Array prototype forEach method. It can be a helpful tool that makes life easier. There are some downsides, though, and one of the biggest is that you can’t stop it once It starts. So, for instance, if you had an array with several hundred elements, you could not print out ten at a time; you would have to print them all.
If you have learned something new, and this explanation of the JavaScript Array prototype forEach method has been helpful, please share it on Facebook and Twitter.

Apr12020 by dcmNo Comments

JavaScript Async Await – An Introduction

JavaScript

The Javascript async await statement provides a way to express asynchronous logic in your code in a sane and readable manner

In this article, you will learn how to master the Javascript async await statement. Before async await came along, the only thing we had was promises and callbacks. The async-await statement syntax is easier to understand, read, and implement in your code.

Continue reading “JavaScript Async Await – An Introduction” →

Jan82019 by dcmNo Comments

Visibility hidden vs display none – What is the difference in CSS ?

CSS

With visibility:hidden, the element still takes up space. With display:none, it is effectively removed from the DOM.

Hiding DOM elements with CSS is a common task. Some wonder whether they should use visibility:hidden or display:none. So, let’s think about Visibility hidden vs display none. Before you decide, the question to ask yourself is: “do I want the element to still have a physical effect on the DOM? or do I want the element to feel as if it has been removed from the page?”. This is an important question. The difference between visibility:hidden and display:none in CSS is how the hidden element affects the DOM.

Continue reading “Visibility hidden vs display none – What is the difference in CSS ?” →

Jan12019 by dcmNo Comments

How do I use the jQuery.css() Method?

jQuery

The jQuery CSS method allows you to style one or more DOM elements

Let’s begin with the HTMLElement.style property, which provides the access you need to style any DOM element. As a front-end web developer, you should make it a point to be familiar with this low-level DOM API. But the HTMLElement.style property comes with challenges, the two biggest being:

The syntax is verbose, which leads to repetitive, boilerplate code.
You cannot overwrite the HTMLElement.style property, which means that you cannot arbitrarily assign an object to it.

Now while it may seem like a minor detail that you cannot overwrite the HTMLElement.style property, this limitation does negate the ability to assign a well-crafted object to an HTMLElement’s style property. It also severely minimizes code re-use.

But the jQuery CSS method provides a powerful way to sidestep the quirky limitations of the HTMLElement.style property. It offers the ability to style DOM elements in a way that is considerably more elegant and expressive.

For one thing, the syntax is based on method chaining; you chain the css() method to the result of any jQuery query. So whether your query returns one or many elements, the style property and value that you pass to the css() method will be applied to the element(s) returned by your query. And in addition to a more concise syntax, there is the potential for code reuse. And finally, something that is often overlooked about this method: you are styling the DOM element directly (as opposed to using an external style sheet). As a result, the styles you apply will enjoy a high specificity.

In its most basic form, the jQuery.css() method takes two arguments. Both arguments are strings. The first argument is the name of the CSS property that you want to change. The second property is the new value for that CSS property. When you execute the CSS method against one or more DOM elements, jQuery adds a style attribute to each DOM element. And then, jQuery uses the second argument you provided as the value for that CSS property.

Try it yourself !

In the above example, there are five paragraph elements. Click each paragraph. When you do, you’ll see that each clicked element turns red. Click the JavaScript tab. In the JavaScript code, you’ll see that there is a click-event handler set up for each paragraph element. As a result, when any paragraph is clicked, jQuery executes the CSS method against that paragraph. Two arguments are passed to the CSS method. The first argument is color, which is the CSS property that we want to change. The second argument is red, which is the new value for that CSS property.

So, the approach taken so far is a very simple implementation of the css() method. In this case, we are passing only two strings. These two strings act as key/value pairs for the specified style property. But it is also possible to pass an object to the css() method. Significantly, this approach allows you to style multiple properties of an HTMLElement. This, of course, is an advanced implementation of the css() method, which I’ll cover in another article; for now, it’s just good to be aware of it.

Summary

So once you’ve had a chance to work with the css() method a little, I think you’ll agree that it is arguably one of the most genius features of jQuery. It frees you from two limitations of the HTMLElement.style property, and in addition to the elegant syntax, this method provides a way to re-use well-crafted code, in order to style multiple DOM elements. And if you look into the advanced syntax, you’ll see that multiple styles can also be applied within one call to the css() method.

Dec252018 by dcmNo Comments

CSS Fixed Position

Position

With CSS fixed position, the element is completely removed from the document flow, but positioned absolutely in relation to the view-port. You can then use the “top”, “bottom”, “left” and “right” properties to specify the exact location in which you want it.

Sometimes you may need to place an element in an exact position. That is, you don’t want to be tied to the natural document flow. Following the natural document flow is often the best way to go, and it is important to keep that in mind. But when you want to take an element out of the document flow and set it at an exact location in relation to the view port, position fixed is the tool for the job.

Fixed position is often confused with absolute position, but while their behavior is somewhat similar, they are not exactly the same thing. It’s important to note here, that with absolute position, the relationship between the HTML element and its descendants matters. For a detailed discussion on absolute position, CLICK HERE.

With fixed position, there is no concern about the relationship between the HTML element and its descendants. The HTML element that you apply to fixed position is completely removed from the document flow and placed relative to the viewport. That is, this element cares only about where the viewport is. It is as if its descendants simply do not exist; it does not know about them or care about them. And once you’ve set the position to fixed, you can use the “top”, “right”, “bottom” or “left” properties to further refine the visual location of the fixed position element. In other words, these top, right, bottom and left properties allow you to specify how the fixed position element is offset from the viewport.

Example # 1

See the Pen CSS Fixed Absolute Demo | Front End Video by Front End Video (@frontendvideo) on CodePen.

In Example # 1, the element with the class “child” has its CSS position property set to “fixed“. As a result, the element is completely removed from the document flow and positioned absolutely in relation to the view-port. Since there is quite a bit of text in the page, you must scroll in order to see all of it. Notice that as you scroll, the .child element stays put and does not move with the scroll. The reason that the .child element appears at the top is because its top property is set to 0. This is one of the most popular uses for position:fixed; that is, creating a page header that does not move when you scroll.

Example # 2

See the Pen CSS Position Fixed Demo | Front End Video by Front End Video (@frontendvideo) on CodePen.

Example # 2 is mostly identical to Example # 1. The only difference is that the .child element’s top:0 property has been changed to: bottom: 0. As a result, the element is fixed to the bottom of the view-port. Notice how when you scroll, the .child element does not move away from the bottom. This is usually the technique used when you see a custom footer that stays set to the bottom of the page and does not move.

Summary

So, with fixed position, an HTML element is completely removed from the document flow. There is no concern about the descendants of that element because it is positioned relative to the viewport. Then the “top”, “right”, “bottom” and “left” properties can be used to “nudge” the element further, which means that you can determine how the element is “fixed” to the viewport and where it should appear.

Dec182018 by dcmNo Comments

jQuery fadeOut (advanced)

jQuery

The jQuery fadeOut method can take multiple arguments. You can set the duration, easing and also provide a completion callback

Hiding DOM elements is certainly a common task for any front-end
web developer, and the jQuery.fadeOut() method allows you to not only hide an element, but it allows you to animate this action as well. Now, while fading out can elevate the user experience, it would be nice for the web developer to have some control over that. Well, fortunately, the jQuery.fadeOut() method provides just that. With some advanced features that allow you to determine the duration of the animation and the easing effect, it controls the “feel” of that animation. In other words, we don’t just want to move an object from point A to point B; we want that motion to mimic the way objects move in the real world. We can also pass a callback function to the jQuery.fadeOut() method that allows us to act upon the successful completion of the fading out of that DOM element. Now, while you may not always need to take advantage of this feature, it certainly is pretty important to know about it. The thing is, the ability to reliably act upon the successful completion of an animation is a business requirement that comes up more often than many may think.

There is somewhat of a fuzzy line between the jQuery hide, fadeOut and animate methods. At the end of the day, they all leverage jQuery animation. With the fadeOut method, if you pass no arguments, then the matched elements are faded-out with a duration of 800ms(0.8 seconds). But if you want to gradually fade-out the elements, then you can specify a custom duration, the easing and a callback for when the fadeOut method completes.

Try it yourself !

In above example, click the button labeled: “Fade the paragraph out”. You will notice that the paragraph fades out slowly. The second button simply refreshes the page so that the example can easily be run over and over.

Now click the HTML tab. You’ll see an embedded stylesheet (the style element). There we define the .done class which states that any element with that class has a green background and white text. When you run the example code, you’ll notice that after the animation completes, the button changes to green background with white text.

Now click the JavaScript tab. There is a click event handler for the element: button#fadeOut. When that button is clicked, the jQuery fadeOut method is called on every paragraph element in the page (in this case, there is just one).

Notice how there are three arguments passed to the jQuery fadeOut method . The first argument is the duration property, which is set to: 2000. This means that the fading-out of the paragraph should last 2000 milliseconds, or two seconds. The second argument: “swing”, is for the easing. It makes the animation a bit more lifelike. The third argument is a function. This callback function will be executed when the fade-out completes. Inside of that function, we change the text of the button to “Fade-out complete!”. Also, we add the class “done”.

Dec112018 by dcmNo Comments

jQuery fadeIn (advanced)

jQuery

The jQuery fadeIn method can take multiple arguments. You can set the duration, easing and also provide a completion callback, which allows you to execute tasks which rely on the completion of your fade-in animation.

There is somewhat of a fuzzy line between the jQuery show, fade-in and animate methods. At the end of the day, they all leverage jQuery animation. With the fadeIn method, if you pass no arguments, then the matched elements are faded-in with a duration of 800ms (0.8 seconds). But if you want to gradually fade-in the elements, then you can specify a custom duration, the easing and a callback for when the fadeIn method completes.

Try it yourself ! – Example # 1

In above example, click the button labeled: “Fade the paragraph in”. You will notice that the paragraph fades in slowly. Now click the HTML tab. The paragraph element has its style attribute set to: “display: none;”. This is the reason that that the paragraph is not visible when the page loads. Now click the JavaScript tab. There is a click event handler for the element: button#fadeIn. When that button is clicked, the jQuery fadeIn method is called on every paragraph element in the page (in this case, there is just one).

PARAGRAPH – A

Try it yourself ! – Example # 2

Notice how there are three arguments passed to the jQuery fadeIn method . The first argument is the duration property, which is set to: 2000. This means that the fading-in of the paragraph should last 2000 milliseconds, or two seconds. The second argument: “swing”, is for the easing. It makes the animation a bit more lifelike. The third argument is a function. This callback function will be executed when the fade-in completes. Inside of that function, we change the text of the paragraph to “Fade-in complete!”. Also, we add the class “done”. If you click the HTML tab again, you’ll see an embedded stylesheet (the style element). There we define the .done class which states that any element with that class has a green background and white text. When you run the example code, you’ll notice that after the animation completes, the paragraph changes to green background with white text.

Dec42018 by dcmNo Comments

jQuery show (advanced)

jQuery

The jQuery show method can take an object as an argument. In that argument, you define one or more properties that give jQuery more detail on how you want the matched elements to become shown

There is somewhat of a fuzzy line between the jQuery show, fade-in and animate methods. At the end of the day, they all leverage jQuery animation. With the show method, if you pass no arguments, then the matched elements are immediately shown. But if you want to gradually show the elements, then you can provide an object that gives configuration details.

Try it yourself !

In above example, click the button labeled: “Show the paragraph”. You will notice that the paragraph fades in slowly. Now click the HTML tab. The paragraph element has its style attribute set to: “display: none;”. This is the reason that that the paragraph is not visible when the page loads. Now click the JavaScript tab. There is a click event handler for the element: button#show. When that button is clicked, the jQuery show method is called on every paragraph element in the page (in this case, there is just one).

Notice how there is an object passed to the jQuery show method. That object provides details on how we want the paragraph element to be shown. The duration property is set to: 2000. This means that the showing of the paragraph should last 2000 milliseconds, or two seconds. The complete property is a function. This callback function will be executed when the animation is complete. Inside of that function, we change the text of the button to “Animation complete!”. Also, we add the class “done”. If you click the HTML tab again, you’ll see an embedded stylesheet (the style element). There we define the .done class which states that any element with that class has a green background and white text. When you run the example code, you’ll notice that after the animation completes, the button changes to green background with white text.

Nov272018 by dcmNo Comments

jQuery.off()

jQuery

With the the jQuery off method, you can unbind handlers for one or more events, for each matched element.

Most of the time, front-end web developers are concerned with binding event handlers — that is, defining a JavaScript function that will be executed when an event occurs. An event can be a mouse click, a hover, a scroll, or just about any other action that a user takes on the page. And it goes without saying that jQuery makes event binding easy. But what about when you want to remove an event binding? There may be cases in which, for whatever reason, you no longer want your event handler function to be executed. This does happen.

Well, a typical scenario might be when a user is not authenticated, in which case you may want to prevent the user from taking certain actions. Or, perhaps you have a business requirement that involves displaying an advertisement after the user has advanced a slide-show a certain number of times. Well, part of that requirement might be that the ad has to show for at least 10 seconds, and during those ten seconds, you do not want the user to be able to click the “back” or “next” buttons in the slide show.

The jQuery.off() method allows you to remove an event handler that was bound using the jQuery.on() method. The syntax requires that you pass a string as the first argument, and that string that you pass to the jQuery.off() method specifies the event that you want to unbind. For example, you may have bound event handlers for both the “click” and “dblclick” events and you may only want to unbind the “click” event handler but leave the “dblclick” event handler intact. But just remember: you can only unbind event handlers that are managed with jQuery.

Try It Yourself!

In the above example, there are three paragraph elements. Click each one. When you do, you’ll see the text change to: “I was clicked”. Next, click the “Refresh” button so that the page reloads. Now click any of the paragraphs. You’ll notice that the text no longer changes as you click each one.

Click the JavaScript tab. You’ll see that there is a click-event handler for each paragraph. This changes the text to “I was clicked” when a paragraph is clicked. There is also a click-event handler for the first button. When that button is clicked, the jQuery off method is called against every paragraph in the page. This unbinds every click event handler. Thus, when you click any paragraph, the text no longer changes.

Video Example Code

If you want to download the example code, visit this Github page, and then follow the instructions: bit.ly/FEV-jq-off

Summary

While jQuery makes event binding simple, that is also the case when you need to unbind one. The jQuery.off() method is used to remove an event handler from one or more HTML elements. So, when you pass a string as the first argument, you simply let jQuery know which event you wish to unbind. The one restriction of the jQuery.off() method is that it can only be used with event handlers that are managed with jQuery.

Nov202018 by dcmNo Comments

JavaScript Array.prototype.unshift()

Array.prototype

The JavaScript unshift method adds the specified value to the beginning of the array and returns the new length of the array. It is the most efficient way to add an element to the beginning of a JavaScript array.

While some may be tempted to use the Array.prototype.splice() method to add an element to the beginning of a JavaScript array, you can trust me when I say, the Array.prototype.unshift() is the way to go. I will add though, just as an observation, I’ve always felt that the method name “unshift” is clunky and unintuitive. Nevertheless, it is the one that the ECMAScript specification has given us, so we’ll just have to hold our noses : – ) and dive right in.

So, the syntax for the Array.prototype.unshift() method is quite simple. You just chain unshift() onto your array variable name, and pass one argument to that method: the element that you want to add to the beginning of your array. For example: myArray.unshift(“hello”) would add the string “hello” to the beginning of the “myArray” array.

So you can pass any valid JavaScript value as the argument to the unshift() method. This could be a number, an object, another array or even an expression such as an executed function. But it’s important to keep in mind that the unshift() method returns the new length of the array.
So, if an array has five elements, calling the unshift() method will return “6”, because adding one element to that array has increased the length of the array to “6”.

Try it yourself !

In the above example, click the JavaScript tab. You’ll see that we have the foo array, which has three elements. Each time that we call the unshift method, the value that we pass as an argument is added to the beginning of the array. Notice that we show the return value of the unshift method in the console. This allows us to see that shift returns the new length of the array.

Click the Result tab. Notice how we call the unshift method a total of three times. Each time, we show the return of that call to unshift: “4”, “5”, and “6”. We also show that we use the console.dir method to inspect foo. This is so we can see the changes that are happening to the array with each call to unshift.

Video Example Code

If you want to download the example code, visit this page: bit.ly/kcv-array-unshift

Summary

So, big picture: the ECMAScript specification provides a number of methods on the Array.prototype object that are designed for handling mutations to the beginning and end of an array. The Array.prototype.unshift() method, for example, is specifically designed to efficiently add an element to the beginning of an array. The way it works is, the element that you pass as the sole argument is added to the beginning of the array, and the new length of the array is returned. Simple and efficient… that’s what we like, right?

Nov132018 by dcmNo Comments

JavaScript String.prototype.split()

String.prototype

The JavaScript split method turns a string into an array. You simply need to pass one or more characters as the separator.

Some may find it odd that all JavaScript strings have a prototype object. After all, isn’t a string a primitive type? Well, the answer is “yes”: a string is a primitive in JavaScript, but the string primitive has a prototype object “wrapper”. This wrapper prototype object actually wraps the primitive string temporarily, providing a number of properties and methods. Now one of the properties provided is the split() method, which allows you to turn the string into an array whose elements are specific parts of the string. And those parts are determined by the separator character (or characters) that you provide as the first argument.

When you need to convert a string into an array, you first need to decide how to split that string. In other words: what character in the string indicates a new array element? For example, if you determine that any single space is a separator, then every word in the string will become a new array element.

Now this is a fairly typical scenario (and perfectly valid). Another common case is when you have a string of words or phrases separated by commas, and you need to turn each word or phrase into an array element. In this case, the comma is your separator character, and you’ll need to pass it to the split() method. So keep two things in mind: 1) If you do not provide an argument to the split() method, it will return an array with one element: the original string (i.e. the split() method did not understand how to split the array!). 2) If you provide two quotes as the argument to the split() method, it will return an array and every single character in the original string will be an array element (this could potentially be a large array).

Try it yourself !

In above example click the JavaScript tab. There are a series of console.dir statements. We use console.dir because the JavaScript split method returns an array, so we want to inspect that array. We are using the string: “I want to be an array” for each example.

In the first console.dir statement, we can see that passing no arguments to the split method returns an array where every character in the string is an element (including spaces). In the second console.dir statement we use a single space as the separator character (” “). This returns an array were every word in our string becomes an element. This is a very common approach, and quite useful. The third and fourth console.dir statements show other ways that you can provide a separator. The results are a bit odd, but the main point here is that it is really up to you: you can use any character(s) in that string in order to convert the string to an array.

Summary

So, to recap, every JavaScript string primitive has a temporary object wrapper that provides various properties and methods. That string primitive wrapper prototype includes a split() method, which allows you to convert that string into an array. So, you need to let the split() method know how to “split” the string into the array elements, and that is accomplished by the one or more characters you provide as the first argument.

Nov62018 by dcmNo Comments

JavaScript Array.prototype.splice()

Array.prototype

JavaScript’s Array.prototype.splice() method removes one or more elements from any position in the array and returns the removed elements in a new array. It also allows you to add one or more elements to the middle of an array.

JavaScript’s Array.prototype.shift() and Array.prototype.pop() methods allow you to remove elements from the beginning and end of a JavaScript array. These methods are simple to use and require no arguments because there is no potential for ambiguity: the concepts “first element” and “last element” require no further explanation. But when you want to remove one or more elements from the middle of a JavaScript array, there are details required. For example: where in the array do we want to start removing elements? Also, how many elements do we want to remove?

The Array.prototype.splice() method answers that question by removing one or more elements from any position in the array and returning the removed elements in a new array. Initially, this can throw you off because if you want to remove only one element, you would expect just that one element to be returned. But the Array.prototype.splice() method always returns an array. So, just keep in mind that if you plan to remove one element, you’ll need to access the first element in the array that is returned.

The syntax for this is simple: you just pass a minimum of two numbers to the splice() method: the position in the array at which you want to start removing elements, and the number of elements to remove. In this case, you are only removing elements from the array. But you do have the option of adding as many additional parameters as you like. So, beginning with the 3rd parameter, you specify one or more elements to ADD to the array, starting at the position specified with the first parameter. For example: myArray.splice(2, 3) would remove three elements from myArray, starting at index # 2. But, myArray.splice(2, 3, ‘a’, ‘b’, ‘c’) would also add the strings ‘a’, ‘b’, ‘c’ to the array starting at index # 2.

JavaScript’s Array.prototype.unshift() and Array.prototype.push() methods allow you to remove elements from the beginning and end of a JavaScript array. But if you want to remove elements from the middle of an array, the Array.prototype.splice() method is the correct tool. In this case, you provide a zero as the 2nd argument, which means that you are saying: “I do not want to remove any elements from the array”. If you provide any arguments after the 2nd argument, however, then those will be added to the array starting at the position specified in the 1st argument. For example: myArray.splice(2, 0, ‘HELLO’, ‘GOODBYE’). Here, you’d be adding the strings ‘HELLO‘, ‘GOODBYE‘ to the array starting at position # 2. But keep in mind that in this case, the Array.prototype.splice() method will return an empty array, because that method always returns an array. But if you do not remove any elements from the original array, then an empty array is returned.

Try it yourself !

In the above example, click the JavaScript tab. There we call the splice method on an array. In the first case, we take a very simple approach; the first argument is 0 and the second argument is 1: foo.splice(0, 1). This is similar to using the JavaScript shift() method, except that shift() returns the removed element, whereas the splice() method returns the removed element in an array. This is a very simple example, but the main takeaway is: the first argument is the position to start at, and the second argument is the number of elements to remove.

Later in the examples, we pass no arguments to the splice method. In this case, no elements are removed from the original array and an empty array is removed.

Click the Result tab to see the output for all of the splice method examples.

Starting from the end of the array

In the last example, we provide a negative number for the first argument. A negative number tells the splice method that we want to “start at the end”. For example: foo.splice(-4, 3) tells that splice method that we want to start at the fourth-to-last element in the array, and remove three elements.

Summary

Working with the beginning or the end of a JavaScript array is fairly straightforward, and to make matters even better, the Array.prototype’s push(), pop(), shift() and unshift() methods simplify the process. It’s when you want to remove or add elements to the middle of an array that things can get a bit more complex. Fortunately, though, the Array.prototype.splice() method provides a way to remove one or more elements from or add elements to the middle of a JavaScript array. But the key thing to remember is: this method always returns an array. So, if you are removing elements and you want to access any of the removed elements, you’ll need to iterate the returned array. But if you are adding elements only, then an empty array will be returned.

Oct302018 by dcmNo Comments

How do I fetch JSON data with jQuery?

jQuery

jQuery’s ajax method provides a way to make an HTTP request for JSON data and then handle the successful result.

Assuming that you have access to jQuery in your web page, fetching JSON data is very simple. The key to this is the jQuery.ajax method. This method takes an object as its first argument. In this object, you can, at minimum, specify url and success properties. The url property is the web address of the JSON data that you want to fetch. It should start with http:// or https://. If the resource is a relative path, then it could be virtually anything, for example: /data/json/customers. The success property is a method. That is, you assign a function to the success property. This function will receive the fetched JSON data as its first argument. Inside the function, you can process that data.

Try it yourself!

See the Pen jQuery AJAX – Basic Example by Kevin Chisholm (@kevinchisholm) on CodePen.

In the above example, we make a call to $.ajax. We pass an object to this method and that object has two properties. The url property has the web address of the JSON data that we want. Notice that this address ends with: ?sleep=2. This just means that for demonstration purposes, we can force the request to be delayed for two seconds. Go ahead and change that to ?sleep=5. You will see that the request then takes five seconds to complete. If you change it to ?sleep=0, then you will notice that the request completes very quickly. Either way, you can control this request and slow it down in order to see more clearly how things work.

The success property has an anonymous function assigned to it. This function will be executed once the $.ajax requests succeed. The function will take the fetched data as its first argument. So, inside this function we use the JSONView jQuery plugin to inject the JSON data into the DOM.

Important note: we haven’t specified the HTTP verb that will be used for our request. For example, GET and POST are common HTTP verbs used for sending or receiving JSON data, but PUT and DELETE are fairly common as well. The jQuery.ajax method allows us to specify the HTTP verb that should be used for the request, and we specify this HTTP verb in the object that is passed to the jQuery.ajax method. Note that by default, the jQuery.ajax method will make a GET request, unless we specify a different verb, such as: type=”POST”, for example.

So, in the above example, we specified a success method.
It’s important to note, however, that we did not specify an error method. The reason for this was to make the example code easy to follow. However, it is highly recommended that you always provide an error handler when making any HTTP request. Keep in mind that while you may have full confidence in the requests you are making, HTTP transactions are fragile by nature, and in theory anything can happen. So, whatever you do, don’t overlook this small but important detail.

Oct232018 by dcmNo Comments

JavaScript Array.prototype.shift()

Array.prototype

The JavaScript shift method removes the first element from the array and returns that element.

While it may be tempting to use the Array.prototype.splice() method to remove an element from the beginning of a JavaScript array, believe me, Array.prototype.shift() is the best way to do it. And just as a side note, I’ve always felt that the method name “shift” is a little odd, but that’s what the ECMAScript specification calls for, so we’ll just move along with the good stuff.

So, with the Array.prototype.shift() method, it’s the syntax that’s really important, and the beauty of it is, it’s quite simple. You just chain .shift() onto your array variable name, without passing any arguments. For example: myArray.shift() would remove the first element from the beginning of the “myArray” array. Just keep in mind that the .shift() method returns the element that was removed from the beginning of the array. So, for example, if an array has five elements and the first one is the string “ABC”, calling the .shift() method will return “ABC”, because it has removed that element from the beginning of the array.

Try it yourself !

In the above example, we have the foo array, which has six elements. Each time we call the shift method, the first element of that array is removed. Notice that we show the return value of the shift method in the console. So, we can see that shift returns the element that was returned.

Click the Result tab. Notice how we call the shift method a total of three times. Each time, we show the return of that call to shift: “a”, “b”, and “c”. We also show the length of the foo array each time as well. That length decreases each time we call shift, so the values are 5, 4, and 3. And finally, each time we call shift, we use the console.dir method to inspect foo, so that we can see the changes that are happening to the array with each call to shift.

Video Example Code

If you want to download the example code, visit this page: kcv-array-shift-fiddle

Summary

So, to recap, the ECMAScript specification provides a number of methods on the Array.prototype object that are designed for handling mutations to the beginning and end of an array. But the Array.prototype.shift() method specifically functions to efficiently remove the first element from the beginning of an array. This method takes no arguments and returns the element that was removed from the beginning of the array. Simplicity and efficiency at its best!

Oct162018 by dcmNo Comments

CSS Relative Position

Position

With CSS relative position, the element still affects the document flow, but it can be offset, or “nudged” around from its original location. The element will appear to have been moved visually, but its effect on the DOM remains the same.

Changing the visual location of an HTML element is a common front-end web development task. The challenge is in choosing which tool should be used to accomplish this task. By “tool”, I mean which CSS property best suits the outcome you hope to have? Now, while the position property is quite often the go-to tool for this task, sometimes it can be confusing as to which CSS position property to apply. For example, absolute is similar to fixed.
But then again, absolute is sometimes confused with relative because of the ability to apply “top”, “right”, “bottom” and “left” properties to your rule set.

Just keep in mind that the confusion that surrounds absolute and relative position is mostly related to document flow. With absolute position, you are removing the element from the document flow, which is neither good nor bad; it’s just a big feature of absolute position. So, if you feel that absolute position is the tool you need, look HERE.

If you want to change the visual location of an element, yet keep it in the document flow, then CSS relative position is what you need. The element will still have the exact same physical effect on the DOM. That is to say: the other elements around it still think it is exactly where they expect it to be. But, from a purely visual standpoint, the element can be moved.

Example # 1

See the Pen CSS Relative Position Basics | Front End Video by Front End Video (@frontendvideo) on CodePen.

In Example # 1, we have three nested elements with the following classes applied: “child“, “parent” and “grand-parent“. From now on, let’s use those class names to refer to the elements. Each element has a specific CSS background-color property set, so that it is easier to identify.

The child element has its CSS position property set to: “relative“. It also has its CSS top and left properties set to 100px and 50px. This tells the browser: “offset this element 100px from the top and 50px from the left of where it should normally be in document flow. As a result, the child element appears pushed down 100px and pushed right 50px.

Example # 2

See the Pen CSS Relative Position – Intermediate 2 | Front End Video by Front End Video (@frontendvideo) on CodePen.

In Example # 2, we’ve added five black boxes that are siblings of the child element. They do not have position relative set, so they appear exactly where we expect them to be in the document flow. Let’s call each of these five black boxes child.black.

Notice that although our child.green box appears pushed down and pushed right, the child.black boxes are not pushed down. It may seem as though they should, since the child.green box should push them down. This is because using position relative to “nudge” an element around only has a visual effect on the DOM; it does not affect the document flow. So, all of the child.black boxes still feel as if the child.green box is exactly where they expect it to be in the DOM. The “nudging around” aspect of using position relative is purely visual.

Example # 3

See the Pen CSS Relative Position – Intermediate | Front End Video by Front End Video (@frontendvideo) on CodePen.

In Example # 3, we have added position: relative to the fourth child.black box by using the CSS nth-child selector: .child.black:nth-child(4). This box is white, with a purple border. We have set it to be offset 10px from the top and 80px from the left of where it should normally be in the document flow. Just as is the case with child.green, the “nudging” is purely visual; the two child.black boxes below are not affected by this and appear as if this white box with the purple border is still were it should be in the DOM.

Oct92018 by dcmNo Comments

How to combine JavaScript arrays

JavaScript

The concat method can be used to combine two arrays. This method returns a new array and the original arrays are not changed in any way.

If you’ve never had a need to combine two JavaScript arrays, you can pretty much count on having to, one day. And if you’ve ever entertained thoughts of rolling your own solution to this problem, I’d recommend against it. So now’s a good time to talk about the array.prototype.concat method, which provides a simple way to combine two JavaScript arrays. One thing that’s important to know about the concat method is that it does not change the original arrays. In other words, a new array is created and it will consist of the two specified arrays. But keep in mind that if either array contains one or more objects, those objects are passed by reference in JavaScript. So, even though the original arrays are not changed, if you make a change to any of the objects in the new array, that change will be reflected in the original (source) array.

Try it yourself !

In the above example, click the Result tab. The first call to the concat method is used to combine two arrays: [“a”, “b”, “c”] and [“d”, “e”, “f”]. The result is a new array: [“a”,”b”,”c”,”d”,”e”,”f”]. It is important to note that in both cases, the original array is not changed, which you can see from the second and third console.dir statements. Click the Result tab in order to see the results of each console.dir statement.

We can also pass a single value to the concat method in this way: myArray1.concat("hello") . When we do that, a new array is returned with the single value we have provided as the last element. The effect is very similar to using the Array push() method. The main difference is that the push() method changes the original array and returns the new length of that array, whereas the concat method does not change the original array and returns a new array . In a similar manner, we can also pass multiple values to the concat method: myArray1.concat("hello", "goodbye") . This returns a new array with the two values added to the end: [“a”,”b”,”c”,”hello”,”goodbye”].

Summary

So, here you’ve had a look at what a handy tool the array.prototype.concat method is. It not only allows you to combine two JavaScript arrays, it also allows you to add elements to the new array at the same time. But here are two helpful and important things to keep in mind: the original arrays are not changed, and any changes to objects that exist in the new array will be reflected in the original array that it came from.

Oct22018 by dcmNo Comments

How do I move DOM elements with jQuery ?

jQuery

The jQuery.appendTo method makes it easy to move a DOM element. You won’t need to be concerned with creating or destroying elements and event handlers are preserved.

Moving DOM elements using vanilla JavaScript can be a bit tedious. It’s certainly possible, and it is a good idea to understand the steps, but it does require more code. jQuery provides powerful abstraction for this task, however, and the amount of code needed is minimal.

Whenever possible, I favor using vanilla JavaScript to solve a problem, because leaning on jQuery too much can weaken your overall JavaScript skills. In this case, however, I recommend letting jQuery do all of the work for you. The main issue with vanilla JavaScript when it comes to moving DOM elements is the need to understand the intricacies of the low-level hierarchical DOM API. For example, you’ll need to get ahold of the parent element of the DOM node, after which you’ll want to move your target element. Frankly, I commend anyone who wants to take on this challenge, but in many cases, it just makes sense to leverage jQuery.

Try it yourself !

See the Pen Moving DOM elements with jQuery by Front End Video (@frontendvideo) on CodePen.

In the above example, click the “HTML” tab. There are two DIVs with the IDs: “left-list” and “right-list“. DIV#left-list has an unordered list with the days of the week, and DIV#right-list is empty. Now click the “JS” tab. You’ll see that there is a click-event handler for $('#left-list li'). This means that when any of the list items are clicked, the anonymous function you see will be executed.

Go ahead and click each of the days of the week and you’ll see that it is moved to the DIV#right-list element. After each element is moved, if you click it, nothing happens.

In the anonymous function, we use the JavaScript this keyword to reference the element that was clicked. Actually, we wrap the JavaScript this keyword with jQuery: $(this). We then chain the .appendTo method, and pass it a target element: .appendTo( $('#right-list') ). Here we are telling jQuery: “Move this element to the #right-list element, and make it the last child“. So, we are appending it to DIV#right-list. We then chain this: .unbind('click');. The reason we do that is: the jQuery appendTo method retains any event bindings for elements that are moved. Most of the time, this is probably what you want. But in this case, we do not want the event bindings to travel with the element because once a list item is moved inside of the #right-list element, we no longer want it to have a click-event handler. But that is simply for this example.

Summary

Simply put, moving DOM elements with vanilla JavaScript can be messy business, but the jQuery.appendTo method provides abstraction that simplifies this process. Instead of having to dig into the low-level DOM API, you can simply specify the source and target HTML elements. In other words, you let jQuery know which element you want to move, and which element you want to append it to. In cases such as these, it’s often best to let jQuery do all of the work for you. It will certainly minimize the amount of boilerplate coding you’ll have to do, and will help to keep your JavaScript easier to manage.

Sep252018 by dcmNo Comments

jQuery.filter()

jQuery

jQuery can return one, or multiple HTML elements in the matched set. jQuery.filter() reduces the elements in that matched set, based on a criteria that you provide.

Most front-end web developers understand that jQuery literally queries the DOM, and returns a set of elements that match the CSS-like text string that you pass to the jQuery function (AKA: “$()“). But what if you want to further refine that query? Using jQuery.filter(), you can tell jQuery things such as: “Filter out the ODD elements”, or “Filter out the elements that have the word “automobile” in their text”, and so on.

One of the things that makes the jQuery.filter method so powerful, is that you can not only pass a string to it, but also a function. Passing a function allows you to write code that programmatically tells jQuery exactly how to reduce the matched set. See Examples # 2 and # 3 below for more information about passing a function to the jQuery.filter method.

Example # 1

See the Pen jQuery.filter Basics – Part 1 by Front End Video (@frontendvideo) on CodePen.

In Example # 1, we have an unordered list that contains the seven days of the week. We want to apply some custom styles to only the even elements returned in the query. So, we use jQuery.filter(). We pass the string “:even” to jQuery.filter, which tells this method to return only the even elements (that is, element # 0, element # 2, element # 4, element # 6, and so on). As a result, only the days Monday, Wednesday, Friday and Sunday have the custom style applied. This is because the jQuery.filter method filtered the matched set down to those elements only, and returned a new set of only those elements. We then chained the .css method to that set, and applied the class “styled“, which adds some padding and the background-color: #FFB347.

Example # 2

See the Pen jQuery.filter Basics – Part 2 by Front End Video (@frontendvideo) on CodePen.

In Example # 2, we pass a function to the jQuery.filter method. In this function, we use the JavaScript modulus operator, telling jQuery that we only want every 5th element in the matched set. As a result, every 5th item in our unordered list has the custom styles applied. Don’t be misled by the simplicity of this example. Passing a function to the jQuery.filter method provides a tremendous amount of power. In this case we simply indicated that we wanted every 5th element, but because we are using a function, the code you write in order to filter out the matched set is limitless.

Example # 3

See the Pen jQuery.filter Basics – Part 3 by Front End Video (@frontendvideo) on CodePen.

In Example # 3, we once again pass a function to the jQuery.filter method. In this case, we tell jQuery that we want to reduce the matched set down to only the elements whose text is less than six characters. As a result, only the word in the list with five characters or less have the custom styles applied. Play with the example code yourself. For example, change this: return $(this).text().length < 6; to THIS: return $(this).text().length < 8;. Notice how the number of list items with custom styles changes. This is because you have changed the criteria passed to the jQuery.filter method by changing the code in the function.

Summary

When you query the DOM, When jQuery returns one, or multiple HTML elements in the matched set, so depending on how you organize your code, you may want to further refine that matched set. The jQuery.filter() method allows you to determine how that matched set is further refined, and what makes the jQuery.filter() method so powerful is the fact that the argument you provide can be as simple as a string, or as complex as a function. Passing a string is surprisingly flexible, and passing a function provides exponential power, as you can programmatically determine the result set that the filter will return.