Web Development

Tutorial - Scrimba (opens in a new tab)

Interactive courses, perfect for frontend tutorials

Tips

Stop event propagation to parent elements

  • To stop event propagation of nested components, like on a calendar popup, you only want the click event captured by it instead of passing all the way up to document, the solution is enclosing the target element in a wrapper, and in its event listener, stop the propagation.

    <div onClick={this.onDateInputContainerClick}>
  <InlineDateTimePicker
    label="Due"
    handleAccept={this.handleAccept}
    onClose={this.onDatePickerClose}
    value={task.taskDueDate}
    onChange={this.onChangeTaskDueDate}
  />
</div>
 
private onDateInputContainerClick = (e: React.MouseEvent) => {
    e.stopPropagation();
};

Use webpage as a real-time CSS editor

  • Add a style element under body element.
  • Use display: block so it shows up on the webpage.
  • Use contenteditable to make the style element editable on webpage.
<body>
  <style style="display: block" contenteditable>
    div {
      background-color: beige;
      font-size: 25px;
    }
  </style>
  ...
</body>
  • Then the webpage becomes a real-time CSS editor with no page refresh needed.

Live edit webpage

  • Set document.designMode = "on"

Web Standards

ES modules

import-maps

WebP / AVIF

React.jsWhat I have done today...