If the text is longer than one line, it will be truncated and end with an ellipsis .

  • overflow: hidden prevents the text from overflowing its dimensions (for a block, 100% width and auto height).
  • white-space: nowrap prevents the text from exceeding one line in height.
  • text-overflow: ellipsis makes it so that if the text exceeds its dimensions, it will end with an ellipsis.
  • width: 200px; ensures the element has a dimension, to know when to get ellipsis
  • Only works for single line elements.

继续阅读 30秒学会 CSS 片段 – Truncate text

Angular allows us to control the way module preloading is handled.

There are 2 strategies provided by @angular/router: PreloadAllModules and NoPreloading. The latter enabled by default, only preloading lazy modules on demand.

We can override this behavior by providing custom preloading strategy: In the example below we preload all included modules if the connection is good.

import { Observable, of } from 'rxjs';

export class CustomPreloading implements PreloadingStrategy {
  public preload(route: Route, load: () => Observable<any>): Observable<any> {
    return preloadingConnection() ? load() : of(null);

const routing: ModuleWithProviders = RouterModule.forRoot(routes, {
  preloadingStrategy: CustomPreloading

Note that that the example above would not be very efficient for larger apps, as it’ll preload all the modules.

继续阅读 30秒学会 Angular 片段 – Router Custom Preloading

Evenly distributes child elements within a parent element.

  • display: flex enables flexbox.
  • justify-content: space-between evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.
  • Alternatively, use justify-content: space-around to distribute the children with space around them, rather than between them.

继续阅读 30秒学会 CSS 片段 – Evenly distributed children

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

Gives text a gradient color.

  • background: -webkit-linear-gradient(...) gives the text element a gradient background.
  • webkit-text-fill-color: transparent fills the text with a transparent color.
  • webkit-background-clip: text clips the background with the text, filling the text with the gradient background as the color.
  • Uses non-standard properties.

继续阅读 30秒学会 CSS 片段 – Gradient text

Creates an array of key-value pair arrays from an object or other iterable (object, array, string, set etc.).

Check if Symbol.iterator is defined and, if so, use Array.prototype.entries() to get an iterator for the given iterable, Array.from() to convert the result to an array of key-value pair arrays.
If Symbol.iterator is not defined for obj, use Object.entries() instead.

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