Renders an <input> element that uses a callback function to pass its value to the parent component.

  • Use object destructuring to set defaults for certain attributes of the <input> element.
  • Render an <input> element with the appropriate attributes and use the callback function in the onChange event to pass the value of the input to the parent.

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

Returns the n minimum elements from the provided list.
If n is greater than or equal to the provided list’s length, then return the original list (sorted in ascending order).

Use sorted() to sort the list,[:n]to get the specified number of elements. Omit the second argument,n`, to get a one-element list.

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

Displays a hamburger menu which transitions to a cross on hover.

  • Use a .hamburger-menu container div which contains the top, bottom, and middle bars.
  • The container is set to be a flex container (display: flex) with flex-direction to be column and flex-wrap to be wrap (alternatively, you can set both properties by a shorthand flex-flow: column wrap).
  • Add distance between the bars using justify-content: space-between.
  • The animation has 3 parts: top and bottom bars transforming to 45 degree angles (rotate(45deg)), and the middle bar fading away by setting opacity: 0.
  • The transform-origin is set to left so the bars rotate around the left point.
  • Set transition all 0.5s so that both transform and opacity properties are animated for half a second.

继续阅读 30秒学会 CSS 片段 – Hamburger Button