337: ES Modules on CodePen

CodePen Radio

Episode | Podcast

Date: Wed, 13 Oct 2021 23:22:51 +0000

<p>ES Modules are <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">a native feature</a> of JavaScript! The import and export keywords are actually a mighty powerful thing for a language to have. You can use them right on CodePen of course. For example, with our <a href="https://blog.codepen.io/documentation/url-extensions/">URL extensions</a>, you can export stuff from one Pen and import it in another without having to use the External Resources feature in Settings or anything, which might make your code more clear. </p> <p>Then with incredible services like <a href="https://www.skypack.dev/">Skypack</a>, you have the entire world of npm available to import. Here's <a href="https://codepen.io/collection/naEqLJ">a whole Collection</a> of examples like that. React is easy pickings:</p> <p>ES Modules is getting fancier and fancier!</p> <ul><li><a href="https://css-tricks.com/ecmascript-proposal-json-modules/">JSON Modules</a></li><li><a href="https://css-tricks.com/css-modules-the-native-ones/">CSS Module Scripts</a></li></ul> <p>import all the things!</p> <h3 id="h-sponsor-netlify">Sponsor: <a href="https://www.netlify.com/products/functions/">Netlify</a></h3> <p>Among many incredibly innovative things Netlify has done is to <a href="https://www.netlify.com/products/functions/">offer cloud functions</a> for any site you publish on Netlify. You chuck your functions in a functions folder (configurable) and they'll run as AWS Lambda functions, without you even having to have an AWS account or deal with any of that ceremony. Now if you need a bit of server side code for your otherwise static site, you got it. Incredibly useful for doing any sort of dynamic functionality that needs to reach out to databases or APIs with security. And hey, if you need to import stuff, <a href="https://flaviocopes.com/netlify-functions-npm-packages/">you got it</a>. </p>