Studio Display Mouse Freezes Fix

My Studio Display has been freezing on me ever since I got it, no matter what firmware. I accidentally found the cause.

I’ve bought no less than 10 Logitech G305 Lightspeed mice. It’s as fast as wired, but wireless. I’ve had many different G305s plugged into my monitor, because it’s my go-to mouse.

I bought a wired one so I have a backup if I lose the dongle (which I do frequently, hence the 10 mice) and I haven’t had a freeze in days.

If you have a high speed mouse dongle plugged into your studio display, and it freezes once a day… try a wired one.

Contentful Migrations TS-Node

The docs on Contentful migration with typescript don’t work for me verbatim, today.

It says to run ts-node node_modules/.bin/contentful

But I found it necessary to run ts-node-esm instead.

Styled Components, Next.js, SWC compiler, Production Build sharing too many IDs

I ran into a hard to debug issue today.

The production build of styled-components was failing by sharing a common CSS class for many styled components, but not in dev.

The issue was also fixed when switching to babel from SWC. But that turned out to be another false road.

I started a repo to try to reproduce the bug, but my patterns still failed to fail: https://github.com/department-nyc/next-swc-styled-components-bug/blob/main/next/components/example3.js

The bottom line is that every styled component was outputting a .styledComponentId that was exactly the same, so the logic in the ID generator was somehow not working well with my particular setup. I know that it uses filepaths and all kinds of info to try to reliably identify components uniquely, so it’s just a black box to me.

Ultimately I found the solution in an undocumented option in the typescript typings: withConfig({displayName: <insert unique>}).

const Component = styled.div.withConfig({
            displayName: styleName,  // this was necessary to hint to styled components that these components are dynamic/different. 
        })<TypographyModifierProps>`
            ${handleReset}
            ${css_}
            ${typographyModifiers}
        `

Now, I’m not sure why it works in the example. It may have to do with the monorepo structure or barrel files confusing the file paths. No idea, and not worth digging into. In today’s frontend world, you just have to compartmentalize some things as black boxes.

Bottom line: if you have issues with production styled component ID’s being wrong/the same, try logging the IDs first and see if styled-components is able to generate unique ones as expected. If it can’t, try to give it hints as to its uniqueness.

It looks like withConfig also supports a componentId param to fully customize that internal id, but beware of using unsupported features.

Styled Component CSS Prop Not Working w/ Next.js

If the css styled-components prop isn’t working in Next.js, most answers will point you to the babel plugin (‘babel-plugin-styled-components’) not working, in a bug state, or config problem.

If you’re using the Next.js custom compiler which replaces Babel, the current version simply does not support the css prop. https://nextjs.org/docs/advanced-features/compiler

Either accept slower builds by bypassing the custom compiler with a .babelrc file or find ways around using the css prop.

I basically only use the css prop for defining local css vars, so just pass those vars to the styled component instead if you want to lean on its css engine.

You can always use regular old style as well, if you don’t need anything offered by styled components like selectors.

Use styled components with framer motion

The cleanest way to use framer motion divs with styled components is by passing the replacement motion component via the as styled components prop.

<styles.MyStyledComponent as={motion.div}></styles.MyStyledComponent>

This maintains the same mental flow as replacing a native HTML element with the motion.<ELEMENT> equivalent.

Jekyll Deps — An error occurred while installing ffi (1.9.10), and Bundler cannot continue.

I’m maintaining some very old Jekyll projects on an M1 or otherwise modern system. If you get this error, there are many solutions online but the simplest is to stop trying to install an old dependency.

Try updating the ffi version via bundle update ffi

If your build works after this (e..g bundle exec jekyll) you’re good to go.

Making the old versions of software work is often much hackier.

Contentful Management API (CMA) how to upload references

This is not documented. If it is, please show me where.

To upload a reference field, ensure the reference already exists, and upload an object containing the sys key whose value is an object containing type linkType and id

Example: you have an Entry with id: MY_PARENT_ID with a MY_REFERENCES field.

this.managementClient
      .getSpace(this.config.space_id)
      .then((space) => space.getEnvironment(this.config.environment));
      .then((environment) => environment.getEntry("MY_PARENT_ID"))
      .then((entry) => {
        entry.fields = {
          ...entry.fields,
          MY_REFERENCES: { // replace with your own multi reference field
            "en-US": [
              {
                sys: {
                  type: "Link",
                  linkType: "Entry",
                  id: "my_reference_id"
                },
              },
              // ...repeat as needed
            ],

docker-machine can’t connect to droplet

docker-machine ls outputs: Unable to query docker version: Cannot connect to the docker engine endpoint

Apparently it’s a problem with the latest docker engine version, and you can specify an override to docker-machine via --engine-install-url

There are various versions available here: https://github.com/rancher/install-docker, and this company/repo seems to be verified by docker.

Source: https://www.digitalocean.com/community/questions/unable-to-verify-the-docker-daemon-is-listening @sithembisok

I also had the same problem with Linode so it’s probably an issue on any host. The solution comment above is quite old, so I imagine a lot of folks in the entire ecosystem are having issues. The low visibility and lack of fix on the latest version kind of struck me as odd.

Here’s my Digital Ocean command:

docker-machine create \
        -d digitalocean `# driver` \
        --digitalocean-access-token your-token `# ` \
        --digitalocean-image ubuntu-20-04-x64 `# LTS release` \
        --digitalocean-region sfo3 `# region` \
        --digitalocean-backups=false `# backups` \
        --engine-install-url "https://releases.rancher.com/install-docker/19.03.9.sh" `# use older docker engine; current broken ` \
        default `# machine name`

ERR_UNHANDLED_REJECTION Unexpected token: punc (.) terser

I’m getting a prod only build error that wasn’t very helpful with no line numbers and an error thrown deep in terser.

This error for me turned out to be unsupported handling of the new Optional Chaining operator (foo?.) — make sure if you’re using it your bundler configurations are handling said feature.

In my case I’m using a node environment set up by what looks like a Contentful UI Extension starter app, so I don’t want to modify any build configurations. I just removed it and moved on.