Today I learned about a handy utility called eslint-config-prettier-check which I saw referenced in this GitHub issue.

I was editing a .vue component in Visual Studio Code. I had a code section with red underlines, generally indicating that eslint was not happy with something. I could see it was a formatting issue, so I used eslint --fix to solve the issue and re-format the code. But then that triggered a new lint problem where Prettier was now unhappy with how eslint had formatted the code. The difference between the two is small, and involves a couple of indented spaces. See the images below for both examples.

Today I learned more about Apache virtual hosting and redirection. I decided to change my server host to Digital Ocean a few months ago. There was nothing wrong with my then host, it was a shared web host, which I mainly used to access and manage with cPanel.

During my day job I have been administering a CentOS based virtual server hosted by Rackspace and have become more comfortable with using a SSH to manage it. Comfortable, but still with lots of Googling and Stack Overflowing.

So I thought I would challenge myself a bit and make the jump to Digital Ocean and take more control of my own server. I wanted to be able to make any sites I run use SSL via Let’s Encrypt. This was not possible with my old host, as they had a more traditional “buy a certificate” business model and I could not administer the server to install Certbot.

After setting this new server up and getting neilmagee.com served on port 80, I used Let’s Encrypt to generate some certs for the www and non-www versions of the sites (Why? See notes at end of article). This worked well, and I could now access https://neilmagee.com and https://www.neilmagee.com. My goal was to redirect all traffic (http{s} and www) to my canonical domain, https://neilmagee.com.

Today I learned how to get Jest to work with Babel 7. Often development involves tool configuration. I have lost many hours to this over the years. Something changes a version number and suddenly you are hunting through Stack Overflow and GitHub with a good idea of the problem, but lacking the magic inscriptions to solve it. Or there are version conflicts. Today’s example is the latter.

I was writing a small tool for a maths problem, Number difference table, and I thought it would benefit from having some unit tests written for it. I wanted to test some of the calculations and using the UI over and over, or console logging had become tedious.

So I chose to use Jest and installed it.

yarn add -D jest

Today I learned a bit more about why setting props against state is considered an anti-pattern. After my previous article, I was not happy with the component. It still felt like getDerivedStateFromProps was a hack rather than a maintainable fix. Plus in using the component, I was still triggering bugs that were quite situational.

I read more on the react blog and the recap really nailed what I needed to do.

For example, rather than a child accepting a “committed” props.value and tracking a “draft” state.value, have the parent manage both state.draftValue and state.committedValue and control the child’s value directly.

This accurately described a process, to make my component simpler (I think it qualifies as a controlled component now), that would remove side effects. So I set out to remove state from this component and make it’s parent responsible for passing in the correct data as props.

Today I learned how to use a new(ish) React lifecycle hook called getDerivedStateFromProps (link). I have struggled a little bit with form components that allow you to edit data. In my example below it is “user” data, but in reality this could affect all forms with any data in React.

Overview

The reason for the struggle is a slight conflict for the one true source of the data for the form. When the “user” is edited, and the user form component is used, data is fed into it via props from it’s parent component. So the Employer and Job title current values can appear in their relevant inputs.

That would be ok if that data was static, but the data is not and it needs to be editable. So the props are copied into the user form component state. And this state is used as the value of the relevant inputs. That allows the inputs to receive new data, which triggers off a chain of events.

The new data is processed via a handleChange event in the user form component. Two things happen, it is added to the current state and also passed to a parent component for other actions to happen. When that parent component is done, it sends that data back to this user form component as props and the cycle can continue.

Today I learned how to sort out a local mistake in Git¹:

$ git commit -m "Something terribly misguided"             # (1)
$ git reset HEAD~                                          # (2)
<< edit files as necessary >>                              # (3)
$ git add ...                                              # (4)
$ git commit -c ORIG_HEAD                                  # (5)

1. This is what you want to undo
2. This leaves your working tree (the state of your files on disk) unchanged but undoes the commit and leaves the changes you committed unstaged (so they’ll appear as “Changes not staged for commit” in git status, and you’ll need to add them again before committing). If you only want to add more changes to the previous commit, or change the commit message², you could use git reset --soft HEAD~ instead, which is like git reset HEAD~ (where HEAD~ is the same as HEAD~1) but leaves your existing changes staged.
3. Make corrections to working tree files.
4. git add anything that you want to include in your new commit.
5. Commit the changes, reusing the old commit message. reset copied the old head to .git/ORIG_HEAD; commit with -c ORIG_HEAD will open an editor, which initially contains the log message from the old commit and allows you to edit it. If you do not need to edit the message, you could use the -C option.

Today I learned about PHP The right way. Whilst I am a front-end developer who focuses on JavaScript, CSS, HTML, UX, design etc etc, I am still responsible for writing PHP every now and again. That can be Wordpress themes or plugins, login systems and in the past I have written basic e-commerce. PHP is still my server side language of choice for my own projects.

I have made effort in my JavaScript to try to follow some practices - ESLint, Prettier for code formatting, use Babel, learn design patterns and more. But my PHP code style has always remained pretty procedural. Import some classes, set some variables, handle form input, and then write to a view using a template language (if possible). There is always inevitably a bunch of if/else statements. I never really feel like I am writing as clean code as my JavaScript and that my PHP knowledge is probably a bit dated.