6:28 am
First alarm rings. Snooze.
6:30 am
Second alarm rings. Snooze.
6:34 am
Final alarm rings and I know this is the last one, so I hop out of bed and immediately play some music. Music really has a way of waking me up, and I typically play Sofi Tukker or Rufus Du Sol radio on Spotify. I start getting ready to head to the gym for a morning workout. I’m not a morning person, but I’m a morning-workout person. I love working out before work because I arrive feeling very awake and ready to take on my work day!
7:40 am
I’m at the gym, jamming out to some workout playlists I’m very proud of. I start with some stretches, followed by strength training, and finish with cardio and more stretching. Afterward, I head to the shower and get ready for work. Between waiting for the shower and getting dressed, this all takes roughly half an hour.
Once I’m done, I’m ready for a 20-minute walk to the office. I like to listen to podcasts during this time. My favorites include On Purpose with Jay Shetty and Armchair Expert with Dax Shepherd.
9:30 am
I’m finally at the office. I’m typically not the earliest one at the office, so I’m greeted with many “good morning!”s from my amazing team. I then head to the kitchen and fill up my large canteen with water and grab breakfast. Back at my desk, breakfast in hand, I start going through my unread Slack messages. They’re typically a mixture of company-wide announcements, team-specific messages, and off-topic humor. A few of the messages are from Google Calendar, letting me know what I have on my calendar for the day: a team standup, a few 1:1s with my teammates, and an afternoon meeting to discuss our migration to TypeScript.
10:00 am
I’ve been preparing our frontend codebase for widespread Typescript adoption and one of the tasks I’m working on is a custom transform for webpack that generates PropType definitions for React components that are written in Typescript. What is a transform, you ask? It’s something that transforms code from one state to another, using an abstract syntax tree (AST). Why are we doing this? We want to bridge the gap between React components written in Typescript (which lack PropType definitions) and React PropTypes for existing components we have in our codebase.
We want consistent proptype validation as we migrate our Javascript to Typescript, so having this transform in our webpack config will bridge the gap between compile-time and run-time prop validation. As I’m sitting at my desk working on this, I’m looking at Typescript’s AST and the nodes that represent the structure of our Typescript code, including the node that represents the way we enforce a type definition for React component props. This is the node I’m interested in because I’ll be using it to generate a corresponding PropType definition. Anytime I inspect an AST, I’m fascinated. It’s not everyday that you find yourself looking through a tree that represents the human-readable code you write.
The node I’m taking a look at is an object with key-value pairs. What’s puzzling is the values are all numbers. Some match and some don’t. What could they represent? Hmmm… I’ll take a look at this after lunch. For now, I need to head to my team standup.
11:35 am
Team standup! Many folks are familiar with this type of meeting. It gives us a chance to share updates on our work, call out any blockers, and share what we’ll be working on next. After this brief meeting, we head to lunch.
Noon
Time to grab lunch! I usually have lunch prepped, but I love using this time to walk with my colleagues to nearby food trucks. It’s a great way to get some fresh air and walk around. Our office has a few cafes, so we typically head back to one of them after grabbing something to eat. Lunch is a great time for me to get to know my teammates better. On this particular day, we’re talking about what our high school experiences were like. It’s no surprise that I had some pretty nerdy interests and was involved in Model United Nations Club, Pi-memorization contests, and student government.
12:45 pm
Alright, I’m back at my desk. I open up VSCode to start investigating what those numbers in my TypeScript AST could mean. I ask my teammate Andrew to pair with me on this, and he recommends I take a look at the Typescript npm package to see if those numbers exist inside the package. After a quick grep, I find a dictionary that contains mappings for the numbers I saw in the AST node! This is a win, because I’m no longer puzzled. I can clearly see they represent different “symbols”, which are what make up the syntax for the language. The keys in the dictionary represent both primitive and non-primitive types in Typescript. The values in the node refer to types. From this, we can build a new object that will later become our React PropType.
2:00 pm
A meeting with my teammate, Mark. Mark is a principal engineer on our team and helps me understand how my work has an impact on Slack from a bigger-picture point-of-view. I really enjoy our 1:1s because it usually ends up being an unofficial mentorship session. We meet once every couple of weeks and share updates on what each of us have been working on and what’s on our minds. It’s a good time to ask for his feedback and advice on the manner in which I do my work and how to practice leadership. I hope I’m as helpful to him as he’s been to me during the time I’ve spent on our team.
3:00 pm
I’m in a meeting with a diverse set of colleagues: two engineering managers, one backend engineer, and two frontend engineers (myself included). We’re here to talk about the recent migration our backend team went through to migrate from PHP to Hack. We’re curious to hear their take, as this migration is analogous to an effort currently underway to adopt TypeScript across our frontend codebase. The goal of this meeting is for us frontend engineers to gather learnings and gotchas from the PHP-to-Hack migration, and hopefully avoid some of the same pitfalls. As many engineers know, the only constant is change. In this case, we’re changing our frontend codebase to be safer to work with, self-documenting, and more easily tested by virtue of static types. We’re in the midst of supporting Typescript adoption across our monolithic codebase, and look forward to evangelizing its adoption in upcoming months.
5:30 pm
I wrap things up at work and head home. This is the worst time to leave our building: I’ll be stuck on my commuter shuttle during peak rush-hour traffic in SoMa. It’ll take me 45 minutes to get home, even though I don’t live far from the office. Once I’m home, I unpack my gym bag and start prepping dinner. For all my interest in cooking and culinary pursuits, I rarely make anything interesting for myself for dinner. It’s usually eggs and toast, leftovers, or nothing at all (if I’ve just come home from our weekly work happy-hour on Thursdays). While I’m enjoying dinner, I’ll watch any of the Real Housewives shows on Bravo, or venture off into YouTube land and find videos from the team at Bon Appetit. During this time, I’ll also call and text members of my family, or wander aimlessly through Instagram.
About Natalie
Natalie is a senior frontend engineer at Slack. When Natalie joined Slack, she worked on features for new users and new team creators with the New User Experience team. More recently, she joined the Foundations team and works on frontend infrastructure, so that other frontend engineers at Slack are as productive as they can possibly be. She is currently introducing Typescript across Slack’s frontend codebase.
A conference speaker, Natalie most recently spoke at GraphQL Summit in San Francisco, and O’Reilly Fluent in San Jose. You can find links to her talks on Twitter @natqab.
Prior to Slack, Natalie worked as a full-stack engineer at Zillow Group in San Francisco, using React, Typescript, Node, and GraphQL to deploy web apps using AWS infrastructure (I know, lots of buzzwords). Before moving to San Francisco, she studied at the University of California, Davis where she obtained a Bachelor of Science degree in Computer Science.
