At the time of writing, it’s the space between Christmas and New Years, that weird block where I’m not exactly sure what day it is, happily full of cookies, and time moves with the day-off-but-imminent-working anxiety of a Sunday. I’m using this strange energy to write and reflect.

Before we dig in, it’s an important piece of context that I’m trying to get better at celebrating victories.

I was at a conference this year, and someone came up and gave me a compliment. I immediately deflected and negated it, and the person looked at me and said: “I can give you your flowers, but it’s up to you to water them.”

I was floored. He was so right. If you’re out there reading this, thank you. You have no idea how much that meant to me.

Work

This year marks my second complete year at Google, and I’m finding it satisfying, rewarding, and challenging (in a good way). I’m excited to say I was promoted to Senior Director of Engineering, and now run Android, iOS, and Multiplatform Core Infrastructure, in addition to the Web Core Infrastructure teams I have been running. The increase in scope is something I feel honored to be entrusted to run. Folks I work with are capable, thoughtful and hardworking. I love working with them and what we’re building. I honestly can’t believe I get to be surrounded with such smart people.

It’s thrilling to run a department that builds and maintains the infrastructure that powers all of Google’s apps: Search, Gmail, Docs, Sheets, YouTube, Maps, and more. It’s a tough job. I took it to learn and grow, and this is proving to be true. Yet there’s still so much more I want to learn.

Since I’ve been in Web platform land for ~20 years, having only written a couple mobile apps ages ago, I’ve been learning more about both Android and iOS as part of my expanded role. I’ve been building some apps but also making these drawings to understand the internals a little better:

Infrastructure is some of the most interesting and important work we as engineers can do, but it’s often misunderstood. I think the industry did itself a great disservice when it started trying to understand company finances via “cost” and “profit” centers. Infrastructure is interesting because the more you invest in it, the more dividends you reap across all facets: you can move product easier because there’s better developer experience and less tech debt, you can make subsequent improvements to systems easier because you can leverage new advancements in technology, you can build and release with more frequency and confidence. Yet, people consistently devalue this crucial work. Someday I’ll write more about this. It’s an important subject that stands some time and collective discussion.

There’s a lot we’re working on that I can’t mention for various reasons, but I can say, I’ve been considering WASM more lately. Many think about WASM capabilities in terms of work on the client, for work that’s performance sensitive, for good reason. However, I’m interested in WASM beyond the browser. Especially in terms of code portability. WASM is compelling for many reasons, and I think we’re just starting to see it evolve to where it needs to be to be leveraged for much more across infrastructure use cases.

You may notice I’m not as active in open source anymore, especially compared to the days of the past when I worked on personal and contributing projects. My job now is extremely demanding of my time and energy. I actually love this about it, I love a challenge, especially when I’m aligned to the mission.

My remaining energy must therefore be intentionally placed. I have chosen friends and family, nutrition/exercise, reading, some personal coding. And travel, when I can swing it. I like to go for long walks in nature and listen to audiobooks, and then come home and read some more- the past few years I’ve read 50 books a year, and I think I’ll do that again this year.

Home and Family Life

A few years back I wrote about Dizzy’s health and how he had relapsed during the pandemic, and was undergoing a crucial but very experimental treatment called CAR T therapy. Thankfully, not only did he survive, but he’s gone the most years in remission he has ever had (2 years!) in the 13 years since he’s been diagnosed with lymphoma. HOORAY! This is the best update.

The kids are wonderful, and I don’t wish to share too much here to protect their privacy, but they are the best and almost all taller than me now, which they lorde over my head quite literally. Being with them is some of the greatest joy I experience in this life.

Oh yeah, and we got a third dog, who is more like a chaos roomba than an animal. His name is Pico, because he is smol and also like the Nano text editor:

Probably the most important update is that for 5 long years, Jason Lengstorf has been torturing and taunting me with falsehoods that his burger skills are better than mine, in tweets…

And even making a full site that he invited me to collaborate on.

I’m happy to share that we invited nearly 20 people over for a grill off and I won! I won this magnificent burger belt that Jason made for the winner that strangely only fits him… nevertheless, I will cherish and wear it forever.

Nutrition and Fitness

I have ramped up more on personal fitness- nutrition and exercise. Watching Dizzy go through what he did, and my own health issue a while ago has made me more grateful for the health I have and wanting to cultivate it more.

This year marked a couple of milestones:

• Averaged 5 days of exercise a week, mostly running, weight lifting, swimming, and walking.
• Averaged 11K steps a day
• Ran my first 10K

A lot of this is cumulative- it’s interesting to me that people often think of exercise as a bandaid or something you do and *poof*, you’re in shape. But I’ve found it’s commitment over the long haul. I’m not really interested in running longer distances, I’m happy for this to just be a way to be out in nature and have a much needed break from screens and work/family pressure.

Though there are clear benefits to physical health, the one I care about the most is my mental health. I notice that when I take care of my body well, I can show up for other people better, have more cognitive resilience, and generally think more clearly.

It’s funny how something that takes time from your schedule actually gives time and energy back in dividends.

The other thing this does is allow me to keep promises to myself. I’ve noticed over time how critical this is for my confidence. I don’t like to go back on my word, and in the past I’ve seen keeping promises to others to be important but not paid much attention to what promises I keep for myself. Telling myself I’m making a commitment and seeing it through makes a marked difference on how I see the world and myself in it. I’m not perfect and life happens but I make an effort to be more purposeful now.

The Book and Giving Back

I somehow conned one of the best orators I know, Phil Hawksworth, into making an audio version of my book! Sadly I haven’t found the time to publish this yet but I will soon. He’s a marvel and I’m sure my book will sound more sophisticated coming from him, but know he probably changed s to z and color to colour which I don’t stand by.

Thank you to everyone who bought it so far! Half of all proceeds have gone to SheCodeAfrica, which is a non-profit organization dedicated to empowering and celebrating girls and women in technology across Africa. I am completely in awe of their work. They have used the funds to do things like run conferences, buy computers for newcomers to the industry, and give classes and workshops!

Gratitude

It’s very strange to me the way my life has meandered. I’m so grateful for where things are now. It can be easy to get caught up in the struggle of the day to day and not step back and appreciate what we have.

When I build playlists for my runs, I sometimes put on old “personal classics”- things I used to listen to at other stages in my life that I’ve forgotten about.

What’s strange is how much a song brings me immediately back to those moments. I’m immediately transported: to school, to Greece, where I lived for years. To when I came back to San Francisco. For many, many, years of my life I was so broke I had to fast involuntarily to get by, and it was… well, it was very stressful. I worked very hard to turn that around, and of course, luck and privilege played a part too.

At this moment, at the end of 2023, I can’t believe how different life is. I feel so much gratitude for what’s going well and renewing my appetite and energy to take on more next year. And hopefully get a little better at managing it, too.

The title of this post is a little misleading- it’s not so different to mourn as a developer than a person with any other kind of job. But speaking as a developer, I’ll talk about my experiences through that lens, as I know no other.

A friend of mine died last week. We weren’t best friends, but he was a great person whose company I loved, and, looking back at our digital history, realized we were there for each other through a lot of challenging times: heartbreak, harassment, job loss, and medical problems, to name a few. He was a wonderful person who was raunchy and hilarious and if you felt bad, would make you feel better by making fun of you and then giving you a sincere hug. In short, he was the best.

It’s also the two-year anniversary of the death of one of my best friends in the world. He and I dated and lived together for 4 years, and when we broke up, we remained great friends. I still remember this spooky (it gives me chills down my spine to think about it) feeling as he walked away the last time we hung out. Something felt wrong but I couldn’t put my finger on it. Not too long after, he was out for a morning hike. He was wearing sandals and tripped on a rock. He hit his head and he was gone.

During these times of processing death, people often urge you to stop working. I’ve done that. It can help, sometimes. With Cameron, because we were so close, the pain was so deep I felt like it was swallowing me. I couldn’t do anything. Until I could. And the work helped, honestly. I couldn’t process what was going on in any real way when I wasn’t working. I oscillated between fits of despair and numbness. Everything felt blank, like I was out of my body. I couldn’t observe myself. It just pooled around me, and I dissolved.

But then in work, I found solace. In work, some part of me was occupied. When I was coding, I could detach enough to see myself, to see him, to see our history together, and the loss of what could have been our future friendship. One part of me was focused, and breathing, and occupied. I found that especially when I was doing tasks that I had already mastered, that’s when I could actually process Cameron’s passing.

When I sat with the pain, for a little while it was too sharp- there was no room for me there. However, when I was involved in a programming task, my breathing steadied. I could step into it with a bit of cover, and embrace it in a way that didn’t feel so harmful.

The only caveat to this was QA. Though I usually appreciate QA’s comprehensive study of software and respect that it’s extremely grueling work, while I was mourning, my empathy levels were low. I found it hard to take tickets for edge cases. I felt exhausted if I wasn’t connected to the value of the task.

Socializing when I was mourning was also especially taxing. I found I couldn’t relate to people who weren’t also mourning or hadn’t mourned for a little while. Everything seemed artificial or unimportant. When I was coding, however, I lost my sense of self or even others beyond the normal “what did they mean by this” as I read someone else’s code. I found that I had a bit more patience for refactoring. In a way, it helped- I didn’t have to invent something new, but to improve on what was there, and I could dive really far into that task without my usual hurry and hustle. If nothing was important anymore on the surface, I might as well make it great. Life is short, after all.

I suppose the point of this post is- when you’re in mourning, do what is right for you. I had a lot of people urging me to stop working to process what was happening, in part because I was incredibly productive at this time, and that looks very unnatural from the outside. Hollywood teaches you that mourning is sitting on a bench looking at a tree. I tried that and it wasn’t my path.

Looking back, I think coding really helped me. I don’t believe any two people will share the same process. What works for me might not work for you. But if you’re anything like me, and there’s guilt associated with doing what you need while you’re mourning, I suggest giving yourself a break. Love yourself and honor them in the way that feels healthy for you.

〰️〰️〰️〰️〰️〰️〰️〰️

I think this might have been the year I found the most personal happiness, but the giant caveat in everything was watching the world divide, watching racism, sexism and hatred rise, and seeing some real damage that incurred on people’s lives around the world.

Personally, the biggest and most wonderful part of my whole year is that my fiancé, Dizzy Smith, has now gone two full years without needing treatment for his cancer. I don’t talk about this that much because I don’t want to jinx it, but this one thing informs so much of my happiness, I would be remiss to exclude it.

We bought a house and I moved to Denver from SF (my hometown), a change that has also brought me a lot of joy because I have more space to work (an office of my own for my first time in my life!) I get to live with Dizzy’s kids, who are the best children in the world and I’m not even biased. The only exception being the children of the people who read this article. Then it’s a tie.

We also got a puppy this year! I love Sudo so very much and have always wanted a dog. She makes every day better. The kids and the dog remind me daily of wonder, and help me feel gratitude for pieces of life I can sometimes take for granted. Grass! Rolling around in grass! I never understood why they got rid of recess.

Sudo will also do this thing where she picks up a stick and it makes her SO HAPPY! It’s the most important stick of all time. And then she’ll accidentally drop it but she’ll just move on. She doesn’t pine for it. She doesn’t try to hold it so tight. She just lives in the moment with her stick. Way to go.

Those who know me (and probably some who don’t) know that the two things that I love most outside family and friends are travel and work itself. This year has been amazing because I’ve gotten to do both in spades. I made a promise to myself few years back to try to save up money to visit at least one new country a year. This year I spoke at nearly 50 conferences in 11 countries, 4 of which were new to me. I made acquaintances and friends all over the globe. I made a project where you can track my activities as well as my coworkers as we speak around the world. It’s made with Azure Serverless functions and Vue.js.

I got to work on so many cool projects with so many technologies! I made 18 repos, over 250 codepens, but only released 40 of them (so much bad work to get to the good stuff, haha). I put out 18 articles, all on CSS-Tricks (mostly on Vue.js!) and created some slide decks that in total got more than a half a million views. My book on SVG Animations with O’Reilly was published, and my business with Val Head, Web Animation Workshops, put on 7 workshops. This is all outside of the contract and consulting work I was doing, which meant my year moved at a quick pace. But I wouldn’t say that’s unusual- I’ve been happily working, and staying productive for many years now. I think people have noticed much more lately than they did even two years ago (when I had 700 followers), another thing I can be grateful for. I’ve been a software engineer for more than a decade, but no one noticed my work for most of that time. If that’s you too, all I can say is- keep going.

There’s a bittersweet part to this success, too, where I close out the year feeling that tech still has so far to go. I’m asked on average once a conference if I code or if I code my own demos, despite stating clearly now in the intro that they are mine unless I state otherwise. This doesn’t happen to my male counterparts. Whatever excuse you thought up just now to retort this, just please don’t. Please just listen for once.

I also receive a good amount of harassment, usually off of educational material, which sucks. I’m not leaving tech, I’m not saying this for pity, and I’m not asking to be commended- I want to express that the experience of a woman in tech who simply wants to code is still not great. Women and people of color have to survive abuse and bias to be here and until we look this in the face and draw awareness to it I’m not doing my due diligence for the people who come after me. There are much more horrible stories that I can tell you about my career and sexual harassment than these, but those are very personal stories to tell. We have work to do. As Alisha Ramos so eloquently put it, “The strongest pipeline in the world does no good if it leads directly into the sewer.”

For my part, this year I started a more formal way of mentoring underrepresented folks. My schedule is slammed so I didn’t get to fulfill as many as I wanted to, but I worked with about a dozen people, which is a dozen more than last year. Next year I plan to do less speaking so I can make a deeper commitment to mentoring and be with my family more. It’s important to me to do so because, as someone who has been building sites and gaining knowledge from other developers via stack overflow, blogs, github, and codepen for so many years, I feel the need to even the score and try to give what I have taken back to the community.

Sarah Drasner on Twitter

If you're a member of an underrepresented group in tech, I'm opening up a few hours of my time every month to mentor https://t.co/tlugQo6djf

Speaking of community, I shared a post two years ago saying that it was my goal at the beginning of that year to get something published in CSS-Tricks and by the year end was a staff writer for the publication. I am still a staff writer for them today and couldn’t be more proud of being a part of it. Chris is a great voice in our community and the fellow writers and guest writers are quality all the way down. We even added a new member of our staff this year, Miriam Suzanne, whose work and speaking I greatly admire.

In the beginning of this year one of my big goals was to put out learning materials for Vue.js (an article or two I think it said). 13 articles, 12 repos and 1 Frontend Masters workshop later, and I’ve official joined the Vue Core team, my first stop is leading the effort to create a new section called The Cookbook, that walks through how to create certain patterns, shows simple and complex examples, and even speaks with nuance around when this pattern will fail, and when to consider using an alternative means of execution. I work closely alongside Chris Fritz to integrate this, which is truly awesome because I look up to him, he is a hero in terms of good documentation. I’m very excited to be working on Vue.js because I believe in the project, and reading through Evan You’s well organized and well commented source code, I feel very lucky to be on this team.

Last but certainly not least, I recently joined Microsoft as a Senior Developer Advocate, a job I love so far. It’s a good fit for me because I like working with the community, creating open source work, and working with product teams to improve things for developers. The choice to leave consulting was a hard one to make because business was booming and I like working for myself, but Microsoft’s new internal catch phrase of “meet developers where they are” really appealed to me and they let me be pretty autonomous and creative in what projects I create, which is the dream. Azure has a lot of nice offerings and I’m a naturally curious person so I’m having fun exploring the possibilities. I also love my team, Simona, Burke, Asim, Brian, and John- jobs are so much better when you like your coworkers and boss.

One thing I’m looking forward to as the year closes that has become a tradition is that my friend Meagan comes over and Meagan, Dizzy, and I write out what we’d like to accomplish in the next year. We choose 10 things or so and write detailed, actionable items. We also revisit what we wanted to accomplish last year to see how far we came. I haven’t looked at my list in a while but last I checked, it had a range from career focused to personal. No, none of them are about dieting or going to the gym 🙂. I mention this process because I recommend it. It’s a nice exercise to align yourself with what you really want and revisit if you’re actually doing things to achieve what’s actually important to you in the grand scheme of everything. I tend to get pretty focused on the details, this helps me zoom out.

That’s it! 2017 was a hard year that I’m personally grateful for. I’m a very lucky lady. I’m grateful for web development, the community it offers, and… hot damn we get to build this stuff for a living! How cool is that! When the news gets me down, I refocus on the work, because working is the best distraction in the world. Aside from puppies and sticks.

• increased traffic to their website by over 400%
• lead increase by almost 4500%
• the number of new visitors to their site to almost 78%

But one thing all of these posts have in common is that they are at least two years old.

If infographics have that kind of potential for performance, why do they seem to be considered a played out fad?

One possible reason is the tipping point for mobile. Infographics that are exciting and all-encompassing on the desktop become an arduous pinch-n-grab affair on a mobile device. This means sharing via social media with the rise of traffic on mobile, causes frustration and decline for the engagement potential on these images.

The next reason is a little more simple. When a concept doesn’t adjust to the present context, it fades away. With more interactivity and motion on the web, a static graphic doesn’t have the same pull as something that is more visually exciting, and here is where motion trumps all.

Animation shouldn’t be considered at the end of the design and development process, it should be the bones. If we marry that idea with the concept of conveying a lot of information visually, we can update the very basis of what an infographic is and does. I took the text content of an infographic I found in the book Knowledge is Beautiful, and reimagined the look, feel, and implementation.

Here is a revisited approach, keeping in mind the two problems equated with its decline. A responsive, animated infographic. Keep in mind that the progress of the text transitions are sped up here in order to demo the animation, not neccessarily the content. Shown below is the collapsed responsive view, so visit the pen here for the full content.

In terms of design, traditional infographics typically make use of a salon-style, visually-loaded method. Here, we’ve still filled the usable image area but updated the design to feel a little more clean. We didn’t overload the graphic with many elements because unlike traditional static infographics, if there are too many different moving parts, it’s disorienting for the viewer. It’s also heavier to load so there is a performance hit.

In terms of responsive design, instead of having the entire presentation be fluid throughout, we had the infographic stay in place until a breakpoint, and then moved elements to different positions, allowing the main SVG to respond fluidly at that juncture. Even though we designed desktop first, our media queries are a mobile-first implementation. I used an SVG which is very easy to make fluid, adjusting the viewport slightly on mobile with javascript.

var shape = document.getElementById(“svg”);

// media query event handler
if (matchMedia) {
  var mq = window.matchMedia(“(min-width: 826px)”);
  mq.addListener(WidthChange);
  WidthChange(mq);
}

// media query change
function WidthChange(mq) {
  if (mq.matches) {
    shape.setAttribute(“viewBox”, “0 0 765 587”);
    shape.setAttribute(“enable-background”, “0 0 765 587”);
  }
  else {
    shape.setAttribute(“viewBox”, “0 0 592 588”);
    shape.setAttribute(“enable-background”, “0 0 592 588”);
  }
};

We’re then animating it with GreenSock(GSAP) to take advantage of the both the timeline and the ability to scrub the animation to find different points in time to interact with on a slider. GreenSock also helps with a lot of cross-browser transformation origin rendering problems on SVG. Below is an example of one piece of information in the graphic displaying on the timeline. Note that we’ve added a relative time for all of these animations to fire at using a label.

tl.add(“likely”);
tl.to($(“.p1”), 0.3, {
  scale: 1.3,
  transformOrigin: “50% 100%”,
  fill: $blue,
  ease: Bounce.easeOut
}, “likely”)
.to($effect, 0.3, {
  y: -10,
  ease: Circ.easeOut
}, “likely”)
.to($eLine, 0.3, {
  stroke: $orange,
  ease: Sine.easeOut
}, “likely”)
.fromTo($(“.d1”), 0.3, {
  opacity: 0,
  scale: 0.7
}, {
  opacity: 1,
  scale: 1,
  ease: Back.easeOut
}, “likely”)
.to($m1, 0.3, {
  fill: $green,
  ease: Circ.easeOut
}, “likely”);

We can also improve the accessibility of the graphic by adding a title attribute on the illustrative svgs. You can also supply an aria-labelledby on the associative svg.

<svg aria-labelledby=”title” id=”svg” xmlns=”http://www.w3.org/2000/svg" viewBox=”0 0 765 587">

<title id=”title” lang=”en”>Circle of icons that illustrate Global Warming Solutions</title>

If you need to, you can also supply a title for any element in the SVG DOM. You can find more information on implementation in this great article by Dudley Storey. In the case of this demo, we kept the text separate so that it’s still completely legible to screen readers. This is an improvement over the original infographics, which as static images, could not be accessed in this way.

We’ve provided a fallback to older browsers and devices by creating a static image that still rotates with the timeline and dialogs. We use modernizr to check and provide a hook so that the image doesn’t download when it’s not necessary. This doesn’t provide all the information that the full SVG does, the purpose of the png here is a graceful degradation. If you want to make sure that your reach is backwards compatible with no degradation, you can offer something more robust.

.inlinesvg .fallback {
  display: none;
}

.no-inlinesvg .fallback { 
  width: 500px;
  height: 500px;
  display: block;
}

This demo is merely a sketch, to ponder methods for which we can give shareable information more muscles with responsive animation. The same thing could also be achieved with pngs, CSS, canvas, and variety of other methods. The potential that we have with the tools now supported on the web are exciting and can breathe new life into older concepts.