Joe Honton

Embracing the reality that this little language has a lot to offer

JavaScript Fanboi
JavaScript Fanboi
JavaScript Fanboi, courtesy the author

For me, these past few years have been remarkably productive. I owe it all to the fact that I’ve finally made peace with the growing maturity of JavaScript. It’s not a toy language anymore.

As a software developer with decades of professional experience, I’ve worked with lots of languages. Naturally I’ve formed opinions about each of them.

Perhaps inevitably, those opinions have evolved as I’ve moved past the syntax, and began to grasp the gestalt of each language — their innate ability to express solutions to problems.

JavaScript is a case in point where I initially got it all wrong.


How to package JavaScript libraries for a smooth transition from legacy to standard modules

JavaScript Omni-packages
JavaScript Omni-packages
Image source: Author

JavaScript is poised for a revolution in packaging. New ESNext modules are now supported across all major browsers and server-side Node.js software. This is good news.

But the legacy of CommonJS modules will be with us for a long time. Every new JavaScript project wanting to take advantage of standard import/export syntax will need to consider whether all of their dependencies can be met with the new module loader. And at the same time, every package developer will need to consider whether they're going to support legacy consumers (CommonJS) or standards-based consumers (ESNext) or both.

This is not a small…


How we accumulated so much cruft, and how we can streamline our workflow for cleaner, more efficient results

Three balloons — HTML, JavaScript and CSS
Three balloons — HTML, JavaScript and CSS

If you’re a frontend web developer, you’ve probably retooled more than once in the past year. New advances in HTML, CSS and JavaScript mean new opportunities to improve upon old ways of doing things. This is good. We welcome these changes.

But these changes require us to rethink how we go about our work. Lessons that we learned the hard way, through trial and error, have to be relearned all over again.

Meanwhile, open source projects and tool vendors continuously release new versions of their software. The entire ecosystem frantically works to keep pace with advances in the underlying technology…


Web Components

The JavaScript community has a semantics problem

Image for post
Image for post

Here’s an intriguing job interview question — Can you describe the difference between a component and a module?

If you’re the prospective candidate you may begin squirming in your seat when you hear this asked. And if you’re the hiring manager, you may begin wondering why such an entry-level question has sparked so much consternation.

Yes, we can agree that it’s just semantics. But if you search for “modules versus components” you’ll discover that none of the top answers can quite agree on what’s what. Here’s how the confusion begins:

“A module is larger than a component. A component is…


Image for post
Image for post

February 2021

A couple of years ago I began writing a series of tech articles about web development. Each article was an “episode” in an ongoing story based on a handful of characters who worked for the fictional consulting firm I called Tangled Web Services. These were published under the Read Write Grok banner.

Half of those early stories were about the nitty-gritty of Read Write Serve, a Node.js HTTP/2 web server. The others covered CSS, HTML, and the BLUEPHRASE template language.

Near the end of 2019, I felt the urge to rant about the misuse of the word full stack. The…


Web Development

Image for post
Image for post

This article explores how to create a custom gesture API for use in both desktop and mobile applications.

Users interact with desktop applications using a mouse and keyboard; in contrast, they interact with mobile apps using a touchscreen. When software developers write for both desktop and mobile devices using a single codebase, they need to handle both mouse and touch events. This isn’t always simple.

Treating mouse and touchscreen events as gestures, instead of raw events, is an approach that provides uniformity to an application’s underlying logic. To make this happen, developers listen for low-level events sent by the browser…


Image for post
Image for post

Recently, I finished working on a software project that I’m especially proud of. It took months of effort to complete, and the final result was something that perfectly fit my needs. It was a labor of love.

It’s not important to reveal the purpose of the software here, or the technical details of its inner workings. Simply allow me to say that it’s something that I will use right away, and that other programmers may find useful as well.

When the project was complete, there were a few important decisions that I needed to make. How do I share what…


DOM Components

How to properly use a game loop with HTML canvas drawings

Image for post
Image for post
The full.earth rendered using HTML <canvas>

Game programming uses a software pattern called a game loop. It’s an important technique for any software developer to study, having applicability to serious endeavors beyond graphic animations, for example in: time-series charting, interactive data visualization, and scientific modeling.

A simple game loop can be created with HTML using only one DOM function: requestAnimationFrame. It is set up as a callback function, with the browser invoking it approximately 60 times per second. The browser optimizes this frequency to match the user's screen refresh rate.

The browser also optimizes this function to reduce power consumption so that when the browser is…


DOM Components

How to use broadcasters and listeners for dependency-free code

Pub/sub event bus
Pub/sub event bus
Pub/sub event bus

Publish/subscribe is a classic software design pattern that allows pieces of an application to be decoupled. It uses messages instead of functions, closures, or callbacks. It promotes an architectural style that has flexibility through independence.

I recently applied the pub/sub pattern to the state management of a DOM component. Its implementation was at times confusing, but the final result was a satisfying UI/UX. The extra effort was worth it.

Here’s a brief walk-through for anyone attempting to use this pattern within a DOM component.

As background, the component I was working on draws a representation of the Earth on an…


DOM components that follow the separation of concerns dictum

Image for post
Image for post
The three-in-one challenge (image courtesy the author © 2020)

Getting started with DOM components is straightforward. An afternoon of research reveals the basic landscape: custom elements, shadow DOM, HTML <template> elements, and JavaScript modules. The lay of the land is mapped out in earlier tutorials and tech specs (so we don’t need to go over it again) but there are a few bumps in the road that haven’t been adequately sign-posted, which challenges us to find detours on our own. One of these challenges is how to adhere to the well-known separation of concerns policy.

As my own understanding of the DOM component landscape has progressed, my work has…

Joe Honton

Using distraction-free tools for better reading, writing and publishing, and loving it!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store