I really like this interview between Courtland Allen and Daniel Vassallo. They discuss the benefits of working for yourself.

It's all about control of your lifestlye, the freedom to choose what you work on, and the benefits of working on a lot of different things at once.

It's a big risk to leave full-time employment. One way to help manage that risk is to do many small experiments and develop a variety of different sources of income in order to smooth out the sharp edges of working for yourself.

Since leaving full-time employment, I've been able to diversify my skillset through the freelancing gigs I take on. I can now animate my websites, manage online shopfronts, write WordPress themes, choose the best images and formats to optimize the user experience, and much more!

Working for myself, I also have a lot more energy to focus on areas I want to deliberately improve. I upped my CSS skills big-time with Josh Comeau's course, I've learnt all about the WordPress ecosystem, and now I'm focusing on learning about 3d programming and how I can apply that to my existing skills.

One of the big takeaways for me from this talk was that every person has a number of things that they know very well and would be worthwhile (and perhaps even profitable) to share with others.

Another fantastic talk from the CSS maestro Josh Comeau.

I particularly enjoyed the part about flow layout and how the inline layout works.

A great talk about Conway's law: The Only Unbreakable Law.

Conway's law suggests that organizations inherently replicate themselves in the systems that they create. In other words, the structure of the organization (its hierarchy of teams and committees etc.) is mirrored in the system that is created.

Casey (the speaker) further expands on Conway's original point: systems not only mirror the current organization, but also all of the ones that might have existed before.

He uses Microsoft's Windows project as an example, talking about how a single volume slider can be replicated across many different teams, each looking and behaving differently because the teams were not able to work communicate with each other rapidly (or at all).

The main takeaway is, if we want to build well-designed systems, we have to create structures that are both lean and flexible. When it comes to software, this applies to both the organization and the codebase.

Casey points out the rather extreme viewpoint that this even applies to "the things in code that restrict its ability to be optimized together, such as encapsulation or using a library...".

If we could 'magically' get past using these constructs, we would end up with a better design.

I'd say the main thing I'm starting to think about after watching this talk is whether I should be striving so hard to be DRY all the time. Perhaps a bit of repetition can lead to flexibility which can then lead to better design. Time will tell.

Pro-tip: you can emulate user preferences in the Chrome developer console.

cmd + shift + p: type in something like 'prefer' and see:

Add a website link preview with Open Graph tags and Remix.

What it might look like (in Discord)

Code

// app/root.tsx (but you can define the meta function on any route)

export const meta: MetaFunction = ({ data }) => {
  // Loader data may not be available in the case of an error
  const rootUrl = data?.rootUrl ?? "https://incremental-it.com";

  return {
    title: "Incremental IT",
    description: "A software development company operated by Charles Hebert",
    "og:url": rootUrl,
    "og:type": "website",
    "og:description":
      "A software development company operated by Charles Hebert",
    "og:image": `${rootUrl}/images/IIT_logo_black_background_white_300x300.png`,
  };
};

Output

<meta property="og:url" content="https://incremental-it.com">
<meta property="og:type" content="website">
<meta property="og:description" content="A software development company operated by Charles Hebert">
<meta property="og:image" content="https://incremental-it.com/images/IIT_logo_black_background_white_300x300.png">

Browsers are starting to allow passing user preference request headers to the server, if the server asks for them.

For example:

Accept-CH: Sec-CH-Prefers-Color-Scheme

...will ask the browser to forward the user's preferred color scheme: light or dark.

This is really useful for providing the correct color scheme styles from the user, without having to do it on the client (a potentially causing a flash of the wrong color scheme).

Just get the color scheme (at the server):

const systemPreferredColorScheme = request.headers.get(
  "Sec-CH-Prefers-Color-Scheme"
);

...and serve the corresponding styles.

See more here.

Want to add decent-looking country flags to your site?

https://flagicons.lipis.dev/

If you see:

onloadwff.js:71 Assertion failed: Input argument is not an HTMLInputElement

..when developing, it's because of some LastPass issue and not your code :)

5 Things to remember when it comes to React.memo, useMemo, useCallBack

Source: Mastering React Memo

1. React.memo is not a traditional memoization
   • React just looks at the previous value and compares it to the new one
2. Think of React.memo as "Render if props have changed"
3. useMemo and useCallBack are for reference identity
   • useMemo: objects and arrays
   • useCallBack: functions
4. Use useMemo for expensive calculations
5. Don't sweat component re-renders too much

Also, I've added support for rendering code in these 'thoughts'. So, look out for some handy programming tips on here in the future:

hello();

function hello() {
  return "Hello, world!"
}

I just migrated this site to Remix.

I'm really pleased with the user experience. The framework has accelerated a lot of what I can do to the point where I'm comfortable managing a database and a bunch of dynamic forms.