{"id":24875,"library":"30-seconds-of-code","title":"30 Seconds of Code","description":"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.","status":"active","version":"1.2.3","language":"javascript","source_language":"en","source_url":"https://github.com/30-seconds/30-seconds-of-code","tags":["javascript","snippets","list"],"install":[{"cmd":"npm install 30-seconds-of-code","lang":"bash","label":"npm"},{"cmd":"yarn add 30-seconds-of-code","lang":"bash","label":"yarn"},{"cmd":"pnpm add 30-seconds-of-code","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Default export; CJS require still works but ESM is recommended for modern environments.","wrong":"const _30s = require('30-seconds-of-code')","symbol":"_30s","correct":"import _30s from '30-seconds-of-code'"},{"note":"Named import is tree-shakeable; CJS destructure also works but less optimal.","wrong":"const average = require('30-seconds-of-code').average","symbol":"average","correct":"import { average } from '30-seconds-of-code'"},{"note":"Direct named import preferred; using default then property is extra step.","wrong":"import _30s from '30-seconds-of-code'; const all = _30s.all","symbol":"all","correct":"import { all } from '30-seconds-of-code'"}],"quickstart":{"code":"// Install: npm install 30-seconds-of-code\nimport _30s from '30-seconds-of-code';\n// Example: use the average function\nconst result = _30s.average(1, 2, 3);\nconsole.log(result); // 2\n\n// Or use ES module with named import\nimport { average } from '30-seconds-of-code';\nconsole.log(average(1, 2, 3)); // 2\n\n// Using CommonJS\nconst _30s = require('30-seconds-of-code');\nconsole.log(_30s.average(1, 2, 3)); // 2\n\n// CDN in browser:\n// <script src=\"https://unpkg.com/30-seconds-of-code@1/dist/_30s.es5.min.js\"></script>\n// <script>_30s.average(1, 2, 3);</script>","lang":"javascript","description":"Shows how to import and use the library via ESM, CommonJS, and CDN with a simple average function."},"warnings":[{"fix":"Use TypeScript with caution; check snippet documentation for type changes.","message":"v13.0.0 made articles typeless, which may affect snippet types.","severity":"breaking","affected_versions":">=13.0.0"},{"fix":"Use named imports to tree-shake in bundlers like Webpack or Rollup.","message":"Package includes many small functions; bundling all may increase size.","severity":"gotcha","affected_versions":"all"},{"fix":"Review snippet disclaimers before using in production code.","message":"Some snippets may not be optimized for production; marked in documentation.","severity":"deprecated","affected_versions":"all"},{"fix":"Use CommonJS require for Node <12 or transpile with Babel.","message":"ESM import requires Node.js >=12 or bundler; older Node may need CommonJS.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run 'npm install 30-seconds-of-code' and ensure import is correct.","cause":"Package not installed or wrong import path.","error":"Cannot find module '30-seconds-of-code'"},{"fix":"Use _30s.default.average or import named functions directly.","cause":"Using default import but calling named function incorrectly.","error":"TypeError: _30s.average is not a function"},{"fix":"Ensure package is in node_modules and bundler is configured correctly.","cause":"Webpack/bundler cannot resolve package; missing npm install.","error":"Module not found: Error: Can't resolve '30-seconds-of-code'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}