Recent Blog Posts by Ben Nadel
Working Code Podcast - Episode 129: Build vs. Maintain
When Engineering, Product, and Design (EPD) come together to create the first version of a given piece of software, it feels like everyone is on the same page and has the same priorities. But, once that initial implementation ships to users, the Product and Design departments tend to move on, leaving engineers to maintain the software. This creates an uncomfortable tension between the existing user experience (UX) and the underlying technical details. On today's show, we talk about that EPD tension and how we might work to mitigate it... read more →
Code Kata: Simple Dependency Injection (DI) With ColdFusion
When this blog boots-up, I explicitly wire-together all of the ColdFusion components that get cached in memory. The domain model for this blog isn't very big, so configuring the application right in the onApplicationStart() event-handler isn't much of a lift. That said, as a fun code kata - as much as anything else - I wanted to start migrating the configuration over to use more declarative dependencies. To that end, I wanted to build myself a simple dependency injection (DI) container... read more →
Working Code Podcast - Episode 128: Potluck
This week on the show, we discuss a variety of web and web-adjacent topics. Adam is feeling dubious about recommending a career in web development to his children (is it still worth it)? Tim wants to consider different ways to handle errors in a RESTful API. And, I legitimately want to understand why we - the web development community - don't approach Testing with a YAGNI (You Ain't Gonna Need It) mindset. It seems that we look at every other consideration with a YAGNI eye, using measure and constraint. And yet, for some reason with testing, we lean hard into the everything must be tested all the time dogma... read more →
Firefox CSS Bug: Four-Sided Positioning With Buttons
Four-sided positioning in CSS is one of my favorite ways to "cover" an area of the viewport with an absolutely-positioned (or fixed-positioned) element. It's had perfect support in all browsers for like 15-years; but, the other day I tripped over a bug in Firefox. It seems that four-sided positioning does not work with <button> elements in Firefox. Thankfully, one of my other favorite CSS features - Flexbox - can fix this problem... read more →
Using CSS Flexbox To Create A Simple Bar Chart In ColdFusion
I'm a huge fan of CSS Flexbox layouts. They're relatively simple to use and there's not much to remember in terms of syntax. One place that I love using Flexbox is when I need to create a simple bar chart. I don't do much charting in my work, so I never have need to pull in large, robust libraries like D3. But, for simple one-off visualizations, CSS Flexbox is my jam. I thought it might be worth sharing a demo of how I do this in ColdFusion... read more →
Working Code Podcast - Episode 127: Tech Interviewing Is Broken With Sean Corfield
On today's show, we talk to Sean Corfield about his take on the "Tech Interview" process. With over 40 years of experience at companies like Macromedia, Adobe, and World Singles, Sean has been on both sides of the interview table; and, has been personally responsible for hiring countless engineers. His perspective that most tech interviews are "broken" might be taken with some apprehension if it weren't for the fact that, in 30-years of hiring, Sean has never once had to fire an engineer for lack of ability. So, he's clearly figured out how to hire the right people using a proven and repeatable process... read more →
Parsing GitHub Gist Embeds Into A Normalized Data Structure Using jSoup In ColdFusion
As I mentioned yesterday, I've been using GitHub Gists to add the syntax highlighting / formatting in my blog post content. This has been working great; but, I've never liked the idea of having to reach out to a 3rd-party system at render time in order to provide my full content experience. As such, I've been considering ways to cache the GitHub Gist data locally (in my system) for both better control and better performance. Unfortunately, GitHub Gists aren't provided in the most user-friendly format. To that end, we can use jSoup in ColdFusion to read-in, parse, and normalize the Gist contents... read more →
Maintaining White Space Using jSoup And ColdFusion
jSoup is a Java library for parsing and manipulating HTML strings. For the last few years, I've been using jSoup to clean-up and normalize my blog posts. And now, I'm looking to use jSoup to help me transform and cache GitHub Gists. At the time of this writing, Gist code is rendered in an HTML <table> with cells that use white-space: pre as the means of controlling white space output. jSoup doesn't parse the CSS; so, it does understand that it needs to maintain this white space when serializing the document back into HTML. If we want to keep this white space in the resultant document, we have to disable pretty printing... read more →
Using BugSnag As A Server-Side Logging Service In ColdFusion
I've been on the lookout for a better error logging service; and, over on Facebook, Jay Bronson recommended that I look at BugSnag. They have a free-tier, so I signed up to try it out. And, I must say, I'm very pleased with the User Interface (UI) and the basic functionality. That said, I could not get the Java SDK (Software Development Kit) working with JavaLoader. As such, I hacked together some ColdFusion code that would do just enough to send data to the BugSnag API. What I have is far from feature complete; but, I thought it might be worth sharing... read more →
Working Code Podcast - Episode 126: Documenting Design Decisions
This week on the show, we talk about documentation. And not just the "how" of software, but the "why" - the decisions that we've reached, as a team, regarding the technologies that we use and the architectures that glue everything together. Of course, writing the documentation is only part of the challenge; keeping the documentation up-to-date is a whole other source of friction for most teams... read more →
Importing Multiple ColdFusion Custom Tag Directories Using The Same Prefix
One of the nice things you can do with ColdFusion custom tags is import a given directory of custom tags into a "prefix". This allows custom tags to be aliased in the CFML markup; which is a technique that I use quite heavily in my Domain Specific Language (DSL) for generating Emails. One additional feature that I just learned about this prefixing functionality is that you can import multiple directories under the same prefix... read more →
ColdFusion Custom Tags Can Use Dashed Attributes
This morning, I was playing around with a ColdFusion custom tag that would encapsulate the rendering of a <select> menu. Part of this encapsulation involved propagating attributes from the ColdFusion custom tag onto the underlying Select element. As such, I randomly tried to pass a data- attribute into the ColdFusion custom tag; and, it worked! I didn't know that this was possible with ColdFusion custom tags. Furthermore, it appears to work in both Lucee CFML and Adobe ColdFusion!.. read more →
On Starting A Side-Project: Hotwire vs. Angular
For the last few months, I've been digging into the Hotwire framework. I was initially drawn to Hotwire on its promise of allowing me to build a SPA (Single-Page Application)-like experience using an MPA (Multi-Page Application); and, to do so with less effort. After several months of creating demos and migrating this ColdFusion blog over to using Hotwire, I feel like I have a much better sense of how Turbo Drive, Turbo Streams, and Stimulus work. But, I'm not quite sure that I want to use Hotwire when I start my next side-project... read more →
Working Code Podcast - Episode 125: What's On Your Workbench?
On today's show, the crew discusses a variety of topics. By which, I mean, I wax philosophical on the subjective nature of everything; and, how I wants to live in a world where those who choose to indent code with 2-spaces may peacefully coexist alongside those who choose to indent code with tabs. Also, Adam body-slams his younger brother into a concrete floor. And then, gets in trouble because he let blood get on the carpet. Be sure to listen for Adam's pro-tips on removing blood stains... read more →
Hosting Google Fonts Locally For GDPR Compliance
On episode 607 of the Syntax podcast, Wes and Scott interviewed the co-founders of Termageddon, a consulting company that helps websites create and maintain compliant policies. One of the topics that Termageddon has discussed in the past is Google Fonts. Google Fonts - when served from Google's APIs - have been ruled not GDPR compliant. However, if you serve Google Fonts up locally, they are GDPR compliant. As such, I've started to host them on my own web server... read more →
DHH On The Freedom Of Server-Side Programming
As I've been digging into the Hotwire framework recently, I've also been looking for external input on the same topic. In that vein, I came across an old episode of the Full Stack Radio podcast hosted by Adam Wathan. In Episode 151, Adam interviewed DHH (David Heinemeier Hansson) on building Hey with Hotwire. And, while the Hotwire content was fascinating, it's not why I'm bringing this up. What truly struck me about the interview was DHH's perspective on the freedoms that server-side programming gives us; and, that there is something fundamentally important about being able to choose technologies that bring us the most joy... read more →
Handling 401 Unauthorized Responses In Turbo Drive And ColdFusion
For the past few months, I've been digging into the use of the Hotwire framework in a ColdFusion context. And, for the most part, everything I've looked at so far has represented the "happy path" - all that which happens when everything goes right. Now, I want to start looking at some failure cases - the so-called "sad path." In today's post, I'm considering ways to respond to an unauthorized request in a ColdFusion application... read more →
Working Code Podcast - Episode 124: Juniors For Life
On today's show, we reflect on the YouTube video, 15 Years of Dev in a Nutshell. A few years ago, people were complaining about "JavaScript Fatigue" - the sense that there was a new JavaScript library or framework coming out every day; and, that the race to stay up-to-date in the industry was simply overwhelming. Now, take that feeling, but expand it to include everything in a web development career, from front-end frameworks to databases to server-side rendering to edge-computing. It's a lot! And, it's easy to feel that we engineers are "Juniors for Life": always learning, always evolving, and — perhaps — never really mastering anything?.. read more →
John Gall's Law On Building Complex Systems
Years ago, in the book Designing Data-Intensive Applications, I came across "Gall's Law". It's a hot take on building complex systems by systems theorist, John Gall. The law resonates deeply with me; and, I wanted to pull it out into its own post so that I could share it more easily:.. read more →
Working Code Podcast - Episode 123: Negative 10x Developers
In episode 58, we weighed-in on whether or not 10x engineers actually exist. On today's episode, we go hard in the other direction, talking about the much less mythical -10x engineer: those engineers that seem to actively work in opposition to the greater good, holding unnecessary meetings and flooding the team with a massive amount of documentation. This discussion was directly inspired by the post, How to be a -10x engineer... read more →
Selecting Portions Of A Turbo Stream Template With Custom Actions
In the Hotwire JavaScript framework, Turbo Streams give us the ability to manipulate the DOM (Document Object Model) in response to POST requests (and some GET requests). These DOM manipulations are performed through a set of defined "actions". Turbo provides some default actions; but, we can create our own custom Turbo Stream actions in order to add even more functionality. One thing that I would love to have is a [selector] attribute on the <turbo-stream> element that would limit the operation to a sub-tree of the <template> content. I believe that this would give me more flexibility when it comes to reusing my ColdFusion templates... read more →
Accessing Stimulus Controllers From A Given DOM Element In Hotwire
As I'm continuing to migrate my blog over to using Hotwire, I'm finding myself needing to perform some cross-controller communication. Stimulus has the concept of Outlets, which wire one controller into another. But, outlets seem to have significant developer experience (DX) issues at this time. Thankfully, Stimulus provides an older means of accessing controllers on a given DOM (Document Object Model) element. I wanted to briefly explore these mechanics in Hotwire... read more →
Building Resilient Feature Flags That "Fail Open" In ColdFusion
When it comes to feature flags, I'm a super fan! I believe that they fundamentally change everything about product development (See Video Presentation). But, with that super power comes complexity. Feature flags mean branching logic and transient state. And, this complexity is only amplified when you have to reconcile a long-running process, like a Single-Page Application (SPA). One way to help reduce complexity is design resilient feature flags so that they "fail open". This makes it much easier to clean up your ColdFusion server without breaking your client-side code... read more →
Associating Submit Buttons With Any Form Using Button Attributes In Native HTML
In the vast majority of cases, submit buttons are a descendant element, contained with the form on which they act. Sometimes, however - due to things like page layout constraints - an "external" button needs to trigger a non-parent form submission. Historically, I would have reached for JavaScript to get this done. But, I just learned that any button can natively target any form on the page by using the form attribute and a matching id value... read more →
Working Code Podcast - Episode 122: Coding Hot Takes
This week on the show, we talk about stuff we've been working on or thinking about lately. Adam dazzles us with his use of 1Password's Secrets Automation feature to drive key rotation in his production app. I miss the beautiful agony of having to support IE11 (and how it make the web more predictable). And, Carol shares her frustration with React and, especially, with JSX. It turns out, not everyone loves JSX or &mdah; clutches pearls &mdah; the idea of single-file components!.. read more →
Listen For Stimulus Custom Events Outside Of Hotwire
One of the elegant features of Hotwire is that the base Controller includes a .dispatch() event that makes it very easy to emit custom events from any Stimulus controller. These custom events can then be handled by other Stimulus controllers higher-up in the DOM (Document Object Model). One thing that might not be obvious at first is that these custom events are native DOM events. Meaning, they're fundamentally the same as the more familiar events such as click, submit, and mouseenter. which means we can listen for / bind to Stimulus custom events from outside our Hotwire application... read more →
Using navigator.sendBeacon() To Publish Analytics Back To ColdFusion
Last week, on Episode 227 of the Web Rush podcast, Sasha Shynkevich, talked about Browser APIs You May Not Know About. In that discussion, she mentioned the Beacon API as a means to efficiently and predictably send analytics data back to the server. I had never heard of the Beacon API before; but, it sounded liked something that would be very helpful in customer-facing applications (where delivering metrics and analytics is key for a product's continuous improvement). As such, I thought I would experiment with using the navigator.sendBeacon() method to publish analytics data back to my ColdFusion server... read more →
Using Public Class Fields To Bind Event Handlers In JavaScript
When I started using Angular with TypeScript, I was delighted to see that TypeScript offered a way to bind Functions to a Class instance as part of the Class definition. It worked by moving the "Function definition" into the constructor() method during compilation. This feature of TypeScript is amazing; and, I'm thrilled to see that this feature has also been adopted by the JavaScript specification. This allows us to easily bind event handlers without having to use .bind() or pass-in inline Fat-Arrow functions within our JavaScript classes... read more →
Using A Transient CSS Stylesheet To Remove Scrolling On Body While Modal Is Open
Yesterday, I demonstrated that removing a CSS stylesheet removes its affect on the document. This feature of the DOM (Document Object Model) allows us to apply temporary styles that can be easily toggled on-and-off. At work, I use this technique to temporarily disable scrolling on the body while a modal window is open. This is particularly helpful because CSS properties like overscroll-behavior don't work on non-scrolling elements... read more →
Removing A CSS Stylesheet Removes Its Affect On The Document
When you load a JavaScript file using the <script> tag, the document's behavior is altered forever. Even if you programmatically remove said <script> tag, the parsed code is still present. This is not true for Stylesheets. Whether delivered with a <link> tag or a <style> tag, removal of (or disabling of) the relevant tag also removes the affect the stylesheet had on the document. This behavior can be used to apply temporary CSS properties to the active document... read more →