Welcome

My name is Joshua. I am a User Experience Engineer working on awesome things at Kepler + Co.

Bust

Hello

I am a Front-end Developer with a specific passion and interest in user experience and optimized UI development. I am officially called a UX Engineer which means that I work closely with designers to ensure that the components and pages we build are user-friendly and technically feasible. I am also responsible for promoting the adoption of design systems amongst both designers and developers.

My Writings

Articles that I have written about various topics that I enjoy
Header Image
What CSS Layout Looks Like and How it Works

Recently I have been updating the documentation site for my company’s component library, which has included making the documentation mobile friendly. While doing so, I employed the age old technique of adding a pink outline to every single element on my page so that I could see how different elements where interacting with each other. Such a …

  • Published January 12, 2023
  • CSS
  • Web Dev
  • Learning
Header Image
Goodhart's Law and Interview Tests

At some point, I am sure that most developers have had an interview were they have been given some sort of a coding challenge. The idea is this - a company wants to hire a new developer. They want said developer to demonstrate the skills necessary for the job. The skills listed on that developers CV are considered to be unverified and so, that …

  • Published October 21, 2022
  • Web Dev
  • Jobs
  • Interview
Header Image
A Quick Guide to State Management in React

Page state management is a tricky business. Naturally, most developers either opt for using some sort of global state management or they use React’s built-in useState hook. Both of these have their place, but they are not always the ideal for managing page state. Things can get complicated very quickly. When it comes to page state, we might …

  • Published September 7, 2022
  • Workflow
  • React
  • State Management
  • UI/UX
  • Web Dev
Header Image
Create a Material Style Ripple Effect With JavaScript and CSS

Possibly one of the most iconic designs patterns to come out of Google’s material design is the ripple effect. It is such a simple interaction, but feels so satisfying to use. It gives a user really good context of what action they have taken in your application and, let face it, it just looks really cool. Now, if you are using a framework …

  • Published August 20, 2021
  • JavaScript
  • CSS
  • Web Dev
  • UX/UI
Header Image
The Best Way to Learn... Teach

If you can’t explain it simply, you don’t understand it well enough. - Albert Einstein Hopefully all of us want to get better at the things we do. Most of us, if we enjoy something, want to get better at that thing. There are many different ways to learn something new; each style has its merits and benefits. Yet, in my experience, …

  • Published March 18, 2021
  • Development
  • Learning
  • Process
  • Education
Header Image
Creating a Useful Component Library

One of the great benefits of the many SPA frameworks that we use nowadays (such as Angular and React) is that it is super easy to make reusable UI components that are clean and self-contained. Components that are built in these frameworks are easier to debug and far more reliable than the traditional sort of component. We can create a project with …

  • Published August 5, 2020
  • UX/UI
  • Components
  • Web Dev
Header Image
An Opinion on Progressive Enhancement in CSS

Although support for the “plague browsers” is dropping by the year, developers across the world are faced with the challenge of having to support older web browsers like Internet Explorer. Such browsers have very limited support for new web technologies like grid, flexbox, or custom properties. Because of browsers like this, the CSS …

  • Published March 8, 2020
  • CSS
  • Web Dev
  • Opinion
Header Image
The Sexiness of Headless UI Components

Something I enjoy doing most on the web is creating things that help other developers to be more productive. I especially love creating component libraries and core development kits that can be used to make project bootstrapping and deveopment easier. As a result I have spent a substantial amount of time trying to find newer and better ways of …

  • Published December 2, 2019
  • React
  • TypeScript
  • Web Dev
  • CSS
  • UI/UX
Header Image
Why It's So Hard to Check Object Equality in JavaScript

The other day I was working on a bit of code where I found myself having to check if two JavaScript objects were equal, namely, do two objects have the same keys and values. The first thing I tried was putting them into a simple equality check (using ===) and thought that my problem was solved. However, it turns out that comparing JavaScripts …

  • Published November 19, 2019
  • JavaScript
  • Web Dev
  • Utilities