Short JavaScript code snippets for all your development needs

30 seconds of code

Last update: Dec 28, 2022

Overview

30 seconds of code

Short JavaScript code snippets for all your development needs

Visit our website to view our snippet collection.
Use the Search page to find snippets that suit your needs. You can search by name, tag, language or using a snippet's description. Just start typing a term and see what comes up.
Browse the JavaScript Snippet collection to see all the snippets in this project or click individual tags at the top of the same page to narrow down your search to a specific tag.
Click on each snippet card to view the whole snippet, including code, explanation and examples.
You can use the button at the bottom of a snippet card to copy the code to clipboard.
If you like the project, give it a star. It means a lot to the people maintaining it.

Want to contribute?

If you want to help us improve, take a minute to read the Contribution Guidelines first.
Use the Snippet Template to add new snippets to the collection.
If you find a problem with a specific snippet, please open an issue.
If you find a problem with the website, please report it in the web repository.

Credits

This repository is maintained by the 30 seconds of code organization on GitHub.
All snippets are licensed under the CC-BY-4.0 License, unless explicitly stated otherwise.
Logos, names and trademarks are not to be used without the explicit consent of the owners of the 30 seconds of code GitHub organization.
Our website is powered by Netlify, Next.js & GitHub.

Comments

Snippet tests

I wanted to know if there's a specific reason for not using TDD. I believe a light weight testing library like tape can provide a lot of value when trying to test code snippets. Especially snippets that are unresponsive or break when they come across edge cases

I believe having tests automated can also help the community test each snippet more rigorously and consistently before and after each PR
enhancement discussion

opened by kingdavidmartins 51
[FEATURE][ADD] Add stableSort function
New Snippet stableSort

Most browser engines support stable sorting via Array.sort() but not Chrome/NodeJS.

More information:

Wikipedia

Example

Implementation

What does your PR belong to?

[ ] Website

[x] Snippets

[ ] General / Things regarding the repository (like CI Integration)

[ ] Tests

Types of changes

[ ] Bug fix (non-breaking change which fixes an issue)

[ ] Enhancement (non-breaking improvement of a snippet)

[x] New feature (non-breaking change which adds functionality)

[ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

[x] My code follows the code style of this project.

[ ] My change requires a change to the documentation.

[x] I have updated the documentation accordingly.

[x] I have checked that the changes are working properly

[x] I have checked that there isn't any PR doing the same

[x] I have read the CONTRIBUTING document.
opened by simov 37
[SUGGESTION] Array, xValues Generalizations
[SUGGESTION] Array, xValues Generalizations

Description

I believe we should decide how we want methods that take a array or collection of values to be implemented

When going through the snippets I realized that methods like arrayMax() or arrayMin() or any other general method meant for a collection of values only work for 1 specific type.

For example:

const arrayMax = arr => Math.max(...arr); arrayMax([10, 1, 5, 23, 2, 12445, 25])// -> 12445 arrayMax(10, 1, 5, 23, 2, 12445, 25)// -> Breaks & Throws an Err

I think rather than creating a seprate method to handle the said exception/problem I think we could just easily handle and update all snippets with a oneliner that could easily fix the stated problem

I think its important for the following reasons: consistency, readability, performance, and modernity

Early on in the project we decided to stray from implementing pull() for pullAll() simply because 1 takes arr and the other take x amount of values and it didn't makes sense to implement 2 different functions that do the same thing when can easily be turned to 1 function.

It also helps reduce clutter

we ended up decided merging it into 1 function.

Now there's quite a few of snippets initializing like so. Only implementing one or the other

Just wanted to make sure I knew which is preferred in the future when implementing/updating other array/collection type methods/snippets & the reasoning behind which we do so choose
question opinions needed discussion
opened by kingdavidmartins 37
[FEATURE] http requests snippets
Description

I've added basic CRUD calls. They are implemented using XMLHttpRequest web API. In case someone missed the discussion on gitter earlier today this is the reason we are adding those snippets:

yeah it's the introductory way and it's easier to figure out, promises and fetch can be hard to grasp for newbies

I think I've done everything correctly. I would like someone to review changes and descriptions before we merge this. I had few problems with Git but everything should be fine.

What does your PR belong to?

[ ] Website

[x] Snippets

[ ] General / Things regarding the repository (like CI Integration)

Types of changes

[ ] Bug fix (non-breaking change which fixes an issue)

[ ] Enhancement (non-breaking improvement of a snippet)

[x] New feature (non-breaking change which adds functionality)

[ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

[x] My code follows the code style of this project.

[x] My change requires a change to the documentation.

[x] I have updated the documentation accordingly.

[x] I have checked that the changes are working properly

[x] I have checked that there isn't any PR doing the same

[x] I have read the CONTRIBUTING document.

on hold opinions needed discussion
opened by fejes713 35
Date Manipulating/Formatting Functions

Should we allow Date or time formatting related functions in the main repo?

While ubiquitous I feel like they would more belong in the archive section due to the reliance on a very confusing library and regional/national standards.
opinions needed discussion

opened by skatcat31 34
Elect Lodash Methods To Demystify ~ Log
Hey @elderhsouza Thanks again for the awesome log suggestion 👋 & Hey All 😄

So far I've decided to format the list like so

Library

Category

[x] link to snippet

Legend

[x] link to snippet ~ Means no PR has been ref or Submitted

[x] link to snippet | PR ref ~ Means PR is opened and ref

[x] ~~link to snippet | PR ref~~ ~ Means PR was closed and not merged

[x] link to snippet | file-name.md ~ Means PR has been merged & snippet has been implemented

Note If a snippet does not have a PR attached. That means a PR wasn't created or referenced

Here's a list of the following snippets so far with their respective PR. Remember if there isn't a PR ref attached to a snippet it means no one has gotten around to it yet 💔 Which also means there's work to be done & contributions to be made 💻 💯

Don't be shy and give it a try. Fork, Clone, Contribute, & Submit a PR 🎊

Also shout out to @Chalarangelo for starting such an awesome project 🎉

REMEMBER

Follow the guidelines in CONTRIBUTING.md No copy-pasting. Let's just try to have a fun and educative experience

Lodash

Function

[x] https://lodash.com/docs/4.17.4#throttle | throttle.md

[x] https://lodash.com/docs/4.17.4#debounce | debounce.md

[x] https://lodash.com/docs/4.17.4#rearg | rearg.md

[x] https://lodash.com/docs/4.17.4#overArgs | overArgs.md

[x] https://lodash.com/docs/4.17.4#rest | collectInto.md

[x] https://lodash.com/docs/4.17.4#partial | partial.md

[x] https://lodash.com/docs/4.17.4#partialRight | partialRight.md

[x] https://lodash.com/docs/4.17.4#delay | delay.md

[x] https://lodash.com/docs/4.17.4#bindKey | bindKey.md

[x] https://lodash.com/docs/4.17.4#bind | bind.md

[x] https://lodash.com/docs/4.17.4#ary | ary.md

[x] https://lodash.com/docs/4.17.4#unary | unary.md

[x] https://lodash.com/docs/4.17.4#negate | negate.md

[x] https://lodash.com/docs/4.17.4#once | #455

[x] https://lodash.com/docs/4.17.4#defer | #454

[x] https://lodash.com/docs/4.17.4#memoize | #433

[x] https://lodash.com/docs/4.17.4#wrap

[x] https://lodash.com/docs/4.17.4#after | times.md

[x] https://lodash.com/docs/4.17.4#before | times.md

[x] https://lodash.com/docs/4.17.4#spread | spreadOver.md

[x] https://lodash.com/docs/4.17.4#flip | flip.md

[x] https://lodash.com/docs/4.17.4#curry | curry.md

[x] https://lodash.com/docs/4.17.4#curryRight | pipe.md

Util

[x] https://lodash.com/docs/4.17.4#attempt | attempt.md

[x] ~~https://lodash.com/docs/4.17.4#conforms~~

[x] https://lodash.com/docs/4.17.4#bindAll | bindAll.md

[x] https://lodash.com/docs/4.17.4#flow | compose.md

[x] https://lodash.com/docs/4.17.4#flowRight | composeRight.md

[x] ~~https://lodash.com/docs/4.17.4#iteratee~~

[x] ~~https://lodash.com/docs/4.17.4#method~~

[x] ~~https://lodash.com/docs/4.17.4#methodOf~~

[x] ~~https://lodash.com/docs/4.17.4#mixin~~

[x] ~~https://lodash.com/docs/4.17.4#matchesProperty~~

[x] ~~https://lodash.com/docs/4.17.4#noConflict~~

[x] https://lodash.com/docs/4.17.4#nthArg | nthArg.md

[x] https://lodash.com/docs/4.17.4#over | over.md

[x] ~~https://lodash.com/docs/4.17.4#toPath~~

[x] https://lodash.com/docs/4.17.4#matches | matches.md

[x] ~~https://lodash.com/docs/4.17.4#times~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#identity~~

[x] https://lodash.com/docs/4.17.4#uniqueId | UUIDGeneratorBrowser.md & UUIDGeneratorNode.md

[x] ~~https://lodash.com/docs/4.17.4#stubArray~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#stubFalse~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#stubObject~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#stubString~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#stubTrue~~ | Natively implemented

[x] https://lodash.com/docs/4.17.4#range | initializeArrayWithRange.md

[x] https://lodash.com/docs/4.17.4#rangeRight | initializeArrayWithRangeRight.md

[x] https://lodash.com/docs/4.17.4#property

[x] https://lodash.com/docs/4.17.4#propertyOf | select.md

[x] ~~https://lodash.com/docs/4.17.4#overEvery~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#overSome~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#noop~~

[x] ~~https://lodash.com/docs/4.17.4#runInContext~~

[x] ~~https://lodash.com/docs/4.17.4#defaultTo~~

[x] ~~https://lodash.com/docs/4.17.4#constant~~

[x] ~~https://lodash.com/docs/4.17.4#cond~~

Array

[x] https://lodash.com/docs/4.17.4#pullAllBy | pullBy.md

[x] ~~https://lodash.com/docs/4.17.4#pullAllWith~~

[x] https://lodash.com/docs/4.17.4#sortedIndexBy | sortedIndexBy.md

[x] https://lodash.com/docs/4.17.4#sortedLastIndexBy | sortedLastIndexBy.md

[x] https://lodash.com/docs/4.17.4#takeRightWhile | takeRightWhile.md

[x] https://lodash.com/docs/4.17.4#takeWhile | takeWhile.md

[x] https://lodash.com/docs/4.17.4#dropRightWhile | dropRightWhile.md

[x] https://lodash.com/docs/4.17.4#dropWhile | dropWhile.md

[x] ~~https://lodash.com/docs/4.17.4#sortedIndexOf~~

[x] ~~https://lodash.com/docs/4.17.4#sortedLastIndexOf~~

[x] https://lodash.com/docs/4.17.4#sortedLastIndex | sortedLastIndex.md

[x] ~~https://lodash.com/docs/4.17.4#sortedUniq~~

[x] ~~https://lodash.com/docs/4.17.4#sortedUniqBy~~

[x] https://lodash.com/docs/4.17.4#intersectionBy | intersectionBy.md

[x] https://lodash.com/docs/4.17.4#intersectionWith | intersectionWith.md

[x] https://lodash.com/docs/4.17.4#unzipWith | unzipWith.md

[x] https://lodash.com/docs/4.17.4#unzip | unzip.md

[x] https://lodash.com/docs/4.17.4#unionBy | unionBy.md

[x] https://lodash.com/docs/4.17.4#unionWith | unionWith.md

[x] https://lodash.com/docs/4.17.4#xorBy | symmetricDifferenceBy.md

[x] https://lodash.com/docs/4.17.4#xorWith | symmetricDifferenceWith.md

[x] https://lodash.com/docs/4.17.4#differenceBy | differenceBy.md

[x] https://lodash.com/docs/4.17.4#differenceWith | differenceWith .md

[x] https://lodash.com/docs/4.17.4#zipWith | zipWith.md

[x] https://lodash.com/docs/4.17.4#sortedIndex | #440

[x] https://lodash.com/docs/4.17.4#xor | symmetricDifference.md

[x] https://lodash.com/docs/4.17.4#dropRight

[x] https://lodash.com/docs/4.17.4#zipObject

[x] https://lodash.com/docs/4.17.4#pullAll | pull.md

[x] https://lodash.com/docs/4.17.4#pullAt | pullAtIndex.md

[x] https://lodash.com/docs/4.17.4#pull | pull.md

[x] https://lodash.com/docs/4.17.4#remove | remove.md

[x] https://lodash.com/docs/4.17.4#without | without.md

[x] https://lodash.com/docs/4.17.4#takeRight | takeRight.md

[x] https://lodash.com/docs/4.17.4#zip | zip.md

[x] https://lodash.com/docs/4.17.4#intersection | intersection.md

[x] https://lodash.com/docs/4.17.4#flattenDepth | flatten-array-up-to-depth.md

[x] https://lodash.com/docs/4.17.4#nth | nth-element-of-array.md

[x] https://lodash.com/docs/4.17.4#fill | #118

[x] https://lodash.com/docs/4.17.4#drop | drop.md

[x] https://lodash.com/docs/4.17.4#flatten | flatten-array.md

[x] https://lodash.com/docs/4.17.4#flattenDeep | deep-flatten-array.md

[x] https://lodash.com/docs/4.17.4#union | union.md

[x] https://lodash.com/docs/4.17.4#chunk | chunk.md

[x] https://lodash.com/docs/4.17.4#compact | compact.md

[x] https://lodash.com/docs/4.17.4#concat | #107

[x] https://lodash.com/docs/4.17.4#difference | difference.md

[x] https://lodash.com/docs/4.17.4#head | head.md

[x] https://lodash.com/docs/4.17.4#fromPairs | objectFromPairs.md

[x] https://lodash.com/docs/4.17.4#last | last.md

[x] https://lodash.com/docs/4.17.4#initial | initial.md

[x] https://lodash.com/docs/4.17.4#tail | tail.md

[x] https://lodash.com/docs/4.17.4#take | take.md

[x] ~~https://lodash.com/docs/4.17.4#zipObjectDeep~~ | zipObject is sufficient for most use-cases

[x] ~~https://lodash.com/docs/4.17.4#findIndex~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#findLastIndex~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#join~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#indexOf~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#lastIndexOf~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#reverse~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#slice~~ | Natively implemented

Lang

[x] https://lodash.com/docs/4.17.4#castArray | castArray.md

[x] https://lodash.com/docs/4.17.4#cloneDeep | deepClone.md

[x] ~~https://lodash.com/docs/4.17.4#cloneDeepWith~~

[x] ~~https://lodash.com/docs/4.17.4#cloneWith~~

[x] ~~https://lodash.com/docs/4.17.4#conformsTo~~

[x] https://lodash.com/docs/4.17.4#isMatch | matches.md

[x] https://lodash.com/docs/4.17.4#isMatchWith | matchesWith.md

[x] ~~https://lodash.com/docs/4.17.4#isSafeInteger~~ | Natively implemented

[x] https://lodash.com/docs/4.17.4#isObjectLike | isObjectLike.md

[x] https://lodash.com/docs/4.17.4#isEmpty | isEmpty.md

[x] https://lodash.com/docs/4.17.4#isPlainObject | isPlainObject.md

[x] ~~https://lodash.com/docs/4.17.4#isNative~~ | Unstable, unreliable, check lodash's note

[x] https://lodash.com/docs/4.17.4#isUndefined | isUndefined .md

[x] https://lodash.com/docs/4.17.4#isError | is.md

[x] https://lodash.com/docs/4.17.4#isBuffer | is.md

[x] https://lodash.com/docs/4.17.4#isElement | is.md

[x] https://lodash.com/docs/4.17.4#isInteger | is.md

[x] https://lodash.com/docs/4.17.4#isNil | isNil.md

[x] ~~https://lodash.com/docs/4.17.4#isArguments~~

[x] ~~https://lodash.com/docs/4.17.4#isLength~~

[x] https://lodash.com/docs/4.17.4#isArrayBuffer | is .md

[x] https://lodash.com/docs/4.17.4#isMap | is .md

[x] https://lodash.com/docs/4.17.4#isRegExp | is .md

[x] https://lodash.com/docs/4.17.4#isSet | is .md

[x] https://lodash.com/docs/4.17.4#isTypedArray | is .md

[x] https://lodash.com/docs/4.17.4#isWeakMap | is .md

[x] https://lodash.com/docs/4.17.4#isWeakSet | is.md

[x] ~~https://lodash.com/docs/4.17.4#isArrayLikeObject~~

[x] https://lodash.com/docs/4.17.4#isEqual | #546

[x] ~~https://lodash.com/docs/4.17.4#isEqualWith~~

[x] ~~https://lodash.com/docs/4.17.4#toFinite~~

[x] ~~https://lodash.com/docs/4.17.4#toLength~~

[x] ~~https://lodash.com/docs/4.17.4#toNumber~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#toPlainObject~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#toArray~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#toInteger~~ | Natively implemented

[x] https://lodash.com/docs/4.17.4#toSafeInteger | toSafeInteger.md

[x] https://lodash.com/docs/4.17.4#isObject | isPrimitive.md

[x] https://lodash.com/docs/4.17.4#isArrayLike | #438

[x] ~~https://lodash.com/docs/4.17.4#isFinite~~ | Natively implemented

[x] https://lodash.com/docs/4.17.4#isNull

[x] ~~https://lodash.com/docs/4.17.4#toString~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#isNaN~~ | Natively implemented

[x] https://lodash.com/docs/4.17.4#clone | shallowClone.md

[x] https://lodash.com/docs/4.17.4#isArray | isArray.md

[x] https://lodash.com/docs/4.17.4#isBoolean | isBoolean.md

[x] https://lodash.com/docs/4.17.4#isFunction | isFunction.md

[x] https://lodash.com/docs/4.17.4#isNumber | isNumber.md

[x] https://lodash.com/docs/4.17.4#isString | isString.md

[x] https://lodash.com/docs/4.17.4#isSymbol | isSymbol.md

[x] ~~https://lodash.com/docs/4.17.4#lt~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#lte~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#eq~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#gt~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#gte~~ | Natively implemented

Object

[x] ~~https://lodash.com/docs/4.17.4#defaultsDeep~~

[x] https://lodash.com/docs/4.17.4#findKey | findKey.md

[x] https://lodash.com/docs/4.17.4#findLastKey | findLastKey.md

[x] ~~https://lodash.com/docs/4.17.4#forIn~~

[x] ~~https://lodash.com/docs/4.17.4#forInRight~~

[x] https://lodash.com/docs/4.17.4#defaults | defaults.md

[x] ~~https://lodash.com/docs/4.17.4#invoke~~

[x] ~~https://lodash.com/docs/4.17.4#result~~

[x] https://lodash.com/docs/4.17.4#omitBy | omitBy.md

[x] https://lodash.com/docs/4.17.4#pickBy | pickBy.md

[x] https://lodash.com/docs/4.17.4#omit | omit.md

[x] ~~https://lodash.com/docs/4.17.4#set~~

[x] ~~https://lodash.com/docs/4.17.4#setWith~~

[x] ~~https://lodash.com/docs/4.17.4#unset~~

[x] ~~https://lodash.com/docs/4.17.4#update~~

[x] ~~https://lodash.com/docs/4.17.4#updateWith~~

[x] https://lodash.com/docs/4.17.4#get | get.md

[x] https://lodash.com/docs/4.17.4#forOwnRight | #559

[x] https://lodash.com/docs/4.17.4#forOwn | #559

[x] ~~https://lodash.com/docs/4.17.4#mergeWith~~

[x] ~~https://lodash.com/docs/4.17.4#assignInWith~~

[x] https://lodash.com/docs/4.17.4#merge | merge.md

[x] https://lodash.com/docs/4.17.4#transform | transform.md

[x] https://lodash.com/docs/4.17.4#functions | functions.md

[x] https://lodash.com/docs/4.17.4#functionsIn | functions.md

[x] https://lodash.com/docs/4.17.4#mapKeys | mapKeys.md

[x] https://lodash.com/docs/4.17.4#mapValues | mapValues.md

[x] https://lodash.com/docs/4.17.4#at | select.md

[x] https://lodash.com/docs/4.17.4#pick | pick.md

[x] https://lodash.com/docs/4.17.4#invert | invertKeyValues.md

[x] https://lodash.com/docs/4.17.4#invertBy | invertKeyValues.md

[x] ~~https://lodash.com/docs/4.17.4#hasIn~~

[x] ~~https://lodash.com/docs/4.17.4#has~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#valuesIn~~

[x] ~~https://lodash.com/docs/4.17.4#values~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#keysIn~~

[x] ~~https://lodash.com/docs/4.17.4#keys~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#toPairsIn~~

[x] https://lodash.com/docs/4.17.4#toPairs | objectToPairs.md

[x] ~~https://lodash.com/docs/4.17.4#create~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#assignIn~~

[x] ~~https://lodash.com/docs/4.17.4#assign~~ | Natively implemented

Collection

[x] https://lodash.com/docs/4.17.4#findLast | findLast.md

[x] https://lodash.com/docs/4.17.4#countBy | countBy.md

[x] ~~https://lodash.com/docs/4.17.4#invokeMap~~ | Natively implemented

[x] https://lodash.com/docs/4.17.4#keyBy | groupBy.md

[x] ~~https://lodash.com/docs/4.17.4#flatMap~~

[x] ~~https://lodash.com/docs/4.17.4#flatMapDeep~~

[x] ~~https://lodash.com/docs/4.17.4#flatMapDepth~~

[x] https://lodash.com/docs/4.17.4#forEachRight | forEachRight.md

[x] https://lodash.com/docs/4.17.4#groupBy | groupBy.md

[x] https://lodash.com/docs/4.17.4#partition | #512

[x] ~~https://lodash.com/docs/4.17.4#reject~~ | #511

[x] https://lodash.com/docs/4.17.4#sortBy | orderBy.md

[x] https://lodash.com/docs/4.17.4#sampleSize | #434

[x] https://lodash.com/docs/4.17.4#size | #427

[x] https://lodash.com/docs/4.17.4#sample | sample.md

[x] https://lodash.com/docs/4.17.4#shuffle | shuffle.md

[x] https://lodash.com/docs/4.17.4#orderBy | orderBy.md

[x] ~~https://lodash.com/docs/4.17.4#includes~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#every~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#find~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#some~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#forEach~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#filter~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#reduce~~ | Natively implemented

[x] https://lodash.com/docs/4.17.4#reduceRight

[x] ~~https://lodash.com/docs/4.17.4#map~~ | Natively implemented

Math

[x] https://lodash.com/docs/4.17.4#maxBy | maxBy.md

[x] https://lodash.com/docs/4.17.4#minBy | minBy.md

[x] https://lodash.com/docs/4.17.4#meanBy | averageBy.md

[x] https://lodash.com/docs/4.17.4#sumBy | sumBy.md

[x] https://lodash.com/docs/4.17.4#sum | arraySum.md

[x] https://lodash.com/docs/4.17.4#max | arrayMax.md

[x] https://lodash.com/docs/4.17.4#mean | arrayAverage.md

[x] ~~https://lodash.com/docs/4.17.4#ceil~~ | natively implemented

[x] ~~https://lodash.com/docs/4.17.4#multiply~~ | natively implemented

[x] ~~https://lodash.com/docs/4.17.4#add~~ | natively implemented

[x] ~~https://lodash.com/docs/4.17.4#divide~~ | natively implemented

[x] ~~https://lodash.com/docs/4.17.4#floor~~ | natively implemented

[x] ~~https://lodash.com/docs/4.17.4#round~~ | natively implemented

[x] ~~https://lodash.com/docs/4.17.4#subtract~~ | natively implemented

String

[x] ~~https://lodash.com/docs/4.17.4#deburr~~ | Requires lookup table, will not implement

[X] https://lodash.com/docs/4.17.4#lowerFirst | decapitalize.md

[x] ~~https://lodash.com/docs/4.17.4#startCase~~

[x] ~~https://lodash.com/docs/4.17.4#repeat~~ | Natively implemented

[x] ~~https://lodash.com/docs/4.17.4#template~~ | Natively implemented (template literals)

[x] https://lodash.com/docs/4.17.4#escape | escapeHTML.md

[x] https://lodash.com/docs/4.17.4#unescape | unescapeHTML.md

[x] ~~https://lodash.com/docs/4.17.4#pad~~ | Natively implemented

[x] https://lodash.com/docs/4.17.4#kebabCase | toKebabCase.md

[x] https://lodash.com/docs/4.17.4#snakeCase | #321

[x] https://lodash.com/docs/4.17.4#words | words.md

[x] https://lodash.com/docs/4.17.4#escapeRegExp | escapeRegExpmd

[x] https://lodash.com/docs/4.17.4#camelCase | toCamelCase.md

[x] https://lodash.com/docs/4.17.4#capitalize | capitalizeEveryWord.md

[x] https://lodash.com/docs/4.17.4#upperFirst | capitalize.md

[x] https://lodash.com/docs/4.17.4#truncate | truncate.md

[x] ~~https://lodash.com/docs/4.17.4#lowerCase~~ | natively implemented

[x] ~~https://lodash.com/docs/4.17.4#padEnd~~ | natively implemented

[x] ~~https://lodash.com/docs/4.17.4#padStart~~ | natively implemented

[x] ~~https://lodash.com/docs/4.17.4#parseInt~~ | natively implemented

[x] ~~https://lodash.com/docs/4.17.4#replace~~ | natively implemented

[x] ~~https://lodash.com/docs/4.17.4#endsWith~~ | natively implemented

[x] ~~https://lodash.com/docs/4.17.4#split~~ | natively implemented

[x] ~~https://lodash.com/docs/4.17.4#startsWith~~ | natively implemented

[x] ~~https://lodash.com/docs/4.17.4#toLower~~ | natively implemented

[x] ~~https://lodash.com/docs/4.17.4#toUpper~~ | natively implemented

[x] ~~https://lodash.com/docs/4.17.4#trim~~ | natively implemented

[x] ~~https://lodash.com/docs/4.17.4#trimEnd~~ | natively implemented

[x] ~~https://lodash.com/docs/4.17.4#trimStart~~ | natively implemented

[x] ~~https://lodash.com/docs/4.17.4#upperCase~~ | natively implemented

Number

[x] https://lodash.com/docs/4.17.4#clamp | clampNumber.md

[x] https://lodash.com/docs/4.17.4#inRange | inRange.md

[x] https://lodash.com/docs/4.17.4#random | randomNumberInRange.md

Date

[x] https://lodash.com/docs/4.17.4#now

enhancement help wanted good first issue
opened by kingdavidmartins 33
To Binary Tree or Not to Tree
[SUGGESTION] Adding The Following Categories: Trees, Linked List, Double Linked List, Graph, Trie, Stack, & Queue

Description

I believe adding other categories representing different operations/manipulation of other data structures other than arrays / objects can also be beneficial to the project.

I think its important for the following reasons: exposure, growth, performance, and simplicity

An example of this would be Math.max() which is native and takes variadic inputs But then we had arrayMax() Then we made max() take both variadic & arrays. Which I regret & I partially take credit for see #295 Then #419 happened Now there's #463

I honestly believe separating methods by their data structure would be best, and would prevent what was described above from repeating itself. Especially when looking at the following example

For example let's say we want create a function that can find the maximum number from a particular data structure

Example

Array

max

const max = (arr) => Math.max(...arr);

max(Array); // Number

Binary Tree

max

const max = (Binary Tree) => code;

max(Binary Tree); // Number

Linked List

max

const max = (Linked List) => code;

max(Linked List); // Number

As you can see moving the project in this direction will not only prevent what was described with the following issues #295 | #419 | #463 from repeating them selves. But also keep snippetNames simple when adding to their respective categories.

Thoughts? @atomiks @skatcat31 @fejes713 @Chalarangelo
help wanted opinions needed discussion
opened by kingdavidmartins 32
Snippet restructuring
The current snippets are designed to be short/brief, but at the cost of sacrificing legibility. For example, the first snippet is:

arrayMax

Returns the maximum value in an array.

Use Math.max() combined with the spread operator (...) to get the maximum value in the array.

const arrayMax = arr => Math.max(...arr);` // arrayMax([10, 1, 5]) -> 10

I noticed when copy/pasting, the comments kinda got in the way. Ideally, you'd want to separate the definition and the usage.

Additionally, the description is a bit lackluster. Why is the spread operator and Math.max() being used? If you know how it works, then it's obvious, but to new developers reading the code they probably don't know what's happening.

I suggest you keep the what of the function at the top, then add a comprehensive how beneath.

arrayMax

Returns the maximum value in an array.

const arrayMax = arr => Math.max(...arr);

Usage

arrayMax([10, 5, -2, 11, 0]); // 11

Explanation

Math.max() returns the largest value given to it, accepting each value as a separate argument. For example, Math.max(1, 5, 3, 0) returns 5. However, it doesn't take an array of values - they must be supplied as separate arguments.

To find the largest value of an array, we can use the spread ... operator.

Math.max(...[1, 5, 3, 0]) is the same as Math.max(1, 5, 3, 0). The spread operator "spreads" the values of the array into the function as separate arguments, which returns the largest value, thus returning the largest value of an array.

The clear downside of this is decreased information density. Ideally you'd have the usage and explanation collapsed, only to be expanded if necessary, but that's not possible(?) with MD. But it seems like a perfect opportunity for the website. But then you have 2 different versions 😓

Thoughts/ideas?
enhancement question opinions needed discussion
opened by atomiks 31
[MAJOR FEATURE] Glossary
To enhance the website and repository and provide more value to newcomers that might be unfamiliar with JS, programming, web development or simply some terminology, we will be launching a glossary of JS,programming and webdev terms on a separate page and file. Here's the list of things we need to do before we launch this feature, as well as an incomplete list of terms we should document:

The chores

[x] Create a librarian script (I'd love to call it that, but we can call it something more sensible), that adheres to our current style, build a README in /glossary. assigned: @flxwu

[x] Add a keyword_database and its respective script for glossary terms to make search and term tagging more dynamic. assigned: @flxwu

[x] Update our webber script to generate a glossary page, similar to any tag page.

~~Launch with a couple of Medium articles to promote this new feature (I'll definitely write a comprehensive guide to JS and the frontend for newcomers, someone else can write another one).~~

~~If possible, use a script to add short tooltips to our snippets whenever a word from the glossary is present to further enhance the learning experience.~~ Maybe later

The template

Before moving forward, the barebones guidelines for glossary terms are:

Keep it short and simple.

File names have the first letter capitalized, are in snake-case and we should create a file for each term. Titles should have the first letter capitalized and be in space case.

Links might be added later down the line to trusted resources only, such as MDN (and maybe W3Schools), at the bottom of the file as a list.

Probably no code is necessary and explanation length should be around 2-3 sentences (one line per sentence as usual).

The term list

In general, I would like this to be a complete-ish guide to JS, programming and webdev. What goes in it?

Terms that are JS-specific (such as keywords - this comes to mind).

General terms related to programming, algorithms and programming paradigms (OOP, JSON, currying, functional programming).

Terms that are commonly used in the JS ecosystem (callbacks, AJAX).

Well-known resources and packages in the JS ecosystem (React, npm, MDN).

Terms related to web development, HTML, CSS and other complementary technologies (DOM, selectors).

A very incomplete list of terms that should be documented:

All the JS keywords we can document, add them to the list as we go

[x] Callback

[x] String

[x] Template literals

[x] Boolean

[x] Integer

[x] Array

[x] Function

[x] Object

[x] First-order function

[x] Functional programming

[x] Object-oriented programming

[x] Prototypical inheritance

[x] Dynamic programming

[x] Event-based programming

[x] Asynchronous programming

[x] Recursion

[x] Reference vs Value (I don't like the name of this, but we'll figure it out)

[x] Regular expressions

[x] Event loop

[x] Functors

[x] Factory functions

[x] Currying

[x] Class

[x] Promises

[x] HTTP/HTTPS

[x] IP (with v4 and v6 explained)

[x] HTML

[x] CSS

[x] SVG

[x] XML

[x] XHTML

[x] Pseudo-class

[x] Pseudo-element

[x] Domain name

[x] Domain registrar

[x] JSON

[x] CSV

[x] MVC

[x] jQuery

[x] React

[x] Vue

[x] MDN

[x] ES6

[x] Selector

[x] CI

[x] Git (and some related commands)

[x] Repository

[x] DOM

[x] Argument

[x] Closures

[x] Hoisting

[x] Node.js

[x] npm

[x] yarn

[x] Express

[x] AJAX

[x] SSL/TLS

[x] Progressive Web Apps

[x] Constant

[x] Variable

[x] Constructor

[x] Cross-site scripting (XSS)

[x] Cross-origin resource sharing (CORS)

[x] Serialization

[x] Desirialization

[x] Typescript

[x] Flexbox

[x] Scope (and Global Scope, Local Scope etc.)

[x] Garbage collection

[x] Mutability/Immutability

[x] Modules (and all kinds of module systems)

[x] Responsive web design

[x] Viewport

[x] SEO

[x] Strict mode

[x] SQL

[x] MariaDB

[x] MongoDB

[x] SQL injection

[x] Prepared statements

[x] WebRTC

[x] WebAssembly

[x] WebSockets

[x] WebGL

[x] Automatic Semicolon Insertion (ASI)

[x] API

[x] URL

[x] URI

[x] DNS

[x] UTF-8 (and other encodings, or a term for encodings in general)

[x] Element

[x] Stream

[x] Maps/Dictionaries (I think this could be interesting to explain, but is up for discussion)

[x] this and bind

[x] Unit test

[x] Integration test

[x] __proto__ and prototype

This list is definitely not complete and MDN has a ton more entries we could include, but I think it's a decent start.

Opinions, suggestions and more ideas for terms are appreciated, let's get started!
enhancement help wanted good first issue discussion
opened by Chalarangelo 30
arrayToHtmlList update

Description

So our function arrayToHtmlList is in a pretty bad space and could use an update. We already had some discussion over at #675 but I wanted to move the update discussion over to an issue for more visibility.

Current problem:

It uses an awkward query selector instead of the document.prototype.getElementByID() function, and it uses an IIFE to declare an intermediate variable closure when we could do with just API chaining the return values.

Another issue is we are just forcing it inside a list item. We could easily allow a formatter to be passed as the last argument with the map footprint and a default that won't change functionality, however the change in footprint because a bit... awkward as it becomes data, binding, callback, but it was an old monster to begin with.

With those two issues in mind we should look at either updating or cleaning up the snippet so it is more maintainable than it's current form or decide to leave as it.
enhancement good first issue opinions needed discussion

opened by skatcat31 25

Add permuteAll

Description

add utility function permuteAll [updated with commit 96c37ee]

permuteAll

Uses recursion and Array.push() to return all the permutations of the given input in an array.

const permuteAll = (input) => {
  const result = [];
  let inputState = input;

  if (typeof input === 'string') inputState = input.split('');
  if (typeof input === 'number') inputState = (input).toString().split('');

  const permute = (arr, m = []) => {
    (arr.length === 0)
      ? result.push(m)
      : arr.forEach((_, i) => {
          let curr = arr.slice();
          let next = curr.splice(i, 1);
          permute(curr.slice(), m.concat(next));
        });
  };

  permute(inputState);

  return (typeof input === 'string')
            ? result.map(variant => variant.join(''))
            : (typeof input === 'number') 
                ? result.map(variant => parseFloat(variant.join('')))
                : result;
}

permuteAll('sun') // [ 'sun', 'snu', 'usn', 'uns', 'nsu', 'nus' ]
permuteAll([1, 33, 5]) // [ [ 1, 33, 5 ], [ 1, 5, 33 ], [ 33, 1, 5 ], [ 33, 5, 1 ], [ 5, 1, 33 ], [ 5, 33, 1 ] ]
permuteAll(345) // [ 345, 354, 435, 453, 534, 543 ]

What does your PR belong to?

[ ] Website
[x] Snippets
[ ] General / Things regarding the repository (like CI Integration)
[x] Tests

Types of changes

[ ] Bug fix (non-breaking change which fixes an issue)
[ ] Enhancement (non-breaking improvement of a snippet)
[ ] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

[x My code follows the code style of this project.
[ ] My change requires a change to the documentation.
[x] I have updated the documentation accordingly.
[x] I have checked that the changes are working properly
[x] I have checked that there isn't any PR doing the same
[x] I have read the CONTRIBUTING document.

opened by kingdavidmartins 25

Releases(v1.2.3)

v1.2.3(Dec 5, 2018)
v1.2.3 release:

Fixed some bundling issues.

Source code(tar.gz)
Source code(zip)
v1.2.0(Nov 10, 2018)

v1.2.0 release:

The third stable release of 30 seconds of code, set up with proper testing, coverage and much more. Lots of optimizations and improvements across the board. Enjoy!
Source code(tar.gz)
Source code(zip)
v1.1.0(Sep 22, 2018)

v1.1.0 release:

The second stable release of 30 seconds of code, which also marks the move to an organization. Many snippets have been optimized and streamlined since the last release and a lot of changes have been made to the project to improve user experience.
Source code(tar.gz)
Source code(zip)
v1.0.0(Jul 16, 2018)

v1.0.0 release:

The first stable release of 30 seconds of code, this is mostly a reference point for the project to signify stability for all snippets that are included. Some snippets are still not production-ready, but there is enough information for developers to identify them and proceed with caution.
Source code(tar.gz)
Source code(zip)