Sign in

Front End Developer

As discussed in my recently published article on form data loss prevention, my day is all about forms. From big to small, modal experience to page level and everything in between, forms are my bread and butter.

In a similar problem vein as keeping track of dirty state & preventing data loss, we wanted to provide the user a convenience save button to save all segments of the 1003 (mortgage origination form) at once. This was made extremely easy by leveraging our form framework, React Hook Form. …

My days have been dominated by forms for the last 2 years, approximately. As an engineer on for a mortgage origination company, that shouldn’t surprise anybody. Ultimately, the products I work on revolve around a single government form called “Form 1003.” It consists of hundreds of fields of varying inputs. From borrower personal information, property information, loan information, and more.

One of the core problems we want to solve for our users is ensuring a proper balance between expected behavior and data loss prevention. …

tl;dr here’s the solution. Please feel free to continue reading for the reasoning:

On focus of the input, set the autocomplete attribute on the input element to ‘chrome-off’, but do so only on focus! Chrome, keeps count of how many autocomplete=”chrome-off” elements exist, and if it exceeds 5, it ignores the rest! If we remove the autocomplete attribute on blur, then it seems to be fine.

React implementation below:

export const useAutoComplete = (ref, { autoComplete, onFocus, onBlur }) => useMemo(() => ({
onBlur: autoComplete ? onBlur : (...args) => {…

As mentioned in my React Hook Form 6 month update, I alluded to needing to implement our own, custom hook in order to accomplish our needs. At a high level, what was lacking from React Hook Form was as follows:

  • A clean way of updating the Redux store with the resulting changes
  • Immediate access to casted values
  • Formatting capability
  • Encapsulation of common input attributes

All told, it took about 100 lines of code to add everything we needed for the entirety of our system. Due to the fact that our source code is not open sourced, I will speak to…

React Hook Form logo
React Hook Form logo

At the time I wrote my justification of React Hook Form, our adoption of it across the site was pretty low. Our scenarios were rather trivial and we’ve had a chance to expand React Hook Form (RHF) across several new use cases (1 implementation to 6, inclusive of API interactions). Now that we’ve got more under our belt, it seems worthwhile to post a follow up with the issues we ran into, and how we addressed them within our RHF framework.

The original intent of adopting RHF was to make React more approachable to our broader team, which consists mostly…

React and Forms, we’ve all been there

My biggest complaint about React is forms. Not because I think React took the wrong approach in how forms are implemented in React, but because it’s the most challenging problem in using React.

Many frameworks have their own solution to forms. AngularJS did this extremely well. Formatter pipelines, parser pipelines, validation built in, classes added and removed from elements based on status…it was great!

Until you had to do anything that didn’t fit the mold that AngularJS had in mind. It was an absolute pain to interact with forms if you needed to do anything special!

So React did what…

When we left Omaha, I was apprehensive, to say the least. What we had signed ourselves up for was well outside of our comfort zone. Were we really going to drive through two mountain ranges with fully loaded cars and expect to make it to Seattle safely? Had we really just sold our home we spent almost our whole married life in? Was it going to be OK that we left our friends, co-workers, and relatively close family behind to move to a new city over 6 times larger and 2 timezones away?

The shock of all of the questions…

On the drive back to Portland I couldn’t help but think about what life would look like out there for us. If only we had infinite lives to live to see what each option would look like!

Little did I know when that was written, I would be faced with the most difficult decision I’ve made in my adult life very shortly after making that statement.

I was contacted for a chance to interview in Seattle for Zillow, leading me to accept a position as a front end engineer.

This decision was months long. I can not begin to express…

Storybook is a tool my team has been utilizing in React to effectively develop reusable components. Simply put, Storybook is a kitchen sink of components written by a dev team that can be implemented in an application. It provides a standalone development environment based on stories defined by the user. I will be speaking to our usage of Storybook with React, but it also supports Vue and Angular 4+.

We have found that Storybook provides a myriad of benefits:

  1. Faster development time of reusable components
  2. Faster development time of complex components
  3. Better edge case coverage
  4. Quicker feedback loops between designers…

First and foremost, I need to thank my wife for planning an amazing trip. She spent quite a few weeks on Pinterest finding places to stay, things to do, and basically formed a vacation to fit the things I love most: trees, nature, and a chance to depart from the sprawling concrete that makes up my day to day.

I am not an avid vacation blogger, but there was too much not to share. I hope you enjoy!

Astoria: More than just the Goonies

Highlights: Astoria Column, Rogue, Buoy Bay, and Fort George
Shortcomings: Mo’s!

Whenever I bring up Astoria, I hear “Isn’t that the home…

Evan Williams

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