分享文章、钻研技术、改变生活！
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 true if the given number is odd, false otherwise.
Checks whether a number is odd or even using the modulo (%) operator.
Returns true if the number is odd, false if the number is even.
Checks a flat list for duplicate values, returning true if duplicate values exists and false if values are all unique.
Use count() and array_unique() to check $items for duplicate values.
继续阅读 30秒学会 PHP 片段 – hasDuplicates
Return a new function that composes multiple functions into a single callable.
Use array_reduce() to perform right-to-left function composition.
Returns true if the browser tab of the page is focused, false otherwise.
Use the Document.hidden property, introduced by the Page Visibility API to check if the browser tab of the page is visible or hidden.
继续阅读 30秒学会 JavaScript 片段 – isBrowserTabFocused
站长
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.
@Component({
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-worldwill be created before the loading even starts:
<loader [loading]="isLoading"><destroy-the-world></destroy-the-world></loader>继续阅读 30秒学会 Angular 片段 – Loader Component
站长
Measures the time taken by a function to execute.
Use console.time() and console.timeEnd() to measure the difference between the start and end times to determine how long the callback took to execute.
继续阅读 30秒学会 JavaScript 片段 – timeTaken
站长
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
站长