DEV Community: Ross Creighton

[Boost]

Ross Creighton — Mon, 02 Dec 2024 03:10:04 +0000

A Data Pipeline for 1 million movies and 10 million streaming links

Alper Ortac ・ Dec 1

Code quality is overrated

Ross Creighton — Wed, 23 Jan 2019 20:10:18 +0000

If you're like me, you worry a lot about whether the code you write is "good enough".

For the past year I've been building Gush, a personalized guide for things to do in NYC, which is currently in private beta. I'm constantly asking questions like "is this properly abstracted?", "does this have enough documentation?", "is this easy to reuse?", "is this maintainable in the long term?", or "is there a smarter way to write this?". Answering these questions is a valuable exercise, no doubt.

But Gush's future is uncertain. Code quality doesn't matter if we fail to gain user traction. I've had to learn to stop improving my code a bit earlier than I might like, because user's don't care how good the code is. For situations like mine, I think "code quality" needs a slightly different definition.

The first measure of code quality should be "does it work?". The next most important measure of quality is "does it provide an excellent experience for our users?". Until you prove that your product has traction, all other measures of quality are nice-to-have's.

Spending time on code quality is a privilege - one that must be earned by building a product that people love.

I'm not advocating sloppy code. I care about code quality and I do everything in my power to avoid accumulating tech debt. But for early stage projects, you have to find a balance, and that balance isn't always pretty.

CSS Flexbox in 30 seconds

Ross Creighton — Mon, 15 Jan 2018 06:57:01 +0000

Flexbox is a CSS layout mode that aims to simplify responsive layout development. Flexbox layouts use two types of elements: flex containers and flex items. Flex containers have a primary axis (called the main axis) and a secondary axis (called the cross axis). Flex items are nested inside flex containers and can be aligned, sized, scaled, and ordered relative to the main or cross axis of the container. The visual order of flex items on the screen is independent of their HTML source order.

CSS Modules in 30 seconds

Ross Creighton — Fri, 12 Jan 2018 16:50:24 +0000

CSS Modules allows us to write CSS rules that are restricted to a certain part of the UI. It is not an official specification or browser implementation, but rather a process enabled by a build tool like Webpack. In contrast to a regular CSS selector, which can match any element, a CSS Modules selector can only match elements in a specific part of the UI (e.g. in a specific React Component). Build tools accomplish this by transforming the selectors we write into new, globally unique selectors and then applying the new selector to the associated UI element.

Why React Needs Redux

Ross Creighton — Tue, 05 Dec 2017 07:18:03 +0000

Background and Component state

Sometimes the UI code that a Component generates needs to change after the initial render (e.g. in response to a user interaction or network request). To enable these dynamic UI’s, React gives us Component state. Component state is an extremely useful and well-designed feature, but when used incorrectly, allows us to create brittle Components that are a nightmare to maintain, reuse, and test.

The problem

The problem arises when we attempt to use Component state to manage the state of an entire application. In real-world apps, certain types of state need to be shared between Components. A common example of this is authentication state, because many different Components of an app need to know if a user is logged in and who that user is. Let’s consider two components in an imaginary application: <UserMenu />, a dropdown user menu that lives somewhere in the nav bar, and <LikeButton />, a button somewhere in the body of the page that allows a user to like a post. Both of these components need to know who is logged in. It is possible to share the user data between these two components by keeping it in a parent's component state, e.g. <App />, and passing it down through the component hierarchy as props. Unless an application is extremely small or mostly stateless, this becomes a headache very quickly.

When we take the shared component state approach, we end up creating large quantities of "pass-through" props, which do little else other than shuttle along data and clutter up all the components in between. On top of that, the end users of these pass-through props (UserMenu and LikeButton) end up with a large prop surface area. In order for them to render, their parent must supply them with the many props that they need.

Components that require many props are more difficult to reuse. (<LikeButton /> vs <LikeButton loggedIn={this.props.loggedIn} username={this.props.username} likePost={this.props.likePost} />). All those props have to be typed out every time we want to use a LikeButton. This problem becomes even worse when testing a component, as each function and piece of data passed into a Component as a prop may need to be mocked when being tested.

Things get even more messy when a Component needs to change the shared component state. Imagine this: <App /> passes an onLike callback through the component hierarchy down to <LikeButton />. When a user clicks the button, <LikeButton /> makes a network request and then calls onLike. The callback calls setState on <App /> to record the change to the shared state. This type of arrangement creates complicated relationships between components that are very difficult to understand and change.

How Redux helps

With Redux, all of our data lives in a single Store, and Components can subscribe to only the data they need, from wherever they are being mounted. The shared state previously stored in <App /> in our example is moved to the Redux store. When <LikeButton /> mounts, it simply subscribes to the data that it needs from the Store - the programmer doesn’t have to type out a bunch of props being passed in from it’s parent. And if <LikeButton /> needs to change shared application state, it can import actions or action creators directly and dispatch them. Instead of a method on <App />, onLike becomes an action creator.

Conclusion

Redux helps us do less typing, write less complicated code, and develop Components that are free of coupling and easy to reuse.

ReduxJS in 30 seconds

Ross Creighton — Mon, 09 Oct 2017 03:00:42 +0000

Redux is a JavaScript library that aims to simplify how we manage stateful data. Redux keeps all of our data in a single JS object called the Store. A single function, the reducer, is responsible for making modifications to the Store. We trigger the reducer by 'dispatching' an action - a JS object that describes how our data should change. The reducer function receives the action as an argument and makes changes accordingly. Other parts of the code (usually React Components) can subscribe to data in the Store. When data changes, Redux notifies subscribers of the change.

ReactJS in 30 seconds

Ross Creighton — Tue, 03 Oct 2017 16:16:19 +0000

React is a JavaScript library that aims to help us write user interface(UI) code. React’s fundamental building block is the Component which, in its simplest form, is a JavaScript function that generates UI code (usually HTML). The generated UI code is then rendered by the device. A Component represents a small portion of the UI. Many Components are used together, or composed, to create entire views or applications. React Components can receive data that is used to generate the UI code. Whenever a Component’s data changes, it will automatically regenerate the UI code.