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

Returns the symmetric difference between two lists, after applying the provided function to each list element of both.

Use Iterable.toSet() and Iterable.map() to get the unique values in each list after applying fn to them.
Use Iterable.where() in combination with Iterable.contains() to keep only the values in one list and not the other.
Finally, use Iterable.toList() and Iterable.addAll() in combination with the cascade operator (..) to return the result.

继续阅读 30秒学会 Dart 片段 – symmetricDifferenceBy

You can create own helper component and use it instead of *ngIf.

  selector: 'loader',
  template: `
    <ng-content *ngIf="!loading else showLoader"></ng-content>
    <ng-template #showLoader>🕚 Wait 10 seconds!</ng-template>
class LoaderComponent {
  @Input() loading: boolean;

For usage example:

<loader [loading]="isLoading">🦊 🦄 🐉</loader>

Note that the content will be eagerly evaluated, e.g. in the snippet below destroy-the-world will be created before the loading even starts:

<loader [loading]="isLoading"><destroy-the-world></destroy-the-world></loader>

继续阅读 30秒学会 Angular 片段 – Loader Component

Encode a set of form elements as a query string.

Use the FormData constructor to convert the HTML form to FormData, Array.from() to convert to an array, passing a map function as the second argument.
Use Array.prototype.map() and window.encodeURIComponent() to encode each field’s value.
Use Array.prototype.join() with appropriate argumens to produce an appropriate query string.

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

Returns the index of the function in an array of functions which executed the fastest.

Use Array.prototype.map() to generate an array where each value is the total time taken to execute the function after iterations times. Use the difference in performance.now() values before and after to get the total time in milliseconds to a high degree of accuracy.
Use Math.min() to find the minimum execution time, and return the index of that shortest time which corresponds to the index of the most performant function.
Omit the second argument, iterations, to use a default of 10,000 iterations. The more iterations, the more reliable the result but the longer it will take.

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