Weekly Notes 28 - Web Performance, Optimizing Javascript, Typescript Releases & More

Phew, it's been almost a year since I last documented my weekly notes. A lot has happened during this period - including applying for over a hundred jobs and interviewing nonstop. I finally got an offer and this month (May) marks my 6th month at this wonderful company.

I'm making a few efforts to restart my writing journey, this time, more intentionally and consistently. Now to the exciting stuff for this week!

What I'm reading

  • Why I Quit Google’s WebAssembly Team, And How It Made Me Sick: An article about burnout from a former Google employee on the Web Assembly project. Another example of talented and exceptional engineers ending up in projects with bad leadership. This sounds very familiar to me and most engineers as I can imagine - wanting a project to work so badly and giving it your all, but almost nothing works because the people making the decisions aren't as passionate or interested as the hands-on people.

  • Announcing TypeScript 4.7 RC: A release candidate for Typescript 4.7 - including features like ESM support in nodejs, new file extensions to match .cjs and .mjs (.mts & .cts), instantiation expressions, etc. Check out the release blog post for more!

    One very neat feature is the newly added exports property in package.json... We could previously specify the entry point when building 3rd party libraries like so...

    {
      "name": "next...",
      "version": "0.1.0",
      "main": "app.js", // defaults to index.js
      "scripts": {
        "dev": "next dev"
      },
      "dependencies": {
        "@emotion/core": "^10.0.35"
      },
      "devDependencies": {
        "@types/node": "^14.6.0"
      }
    }
    

    But I learned, that we could use the exports property instead to specify more complex entry points like so...

    {
        "name": "next...",
        "version": "0.1.0",
        "exports": {
          ".": {
              // Entry-point for `import "my-package"` in ESM
              "import": "./esm/index.js",
              // Entry-point for `require("my-package") in CJS
              "require": "./commonjs/index.cjs",
          },
        },
        "scripts": {
          "dev": "next dev"
        },
        "dependencies": {
          "@emotion/core": "^10.0.35"
        },
        "devDependencies": {
          "@types/node": "^14.6.0"
        }
      }
    

    This makes it possible to use ESM and other module formats in the same codebase. You can learn more about them here

  • The Ultimate Guide to Optimizing JavaScript for Quick Page Loads: downloading, compiling, and executing Javascript is the most impactful performance bottlenecks in modern websites. Most websites just ship the whole JavaScript - without even code-splitting. This article mentions a few tools we can use to optimize JS on webpages like Astro, Marko, Qwik.

  • Improving Web Page Performance at DoorDash Through Server-Side Rendering with Next.JS: An article on implementing Nextjs SSR with a custom-server-approach. One interesting thing about this article is the strategy for incorporating Nextjs - they had both live apps running in the same codebase and tried to make everything SSR compatible rather than try to rewrite it in Nextjs.

    We wanted to learn quickly and see big performance wins for our customers without going through a multi-quarter effort to migrate a large app with dozens of pages. Migrating an entire multi-page app to Next.js would have been a massive effort that was out of scope for what we were trying to accomplish. We, therefore, opted for a page-by-page incremental adoption approach in which we migrated one page to Next.js at a time.

    And of course, there were interesting challenges like Analytics & tracking, etc... and the result

    Migrating our pages to Next.js achieved +12% and +15% page load time improvements on Home and Store . LCP (one of Google’s core speed metrics) has improved 65% on Home and 67% on store pages. Leading indicator of Poor URLs (LCP > 4s) on Google has dropped by 95%.

  • Programmable Notes: Quite an interesting view in the practice of note-taking. The author states the bulk of notes are taken and forgotten (this is soo true for me), and also talks about other note-taking systems like - evergreen notes, knowledge synthesis, etc. Then they suggest another method - Programmable note-taking. They’re based on programmable triggers that aid us to discover more about already noted info. Quite interesting.

  • Ask HN: Have you invested in self-development and done inner work?

  • The Tower of Weakenings: Memory Models For Everyone

  • Building a Cross-Platform Web & Mobile App from the Ground Up

  • State of the Web: Static Site Generators

  • An Introduction To Type Programming In TypeScript

  • How to Take Smart Notes - Sonke Ahrens [Book Summary]

Resources

  • Taro: A rockstar career mentor in your pocket: I learned about Taro earlier this week and it’s been very useful already. It’s a collection of tailored, actionable advice for optimizing your career as a software engineer. You’ll find insights about topics like code reviews, compensations, promotion, etc. Check out the iOS and Android apps!
  • Fig: Fig adds IDE-style autocomplete to your existing terminal: I mean, who wouldn’t want this! I struggle a lot when in my terminal, so sure. It’s still in beta I guess. But really cool tool.

That'll be all for this week. See you next week!