How to use Babel's new addExternalDependency API

Kemal Ahmed — Sat, 12 Nov 2022 05:10:04 +0000

The story begins with me as a clout-chasing, NPM library maintainer. The library is a Babel plugin, known as react-native-dotenv.

The problem? Babel was caching the non-Javascript files the library was meant to load. The real problem? My ego was being obliterated by developers who were replacing my library as a dependency because they needed a functional way to load environment variables into their react native apps.

To solve it, I scoured the Babel feature pipeline, a.k.a. random draft PRs people had created to add any file to the Babel watchlist. I bumped it, did no extra work, watched the Babel team pick it up and do an epic job on it, and planned to write a blog to take full credit for my prod.

When addExternalDependency was born, the release had so many other amazing features, the docs were not up to par of the other Babel docs. So I made a pact with the devs that I would write some documentation in exchange for help on fixing up my library and this is my lousy attempt at it.

So to begin, in my module.exports function, I made sure to tell Babel what and how to cache the alien files that are dear to my library. I use a function to verify if they've been updated recently

function mtime(filePath) {
  try {
    return statSync(filePath).mtimeMs
  } catch {
    return null
  }
}

and for each file path I'm checking I add:

api.cache.using(() => mtime(options.path))

Now we tell Babel to watch for changes and recompile:

api.addExternalDependency(path.resolve(options.path))

And for the hardest part? Convince every library to upgrade their versions of Babel. Or tell your users to add the following to their package.json:

"resolutions": {
  "@babel/core": "^7.20.2",
  "babel-loader": "8.3.0"
}

As of writing this article I am searching for a job. If I've tricked you into thinking I'm a half-decent Javascript developer, please tell a hiring manager near you because I'm competing against other exceptional devs from Twitter and Meta.

Stop donating your customers' data to Google Analytics

Kemal Ahmed — Tue, 21 Jan 2020 05:53:07 +0000

In 2020, with better alternatives available, using Google Analytics (GA) to track your web usage is nothing short of donating data to a multinational corporation. Aside from only letting you sample 25% of your traffic, GA is a free ticket for them to sell your customers' data to their advertising partners.

Compared to AWS Pinpoint, which is even HIPAA compliant, GA works by asking you to add a tracker to your website that cross examines your customers' habits across all the websites they use to find out everything about them.

And if you think that's okay, you should take your head out of the sand because consumers are demanding it. Please tell me how many of your users like the large cookie agreement popups that they have to dismiss...I-I mean read and accept just to consume your content. Agreements that you're forced to have them agree to because you're using cookie-based trackers like GA.

Tracker blockers are increasing in popularity so consumers can protect themselves against this tracking, reducing the effectiveness of your analytics.

Even if you want to be selling your customers' data, data is the new oil and GA is Deepwater Horizon. As in raking it in, but also about to catch fire and sink. Tools like Pinpoint on the other hand keep the data in your closed system and even allows you to attach more extensive analytics like Kinesis. To train machine learning models on data you've collected would require you to create pipelines between data centres. It's a single click:

Currently, AWS Pinpoint requires you to import Amplify to your project. If you're looking for a tracking-tag solution like for Google Analytics, it's now that simple:

<script
    data-id-pool="us-east-1:abcd1234-abcd-1234-5678-abcd12345678"
    data-pinpoint-id="1234abcd5678abcd7890abcd1234"
    id="aws-web-analytics"
    src="https://goatandsheep.github.io/aws-web-analytics/dist/aws-web-analytics.js"
    type="text/javascript"
></script>

This is thanks to an analytics package I built that uses Amplify to connect to AWS Pinpoint. If you're interested in contributing, please visit the project repo.

DEV Community: Kemal Ahmed

How to use Babel's new addExternalDependency API

Stop donating your customers' data to Google Analytics