Software, Development, and WordPress

Tag: JavaScript (Page 2 of 12)

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

Removing Duplicate Items with JavaScript

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.

Continue reading

How To Set Up JavaScript linting in Visual Studio Code

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.

Continue reading

Properly Working with Ajax Requests in WordPress

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.

Continue reading

Dynamic Elements, Static Elements, Event Handlers and Their Complexities

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.

Continue reading

Quick Tip: Check User’s Browser With JavaScript

You’d think in 2018 we’d have a standard way to do browser detection or that the majority of browsers would handle standard idiosyncracies around CSS properly.

But here we are, and it’s still not happening.

This means that when it comes to working with JavaScript, we still may have to do a bit of browser sniffing to determine which browser it is with which we’re working.

Don’t get me wrong: It’s not as bad as it used to be, but there are times in which I’ve recently encountered errors with Chrome and Firefox, specifically.

Continue reading

« Older posts Newer posts »

© 2020 Tom McFarlin

Theme by Anders NorenUp ↑