Fun With Animations

Instead of talking about work for the entire entry, I figured I would mix it up and talk about my studies a little bit. I'll still talk about my daily work towards the end, but I've found that my blog entries have become solely about work during the week. My typical pattern these days is to wait until the little girl is down to sleep, write my entry, and then study. So, instead of how it used to be, where I would study for at least an hour and then write the entry, I'm now writing it before I've down my nightly work. I think often about what purposes this blog now holds, and I consider there to be a couple main concepts. First, I want it to serve as a map for other people who have decided to take the same path as I have. I want them to be able to see what did and did not work for me, and not have to spend as much time guessing as to how to get to the end destination. When you first set off on the journey of learning to code, most people want to end up landing a job as a developer of some sort and start a career. I was lucky enough to do that in just over 9 months. It took a lot of work, and I got lucky to a certain extent, but it's totally possible. And, if you read my blog, you can see exactly how it was done. The other purpose of this blog is to serve as an extra layer of motivation for myself. It helps to hold myself accountable to this blog and #100DaysOfCode on Twitter, making sure I study every single night.

So, for my studies, I've been entranced by Stephen Grider's course on Microservices with React and Node for the last week and a half. His level of instruction is extraordinary and I've yet to be let down by any of his courses. Actually, that's not entirely true. I purchased his advanced React Native course a couple weeks back, and it turned out to be extremely outdated. But, if you have as many courses as he does to keep up, I don't blame him a bit. Udemy has a really responsive team and allowed me to get a full refund once I found out, so no harm done. Otherwise, his courses have been top notch, this one included. He is covering an extremely wide array of topics and technologies, and it's hard to keep them all straight in my head. I've been introduced for the first time to Docker, Kubernetes, Google Cloud, Skaffold, Ingress, and much more. I'm only halfway through the class, too. We are in the midst of creating a project that mimics Stubhub right now, with microservices for each particular part of the application, like authentication and orders. He decided to use TypeScript with this project with NextJS on the frontend to be able to do server-side rendering, which I'm really excited about. As far as frameworks for React go, I have more experience with Gatsby, but I'm really excited to get to know NextJS a little better.

I spent the majority of the day today working out a component for bringing in animations to our application. There is a really interesting project called Lottie, started by AirBnb. It's basically a collection of animated images built by designers. Most of them are totally free, and you can really find some awesome animations in there. Bringing these into our project is really going to add some life to it, but it's not so simple. To use Lottie, you have to use packages for React or React Native, both of which require different configuration. Since we are developing an application that is fully cross-compatible, I wanted to find a way to condense this into one component. With our project, if you name a component's file the same twice, but use the extension of .web for one of them, they will be read the same, but the .web version will be used for the web and the other will be used for native platforms. I wanted to make it so it was completely dynamic, but this turned out to be nearly impossible. With the native application, the .json file that holds the code for the animation is called from within a require callback, which you cannot do string interpolation on. So, for every different instance of an animation, I have to add a case to a switch statement to a list. I actually have to do the same thing for the .web component as well, since in this file the .json file is imported in and that can't be dynamic, either. There's a lot of mental overhead here, and trying to come back to this part of the project weeks or months later might be an issue.

Until tomorrow!