At work I often encounter frontend state management that is overly complex and error-prone. Some examples:

• Fetching some data from the server, then maintaining a copy of that data in a global store like Redux
• Manually managing form state with React’s useState hook

Sometimes, state is used when URL search params should be used instead. In modern frontend programming, there is usually a right and wrong way to manage some state, depending on its purpose and qualities. This flow chart should be helpful when making a decision about how to manage some frontend state:

Server Data

Modern javascript frameworks come with data fetching solutions. For example, SvelteKit load. For a stand-alone library, I like Tanstack Query, which manages fetching, deduplication, invalidation, and more. There is absolutely no reason for you to be managing server data manually on the client, you will save yourself many headaches by using a framework or a data fetching library.

What is addressability

Web pages are accessed using Universal Resource Locators, or URLs.1 As implied by the name, the URL points to a specific resource provided by your website. In other words, it is an address: a way to communicate about where something is. When deciding if some state should be addressable, ask yourself: Should this state persist if I bookmark this page for later? Or if I share the link to this page with a friend? For example, consider a page that shows a list or grid of similar items, where the user can filter the items based on certain qualities. Frontend developers often use state to store filter selections, but using the URL’s search parameters is preferable for addressability. Imagine an ecommerce site that sells fruit. A URL for this site might look like: example.com/shop/apples?colour=red. If I share this link with my friend, they will know I meant to show them red apples. Other examples of state that should be addressable include:

• Pagination
• Search queries
• Addressing a specific tab or part of a page. Wikipedia does this well. E.g. https://en.wikipedia.org/wiki/Uniform_Resource_Identifier#Syntax, this link specifically addresses the section about URL syntax.
• Linking to a form with some data pre-filled (e.g. foo.com/register?country=CAN)
• Selections (e.g. inbox?selected=msg_456)

Other benefits of addressability:

• Browser back/forward buttons work as expected
• Search engines can index filtered pages
• Analytics can track which filters users actually use

Avoid putting sensitive data in URLs. URLs will end up in the user’s browser history, and in your logs.

Form Data

Similar to server data, modern frameworks have idiomatic solutions for form management. If you aren’t using a framework, use a form library like react-hook-form. Managing form state manually is likely to result in overly verbose code, while using a library or framework will result in more declarative, readable code. These tools will also help you to follow best practices for semantic HTML.

When to use Forms

<form> should be used when your user needs to submit input. Often, this means they are mutating some data. For example, to allow a user to update their address, you would show them an address form. Most websites use forms for search inputs. While you should consider using a form any time a user is entering input into your website, you might not be able to use forms in all cases. For example, a rich text editor like an email composer might be awkward to implement as a form. In general, a form should be the first tool of choice for collecting user input.2

1. I know URL officially stands for uniform resource locator, but "universal" works better for the point.

2. MDN has a good guide on form building.

Atlantic cod. Public Domain, Link

The fisherman of Newfoundland never thought that the cod stocks could run out. With the benefit of hindsight, their folly seems obvious, but as a fisherman in the 20th century, it would be hard to imagine the extinction of cod. Cod had been plentiful off the coast of Newfoundland since Europeans began fishing it in the 1490s (this book speculates that Europeans--Basques and the British--were fishing in North America before Columbus sailed there in 1491, though this can't be proven). Cod lay 9000 eggs at a time. They had disappeared in certain locations many times before, only to reappear somewhere else. It was not thought that humans could possibly overfish cod to the point of depletion.

The depletion of the Grand Banks (Newfoundland) cod fishery in the late 1980s could be called a black swan event. As someone who was born after the cod fishing moratorium was effected in 1992, reading this book helped me to appreciate just how surprising this was. The most economically important fish of all time, which had for hundreds of years been the main staple of many Europeans’ diets and contributed to the European settlement of North America, was gone.

Men, it has been well said, think in herds; it will be seen that they go mad in herds, while they only recover their senses slowly, one by one.

― Charles MacKay, Extraordinary Popular Delusions and the Madness of Crowds (1841)

Lately I've been reading the works of Edward Chancellor. In February of this year I read The Price of Time, a book about how interest rates affect the economy and the business cycle. It is essentially a critique of central banks' control of interest rates, and the economic distortions caused thereby. I also read Capital Returns, which he edited and wrote the forward to, have listened to his podcast, and read some of his articles published in Reuters and elsewhere. All of this reading combined to give me the impression of Chancellor as a staunch libertarian capitalist, so I was surprised by his first book, Devil Take the Hindmost, which seems ambivalent about capitalism, or at least capitalism's ability to rationally allocate resources.

The NASDAQ index from 1994-2004, showing the dot-com bubble.

I created a wiki which is intended to be a culinary encyclopedia. The idea came to me when I wanted to know about the culinary properties of rosemary–how it should be used, what culinary heritage it originates from, etc. The Wikipedia page for rosemary is too generic and not tailored towards culinary info. I was surprised that something like CulinaryWiki didn’t already exist.

I won’t be able to signle-handedly provide all the content needed by this wiki, and obviously there is a good chance that it never catches on with a wider audience. But, now it exists, and I will at least use it for a repository of my own cooking knowledge.

The CulinaryWiki page for rosemary

I’m currently unemployed. I’m not lazy; I’m waiting for the next big thing.

In the summer of 1998, I got an opportunity to talk with Jobs again. I said, “Steve, this turnaround at Apple has been impressive. But everything we know about the PC business says that Apple cannot really push beyond a small niche position. The network effects are just too strong to upset the Wintel standard. So what are you trying to do in the longer term? What is the strategy?” He did not attack my argument. He didn’t agree with it, either. He just smiled and said, “I am going to wait for the next big thing.”

― Richard P. Rumelt, Good Strategy Bad Strategy: The Difference and Why It Matters

This famous passage about Steve Jobs describes how he managed Apple. I think one’s career can be approached this way too, and I intend to try it for myself. The next big thing is not always obvious. I expect the best thing to do in this case is bide one’s time, enjoy the moment, read widely and stay curious. Let the next big thing reveal itself in due time.

A research paper from 1981, “Time resources and laziness in animals”, found that many animals spend a lot of their time doing nothing at all. We might have something to learn from our animal cousins. Inaction makes people uncomfortable, especially Westerners who are used to energetically attacking work. But not all work is worthy of one’s time; sometimes our time is better spent walking, reading, conversing, meditating, and exploring.