You searched for javascript - Page 4 of 18

10 JavaScript Quick Tips and Best Practices

Recently, a few blogs and tutorial sites have posted some really good articles on JavaScript tips and best practices, and I thought that was a good topic that could easily be expanded upon. So I put together a list of 10 fairly simple JavaScript tips and best practices of my own.

I tried to include stuff that was not mentioned in those other posts, but I’m sure there is a little bit of overlap. Keep in mind that these are brief tips and recommendations, so I don’t go into great detail about the reasons and such, but I may go into some of them in depth in future articles and tutorials.

In the meantime, please enjoy this list of tips, recommendations, and best practices for JavaScript coding.

10 Essential DOM Methods & Techniques for Practical JavaScript

Whether you use a JavaScript framework, or you are a purist and always resort to coding your client-side scripts from scratch, there are certain DOM syntaxes with which you should be at least a little bit familiar.

It’s true that a library like jQuery or MooTools will perform these methods for you, behind the scenes. In fact, if you rely on JS libraries for virtually all your JavaScript code, you’ll rarely have to use any of these methods directly.

But the reality is that, whether we develop as freelancers or work for a development firm, we may not always have the luxury of working on fresh projects where we can pretty much do what we want; we may have to maintain sites that rely on “obtrusive” scripting methods, or, for one reason or another, we may not be permitted to use certain libraries.

Whatever your situation, the following review of various practical DOM methods will hopefully serve to bolster your JavaScript knowledge and possibly help you more readily see practical solutions to various client-side issues.

JavaScript Folder Collapser for Dynamic Content (Tutorial)

In this tutorial, I’ll show you how to create a group of collapsible folders using pure JavaScript and some jQuery added to the final product to give it a little bit of flare. The code will be structured in such a way that allows for implementation into a dynamic page — wherein the number of folders may be unknown.

7 JavaScript Differences Between Firefox & IE

Although the days of long and tedious code branches to target specific browsers in JavaScript are over, once in a while it’s still necessary to do some simple code branching and object detection to ensure that a certain piece of code is working properly on a user’s machine.

In this article, I’ll outine 7 areas where Internet Explorer and Firefox differ in JavaScript syntax.

Equal Height Columns with JavaScript (Full Version)

As an alternative to “faux columns” and other not-so-clean methods for attaining equal column height in CSS layouts, this tutorial will explain how to accomplish equal columns with pure, unobtrusive JavaScript. This method takes into account top and bottom border thickness as well as interior padding so that the two columns are exactly the same height in virtually every circumstance. And the script is written to ensure that the columns will equalize regardless of which one is taller, so it’s very practical for dynamic content with complex background styles.

This is a full tutorial that expands on a previous post where I outlined a very rudimentary method to achieve equal columns using JavaScript. In the previous article, I discussed the various benefits and drawbacks to using JavaScript for this issue, so I won’t repeat those here.

JavaScript-Powered HTML Table Code Generator

Recently I searched Google to try to find an HTML table code generator that would let me easily create an HTML table quickly and efficiently, similar to how Dreamweaver does it — but with more customization options that are in line with the the latest in web standards and best practices. I also wanted to be able to enter my data right inside the code generator itself, and not have to copy the code with empty cells, then tediously cut and paste all the data into the individual cells. I found a few options that were reasonably good, but I decided instead to build my own HTML table code generator using pure, (sort of) unobtrusive JavaScript. The entire table and data insertion would take place on the client side and be fully customizable and easy to use.

Well, after about 5 or 6 hours of blood sweat and tears (not really, it was fun), I’ve completed what I feel is one of the most efficient and useful table code generators available on the web. I know what you’re thinking: tables aren’t used very often these days by top web developers, and all HTML editors provide good support for table code generation. But the customization I’ve added and the ease with which the data can be inserted I think is worth giving it a try.

Equal Column Height Using JavaScript

I’m currently working on a project that requires that I use either some very tricky CSS or else JavaScript to make a left column div expand automatically to fit its parent container. The parent container and left hand nav appear on multiple pages, and there is different content, including that which is dynamically generated, so I cannot just add a height to both elements in the CSS.

Don’t Let ChatGPT Write Your Code

ChatGPT

We can all agree it’s ridiculous to suggest that we should ignore a modern tool that makes it exponentially easier to finish our work.

But as I’ve learned in 20+ years of writing code, there’s always going to be a drawback to using any tool that “makes life easier”. In this case, AI-based tools that use ChatGPT or some other AI-based foundation are similar to the frameworks we’ve been using for years.

Filestack: A File Uploader and Powerful APIs to Deliver and Transform App Content

[Sponsored] If you’re building an app that requires a lot of user-generated content and media that needs to be processed, tagged, filtered, or otherwise manipulated in real-time, you definitely want a solution that’s fast and seamless and doesn’t get in the way of your app’s primary functionality. Filestack is a service you’ll want to consider. Here’s what Filestack offers:

A Review of ipwhois.io for Reliable Geolocation Data

[Sponsored] If you’re building an app that requires delivering a dynamic experience based on the user’s location or other location-related data, a fast and easy-to-use Geolocation API will certainly come in handy. One such option is ipwhois.io. The service, which is free for small non-commercial projects that need fewer than 10,000 requests per month, is easy to integrate with your tech stack.

As usual, it’s always best to look at a few examples so you can see it in action. Their documentation is short and easy to follow, so I’ll demonstrate using the following example request: