Netscape’s website in 1998 (source: https://www.webdesignmuseum.org/exhibitions/web-design-in-the-90s/netscape-1998)

At the beginning of the web, there was no web layout. The ability to have a visual design wasn’t even the problem that was being solved. The founders created HTML’s with a single purpose: to send and receive content that was agnostic of the operating systems sending and receiving them. Styling that content was not even on the radar.

As the web began to be adopted for commercial use, this lack of styling left a significant vacuum that needed to be filled. Eventually, CSS would fill that void, but the road to get there brought some innovative solutions. …


Hey guys, I started the Non-Traditional Developer to write about the things I thought would have helped me when I made the switch from a career in finance to be a web developer. When I sent out that first post, I never knew if anyone would read it. Here I am, several posts later, with a small but awesome community of developers who find value in my posts enough to subscribe.

Despite that, I have felt there has been something missing. Oftentimes, I have fun ideas I want to chat about, but the blog never felt like a great forum…


I am going to let you in on a secret of writing code, and of life in general. Nothing will ever be “perfect.” You will never have the perfect portfolio website or the perfect resume to be able to start applying for jobs. You will never have the perfect name for your variable, nor will you have the perfect folder structure that works for every project.

The more and more I write code the more and more I am convinced that we like to trick ourselves into thinking we are doing important things, but really we are just procrastinating. …


I find it interesting that we feel we have to justify our technology choices to the world. No one cares if you use Redux and Angular with WordPress as your backend. The only people who have to explain your choices to are you and your team.

Ultimately, you have to answer only two primary questions when you justify your technology choices to yourself. Does this technology help or hurt your ability to ship the features you want to your users in a timely manner. The second is how easily you can back out of this decision if it proves to…


Photo by Suzanne D. Williams on Unsplash

When I started with React, React had one way to manage state: Class components. Any time you needed to lift or lower state in your React App, you often had to refactor function components into Class Components to make that possible. This could cause some very tricky refactoring because now you were passing not just state, but class methods that updated that state. These methods also had to be bound to the correct lexical scope, otherwise, our App would not run correctly.

This was why Redux was often brought in to React Apps. Redux, being a general-purpose global state library…


Photo by mohammad takhsh on Unsplash

One of the most common problems to solve in a React app is how to share state across multiple components. In React, one should only “lift” state up to the closest common parent in the component tree. From there, you typically share state by either passing props down, or by lifting components out via composition, or some combination of both, like this:

const App = ({user})=>{
const user = useUserResource()
return (<Layout>
<NavBar avatar={user.avatar} userId={user.id}>
<Main id={user.id}>
<SideBar>
<Title>{user.name}</Title>
<Description>{user.description}</Description
<SideBar>
<Footer/>
</Layout>)
}

Most of the time, this pattern is sufficient. But sometimes your components need to be stateful…


Photo by Curology on Unsplash

Ever since ES2015, also known as ES6, JavaScript has moved away from a waterfall style approach where loads of features were released at once under a major version, to a more agile approach where new features are released annually as the spec is completed. This has allowed new language features to be added every year since. These features can be large and small, but they all tend to be well battle-tested through the use of transpiling and polyfills before their official release. …


Photo by leander li on Unsplash

Over a few of my previous blog posts, on CSS Grid Component Patterns, I have been showing you how to take advantage of CSS Grid in a composable componentized way. We have built some very simple components like a Stack and Split. We have then expanded upon that knowledge to build some more complex compound components in the Columns and Column component. There is one more very useful component that we can build using CSS Grid that solves one of the biggest challenges of CSS layout: A responsive grid of items. …


Photo by Pankaj Patel on Unsplash

When CSS was introduced, it was a game-changer to how we style our web pages. It introduced many things, including the box model, giving us the ability to control properties like margin, border, and padding. Unfortunately, the original spec was created naively, only accounting for written left-to-right and top-to-bottom languages. Setting values like, margin-top or border-left were intuitive for an English speaking audience but broke down when used in languages like Hebrew, Chinese, Arabic, or Chinese.

This lesson was learned by the time that Flex-box and CSS Grid were developed, so they don’t suffer from the same issues, but what…


Photo by Caspar Camille Rubin on Unsplash

Hooks have changed the way we write React components. It encourages a much more functional and composable style of coding that was difficult to achieve with class components. One of the biggest game-changers is the useState hook.

Before hooks, React state was managed by a single state property on the class component. This property had to be an object and had to be updated with a class method called this.setState which despite its name, didn’t set the state, it patched the state with whichever object we provided it. Though this worked well, it encouraged us to throw all the state…

The Non-Traditional Developer

Spread the Joy

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