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.
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.
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).
In this post, I’ll walk through the process of getting it setup in Visual Studio Code.
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.
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.
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.
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.
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.
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.