Image for post
Image for post
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, had two major selling points. First, it provided a centralized state object, called a store, that could be subscribed to whenever changes took effect. Secondly, it was built off of the flux architecture, a functional style architecture that enforces a unidirectional flow of state management. …


Image for post
Image for post
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 while sharing that state with other components at various levels in the component tree. What we need in those situations is to have some type of state “Provider” higher up in the tree that can broadcast state down to any “Consumer” that wants to listen to that state. …


Image for post
Image for post
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. …


Image for post
Image for post
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. …


Image for post
Image for post
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 languages that are written left-to-right and top-to-bottom. Setting values like, margin-top or border-left were intuitive for an English speaking audience, but break 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 about these original property values? Luckily for us, the CSS working group has revisited those original property values and added (not replaced) what is now called CSS Logical Properties. For this reason, we all need to stop using the original property values and instead use these new logical properties, so we can build more resilient layouts that can handle the needs of all of our audiences, no matter the language used on their computer. …


Image for post
Image for post
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 in this one object, even though the value were not related or updated together. …


Image for post
Image for post
Photo by Yomex Owo on Unsplash

Not long after I received my first dev job, I started learning about the importance of web accessibility. It isn’t that I didn’t know about it or think it was important, I have a blind cousin and a father with multiple disabilities including hand tremors caused by Multiple Sclerosis. It’s not like I didn’t hear about it when I was learning web development either. Honestly, it was never emphasized in any of the resources I found to learn web development and I didn’t know enough to go looking for any resources either.

So there I was, a junior dev full of imposter syndrome, discovering that I had another huge hole in my knowledge base, and if I admitted that to anyone, then I would be revealed to be the fraud that I am. So I went on writing code, feeling guilty that I was potentially writing inaccessible code. (Never noticed that no one called me out in code reviews because they didn’t know either…


Image for post
Image for post
Photo by sarandy westfall on Unsplash

Source control is one of the most important tools you can learn when becoming a developer. Source control is used for many things. It’s used to keep a history of your code. It is used as a collaboration tool for team members working on the same code base. More and more, it has become the standard way to trigger automated code integration and deployment. Though there are several source control tools out there, Git has become the defacto standard.

Despite this, Git can be intimidating, especially for new developers. Luckily, Just like how you can get by very well only learning the most common words in a spoken language, you can be very successful at Git with just four commands. …


Image for post
Image for post
Photo by Taras Shypka on Unsplash

JavaScript has a pretty diverse set of developers. One of the biggest reasons is that JavaScript supports multiple programming paradigms. JavaScript can be written imperatively, you can use an object-oriented approach, and it can be written in a functional style.

Each of these paradigms is beneficial and helps you write better code, but they are very different in the way they choose to solve problems. There is no “superior” way to program, but instead one should learning all three styles of programming to help you have more solutions to solve problems.

Of the three styles, I believe functional-style programming has the largest barrier to learning it. This is even though anyone who has written and non-trivial JavaScript code, probably has used functional style. I believe this is not that functional style is hard to understand. It has more to do with the unfamiliar terminology and emphasis on “theoretical” definitions and examples. And as much as many of us find it interesting, there are not enough “practical” examples that help you get started. …


Image for post
Image for post
Photo by Ben Hershey on Unsplash

CSS Grid has changed the way we think about layout on the web. Components have changed the way write code for the web. Put them together they are better than peanut butter and chocolate. In a previous post, I went over the two patterns you can use when building layout components with CSS Grid: The Stack and The Split components. In this post, we will be going into two more layout components using CSS Grid

The Columns and The Column Component

One of the longest-standing traditions in CSS frameworks is the concept of a twelve column grid. It opened up the world to a real, non-document flow-based layout. So intuitively might want to replicate that pattern using CSS Grid. …

About

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