Tag: JavaScript (Page 2 of 12)

Articles, tips, and resources for JavaScript-based development.

Learn The New Thing! (Wait, Not So Fast)

April 24, 2018 / Tom

One of the things that I dig about the software development industry (others, too, but this is where we are, right?) is that it requires some degree of constant learning.

For some, that can induce a level of fatigue. And I get it because I’ve felt it. I don’t know if it’s an age thing (I’m not old, yet, but there’s a lot to be said from going from just yourself into an apartment into a house and a family, but I digress). I think that comes with a bit of thrashing is continually trying to keep up with every new thing that comes out.

The thing is that the further I get into my career, the less I’m interested in the learning The New Thing the moment it’s released.

Remember when this was The New Thing?

And I say this knowing full well it’d be easy to dismiss what I have to say since I’ve written on going deep rather than wide with technology.

But this is a bit different.

Removing Duplicate Items with JavaScript

March 23, 2018 / Tom

As ES6 becomes more and more popular in web development, we’re likely going to be seeing – and writing – less code using other libraries. When it comes to WordPress, jQuery is still very common.

Personally, I don’t think there’s anything inherently wrong with using jQuery (though you might not need it) but I also think it’s important to keep your skills sharp and up to date with newer technologies.

Removing Duplicate Items with JavaScript: You Might Not Need jQuery

But learning to write ES6 code is not the purpose of this post, nor is how to achieve something using ES6.

Instead, it’s still about WordPress and jQuery. I’ll come back to ES6 at the end of the post. One of the things I’d love to cover, though, is how to remove duplicate items from a list with a common property.

How To Set Up JavaScript linting in Visual Studio Code

March 16, 2018 / Tom

I’m obviously a big fan of using coding standards whenever you’re writing server-side code (regardless of it being WordPress, PSR2, or whatever else – as long as you’re using something, I think it’s a good thing).

But when it comes to writing client-side code, namely JavaScript for this post, we don’t see it discussed as much though I think of it as being as equally important. Same goes for CSS, Sass, or LESS, but that’s content for another post.

For recent projects, we’ve been using Airbnb JavaScript Style guide for our projects. I’m a fan and think it helps to write clean, readable JavaScript (that looks as if it’s been written by the same person – the ultimate goal of coding standards, right?).

JavaScript linting in Visual Studio Code: Airbnb Styleguide

In this post, I’ll walk through the process of getting it setup in Visual Studio Code.

Properly Working with Ajax Requests in WordPress

February 22, 2018 / Tom

Whenever you’re working with third-party APIs, and you’re doing so in an asynchronous nature, there is always the chance that whatever it is you’re requesting is going to return a un-desirable result.

Perhaps it’s an error code, perhaps it’s a warning, or maybe it’s a simple message saying something like “We’re still processing your request on our end.”

In each case, you can usually handle them on the server-side just fine and let the client-side know how to handle it. But if you’re dealing with the latter case, that is where you’re blocked by the third-party processing; there are other things you can do to handle this situation better.

For example, in the latter case, it’s better to wait for a little bit then make the request again to see if the API has a different response for you.

But when doing this, it requires Ajax which obviously requires JavaScript. One of the obvious, yet more dated methods of doing this is to use setInterval.

The problem with this, though, is that it creates a stack of requests and then, as the response is ready, each item in the stack will get the same response.

This can drastically impact any given server. And there are better ways to go about doing this.

Dynamic Elements, Static Elements, Event Handlers and Their Complexities

February 16, 2018 / Tom

Working with stacked elements on a page, some that are anchors, and others that are elements with event handlers can sometimes cause weird behavior.

Ultimately, it all has to do with event propagation, but if you’ve not had to deal with that (or event bubbling or anything like that), it can be a bit of a challenge.

And here’s an example: What if you have an image that is wrapped in an anchor. What happens when you a dynamic element that’s placed via JavaScript after the page loads that loads another dynamic element? On top of that, you want to stop the page from redirecting when the dynamic element is clicked but still direct when the image is clicked?

It might sound simple – and in some cases it is – but if you have a transparent element overlaying the entire, original image it can become a whole other challenge.

This is where understanding event targets come into play. But before going into how to solve it, I’ll try to distill everything down into a simpler explanation and diagram out how it’s rendered in the DOM.