Posts

Showing posts from 2018

JavaScript: Porting from react-css-modules to babel-plugin-react-css-modules (with Less)

I recently found a bug in react-css-modules that prevented me from upgrading react-mobx which prevented us from upgrading to React 16. Then, I found out that react-css-modules is "no longer actively maintained". Hence, whether I wanted to or not, I was kind of forced into moving from react-css-modules to babel-plugin-react-css-modules. Doing the port is mostly straightforward. Once I switched libraries, the rest of the port was basically:
Get ESLint to pass now that react-css-modules is no longer available.Get babel-plugin-react-css-modules working with Less.Get my Karma tests to at least build.Get the Karma tests to pass.Test things thoroughly.Fight off merge conflicts from the rest of engineering every 10 minutes ;) There were a few things that resulted in difficult code changes. That's what the rest of this blog post is about. I don't think you can fix all of these things ahead of time. Just read through them and keep them in mind as you follow the approach above.…

JavaScript: Upgrading from MobX 2.6.0 to 2.7.0

As usual, you should check out the CHANGELOG. However, let me point out a few things specifically:

If you have something like: observable({ @computed get someProp() { ... } }); your code will work in 2.6.0, but in 2.7.0 reactions won't occur properly. Your tests will end up timing out. It needs to be: observable({ get someProp() { ... } }); Note, there's no deprecation warning or anything. Also note that this doesn't apply to situations where you're using a class. Those will continue working as before.

As of 2.6.2, toJS no longer recurses once it hits something that isn't observable. Hence, if you have an observable object with a non-observable array with observable objects in it, MobX will only convert the outer object "to JS". You'll need to call toJS again for the things inside the non-observable array. This can cause painful to debug errors.

This change was announced for 2.6.0, but it actually happened in 2.6.2 which means that upgr…

Doing Multiple Searches in VS Code While Refactoring

Image
I spend a lot of my time refactoring code across a very large, legacy codebase at work. Often times, I'll do a search for something and work my way through the results over a period of days. Sometimes, something I see might lead me to do another search and a minor refactoring job which is part of the overall refactoring job. Hence, sometimes I end up with a "stack" of different searches which represents all the parts of the overall refactoring job. In each of these search results, it's important to not "lose my place" as I go down the list.

WebStorm / IntelliJ / PyCharm support this workflow really well:

Notice, I have multiple search tabs open at the same time (which is missing from VS Code). I can cross things off the list (which you can do in VS Code via deleting the item). And I don't lose my place in the list when I edit the code (another key benefit over VS Code).

NetBeans also lets you have multiple search result tabs at the same time.

It's …