By taking advantage of built-in Browser features, we can easily fetch, explore, manipulate, and use data from existing sources.
The components involved are:
Using dynamic import, we can import npm modules for use when debugging or manipulating data.
import('https://unpkg.com/lodash@latest/lodash.min.js') _.add(4, 6) // 10
This gives us the option of using lodash, ramda, or your library of choice for slicing, dicing, and formatting data as you see fit.
You can import from unpkg, jsDelivr, or your choice of CDN.
Here are some examples:
import("https://cdn.jsdelivr.net/npm/ramda@latest/dist/ramda.min.js") // or import("https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js")
Many libraries are difficult to import this way, since they are not in a format compatible with dynamic import. Look for .mjs files or UMD modules when available. Most CommonJS libraries won't work here.
const temp1 = [1,2,3]; // could be any variable copy(temp1); // clipboard now contains "[1,2,3]"
Let's say you are working on a web component to display a blog post, and you hear some of them are overflowing the container. Using the following recipe, you can calculate various descriptive statistics to figure out what your component should support.
const getSimpleStatisticsFromUnpkg = async () => await import( "https://firstname.lastname@example.org/dist/simple-statistics.mjs" ); // hit enter const simpleStatistics = await getSimpleStatisticsFromUnpkg(); // the module is now available under the 'simpleStatistics' namespace const getPosts = async () => await fetch( "https://jsonplaceholder.typicode.com/posts" ) .then(res => res.json()); const posts = await getPosts(); // hit enter // alternatively, use a stored global variable like temp1 in place of posts; const average = simpleStatistics.average(posts.map(post => post.body.length)) // average = 160.64 copy(average); // paste into an email to your designer ;-)
For more info, check out