Renders a tooltip component.

  • Use the React.useState() hook to create the show variable and initialize it to false.
  • Return a <div> element that contains the <div> that will be the tooltip and the children passed to the component.
  • Handle the onMouseEnter and onMouseLeave methods, by altering the value of the show variable.

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

Sometimes you need to get access to global document.

To simplify unit-testing, Angular provides it through dependency injection:

import { DOCUMENT } from '@angular/common';
import { Inject } from '@angular/core';

  selector: 'my-app',
  template: `<h1>Edit me </h1>`
export class AppComponent {

  constructor(@Inject(DOCUMENT) private document: Document) {
    // Word with document.location, or other things here....

继续阅读 30秒学会 Angular 片段 – Injecting document

A hook that handles the event of clicking outside of the wrapped component.

  • Create a custom hook that takes a ref and a callback to handle the click event.
  • Use the React.useEffect() hook to append and clean up the click event.
  • Use the React.useRef() hook to create a ref for your click component and pass it to the useClickOutside hook.

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

Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.

  • position: relative on the element establishes a Cartesian positioning context for pseudo elements.
  • :after defines a pseudo element.
  • background-image: url(...) adds the SVG shape (a 24×12 triangle) as the background image of the pseudo element, which repeats by default. It must be the same color as the block that is being separated. For other shapes, we can use the URL-encoder for SVG.
  • 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 element stretches the entire width of its parent.
  • height: 12px is the same height as the shape.
  • bottom: 0 positions the pseudo element at the bottom of the parent.

继续阅读 30秒学会 CSS 片段 – Shape separator

title: have_same_contents
tags: list,intermediate

Returns True if two lists contain the same elements regardless of order, False otherwise.

Use set() on the combination of both lists to find the unique values.
Iterate over them with a for loop comparing the count() of each unique value in each list.
Return False if the counts do not match for any element, True otherwise.

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

Vertically and horizontally centers a child element within its parent element using position: absolute and transform: translate() (as an alternative to flexbox or display: table).
Similar to flexbox, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications.

  • position: absolute on the child element allows it to be positioned based on its containing block.
  • left: 50% and top: 50% offsets the child 50% from the left and top edge of its containing block.
  • transform: translate(-50%, -50%) allows the height and width of the child element to be negated so that it is vertically and horizontally centered.
  • Note that the fixed height and width on parent element is for the demo only.

继续阅读 30秒学会 CSS 片段 – Transform centering