Worklog 080718

What I’ve done

Today I finished stubbing out all the remaining components with Material UI for the new feature I’m working on at Trinity. I also confirmed what I already suspected about an hour after I finished a lot of the state architecture changes on Saturday — shoving all the data from the feature into Redux was probably a mistake. I’m going to undo that and go back and add data from the feature to the global store after the feature is closer to finished, so I can see what actually makes sense to have access to globally.

This was exposed via a different headache — I coupled the feature’s Container component to some loading states for data that not all components for the feature utilize. But it wasn’t until I started integrating a separate screen that doesn’t care about some of the data I’m requiring to load in the Container. That’s super vague. I should post some code samples here, or at least write up an After Action Report about how this state management architecture worked for us after we finish this feature.

What I’m working on

Tomorrow I’ll pretty much just be reworking the state management (again).

Today I Learned

Today I learned about JSONP from yesterday’s episode of Syntax. I haven’t used it yet — I should look into it sometime. Here’s a great Stack Overflow post on it, too.

Interesting Links

Here’s a few links to things I’ve read, watched, or listened to:

Worklog 080618

Over the weekend and this morning, I finished implementing the new state architecture so we are now using Redux for global state and each feature has a container that holds the state for the feature and passes it down via Context. I did put the feature state into Redux, but that may have been a mistake. I may undo that and bring it back to be local state for the feature container.

Thad and I also got a lot done for DevLifts — fitStart month 2 plans started going out, we ran some numbers to see how the past month went with web traffic, and we implemented some neat new discounts. ????

Today, I spent a lot of time thinking about our component tree and refactoring all the code I had written for my new feature at Trinity. I also started [finally] writing new components — hoping to finish the UI tomorrow and Wednesday and then go back and make it all stateful. 

Today I Learned

There’s no great way to delay the unmounting of a React component…

I needed to make a Loading component show for at least 2 seconds, even if the data was already back from the API and loaded into the store. Weird, I know, but it was a UX requirement and there’s actually a business case for it in our particular instance.

I reached for componentWillUnmount and quickly figured out that the component is still going to unmount and there’s no way I can really stop it from doing that in componentWillUnmount.

I ended up doing something really hacky: I set a loading state in the feature container, and then set up a function to create a Promise and resolve it after 2 seconds. When I need that loading component to render, I just set the loading state to true and then fire the Promise function. When it resolves, it sets the loading state back to false.

Stupid, I know. But it worked.

Interesting Links

Here’s a few links to things I’ve read, watched, or listened to:

Goals for August 2018


Ship new feature at work

The feature I’ve been working on at my day job is supposed to ship on August 15. My goal is at minimum to ship it with usable compatibility back to IE11. If there’s time, I also want to ensure we have documentation, unit tests with Jest, possibly E2E tests with Cypress, no ESLint issues, good error handling, stories added to Storybook, and type checking moved to Flow. I suspect I won’t get to many of these things before August 15, but it’s still my goal to complete these things in August.


Land a bow and arrow choke

I’ve been practicing Brazilian Jiu Jitsu the past 11 months (although I took about 4 months off in the middle and almost quit), and recently I drilled the bow & arrow choke, and I’ve been pretty exclusively going for it during Gi class. I haven’t actually landed one yet in a live roll, but it’s my goal this month.


Get DevLifts to 60 paying fit.Start members

We launched fitStart a few weeks ago, and right now we are at 41 total members, with 29 of those being paid memberships. My goal for August is to double that and get to 60 paying members.


Take a few days off with my wife

I started the new job 6 weeks ago, and I’ve still been trying to grow DevLifts on nights and weekends. I also have a few freelance projects I’ve been working on during off hours, too. This has resulted in working 12-14 hour days most days the past 6 weeks, including some Saturdays.

This is certainly not manageable, and it won’t be this bad much longer (as I’m wrapping up a lot of outstanding freelance projects I had going on before I started my job), but it has gotten me to a near-burnout status. Plus, I haven’t had much time to spend with my wife.

After I ship this new feature at Trinity, I’m going to take 2-3 personal days, combine it with a weekend, and just hang with my wife. If we can afford it, we may go to beach ????. No phone, no computer — just summer vibes. ????☀


Finish 1 freelance project

As I mentioned above, I have a lot of outstanding freelance projects that were active before I started at Trinity. My goal this month is to finish at least 1 of them.


Read 1 book

I fell out of the habit I had earlier this year of reading before bed, and my goal is to re-establish that. I think this will be great for me, as I’ve been getting the ‘ol eye twitches (I suspect from too much screen exposure) and my sleep has been pretty poor. Pretty sure I’m over-stimulated. I’ll be re-establishing reading (specifically, reading fiction, as it’s been proven to help you sleep better by getting your brain into a beta state vs alpha) and eliminating screens an hour before bed time this month.

I’m a pretty slow reader, so I’m shooting pretty low (just 1 book).


Make 1 open source PR

I made my first open source Pull Request a few weeks ago, but it wasn’t much (just a docs tweak). I’m pairing with a dev from Gatsby next week, and I’m hoping to learn more about the project and find an issue I can contribute to.


Sort through my Evernote

I follow the GTD philosophy using Todoist and Evernote. However, my Evernote has fallen a bit out of organization with everything going on the past 6 months, so I have about 400 notes in my Inbox that need to be tagged and archived. It’s been on my todo list for months, and I’m going to finish that this month.


Restart my newsletter

I used to write a weekly newsletter with helpful tips for entrepreneurs and developers. I’m planning to re-launch my newsletter this month, but need to finish thinking through the format.

I think I’m going to write exclusively for devs for now (and maybe make a separate entrepreneur list later), and I’m going to write daily emails instead of weekly.

I’ll tell you how it all went in September! ????

Worklog 080318

What I’ve done

Today I mostly worked on refactoring — but I did start implementing a new state management architecture. Inspired by this post I found on Medium, this is what I came up with:

For each feature, we’ll have a container that is responsible for retrieving data from our store as well as storing data into it. It may also have some local state that will be needed feature-wide. We’ll then create a Context using React’s new Context API (new in 16.3) and use that to pass data down to whatever components we need to.

This way, we get the benefits of Redux to share state that’s needed across the whole app, as well as less of the Redux boilerplate that comes along with shoving everything into Redux. Using the Context API, our dumb components can easily grab whatever props they need without prop drilling.

This setup feels great to me. Tyler, my frontend colleague, felt good about it too. I’ll post an update in the future after it’s implemented to share how it’s working for us.

I also set up Continuous Integration with CodeShip today.

What I’m working on

I’m currently still working on the above, as well as continuing to research how to automatically keep Rails API docs up to date (and how to keep sample data automatically in sync with my json-server mock API — thoughts appreciated!

Today I Learned

Had a lunch and learn with my chief architect — learned all about Microsoft’s history of trying to force people into upgrade cycles so they could sell more software, and how they tried to kill the open web and create their own private web so they could create a cash-producing ecosystem where they would have gotten paid for Visual Studio to write web code, paid for web hosting to allow the page to live on MSN, and power to control who and what got to be discovered. Yikes. ????

I also learned more about metaprogramming, a concept I was only vaguely familiar with (and still need to do some further reading on), and we also discussed functional programming concepts in depth. I’ve been learning a lot about functional programming in JavaScript over the past year, so it was great to hear that I’m on the right track.

Lastly, I learned that you can rename variables as you destructure them from objects today! ????????

Interesting Links

Here’s a few links to things I’ve read, watched, or listened to:

Worklog 080118

Meetings, bug fixes, and working on a new feature. ????

What I’ve done

Last night, I did some research on automated documentation in the Rails ecosystem (looking for a way to auto-document the API). Also looked into Swagger and APIpie. GraphQL would be the best solution, as it’s inherently self-documenting, but that’s not possible right now.

Most of the morning was meetings for DevLifts and the Coding Academy. Then I fixed a bug in our routing that I thought I fixed yesterday. I also fixed a bug that was caused by a discrepancy between the Rails API and my mock json-server API.

The rest of the day was spent working on the new feature that I’m shipping August 15.

What I’m working on

Tomorrow I’ll be refactoring the screen I built for that new feature today. I’m also planning to research how to write a script that can automatically hit all Rails routes, get some sample JSON from the response, and update my db.json file that json-server reads (so my mock API can stay in sync with the Rails API). It’s important that they stay in sync.

Why worry about the mock API if you have a Rails API locally? I’m glad you asked! I personally want my codebase to be totally accessible even if no other parts of our environment are installed and/or accessible. One shouldn’t have to download Docker, our containers, 40GB database, Ruby, and the Rails app just to be productive in the frontend. Frontend engineers should be able to make commits to the frontend on day one, if they wanted to.


There were some blockers on the API end, but my boss got them fixed right up for me within a couple of hours. ✨

Today I Learned

Interesting Links

Here’s a few links to things I’ve read, watched, or listened to:

Worklog 073118

Meetings and bug fixes, bug fixes and meetings.

What I’ve done

Last night I got the new feature I’m working on at work hooked up to more API endpoints.

I also learned how to use axios interceptors, and integrated this into my app so the JWT gets sent with every request by default. ✨

I also wrote a function to disable Sentry errors unless the app is in production, as I’m tired of getting emails from development mode.

I also played with Parcel’s --public-url CLI option to change the path of the assets in the build’s index.html output so it would be compatible with our production environment.

Last night, I also got a bunch of menial tasks knocked out for DevLifts. I’m learning that batching is pretty much a requirement for me to get anything done these days. Way too many things going on and too much stuff to hold in my head.

What I’m working on

I’m continuing to work on getting the new components for this feature built out and stateful.


No blockers ✨✨

Today I Learned

Interesting Links

Here’s a few links to things I’ve read, watched, or listened to:

Worklog 073018

Happy Monday!

What I’ve done

Friday, I finished all the documentation for our new React environment I’ve set up at my day job. It was a new experience to think through how to best present documentation for lots of different types of people who may be looking at my repo (now or in the future). I’d love some feedback so I can learn to write better documentation.

Over the weekend, I watched some videos on testing Javascript and Redux with Jest, and I finally made a little headway on the Fit CLI project we’re getting off the ground at DevLifts!

What I’m working on

Today, I’ll mostly be working on building out components for the feature I’m supposed to ship within the next couple of weeks at Trinity. Most of the day will probably be spent pairing with the other frontend dev.

This evening, I’ll probably also work on a few things for DevLifts:

  • UX Review of our existing site (we’re getting ready to start a design system)
  • Set up payment re-try settings in Stripe (for failed membership charges)
  • Set up new MailChimp automation to get testimonials from members having a good experience and to notify me to reach out directly if someone is having a bad experience

And at some point today I have to get a quote out to a client for a new project.


Right now, I mostly feel blocked just by the sheer amount of things going on. If I can get past my own mental fog, I’ll be golden.

Interesting Links

Here’s a few links to things I’ve read, watched, or listened to:

Worklog 072718

Wow, it’s really easy to fall out of the habit of writing. I just realized I hadn’t posted a worklog in a month!

As a baseline, I’m going to start adopting the traditional scrum structure for these (and maybe sprinkle in other stuff as necessary).

What I’ve done

Yesterday, I worked on documentation. Now that I have a whole new environment set up, I’m going back to document it so we have pain-free onboarding for future employees and the other engineers can easily see how it all fits together.

I also paired with our architect to make sure some Docker changes work on OS X — he’s had to make some changes to ensure my React environment can place nice with the legacy environment. It works, and we’re still even able to use Hot Module Replacement by using Parcel’s hmr-port flag.

What I’m working on

I’m finishing up documentation today, and I’m also going to finish watching this workshop from Kent C. Dodds on JavaScript testing. If I have time, I’m also going to check out Cypress, because I keep hearing about it. Anyone used it?Why do people love it so much? Does it make E2E testing faster to get up and going?


Not sure if Blockers even needs to be in these posts, but I don’t have any FWIW. ????

How to set up a React project without Create React App — Step 2: Initializing the Project and Installing React

Initializing the Project

After you’ve installed Node, the first step is to set up a new project. In your shell, navigate to a directory where you want to create a project. Then, run:

mkdir your-project-name && cd your-project-name

This will create a directory for your project (the first command) and then navigate into that new directory (the second command). If you’re new to the shell, the && operator can be used to run both commands, one after the other. You can chain together the && for as many commands as you wish.

Now that you’re inside your new project directory, you can run npm init to initialize the new project. It will ask you for a few pieces of data such as the version number of your app, a description, etc. You can always change these things later, so don’t sweat it too much. If you’d prefer to keep everything as the default value, simply run npm init -y.

Once this is finished, you’ll have a new file inside your directory: package.json. This file is basically a giant JavaScript object that keeps different pieces of information about your application. It’s used for a lot of things, but the most important things to pay attention to for now are the scripts, dependencies, and devDependencies keys. These are the main objects we’ll be adding to throughout the project.

Initializing the Git Repo

The next thing you’ll do is set up a Git repo for the project. First, create a new file .gitignore file with the following:

Next, run git init in your shell.  This will initialize the Git repository. Then you can run git add . to stage the files you’ve created so far, and git commit -m "initial commit" to make your first commit to the project.

In the next post I’ll outline how you can set up Parcel, the build tool I used for this project, and we’ll do a gut check with React to ensure everything is working.

How to set up a React project without Create React App — Step 1: Installing Node

Note: This series is based on React 16 — if you are using a newer version, your mileage may vary.

I was tasked without setting up a new codebase for a frontend rewrite at work this week. I’ve used Create React App for all my previous React projects, but I didn’t want to default to that — after all, stack decisions I make right now could affect the company for the next 3-5 years. I wanted to make sure I knew and understood all the pieces of this codebase since I’m responsible for it, so I decided to research different options and roll my own React environment.

With the speed at which everything changes in JavaScript-Land™️, I found it tedious to research all the tech I was considering and ensure that the sources I was learning from were not out of date, so I decided to write a post about how I set up a new React project without using Create React App. Everything is still somewhat in flux, so I will update this post if anything changes. Also, I would appreciate any feedback you’d like to share about my decisions!

How to Install NodeJS

Before you can set up a React project, you’ll need Node installed. While you aren’t necessarily creating a Node server here, Node is still used to add third party packages (via npm, which is bundled with Node) to your project as well as run scripts such as a local development server.

To install Node, you can take a couple of different routes.

Option 1: Install it from the NodeJS website. This will install a single version of Node on your machine as well as npm.

Option 2: Use a version manager like NVM or Nodenv. A version manager will allow you to install multiple versions of Node and switch between versions depending on the version required by the project you are working on. This is really helpful to utilize if you work on multiple JavaScript projects (or if you think you may in the future).

I chose to use Nodenv because it’s similar to rbenv, which I’ve used in the past. You can install Nodenv a couple of different ways, but I installed it via Homebrew because I’m on OS X and it’s dead simple.

After installing Nodenv, you can run nodenv install -l to get a list of available versions to install. You can then run nodenv install x.y.z (replacing x.y.z with your desired version number) to install the Node version of your choice. I chose 8.11.3, the version recommended on the NodeJS website at the time of this writing.

Therefore, I ran:

nodenv install 8.11.3

You should now have Node installed. In the next post, you’ll initialize your project and install React.