trial and stderr

Here's a fun Ubuntu exercise:

1. In a running terminal, restart GNOME using gnome-shell --replace.
2. Realize that it's going to be running your GUI shell out of the foreground of a terminal, decide not to worry about it.
3. Forget about that terminal for a while, then come back to it.
4. Wonder what's producing all this weird output about GTK, whatever, it's probably not important
5. Ctrl-C

So from here, your goal is to get the gnome-shell going again without losing the windows you had open.

Okay, ya got me, this is actually just a screw-up I made that was somewhat interesting to fix.

The key steps, in Ubuntu Desktop 18.04, are...

• Use ctrl + alt + F<#> to switch TTY. This produced some bizarre visual glitches, but after switching back and forth a few times, they resolved into a nice command-line login prompt.
• Enter your username and password
• Execute gnome-shell --replace
• GNOME is probably running again, somewhere. Go find it (with ctrl + alt + F<#>). Log in.
• Now that you've recovered the windows you were working on, save and close everything and restart your computer. Your nice new GNOME shell might get screwed up by something like the system suspending (mine did).

I got a new job as an OpenMRS implementer / general tech guy for Compañeros en Salud, aka Partners in Health Mexico. You're gonna start seeing posts about OpenMRS and Java development. Be warned.

I've also finally ditched Satan and come back to Linux/Ubuntu. It's not Arch or anything, but there's certainly some hilarity to be shared here.

There's a bug, it might exist in styled-jsx but it certainly exists in styled-jsx as used by nextjs, where you can't have multiple <style jsx global> tags -- only the first one gets used. A nice, not very hacky solution, (assuming you're using inline-loader or raw-loader for CSS):

// global-styles.js
import foo from 'foo/style.css'
import bar from 'bar/style.css'
export default foo + bar

import GlobalStyles from './global-styles'
// in component
<style global jsx>{ GlobalStyles }</style>

When you find some specific, deeply-buried page of documentation with Google, but an alert tells you "you're not looking at the latest version of the docs!" and then you click it and it takes you to the docs homepage.

I'm looking at you, ElasticSearch, and Bootstrap 4 until like two weeks ago.

I wrote a component that held an Enum, made in the popularly-recommended fashion, as state:

const MyEnum = Object.freeze({
    FOO: Symbol('foo'),
    BAR: Symbol('bar'),
})

class MyThing extends Component {
  constructor(props) {
    super(props)
    this.state = { enumValue = MyEnum.FOO }
  }
  
  render() {
    return({
      this.state.enumValue === MyEnum.FOO ?
        <p>I pity the foo</p> :
        this.state.enumValue === MyEnum.BAR ?
          <p>I pity the bar</p> :
          <p>I pity myself</p>
    })
  }
}

and suddenly my app was breaking on hot-reloads, and I had written pitiably broken code! It seemed like the state was somehow becoming invalid whenever a hot reload happened.

This is because the hot reloader preserves the state, but every time the component is reloaded, our ES6 engine generates a new unique value for each Symbol, so the comparison this.state.enumValue === MyEnum.FOO is comparing an old value of MyEnum.FOO to the current one, yeilding false. So use an enum with deterministic values, like, say,

const MyEnum = Object.freeze({
    FOO: Symbol.for('foo'),
    BAR: Symbol.for('bar'),
})

All these devs like "oh, if you're using X and Y, you should really use my X-and-Y-plus-Z integration plugin, which mitigates some bugs in X that I could have fixed, but didn't, instead opting to create more bugs with this library I wrote one night after slamming four manhattans and going home alone"

If you're using NextJs, you probably want to test getInitialProps on your pages. You can call it from your un-instantiated imported class, and use the props it returns to instantiate an Enzyme wrapper. Here's a nice little pattern:

import { shallow } from 'enzyme'
import MyPage from '../components/my-page'

describe('My Page', () => {
  var wrapper
  
  beforeEach(async () => {
    const props = await MyPage.getInitialProps()
    wrapper = shallow(<MyPage {...props} />)
  })
})