Returns a random element from an array, using the provided weights as the probabilities for each element.

Use Array.prototype.reduce() to create an array of partial sums for each value in weights.
Use Math.random() to generate a random number and Array.prototype.findIndex() to find the correct index based on the array previously produced.
Finally, return the element of arr with the produced index.

继续阅读 30秒学会 JavaScript 片段 – weightedSample

Mutates the original array to filter out the values specified. Returns the removed elements.

Use Array.prototype.filter() and Array.prototype.includes() to pull out the values that are not needed.
Use Array.prototype.length = 0 to mutate the passed in an array by resetting it’s length to zero and Array.prototype.push() to re-populate it with only the pulled values.
Use Array.prototype.push() to keep track of pulled values

继续阅读 30秒学会 JavaScript 片段 – pullAtValue

Creates a collection of elements, grouped based on the position in the original collections.

Use range to iterate over the params, reflect.ValueOf() and Value.Len() to find the longest collection.
Use make() to create a 2D interface{} slice of length equal to the longest collection.
Use make() to create a slice for each element in the result, range to iterate over params.
Use reflect.ValueOf(), Value.Len(), append(), Value.Index() and Value.Interface() to add values to the result.

继续阅读 30秒学会 Golang 片段 – Zip

A hover effect where the gradient follows the mouse cursor.

  • --x and --y are used to track the position of the mouse on the button.
  • --size is used to keep modify of the gradient’s dimensions.
  • background: radial-gradient(circle closest-side, pink, transparent); creates the gradient at the correct postion.

继续阅读 30秒学会 CSS 片段 – Mouse cursor gradient tracking

Creates a vertical masonry layout using HTML and CSS.

  • Create a masonry-style layout that consists of "bricks" that fall into each other with either a fixed width (vertical layout) or a fixed height (horizontal layout), forming a perfect fit. Especially useful when working with images.
  • .masonry-container is the container for the masonry layout. Within that container, there’s a div.masonry-columns, which will automatically put each child element, .masonry-brick, into the layout.
  • .masonry-brick must be have display: block to allow the layout to flow properly, while the :first-child of this class should have a different margin to account for its positioning.
  • CSS variables are used to allow for greater flexibility for the layout, while media queries ensure that the layout flows responsively in different viewport sizes.

继续阅读 30秒学会 CSS 片段 – Masonry Layout

Mutates the original array to filter out the values specified, based on a given iterator function.

Check if the last argument provided in a function.
Use Array.prototype.map() to apply the iterator function fn to all array elements.
Use Array.prototype.filter() and Array.prototype.includes() to pull out the values that are not needed.
Use Array.prototype.length = 0 to mutate the passed in an array by resetting it’s length to zero and Array.prototype.push() to re-populate it with only the pulled values.

继续阅读 30秒学会 JavaScript 片段 – pullBy

Returns true if two collections contain the same elements regardless of order, false otherwise.

Use IEnumerable.GroupBy() to create groups for each distinct value in each collection, IEnumerable.ToDictionary() to convert the result to a Dictionary.
Use IEnumerable.Union() and IEnumerable.Distinct() to find the distinct values from both collections and loop over them using a foreach loop.
Use Dictionary.ContainsKey() to check that each distinct value exists in both collections and compare the count for each one.
Return false if any value is not found in either collection or if any count does not match, true otherwise.

继续阅读 30秒学会 C# 片段 – HaveSameContents

Creates an animated underline effect when the text is hovered over.

  • display: inline-block makes the block p an inline-block to prevent the underline from spanning the entire parent width rather than just the content (text).
  • position: relative on the element establishes a Cartesian positioning context for pseudo-elements.
  • :after defines a pseudo-element.
  • position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
  • width: 100% ensures the pseudo-element spans the entire width of the text block.
  • transform: scaleX(0) initially scales the pseudo element to 0 so it has no width and is not visible.
  • bottom: 0 and left: 0 position it to the bottom left of the block.
  • transition: transform 0.25s ease-out means changes to transform will be transitioned over 0.25 seconds with an ease-out timing function.
  • transform-origin: bottom right means the transform anchor point is positioned at the bottom right of the block.
  • :hover:after then uses scaleX(1) to transition the width to 100%, then changes the transform-origin to bottom left so that the anchor point is reversed, allowing it transition out in the other direction when hovered off.

继续阅读 30秒学会 CSS 片段 – Hover underline animation

Renders a string as plaintext, with URLs converted to appropriate <a> elements.

  • Use String.prototype.split() and String.prototype.match() with a regular expression to find URLs in a string.
  • Return a <React.Fragment> with matched URLs rendered as <a> elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.

继续阅读 30秒学会 React 片段 – AutoLink

Builds a list, using an iterator function and an initial seed value.

The iterator function accepts one argument (seed) and must always return a list with two elements ([value, nextSeed]) or False to terminate.
Use a generator function, fn_generator, that uses a while loop to call the iterator function and yield the value until it returns False.
Use list comprehension to return the list that is produced by the generator, using the iterator function.

继续阅读 30秒学会 Python 片段 – unfold