Skip to main content
Home

Tagged “javascript”

Quick tip: Non-standard npm module resolution

You’ve used index.js, but what happens when you can’t? Here’s a quick way to resolve non-standard entry files for Node.js.

Read more of Quick tip: Non-standard npm module resolution →

From Notion to Eleventy part 1: The Notion API

Join me as I begin a new series that explores how to connect Notion to Eleventy. Really it’s just an excuse to improve my personal blogging workflow.

Read more of From Notion to Eleventy part 1: The Notion API →

The one where 'this' is undefined

Join me in my descent into madness as I troubleshoot this. And maybe, just maybe, we’ll learn a bit about life. But mostly madness.

Read more of The one where 'this' is undefined →

Misadventures in web components

I have been thinking about web components a lot lately, and I wanted to see how we could start using them at The Container Store. The idea was to pick a simple component and recreate it as a web component, and the first candidate that came to mind is our frequently-used quantity stepper. The stepper appears in several places throughout the website, and it’s dependent on an embarrassing amount of jQuery.

Read more of Misadventures in web components →

Native form validation with JavaScript

You don’t need to install a validation library to create rich client-side form validation experiences. HTML5’s native client-side form validation is widely-supported and easy to implement, and while its default functionality is limited, the native Constraint Validation API allows for custom behavior with JavaScript.

Read more of Native form validation with JavaScript →

Share variables between JavaScript and CSS

Whether you need site breakpoints for matchMedia or access to theme colors, sharing values between your JavaScript and CSS is sometimes unavoidable. The easiest solution is to copy and paste values, but how can you ensure values stay synchronized when that brand blue color changes to indigo?

Read more of Share variables between JavaScript and CSS →

Talk to your React components with custom events

I build pages with both React and non-React components, and sometimes all these components need to talk to each other. Examples include opening a React modal when a customer clicks a button or updating a text block when a customer adds a product from a React stepper. There are many ways to do this, but in my opinion, the best way is to use custom events.

Read more of Talk to your React components with custom events →

Tips for vanilla JavaScript DOM manipulation

If you need to go au naturale with your JavaScript DOM manipulation, here are some tips for improving performance.

Read more of Tips for vanilla JavaScript DOM manipulation →

Debugging JavaScript with binary search

I recently had to debug a problem that existed somewhere in the middle of around 460 lines of JavaScript spaghetti. Debugging was useless because the bug was taking down dev tools! The approach I took was something that I often employ when facing a seemingly impossible task like this.

Read more of Debugging JavaScript with binary search →

React Presentational and Container Components Using Context and Hooks

Updated: I’ve updated the code to export a named function, not an anonymous arrow function. When I first started using React, I learned about Presentational and Container Components from Dan Abramov. This pattern prescribed splitting UI into smart (container) components that encapsulated state and logic, and dumb (presentational) components that simply presented data in a styled manner. In general, the containers were class components that managed state and lifecycle methods, whereas presentational components were stateless function components.

Read more of React Presentational and Container Components Using Context and Hooks →