DOCSEARCHbyAlgolia
Submit Docs

Hangover's Frontend Development Templates and Articles

website·Indexed 29 days ago

https://zuifanzhangsan.github.io/

A collection of frontend development snippets and guides covering JavaScript, CSS, and Tampermonkey. Includes practical templates for string manipulation, array operations, Promise implementations, and time formatting, as well as detailed articles on Flexbox, Grid layout, responsive design, and debounce/throttle techniques.

Tokens
17.1K
Snippets
104
Records
114
Agent score
73%

What's inside Hangover's Frontend Templates

  1. Overview of CSS Flexbox Layout

    Flexible Box (flex) is a layout model designed to provide a more efficient way to align and distribute space among items in a container, even when their size is unknown or dynamic.

    Key concepts:

    • Flex Container: The element that has display: flex (or inline-flex) applied to it.
    • Flex Items: All direct children of a flex container.
    • Main Axis: The primary axis along which items are laid out (determined by flex-direction).
    • Cross Axis: The axis perpendicular to the main axis.

  2. Understand the difference between Throttling and Debouncing

    Both Throttling and Debouncing are used to optimize performance by limiting the execution frequency of callbacks triggered by high-frequency events (e.g., resize, scroll, keypress, mousemove).

    • Throttling (节流): Ensures a function is executed at most once every n milliseconds. If triggered repeatedly within the window, only one execution occurs.
    • Debouncing (防抖): Delays execution until n milliseconds have passed since the last trigger. If the event is triggered again before the timer expires, the timer resets.

    Comparison Example: If both are set to 500ms and an event is triggered continuously for 2 seconds:

    • Throttling will execute the function approximately every 500ms.
    • Debouncing will execute the function only once, 500ms after the final trigger.

  3. Use rem units for scalable typography

    The rem unit is relative to the font-size of the root element (<html>). By combining rem with media queries, you can scale the entire UI by changing the root font size based on the device width.
    @media screen and (max-width: 414px) {
  html { font-size: 18px; }
}
@media screen and (max-width: 375px) {
  html { font-size: 16px; }
}
@media screen and (max-width: 320px) {
  html { font-size: 12px; }
}

  4. Understand implicit string conversion

    Implicit string conversion occurs when a non-string value is used in a context where a string is expected. This most commonly happens during the + operation; if one operand is a string, the other is converted to a string and the result is concatenated.
    '5' + 1        // '51'
'5' + true      // "5true"
'5' + false     // "5false"
'5' + {}        // "5[object Object]"
'5' + []        // "5"
'5' + undefined  // "5undefined"
'5' + null      // "5null"

  5. Search for elements in a JavaScript array

    Use these methods to locate elements or check for their existence:

    • indexOf(): Returns the index of the first occurrence of a value, or -1 if not found.
    • includes(): Returns true if the array contains the value, otherwise false.
    • find(): Returns the value of the first element that satisfies the provided testing function.
    let numbers = [1, 2, 3, 4, 5];
numbers.indexOf(4); // 3
numbers.includes(4); // true

const people = [{ name: "Matt", age: 27 }, { name: "Nicholas", age: 29 }];
people.find((element) => element.age < 28); // { name: "Matt", age: 27 }

  6. Understand implicit boolean conversion

    Implicit boolean conversion occurs in contexts requiring a boolean value, such as if statements, while loops, and comparison operators (==, !=, >, <). The following values are automatically converted to false: undefined, null, false, +0, -0, NaN, and empty strings (""). All other values are converted to true.

  7. Create a hollow triangle using CSS pseudo-elements

    Since the triangle is created using borders, you cannot use a standard border property to make it hollow. Instead, use a pseudo-element (like :after) to create a smaller triangle of a different color and position it absolutely over the base triangle to create a border effect.
    .border {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent #d9534f;
    position: relative;
}

.border:after {
    content: '';
    border-style: solid;
    border-width: 0 40px 40px;
    border-color: transparent transparent #96ceb4;
    position: absolute;
    top: 6px;
    left: -40px;
}

  8. Create a solid triangle using CSS borders

    A solid triangle can be created by setting the element's width and height to 0 and utilizing the border properties. By setting specific borders to transparent and others to a color, the intersection of the borders forms a triangle. To create a downward-pointing triangle, set the top, left, and right borders to 0 (or transparent) and define the bottom border.
    .border {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent #d9534f;
}

  9. Choose between Debouncing and Throttling based on use case

    Select the optimization strategy based on whether you need the final state of a continuous action or a steady stream of updates.

    Use Debouncing when you only need the final result:

    • Search box input (send request only after user stops typing).
    • Input validation for phone numbers or emails.
    • Window resize events (recalculate layout only after resizing is complete).

    Use Throttling when you need periodic updates during a continuous action:

    • Infinite scroll / 'Load More' listeners (checking if user reached bottom).
    • Search suggestion/autocomplete (updating results while the user is still typing).

  10. Implement parallax scrolling using background-attachment

    Parallax scrolling can be achieved by setting the background-attachment property to fixed. This fixes the background image relative to the viewport, so the image remains stationary while the content of the element scrolls over it, creating a visual depth effect.
    .parallax-bg {
    background-image: url('your-image.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

  11. Implement responsive styles using CSS Media Queries

    Media queries allow you to apply specific CSS styles based on device characteristics such as screen width. This is commonly used to change layouts, font sizes, or images for different device resolutions (e.g., switching between @2x and @3x images).
    /* Target screens up to 1920px */
@media screen and (max-width: 1920px) {
  /* styles here */
}

/* Target viewports between 375px and 600px */
@media screen (min-width: 375px) and (max-width: 600px) {
  body {
    font-size: 18px;
  }
}

  12. Understand implicit numeric conversion

    Most arithmetic operators (except + when a string is present) automatically convert their operands to numbers. Key behaviors include: null converts to 0, while undefined converts to NaN.
    '5' - '2'    // 3
'5' * '2'    // 10
true - 1     // 0
false - 1    // -1
'1' - 1      // 0
'5' * []     // 0
false / '5'  // 0
'abc' - 1    // NaN
null + 1     // 1
undefined + 1 // NaN