Safety First

We are extremely lucky to be able to deploy interactives directly on our pages instead of <iframes>, making responsiveness to devices monumentally easier. But this is contingent on never interfering with the safety and performance of Time.com. Here are a few things to remember:

Scope

As described in Getting Started, your styles are all encased in the id if your interactive and the .time-interactive class. Make sure you keep all of your styling inside the default parent selectors in styles.scss unless you have a very good reason to be modifying a style outside of bounds:

/* nothing outside of bounds */
#my_great_app_2021.time-interactive {
	/* Everything here applies only to DOM elements within the interactive <div> */
	/* E.g., the following, while questionably wise, would not alter the text of an article */
	p {
		font-size: 120px;
	}
}

Selectors

It's important that all CSS3 selectors encompass only elements within the interactive. To that end, as noted in Development, you've got an object called el that just represents the d3 selection of the parent <div>, such that el.selectAll('p') would not snag any text from anywhere else on the page.

When developing ids and class names for your project, it's essential to choose non-obvious strings, such that another JavaScript library doesn't accidentally snag something you created. This will also prevent any other stylesheets with broader scopes from painting your elements.

External Libraries

You can install any Node dependencies you like, bearing in mind that not every Node module is intended to work in the browser or properly shimmed. It is highly recommended that your import only the functions you'll want instead of using require for an entire module, though in some cases this is your only choice if the developer hasn't upgraded the exports recently (warning flag!). While Webpack will ideally use tree shaking to eliminate unused functions in an external library, it's good practice to use Python import conventions.

It is also supremely important that any third-party modules installed from NPM be mature, vetted and properly licensed. In a vast number of cases, the function you need is already in D3 somewhere.

For anything you install, either for pre-production calculations or inclusion in the client code, make sure to save it to package.json for future reference and builds. E.g.

npm install node-nlp --save-dev # Maybe you need to run a little natural-language processing on some text ahead of time
npm install fast-levenshtein --save-prod # And you need a fast implementation of Levenshtein distance in the interactive for when users enter text.

NPM has gotten better at auditing modules and their dependencies for security risks, to the point that it can be a shade alarmist at times, but don't count on this. Use libraries that are widely used in the community, have attentive documentation, and are actively maintained or extremely simple.