Have you ever designed an app that looks beautiful on your desktop monitor, but explodes into a shattered mess the second you open it on mobile or a laptop? Unless you’re Pablo Picasso, that’s probably not what you intended.

Responsive design is the practice of styling content to automatically adapt to varying screen sizes, so that a user can interact with it regardless if they’re on a massive professional gaming display or their grandma’s iPhone 5.

Many modern CSS libraries, such as Material-UI or Tailwind, come with some built-in responsiveness. Still, you’ll find yourself having to make the occasional manual…


Controlled form inputs are a core React concept that can be confusing for programmers new to the framework. Along with quirks like props and hooks, it’s one of the few nuances a web developer needs to understand before bringing even a basic React app to life.

Why do we need controlled components in the first place? Mutable state in React is typically kept in the state property of components and can only be changed using setState() or the useState() hook. HTML form elements such as <input> or <select>, however, also hold internal state — they track and save the information…


Hooks were introduced a little more than two years ago, when Facebook released React 16.8 in February 2019. Shifting over to hooks can be a little confusing, especially for developers who’ve gotten used to class components. Once you’ve made the adjustment, however, there’s no looking back.

Here’s what an incredibly barebones class component with state and a fetch call might look like.

Class Component

import './App.css'; 
import React, {Component} from 'react';
import CardContainer from "./components/CardContainer";
class App extends Component {

state = {jokes: []}
componentDidMount = () => {
fetch('http://localhost:3000/jokes')
.then(response => response.json())
.then(jokes => this.setState({jokes}))
}
render() { return (…


Event delegation in JavaScript.

Don’t Repeat Yourself.

DRY.

It’s one of the most common mantras repeated to, and by, newbie programmers. Refactoring code to minimize repetition has many tangible benefits. It makes code easier to read, understand and revise. It reduces load times and creates faster apps. Most importantly for students, it solidifies conceptual understanding and helps a portfolio piece stand out to potential employers.

Event delegation is often a great way to start refactoring novice JavaScript code. This allows you to place a single EventListener on a parent element that does the work of a few, or dozens, or even hundreds of EventListeners…


A black-and-white image of a laptop on a desk with a code editor open.
A black-and-white image of a laptop on a desk with a code editor open.
My new reality.

Every mountaineer, in graduating from a novice to an adept, must master the art of routefinding. Not every path leads to the summit. Often many paths will, though each comes with its own unique challenges and experiences. Finding the best way — and best can be subjective — requires exploration, flexibility and the willingness to backtrack in order to ultimately progress.

A career is like climbing a mountain. There are infinite trails that lead to the summit of retirement, an overlapping web with many twists, turns and junctions. What to do, then, when the track you’re following loses its luster…

Jeff Golden

Full-stack developer. Full-stack adventurer.

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