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…
Algorithms
The classic, brilliant PNPOLY algorithm that dates back to 1970
W. Randolph Franklin’s “point inclusion in polygon” algorithm weighs in at just seven lines of C code. It’s intuitively easy to understand, yet fast enough to work with sophisticated GIS datasets. It’s one of those gems that every advanced programmer should know.
This article demonstrates how to use Franklin’s PNPOLY with client-facing JavaScript to detect when the user's mouse is hovering over a non-rectangular polygon.
PNPOLY algorithm
The concept behind the algorithm is simple enough: extend an imaginary, semi-infinite ray from the position of the mouse towards the right, counting how many times the line crosses an edge of the polygon.
Op-Ed Column
Choosing the right approach to personal data versus big data
This world is being assembled, in bits and pieces, from our interactions with technology: the tracking and surveillance of our movements; the communications and transactions of our commerce; the words and pictures of our inner circle; the desires and fears of our search for knowledge; and even the patterns and habits of our free time.
This is a dark thought, perhaps one that we’d rather not contemplate. …
Web Development
Correctly configuring CORS for content-type: application/json
The use of dynamic requests to backend servers is prevalent in modern web applications. Despite its commonplace nature, there are some gotchas that trip up even experienced developers.
TL;DR
In order to successfully preflight a JSON-encoded request to a different domain, the browser’s fetch request must include the HTTP header
access-control-request-headers: content-type.In order to signal that a JSON-encoded request from a different domain is permitted, the remote server must be correctly configured to respond with the HTTP header
access-control-allow-headers: content-type.
Basic CORS rules
Before getting started, let’s review when Cross Origin Resource Sharing (CORS) is required.
- CORS is only used when a web…
DOM Components
How to use the browser’s Intersection Observer for a positive user experience
At some point in our lives, most of us have whiled away the time reading one thing after another on the internet, as our fancy dictates. Lazy surfing the web is a pleasure all unto itself. No one knows what rabbit hole we may go down, or what pearls may be discovered through serendipity.
At one time it was considered a good practice in web design to provide an over-abundance of hyperlinks, to help readers navigate a website from page to page. This strategy was employed to guide readers toward related information, news or articles.
More recently though, that thinking…
Web Development
* And every place that doesn’t
Software developers work with dates and times on a regular basis. We understand the rules for determining leap years, the methods for calculating time spans, and the proper use of time offsets from Coordinated Universal Time.
Unfortunately, when it comes to summer-time versus winter-time there’s a big gap in our understanding. Relying on the time broadcast from the nearest cell-phone tower may be good enough for lay people, but programmers need to know a lot more.
TL;DR — Download daylight saving time data files for 2021, in JSON format, from the daylight-saving-time-2021 GitHub repo.
Standard time zones
We know that standard time is…
DOM Components
The JavaScript community has a semantics problem
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…
Web Development
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…
Op-Ed Column
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
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…
Joe Honton
Using distraction-free tools for better reading, writing and publishing, and loving it!
