React Testing Library + Mock Service Worker = !!!


One of my goals for 2022 has been to push myself outside of my comfort zone, and one area in particular I am targeting is to improve my public speaking. This is something that I have been actively working on in my current position at [Hireology](https://hireology.com/) by presenting my work during Demos and also being an active participant during bigger meetings. However, I knew that if I really wanted to push myself I would need to do a bigger presentation.

At Hireology, we have a monthly event called Engineering Talks where anyone can present on any given topic, tech-related or otherwise, to the entire engineering team. One thing we have been doing as a team is starting the process of migrating to a more modern tech stack, and from a frontend perspective I have really zeroed in on how we are going to handle writing tests in the future. I have been a strong advocate for [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) (RTL), so I decided to do a presentation showing off different scenarios and how we can test them using RTL and another neat library called [Mock Service Worker](https://mswjs.io/docs/) (MSW).

I was definitely nervous going into it, but I did rehearse it a few times beforehand (including once to my dear wife who had no idea what I was talking about 😂) so I felt more confident. Overall, I think it went very well! Most of my colleagues had not had experience with RTL (we currently use [Enzyme](https://enzymejs.github.io/enzyme/)) so it was cool to be able to teach them something new.

For the presentation, I opted to use [mdx-deck](https://github.com/jxnblk/mdx-deck), a library that lets you write presentations in Markdown with the ability to also import and use React components. I also used a tool called [Code Surfer](https://github.com/pomber/code-surfer) that added some awesome visual effects for zooming in on code snippets. I then deployed the app using [Vercel](https://vercel.com/), which was crazy easy and something I will continue to use for future projects.

If you're interested in checking out my slides and/or the app I built to demonstrate, here are the relevant links:

- [RTL + MSW = !!!](https://rtl-deck.vercel.app/)
- [Presentation Source Code](https://github.com/wildlifehexagon/rtl-deck)
- [Demo App Source Code](https://github.com/wildlifehexagon/rtl-demo)


My biggest year of change professionally.

My 2021 Coding Year In Review


This was the biggest year of my professional career. In July, I decided to leave dictyBase and explore new opportunities. In early August, I officially joined [Hireology](https://hireology.com/) as a Front End Software Engineer. It was a bittersweet moment because I truly did cherish my time at dictyBase and I will forever be grateful to them for taking a chance on me when I was a very green junior developer. At the same time, it was time to move on, and Hireology has proven to be an awesome fit for me. I am now part of an amazing engineering team, and I am very excited to see what the future holds here.

### Work projects

- **Rich text editor library.** The last project I worked on at dictyBase was to finish overhauling a [page editor library](https://github.com/dictyBase/dicty-components-page-editor) built using Slate.js. This was a huge undertaking that consisted of migrating from the old Slate 0.4x format to 0.5x. This more recent version of Slate had entirely new data structures, switched to TypeScript and included React Hooks. The changes were so significant that I ended up writing this library from scratch rather than trying to refactor our existing version. This meant that I could use a clean "slate" (sorry, had to...) and write all of the plugins from scratch (previously I had used existing third-party plugins for some of the more complicated features like lists and tables). This also meant that I needed to write a script to convert the old 0.4x data to the new 0.5x. This wasn't as simple as using a premade migration tool since our existing data structure had quite a few differences that needed to be accounted for. I learned a lot from this overhaul, but hopefully Slate is done with breaking updates like this.

- **Catalog search improvements.** I started a demo app to redesign the Dicty Stock Center's catalog search, this one using Material-UI's [Chip](https://mui.com/components/chips/) components to store different filters within a search box. This was intended as a proof-of-concept and I don't know if it was ever implemented, but it was a fun project all the same.

- **GraphQL schema and types library.** Previously all dictyBase GraphQL schema was stored in its own repo, but I converted it into a library that generated typings for all queries and mutations using [@graphql-codegen](https://www.graphql-code-generator.com/). This codegen was an awesome tool and I would wholeheartedly recommend it for any type of GraphQL project.

During my last months at dictyBase, I also redesigned the site's footer and added a privacy policy, among many other things that I'm sure I am forgetting.

As far as my 2021 months at Hireology, I got my feet wet with some design cleanup before quickly moving into a pretty big new feature for automated interview scheduling (more details on that in the [company blog post](https://hireology.com/blog/just-launched-interview-scheduling-candidate-search-and-mobile-app-enhancements/)). This was an awesome project to work on together as a team, and it was a great introduction into their collaboration process. That blog post also highlights improvements to the candidate search platform, which I spent quite a bit of time on at the beginning of this year (2022).

### Side Projects

Unfortunately, I didn't get to do too many side projects this year. I played around quite a bit with this website (which will always be a work in progress) and also wrote some scripts to parse through some datasets, but the big side project I had high hopes for last year kind of got scrapped.

2022 is already proving to be much more fruitful on this front, and I actually have a brand new blog post planned to cover one such venture. Finally, a non-year-in-review post! 😅

### Summary

2021 was a year of some pretty big changes for me professionally, but it was also incredibly exciting and I am feeling super optimistic about my future. I have found that I really enjoy collaborating with my teammates and also teaching and helping with concepts that I am familiar with (especially testing!). My goals for this year are to continue to grow as an engineer, bring value and insight to my team and company, and maybe even build a better-looking personal website (!).


My 2020 Coding Year In Review


It's a little comical that I am just now writing my 2020 year in review post, but then again, who really wants to look back at 2020? Even though the year itself was pretty awful, I did get to build and work on some cool things. Here's a quick rundown.

### Work projects

- **New user authentication system**. I started the year by working on easily my most complex project yet -- building an entirely new user authentication system. Our old auth server was solely using JWTs (JSON Web Tokens), and on the frontend it was storing these tokens in local storage to keep the user logged in. This has numerous security issues, including the potential for [CSRF](https://owasp.org/www-community/attacks/csrf) and [XSS](https://owasp.org/www-community/attacks/xss/) attacks. To solve this, we now use a combination of refresh tokens and HttpOnly cookies. I won't get into too much detail here -- it should really be its own post -- but I developed the entire process from frontend to the GraphQL layer to the backend server, and I learned a ton in the process.

- **ChatOps deployments with GitHub Actions**. One of our big goals last year was to automate as much of our deployment process as possible. We needed to find an easy way to deploy our software to our development clusters as needed. The solution was to take advantage of GitHub Actions and build our pipeline through there. I wrote some workflows using [slash-command-dispatch](https://github.com/peter-evans/slash-command-dispatch) to handle deployment through `/dispatch` commands posted in our issues and pull requests. I also wrote workflows to automatically deploy when we merged into our `staging` branch.

- **React Hooks**. I went even deeper into React Hooks last year and set up our own [hooks library](https://github.com/dictyBase/dicty-hooks). Most noteworthy are the hooks `useVirtualList` (for handling window virtualization) and `useIntersectionObserver` (for handling infinite scroll). I also finished converting our frontend apps to use the `Context/useReducer` model for handling global state.

- **Developer Documentation**. As we began to focus heavily on deployment and automation last year, it was clear we needed somewhere to store all of our documentation about the process. This was a good excuse to play around with [Gatsby](https://www.gatsbyjs.com/). I kind of have mixed feelings about Gatsby overall but it was pretty simple to build a decent-looking site right away. Ultimately I settled on the [smooth-doc](https://smooth-doc.com/) theme for our layout and added plugins as necessary (which was also very easy to do).

- **Real user beta testing**. When we finished the deployment process and moved our software to staging, we finally had some real users test out our work. Although we weren't actively promoting it at the time, several users began submitting orders through the new Stock Center site. I have to admit that it was pretty satisfying to see all of our hard work come to fruition.

I also wrote a bunch of one-off scripts, including our own custom GitHub Actions, a script to convert Draft.js to Slate.js content and a script to download and store some gene mappings into our cache. I beefed up our unit tests, finished converting our frontend apps to use TypeScript and GraphQL, and built some presentations to demonstrate my work.

### Side projects

- **freeCodeCamp APIs and Microservices Certification**. I was looking at [freeCodeCamp](https://www.freecodecamp.org/) early in the year and noticed I was only one project away from getting their APIs and Microservices certificate, so I finished it (an [exercise-tracker](https://github.com/wildlifehexagon/exercise-tracker)). When I was teaching myself how to code (back in 2016-17), I relied heavily on freeCodeCamp and earned one of their older certificates before getting a job. Since then they have added a bunch of new certificates so it was interesting to see how close I was to getting some of them based on my past work alone. I'm glad to see FCC is still around and helping thousands of people learn how to code.

- **New business site for my wife**. My wife's event planning business was hit hard by the pandemic so as a way to breathe some life into it, she started a new project built around "micro weddings". She needed a website built quickly for it so I whipped up a Gatsby site with Bulma for the styling. It was a fun little project, especially since I got to learn Bulma (new to me).

I'm also working on a really big project that I'm building from the ground up, entirely with my own ideas. I'm using it to work with tech I wouldn't otherwise use in my day-to-day job, such as Next.js, PostgreSQL and Python. I'm having a lot of fun with it.

### Summary

Overall, it was a productive year of coding even though everything else was a big ol' dumpster fire. So far 2021 is already looking much better. My goals for this year are to continue learning, improve my problem solving techniques, focus more on UI and also get a working demo for my side project. Oh, and hopefully take an actual vacation once things open up!


Another year (and decade) is officially in the books! Here's a recap of my second year as a professional developer.

My 2019 Coding Year In Review


Another year (and decade) is officially in the books! I'll never forget 2019 since this was the year my first child was born. She is a healthy, very social (and as of this writing) almost-five-month-old, and I cherish every moment I get to spend with her. I am excited to spend the year of 2020 and beyond with my new family of three.

In terms of professional development, I spent the year broadening my horizons as a developer. Whereas most of my first year on the job was spent on frontend projects, last year I worked on several backend projects in Golang while also diving deeper into DevOps. Here's a rundown of what stood out the most to me:

### Cool things I worked on

- **GraphQL**. I started the year by building a GraphQL server in Go using the fantastic [gqlgen](https://github.com/99designs/gqlgen) library. I had existing schema that I wrote out near the end of 2018, so part of this year was spent actually setting up and implementing the server using these definitions. With `gqlgen`, it's really easy to get started. You just need to define the schema, add a config file, run the generator and then fill out the resolvers. I started by writing layers for our existing REST API services, then added in resolvers for our new gRPC microservices as we worked on them (more on those next). Once the server was ready for use, I set up GraphQL in two of our frontend applications using [Apollo Client](https://github.com/apollographql/apollo-client). Hopefully by the end of 2020 we will have converted all of our frontend apps to use GraphQL.

- **Golang Microservices**. I wrote out gRPC microservices for two of our backend APIs. This was an all-new experience for me since my backend experience had been minimal at best. This involved writing out [Protocol Buffers](https://developers.google.com/protocol-buffers) and service methods while also generating AQL queries to interact with our [ArangoDB](https://www.arangodb.com/) database. Once these were built, I updated the GraphQL server to include them.

- **GitHub Actions**. Later in the year, we spent quite a bit of time creating our own CI (Continuous Integration) pipeline. At first, I experimented using [Argo Events](https://argoproj.github.io/projects/argo-events) which we were going to use to monitor for any GitHub commits and then fire off a set of actions (i.e. running unit tests) if detected. While I was able to get a webhook-based system set up with Argo Events, it was proving to be unnecessarily complex for our use case. Shortly after, our organization got notice that we had been given access to the beta for [GitHub Actions](https://github.com/features/actions). This was exactly what we needed.

  We were able to build our own CI pipelines utilizing some relatively simple GitHub workflow config files. I was in charge of creating the frontend CI, so I set up a pull request based pipeline where on every PR, GitHub Actions will run through the necessities: unit tests, ESLint and Flow type checking (I know... we are slowly switching to TypeScript!). It also includes visual snapshot testing with [Percy](https://percy.io/), test coverage pass/fail integration with [Codecov](https://codecov.io/), automatic code reviews with [Code Climate](https://codeclimate.com/), and generated [Lighthouse](https://developers.google.com/web/tools/lighthouse) reports. When a PR is accepted and merged into our `develop` branch, I set up a workflow that will build a Docker image and push it to Docker Hub. By automating all of this, we can now put more time into the most important of it all: the actual code.

- **NIH Grant writing**. As mentioned in last year's review, my organization relies on government funding to operate. Early in 2019 we found out that we did in fact get the grant we applied for the year before (hooray!); however, there was a caveat -- we only got two years of funding rather than the four we requested, and we were advised to apply for a new type of grant next time. In order to maximize our chances for the next grant, we had to start working on the new one immediately. This time around, with more experience under my belt, I jumped in and wrote quite a bit more about our analytics and technical infrastructure. I also made a neat little diagram that shows our software architecture model.

- **New frontend application for displaying publications**. I was given the freedom to build this how I saw fit. I had been wanting to learn TypeScript so I used that from the beginning. This was the first app that was able to use our new GraphQL server, so it included Apollo Client integration right off the bat. I used this as a model for our future GraphQL implementations on the client side.

- **Complete revamp of our Stock Center app UI**. The Stock Center app is essentially a shopping website where people can browse/search a catalog, add items to the cart and then order them through a checkout process. Our initial designs were very flat and didn't take advantage of Material-UI, which had taken over as our default UI library in our apps. I redesigned the catalog page to include full search abilities, multiple checkbox selection, dynamic add/remove to cart buttons and will support downloading data as PDFs in the near future. I also updated the individual item pages to a more appealing tab-based design with cards to show other related items, among others. These refactors helped bring our UI up to the modern era.

- **React Hooks!**. With our transition to GraphQL on the client side, we didn't really need to keep Redux anymore. I designed a way to handle our state management using a combination of Context and the `useReducer` hook, very similar to how it is described in this [React.Christmas article](https://react.christmas/2019/7). Rather than having one source for storing global state, we now use multiple contexts for different parts of the app. For example, the state used for the catalog pages is only needed for that section of the site -- there was simply no reason for all of it to sit in the global state. This is something that is still in transition as of this writing, but it seems really promising for our use cases. I have also been writing my own custom hooks and rarely, if ever, use a class component anymore.

- I also wrote a ton of smaller scripts and other projects. There are too many to list here in detail, but some examples are an event messenger system that handles events as a subscriber to Nats messaging (i.e. sending an email when an order is received), a script to create new ArangoDB collections, a predictive analytics script that uses light machine learning to guess where a user might visit next, and scripts that post GitHub issues or upload files to Minio S3 storage when a webhook is received. I also spent time improving my documentation writing skills and working on various React libraries.

### Summary

It was actually pretty rewarding for me to look back at everything I worked on last year. It's so easy to just get caught up in the swing of things, quickly moving from project to project without taking time to reflect on what I've accomplished. I feel like I made some leaps in my programming skills in 2019, especially when looking back at the year prior. What will 2020 bring? I'm not entirely sure. I would like to continue to improve my JavaScript and React skills especially, and I also want to dive deeper into computer science. I have another idea for a side project that I have just started doing preliminary research on, and Python looks like a good choice for that. Another language to learn! Should be a great year ahead.

2018 was my first full year as a professional web developer. Here's a recap of what it was like.

My 2018 Coding Year In Review


Last year was a major one for me, both personally and professionally. From a personal perspective, my wife and I bought our first house and also found out we are going to be parents for the first time -- our little girl is due to arrive this summer! From a professional perspective, 2018 was my first full year as a salaried web developer. For my first blog post on my new Gatsby-built website, it seemed fitting to look back at my coding year in review.

Initially, I started writing this post by going month-by-month. That proved exhausting and not very fulfilling. Also, who would want to read that much?? So let's go with some fun bullet points instead.

### Cool things I built

- **DictyAccess**, a dashboard application built with React. The idea here was to set up a place where we could display all sorts of data in a visually appealing way (i.e. pie charts, bar graphs, info boxes, etc.). At first, this was just used as a demo to show off what we could do with it, but later I added some real [Circos](http://circos.ca/) graphs -- circular visualizations meant to show a "bird's eye" view of different chromosomes and their genes. This application is still a work in progress, but it has a ton of potential once the back end is 100% ready and loaded.

- **Genomepage**, a React app for displaying genomic information. This was built using Material-UI for styling and Redux for state management. Since the back end wasn't ready, I could only display two of the tabs. One for gene summary information and one for [Gene Ontology](http://geneontology.org/) (GO) annotations, which leads me to...

- **Kubeless serverless functions** using Node.js. These kind of blew my mind. Rather than writing up Helm charts and Dockerfiles in order to deploy into our local Kubernetes cluster, I learned how to write and deploy Kubeless functions instead. This simplified the process a bit, allowing me to whip up some quick back end endpoints for uploading and retrieving genomic data.

- **Full-featured custom rich text editor** using Slate.js. This was a fun project. If a logged in user had editing privileges, they could directly edit any of our pages using my editor. I wrote plugins from scratch for all of its different features, including basic bold/italics/etc., text alignment, images, videos, tables and font families/sizes. Speaking of the login system...

- I wrote a couple of **reusable React libraries** to help streamline our login system throughout our applications. One was for displaying the user login buttons/interface, and the other was for putting all of our reusable Redux content and middleware into one location. I also integrated user roles and permissions into our applications, and wrote a Node.js script for loading user content into the database. We also had some existing libraries that I customized as needed, including a complete overhaul of the header and footer designs.

- I wrote numerous scripts for reading and writing different data, primarily in Node.js but later in Golang as well (more on that later). Some involved uploading files to Minio, others integrated Redis for caching keys and values.

- I wrote a few paragraphs for an [NIH](https://www.nih.gov/) grant. Our organization relies on government funding, and every four years we have to write and submit a grant for review. My first year on the team happened to be a grant renewal year, so that has been a wild experience. I helped write out how we planned to incorporate the aforementioned Slate.js rich text editor into our user interface and described some of its technical details.

That's not even close to everything I built or worked on last year, but those are what stood out to me the most.

### Cool things I learned

Wow, where do I even begin here? Going into this job, I worked almost exclusively in the front end, and I had less than a year's worth of experience with React. Let's put it this way: I had never even heard of Kubernetes or Helm. I had no idea what Docker was. Yet by the end of the year I had set up an entire local Kubernetes cluster with Minikube and written several Dockerfiles and Helm charts.

- So yeah, **DevOps**. I still feel like a noob when it comes to this stuff, but at least I have an understanding of this now. I know enough to be able to deploy applications and Kubeless functions into my cluster and update them as necessary. I can write Dockerfiles and work with the Docker daemon inside Minikube as needed.

- **Golang**. With the pressures of getting our new database ready for grant submission, it was high time for me to learn a new language and help out on the back end. Go was our language of choice, so if I wanted to help out I needed to learn it. This actually might be my favorite thing I started last year, as I feel like understanding another language has helped me become a better developer. I'm obviously not an expert after just a couple months of usage, but I have been able to dig in and write some working code, including the back end database (ArangoDB) integration for our stock ordering system. That was a great feeling, as I have always wanted to be a more well-rounded developer.

- **GraphQL schema**. As our data started getting more and more complex, my supervisor made the decision to start using GraphQL for our new system. I was used as the "guinea pig" of sorts to start writing out schema for our data, and I wrote up a demo Node.js GraphQL server that wrapped our existing REST user API. This was a neat little experiment, and I'm excited about using GraphQL more extensively in 2019, especially on the client side.

- **All sorts of "little" things** necessary for certain applications and scripts. Redis, Minio, Ingress. Lots of cool React libraries like Slate.js, Material-UI, React Styleguidist and Flow. Not to mention getting more experience with Redux, React Router and just React in general.

### Challenges I had

- Like most junior developers (or any developers, I suppose) are familiar with, the dreaded Imposter Syndrome reared its ugly head from time to time. This was especially noticeable in February, the month after I was hired into a full-time salary position. The work grew more difficult -- no longer was I just refactoring existing code, now I needed to start building things myself. I started to wonder, was I really cut out for this? I really didn't want to mess up this opportunity so I spent more time outside of work practicing and building side projects. As I got more experience, I started to feel better.
- The pressure of not knowing whether or not our grant would be renewed. One thing I was hoping to be done with when moving on from freelance work was not having to worry about having my contract(s) renewed -- oops. My work situation is still pretty similar to that, as our jobs aren't guaranteed unless we get government funding. A bit stressful, to say the least.
- Working almost entirely remotely. I'm used to remote work -- that's not an issue itself -- but it's a little more challenging as a junior developer since you can't just go over and talk to your colleague when you need help. Sure, we use Slack and get on voice calls, but those sometimes feel impersonal by comparison. We make it work though.

### Summary

That pretty much covers my first year as a professional web developer! It was exciting, invigorating and a little scary all at once, but totally worth it. I had a fun time recapping it and can't wait to see what 2019 has in store. Until next time...

Blog Posts

React Testing Library + Mock Service Worker = !!!

My 2021 Coding Year In Review

My 2020 Coding Year In Review

My 2019 Coding Year In Review

My 2018 Coding Year In Review