Young React #87 – The New Brandeis Movement

I started learning Rust based on Rustlings, and it has been a joy. I love that the tooling enabled a newcomer like me to focus on learning, instead of tooling. It reminds me of my college projects. This should be how onboarding should feel like.


Software Engineering ⚙️

Stop using isLoading booleans – Kent C. Dodds

The most complicated component began its life with a simple isLoading. But after 2, or 3 more state variables, the number of states becomes unmanageable. Worse yet, Typescript’s exhaustive type checking aggravates the issue. I’ve been avoiding using state machines due to my lack of familiarity, but Kent C. Dodds pushed me over the edge.

A Guide to GraphQL Errors – Marc-Andre Giroux

This guide is the most comprehensive one on GraphQL error handling I’ve found so far.

Introducing Rome – Sebastian McKenzie

Rome is a comprehensive toolchain to bring compiler, linter, formatter, bundler, testing framework into one. The original author behind Babel builds it, so I am keeping a close eye on it. I first found the tool last March, and it is now in beta.

How GPT3 Works – Visualizations and Animations – Jay Alammar

I find how all these different deep learning models work confusing. But these visualizations enlightened me a little.

People ❤️

Equity for all? – Emily Kramer

Carta’s former Head of Marketing sued Carta for alleged gender discrimination. This lawsuit reminds me that the path to true inclusion is long and hard, and a politically correct press release isn’t going to cut it. I have to stay vigilant and actively fight against discrimination.

How to Break Up with Your Commitments – Elizabeth Grace Saunders

Not being able to say “no” is my worst weakness. I’d reluctantly agree to do something, then procrastinate (which is also from stress), and keep repeating the pain. The article made me reevaluate my current commitments at work.

Business 💸

The New Brandeis Movement: America’s Antimonopoly Debate – Lina Khan

The issue with the current tech monopolies is no longer about consumer harm. We all choose to use Google and Facebook. It’s about how the market is structured and who owns the power. This article summarizes this new perspective on tech regulation.

Young React #85 – What Does Sponsorship Look Like?

My wife has started her Master’s study at UC Berkeley, which is super exciting (She wrote about her journey to grad school here). Since she will take her classes remotely, I will be able to eavesdrop on her classes and get some free education as well. I am especially looking forward to a case-study class of tech companies.

However, we also ran into a predicament when she and I had meetings/classes at the same time. We live in a one-bedroom apartment, and our desks are sitting right next to each other. When we speak at the same time, our voices bleed into the other’s microphone and get in the way. But it’s already too late to get a bigger place since we just signed a new lease. Well, this explains why the housing price in the area went up.

Photo by Petr Macháček on Unsplash


Software Engineering ⚙️

TypeScript React Apollo – The Guild

In my current GraphQL-Typescript setup, I have to manually type individual useQuery and useMutation hooks, which is tedious and error-prone. This code generation tool autogenerates the typed hooks.

Relatedly, graphql-typescript-definitions from Shopify alleviates that problem by providing the necessary interfaces right from the graphql document. But it still requires manual typing at the end.

Svelte ❤ TypeScript – Svelte

The Svelte team recently announced that Svelte now supports Typescript. I have to admit that I had quite a simplistic view of what it means to support Typescript before reading this. The integration was quite involved since Svelte has its syntaxes and language server; the Svelte team extended its language server to understand Typescript and provide the language information to IDE based on the common interface.

jest-axe – Nick Colley

This accessibility testing tool integrates with Jest so that you can unit-test your components for their accessibility. I love that I only have to assert toHaveNoViolations at the container element. A word of caution though: this test does not guarantee your app’s accessibility.

People 💖

What Does Sponsorship Look Like? – Lara Hogan

I learned that, at a larger org, my access to opportunities (visible and impactful projects) matters as much as my ability to execute them. Without the opportunity, I can’t learn from experiences. Without the experience, few will offer the opportunity. Sponsorship, promoting others for the new opportunities, is a great tool to break that logjam. And I am deeply grateful to Lauren for giving me that chance.

Business 💸

Content, Cars, and Comparisons in the “Streaming Wars” – Matthew Ball

I always found how content accounting works strange. All content spends are treated as assets, and they are amortized over the same number of years when some turn out to be a dud right off the gate. The article reminds me that, even if accounting works mechanically, the quality of execution (talents, and IP) matters.

Young React #84 – Apollo Client 3, and React Aria

I was notified this week that I passed one major milestone in getting the US pI was notified this week that I passed one major milestone in getting the US permanent residency. So my wife and I hurried to get our paperwork ready as soon as possible. The process asked for everything in my life: my bank statements, all my immigration documents collected over the last 12 years, my birthplace, my parents’ birthplace, my current address, my address five years ago, and so on. It is when faced with this immigration bureaucracy, I feel the most foreign to this place I’d like to call home.

Photo by Christa Dodoo on Unsplash


Software Engineering 🌐

Announcing the Release of Apollo Client 3.0 – Apollo

Apollo Client 3, one of the most popular and powerful GraphQL clients, is finally out of its beta. There are quite a few features, but I look forward to the improved pagination handling and the simplified package the most.

React Aria – Adobe

This React hook library lets you build accessible components by generating the correct props for HTML elements. It is an easy and impactful first step to make an accessible product. My team is already looking into bringing this library into our component library.

New in Chrome: CSS Overview – Robin Rendle

CSS Overview is an experimental addition to Chrome Debugger that shows the used colors, fonts, and unused declarations (super excited about this). I didn’t realize that we have three different blacks and four different dark grays in my codebase 🤦. I won’t use this feature daily, but it would be good to audit our styling periodically.

super-expressive – Francis Stokes

This library adds a more readable DSL to make regex patterns more maintainable and reviewable. I like the idea.

Business 💸

Trump’s freeze on new visas could threaten US dominance in AI – MIT Technology Review

Given the uncertainty around immigration, it does make me wonder if I made the right choice to immigrate here. Once a nation of immigrants, the US does not feel welcoming anymore.


Young Reacts #75 – Deno 1.0, Autonomy vs. Leverage, Twitter going remote forever

I had a disappointing week because our user acceptance testing session after a month of hard work revealed two blocking issues. I don’t expect huge changes, so the release will be delayed only about a week. Normally, I would expect some amount of rework and often appreciate this feedback since it means we can release a better product. But this delay sapped my morale.

Thinking over the weekend, I see two reasons why I am so disappointed. First, I have led the engineering effort for this project and communicated with the stakeholders about the release plan. While I accept the inevitable uncertainty, I still feel that I am responsible for the delay, and it doesn’t feel great.

Second, this is the last project before I move to a different domain, and this delay leaves me in a limbo state longer. I need a clean closure and want to focus on the new domain, which already has many projects that require my attention. But this project is getting in the way.

Hopefully, by the next issue, I will have completed the project!

Photo by Charles Deluvio on Unsplash


Software Engineering 🌐

Deno 1.0 – Ryan Dahl, Bert Belder, and Bartek Iwańczuk

The biggest news in Javascript last week was the announcement of Deno 1.0. Deno is out to simplify and secure the ecosystem, as outlined two years ago. Deno promises to provide stable and standard browser APIs. While its ecosystem is split from the Node ecosystem and still very nascent, it already offers many standardized solutions to common problems, such as formatting and running on AWS Lambda.

Native Javascript APIs are now powerful enough for most tasks, thanks to quickly evolving ECMAScript standards. If we have some key libraries for data access and web server framework production-ready, Deno will be useable as a webserver.

Apollo Server File Upload Best Practices – Khalil Stemmler

JSON isn’t the only form of data that needs to be sent between clients and servers. I read this article in preparation for the internal GraphQL discussions. As the article suggests, it makes sense to isolate binary data handling from GraphQL servers.

The JavaScript coders guide to getting more from GitHub and NPM – Edward Thomson

This video is a sneak peek at the upcoming npm 7. A picture is worth a thousand words and a video worth a thousand pictures. You can find improved npm audit at 7:36, yarn support at 13:56, and workspace support at 16:32.

People

Autonomy vs. Leverage – Marty Cagan

I appreciate this list of factors to consider when you tradeoff between autonomy and leverage. Two factors new to me were Level of Accountability and Importance of Integration. If you want the work by many teams to integrate with relative ease, you will want to align on common interfaces, which is what my org is going through.

Business 💸

#LoveWhereverYouWork – Twitter

Twitter announced last week that it would support a permanently remote workforce. Even though there have been some notable remote-first or remote-only companies, we never had it at a Twitter scale. As more companies support remote work, it will have a massive implication on the local economy (commercial and residential real estate, to begin with). People in Silicon Valley are already talking about moving out.

Reddit About to Beat Facebook, Telegram, and Most ICOs With Actually Useful Token – Camila Russo

Reddit launched the Community Point system for its subreddits on the public Ethereum network, which means the awarded Points belong to the users forever. As a crypto skeptic, I don’t see that this ownership aspect differentiates the system much from other loyalty programs. Doesn’t Reddit still own the rest of the ecosystem that could change the value of the Points? Nonetheless, I am deeply curious about how this experiment will pan out.

Young Reacts #71 – Crank.js, blurhash, Seniorless, and more

One benefit of working from home and the resulting lost sense of time is that every weekend comes very fast.

Photo by Djim Loic on Unsplash


Software Engineering 🌐

Introducing Crank – Brian Kim

The entire React lifecycle […] could be expressed within a single async generator function.

An interesting experiment to move away from pure functions in React framework to side effects with async functions in Javascript. It was quite astounding to see how component lifecycle methods nicely map to a generator function.

blurhash: A very compact representation of a placeholder for an image. – Dag Ågren

blurhash is easily the most exciting library I found this week. With just a pre-calculated short string (20-30 characters), you can create a beautiful placeholder image.

Versioning fields in GraphQL – Leonardo Losoviz

We can create our field with an argument called version, through which we specify which version of the field to use.

I never thought of versioning subsections of a schema with a version argument. However, I still expect that the work of defining a contract, communicating changes, and program-managing the changes will not go away. Because those are human problems, not technical ones.

Typing functions in TypeScript – Axel Rauschmayer & Augmenting Interfaces in the Global Scope in TypeScript – Marius Schulz

These two Typescript articles taught me two things I always get confused about: How to overload functions, and how to type the global scope in a type-safe way.

People

Seniorless — 5 Reasons You Should Hire More Juniors – Gabriel Grinberg

I was in similar shoes when I was leading a team at a startup. I didn’t have the budget to hire senior engineers, so I instead turned to junior engineers and developed them. Contrarily, I concluded after two years, if your project is time-sensitive, and needs less uncertainty, not more, you should consolidate the headcounts and hire fewer, more senior engineers.

Carta’s covid-19 layoff – Henry Ward

I don’t want to celebrate this article since a lot of people just lost their jobs. However, I do appreciate a CEO of a company taking full responsibility for the decision to lay off.

Business 💸

COVID-19 Global Impact Charts – Luke Wroblewski

An eyeopening set of graphics showing how our society has changed because of the pandemic. Would you have guessed we sleep more now that we don’t need to commute?

The third wave of open source migration – Donald Fischer

for any technology-driven organization that hasn’t embraced the reality that the modern application development platform is a polyglot mix of open source languages, frameworks, and packages: the time is now.

The calculations will differ by organization. The crisis probably put cost-saving at a higher priority. Eventually, it comes down to build vs. buy and tradeoffs between paying the price now vs. later, and immediate benefit vs. future flexibility.

My Review of GraphQL Summit 2019

I have been to the GraphQL Summit 2019 hosted by Apollo in San Francisco. I was very excited since GraphQL is the technology I use and learn about every day. Overall, it was an excellent opportunity to see the increasing penetration and impact of GraphQL. Speakers frequently quoted this number from the npm survey: 23% of Javascript developers are using GraphQL. Naturally, many talks focused on scaling GraphQL from large companies such as Shopify, Paypal, and Expedia. The technology is not just for greenfield projects or startups anymore. But, their mobile talk lineup was relatively weak, possibly indicating the immaturity of GraphQL on mobile.

Talks were primarily divided into two categories: client-side and server-side. I mostly went to the client-side ones. Of those I went to, I enjoyed Fine-Tuning Apollo Client Caching for Your Data Graph, Client-side GraphQL at scale, and, The GraphQL developer experience the most. The followings are my notes on the talks I attended. I hope the notes guide you to find something interesting.


Day 1

The GraphQL developer experience by Danielle Man (👍)

From the start, Danielle made a good point about the real benefit of GraphQL. It’s not just about minimizing payload or reducing round trips. It’s about the productivity boost from the integrated experience with typed API, normalization, and intelligent caching. React, Prettier, and VS Code solved the challenges of component structure, formatting, and type intelligence. Now GraphQL solves the next big problem, data fetching. I like that she went into the whys of GraphQL and also gave an end-to-end view of the tooling. I recommend it to those whose GraphQL journey is just starting.

State Management in GraphQL using React Hooks & Apollo by Shruti Kapoor

I was a little disappointed with Shruti’s talk since I didn’t find it that relevant to GraphQL. As she focused mostly on React hooks, this is your talk if you aren’t familiar with hooks.

Fine-Tuning Apollo Client Caching for Your Data Graph by Ben Newman (👍)

Ben talked about the new features in the upcoming Apollo Client 3. I found the material very relevant because my team is already seeing a huge performance bottleneck from Apollo Cache. There were several exciting features: Garbage collection, declarative cache config (though it doesn’t statically check the config yet), and improved pagination handling. Since most of the features are about performance, the talk is meaningful for those using Apollo Client at scale already.

Scaling GraphQL Beyond a Backend for Frontend by Michelle Garrett

As a frontend developer, it can be frustrating trying to adopt GraphQL since you find yourself dependent on backend counterparts. Michelle talks about how you can go around the inertia by using a GraphQL middleware (or BFF). Though I believe client-side resolver is the lighter weight approach, it was inspiring to see her org, eventually turning around thanks to the superior developer experience. She then continues to talk about her plan to adopt a federation. This talk is appropriate for those interested in figuring out the GraphQL adoption strategy.

Apollo Lounge (not a talk)

I spent an hour in between talks to talk to Hugh Willson, one of the Apollo engineers behind Apollo Client 3, about the performance bottleneck I saw in the beta release. The problem was that the Apollo Client took a long time to respond to a large query response (a tree of about ~2000 objects) even with the denormalization turned off. Due to the time constraint, we didn’t get to the bottom of the issue. But it was nice to see how an Apollo engineer goes about debugging the client and also get reassured that my configuration was not a problem.

Game Of Types: A Song Of GraphQL And TypeScript by Steven Musumeche

After seeing Danielle’s talk, Steven’s talk didn’t feel new to me. Especially because I am following the development process he outlined almost precisely. But if you ever wonder how all these generated types (whether they are from Apollo Tooling or GraphQL Code Generatorfit into your type system, this talk is for you.

(Video is not yet available.)


Day 2

useSubscription: A GraphQL Game Show by Alex Banks

The most entertaining talk I have ever been to. Alex made GraphQL subscription via WebSocket unforgettable. However, as I went to the talk expecting to see GraphQL streaming (a misunderstanding on my part), I ended up getting a little disappointed. If you are building a real-time app, watch this talk when it becomes available.

How do you get changes made to GraphQL? by Orta

Even though GraphQL’s governance mostly feels irrelevant, it matters to all of us. Orta talked through how the current GraphQL Foundation came about and how he saw through the changes. This talk isn’t for everyone, but if you like to contribute to the spec one day, watch this.

The future of GraphQL tooling and DX by Daniel Woelfel

The whole talk felt like a sales pitch of his company, OneGraph. But Daniel indeed showcased many inspiring tools leveraging: a point-and-click GUI to build a query, an Excel plugin to import GraphQL data into a spreadsheet, and a type checker for queries embedded in markdown documents. The talk was more inspirational than useful.

Building a faster checkout experience at PayPal with GraphQL by Vishakha Singh

Vishakha focused on how minimized payload and some intelligent caching using GraphQL improves PayPal’s performance. But honestly, I didn’t have a lot of take-away.

Client-side GraphQL at scale by Chris Sauvé (👍)

Shopify’s admin app has ~1000 GraphQL queries and ~700 entities. The company came up with a couple of useful libraries to mitigate this complexity. One library filled the gap in Apollo Client’s type system using collocated d.ts for GraphQL documents, which I found smart. Another autogenerated mock data based on GraphQL schema. I plan to adopt both of them at my current projects. If you are pressed for time, you don’t need to watch the talk since the documentation on the libraries do an excellent job of explaining what they do.

Edit: All videos can now be found here. I linked the videos to my review as well.