Registry / data / 30-seconds-of-code

30-seconds-of-code

library1.2.3jsnpmunverified

Curated collection of useful JavaScript snippets that can be understood in 30 seconds or less. The npm package provides a function library with over 200+ snippets covering array, object, string, utility, and DOM operations. Current stable version is v14.0.0 as of recent releases, with a major infrastructure overhaul. Key differentiators: snippets are small, self-contained, and educational; package is published on npm and CDN; includes both CommonJS and ESM support. The library is maintained by the 30-seconds organization and has a vibrant community with multiple related projects.

data web-framework

npm install 30-seconds-of-code

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · 30-SECONDS-OF-CODE

30-seconds-of-code

datajavascriptv1.2.3

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

_30s

✓ import _30s from '30-seconds-of-code'

✗ const _30s = require('30-seconds-of-code')

Default export; CJS require still works but ESM is recommended for modern environments.

average

✓ import { average } from '30-seconds-of-code'

✗ const average = require('30-seconds-of-code').average

Named import is tree-shakeable; CJS destructure also works but less optimal.

all

✓ import { all } from '30-seconds-of-code'

✗ import _30s from '30-seconds-of-code'; const all = _30s.all

Direct named import preferred; using default then property is extra step.

Shows how to import and use the library via ESM, CommonJS, and CDN with a simple average function.

// Install: npm install 30-seconds-of-code import _30s from '30-seconds-of-code'; // Example: use the average function const result = _30s.average(1, 2, 3); console.log(result); // 2 // Or use ES module with named import import { average } from '30-seconds-of-code'; console.log(average(1, 2, 3)); // 2 // Using CommonJS const _30s = require('30-seconds-of-code'); console.log(_30s.average(1, 2, 3)); // 2 // CDN in browser: // <script src="https://unpkg.com/30-seconds-of-code@1/dist/_30s.es5.min.js"></script> // <script>_30s.average(1, 2, 3);</script>

Debug

Known issues

breakingv13.0.0 made articles typeless, which may affect snippet types.

fix

Use TypeScript with caution; check snippet documentation for type changes.

affects: >=13.0.0

gotchaPackage includes many small functions; bundling all may increase size.

fix

Use named imports to tree-shake in bundlers like Webpack or Rollup.

affects: all

deprecatedSome snippets may not be optimized for production; marked in documentation.

fix

Review snippet disclaimers before using in production code.

affects: all

gotchaESM import requires Node.js >=12 or bundler; older Node may need CommonJS.

fix

Use CommonJS require for Node <12 or transpile with Babel.

affects: all

Errors

Common errors & fixes

Cannot find module '30-seconds-of-code'

Package not installed or wrong import path.

fix

Run 'npm install 30-seconds-of-code' and ensure import is correct.

TypeError: _30s.average is not a function

Using default import but calling named function incorrectly.

fix

Use _30s.default.average or import named functions directly.

Module not found: Error: Can't resolve '30-seconds-of-code'

Webpack/bundler cannot resolve package; missing npm install.

fix

Ensure package is in node_modules and bundler is configured correctly.

Upgrade

Version history

1.2.3latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

65 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/30-seconds/30-seconds-of-code ↗

packagehttps://www.npmjs.com/package/30-seconds-of-code ↗

homepagehttps://30secondsofcode.org/ ↗