Reflecting on 3 years at Microsoft

February 16, 2024 marks 3 years for me at my dream job at Microsoft. I've loved Microsoft since long ago when I was learning ASP.net MVC from Scott Hanselman, Jon Galloway, Phil Haack, etc via blogs and tweets in 2012! I've had every Xbox we've made, ... more

The JavaScript Developer's Guide to Ubuntu on Windows 11 with WSL

This is a bit of a re-hash of an earlier post on setting up WSL in Windows. It is just so easy now, that I wanted to make a whole new post. It's seriously as easy as wsl --install now! Seriously just check this out... 👇👇 ... more

Learning how to Learn

As silly as it sounds, the ability to learn is not necessarily easy. We all as engineers put ourselves in a state where we put guilt on ourselves when we stop what we're doing, and learn something because it feels like that's not "work". 💡 ... more

Tips for writing nodejs scripts using only built-in modules and async

For the last few years, I've spent a huge majority of my time writing scripts in nodejs as my default scripting language. I've dabbled with bash a bit too, but it's still so weird, and hard to test, and I'm such a Typescript fan that I generally prefer ... more

Calling an API with authorization using native nodejs with zero external dependencies

Fetching from an API is one of the most repeated tasks for anyone writing JavaScript backends with node.js. There are dozens of libraries for doing this including node-fetch , isomorphic-fetch , axios , etc etc, however, there's actually a couple of ... more

Running Typescript scripts in node using esbuild

Typescript is hands down my favorite way to write Javascript these days, but sometimes when I just want to run a quick JS script to do something, I'll still reach for node ./foo/script.js . I'll sometimes reach for babel-node `, or @babel/register , ... more

Inside the pain of monorepos and hoisting

Working in a monorepo comes with a long list of pros, and a few cons. One of the most painful cons, when it comes to working in a specifically JavaScript based monorepo, is the pain that comes from hoisting. What's this hoisting thing? As we all know, ... more

Setting up WSL2 and the VSCode Remote Containers WSL Plugin

For years, macOS has been the gold standard for tooling when it comes to Web Development. The unix basis of macOS, iTerm, bash, VIM, etc are all things that folks building for the web platform rely on day to day. That all changes with WSL2. WSL2 allows ... more

Getting started with Frontend Architecture and DivOps

Trying to understand the world of Frontend Software Development is like trying to solve a Rubix cube that automatically scrambles itself when you get close to solving it. You'll never fully understand it, and that's ok! What you can do though is maybe ... more

Running Typescript programs with babel-node aka how does babel register work

As a member of a frontend infrastructure team, (aka DivOps), I write a lot of Javascript tooling. I also really really like Typescript. In fact most of the tooling I write these days is written in Typescript. The problem is, when the tools we work on ... more

Dealing with async jest tests

In jest, there are a couple of different ways to handle tests which deal with async code. Let's say way have a test that calls fetchSomeAsyncThing() . it('should call my api', () => { const result = fetchSomeAsyncThing(); expect(result.foo).toBe('hello ... more

For of loops in Javascript one loop to rule them all

For the longest time, for in and for were the main loops you could use to iterate over collections of things in JavaScript. Then we got some fancy array methods like forEach , map , filter , etc. It starts to get a bit confusing of when to use each loop ... more

Announcing Div Ops as the Slack and Reddit communities

tldr; Let's unite around the idea of frontend tooling by creating a #DivOps community. https://bit.ly/div-ops-slack https://www.reddit.com/r/divops/ What am I even? A few months ago, my co-worker Kyle Welch and I were chatting about what we do on our ... more

How to successfully manage a large scale JavaScript monorepo aka megarepo

First off, this is a follow up to a post I did recently! Say bye to monorepos say hello to megarepos Breaking up a monolith can be a daunting task. Oftentimes a monolith gets broken up into many repos, and sometimes into a monorepo. But, here’s the problem ... more

How WebPack decides what entry to load from a package.json

Today I was working on creating a node.js bundle using webpack 4, and came across a fun little doozie of an error which lead me to do a bit of code spelunkery into how Webpack actually decides on what to load when you require something from node_modules ... more

WebPack production environment is NOT the NODE_ENV or BABEL_ENV environment variable

A revelation came to me the other day when I was reviewing some of our bundling processes at Eventbrite. We currently run production bundles like this... node --max_old_space_size=4096\ ./node_modules/.bin/webpack \ --bail \ --config-name node \ --env.production ... more

Why would you NOT use TypeScript?

In a world where JavaScript is arguably the most popular tool for building software these days, it seems like it's everywhere now. With node.js, it's on the backend, with Electron it's native on your machine, with React Native, it's native on your phone. ... more

Why would you NOT use TypeScript?

In a world where JavaScript is arguably the most popular tool for building software these days, it seems like it's everywhere now. With node.js, it's on the backend, with Electron it's native on your machine, with React Native, it's native on your phone. ... more

Using do expressions in redux reducers

There's an interesting proposal that's stage 1 currently (as of 9/26/2017) called do expressions . Thanks to the magic that is Babel, you can already go ahead and try this out with the do expression transform... https://babeljs.io/docs/plugins/transform-do-expressions/. ... more

Using do expressions in redux reducers

There's an interesting proposal that's stage 1 currently (as of 9/26/2017) called do expressions . Thanks to the magic that is Babel, you can already go ahead and try this out with the do expression transform... https://babeljs.io/docs/plugins/transform-do-expressions/. ... more

Debugging node and Jest tests with VS Code's debugger

VS Code has become my favorite IDE for pretty much everything these days. There are so many great features it has to offer including the ability to debug node.js. Here is the launch.json I used to get the debugger working for me. ... more

Getting started with TypeScript, WebPack, and React

We've been integrating TypeScript more and more into our workflow at Lonely Planet. I wanted to just quickly share how easy it is to get started working with TypeScript and Webpack! It takes a very simple webpack.config... module.exports = { entry: "./src/index.tsx", ... more

Getting started with TypeScript, WebPack, and React

We've been integrating TypeScript more and more into our workflow at Lonely Planet. I wanted to just quickly share how easy it is to get started working with TypeScript and Webpack! It takes a very simple webpack.config... module.exports = { entry: "./src/index.tsx", ... more

Testing typescript classes with Jest and Jest Mocks

Typescript is a powerful way to build applications. It offers type checking to catch errors before they make it to the browser. On top of just utilizing typescript to catch bugs, it's still important to make sure Typescript code is tested. Facebook released ... more

Chrome back button in express caching issue solved

While working in a React/express universal app, I created an express route that serves both JSON and HTML sort of like how Rails has a respond_to block. That way if I just add .json on to the end of some of my requests it will give me the JSON used to ... more

Fetching data in a universal react router app with async actions

One of the most difficult things when working in a universal app is fetching data on the client side. With es2017 and the React lifecycle, it can be done easily. I love async and await in es2017. If you haven't started using them yet. Do it NAOW. Fetching ... more

Advanced WebPack Part 3 - Creating a custom notifier plugin

At Lonely Planet we use the heck out of WebPack. It's an incredibly powerful tool. Sometimes it takes a while though. I decided today that rather than watching the command line while it compiles to know when I'm good to refresh the browser, I'd just ... more

WebPack Code splitting with ES6 and Babel 6

Today is the day that finally, we decided it was time to make the move from Babel 5 to 6. It's been on our Technical Debt list for quite a while now. Here's what we had to do to get it working! Update the package.json First and foremost was to get all ... more

WebPack Code splitting with ES6 and Babel 6

Today is the day that finally, we decided it was time to make the move from Babel 5 to 6. It's been on our Technical Debt list for quite a while now. Here's what we had to do to get it working! Update the package.json First and foremost was to get all ... more

Advanced WebPack Part 2 - Code Splitting

WebPack has a feature that utilizes the AMD spec called Code Splitting. What it allows you to do is "split your code" (insert troll face). Seriously, it's an amazing feature. What generally happens when you work with a standard WebPack build ... more