Essential CSS & JavaScript Tricks for Modern Frontend Development

1. CSS single‑line text overflow

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

2. Multi‑line text overflow (ellipsis)

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

3. iOS container scroll bar smoothness

overflow: auto;
-webkit-overflow-scrolling: touch;

4. Custom scroll bar style

Hide the scroll bar of a div element

div::-webkit-scrollbar { display: none; }

div::-webkit-scrollbar – the whole scroll bar

div::-webkit-scrollbar-thumb – the draggable thumb

div::-webkit-scrollbar-track – the track that holds the thumb

div::-webkit-scrollbar-button – buttons at the ends of the track

div::-webkit-scrollbar-track-piece – inner track area

div::-webkit-scrollbar-corner – corner where vertical and horizontal bars meet

div::-webkit-resizer – resize handle (often hidden for compatibility)

5. CSS triangle badge

Set width and height to 0, then use border to create a triangle.

div {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: red;
}

6. iOS audio autoplay and loop hack

Some iOS devices block autoplay; the following script enables playback after a user interaction and loops the audio.

// Solve iOS audio autoplay & loop issue
var music = document.getElementById('video');
var state = 0;

document.addEventListener('touchstart', function() {
  if (state == 0) {
    music.play();
    state = 1;
  }
}, false);

document.addEventListener('WeixinJSBridgeReady', function() {
  music.play();
}, false);

// Loop playback
music.onended = function() {
  music.load();
  music.play();
};

7. Horizontal & vertical centering

Two common methods: absolute positioning with auto margins, or Flexbox.

div {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

Parent‑controlled centering using Flexbox:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

8. Hiding page elements

display:none – element is removed from the DOM

opacity:0 – element is invisible but still participates in layout and events

visibility:hidden – element is invisible but occupies space; events are not triggered

9. Front‑end engineering

Front‑end engineering is more than just Webpack; it involves tools that improve efficiency and reduce cost across the whole development lifecycle, including project initialization, development, integration, building, testing, and deployment.

Modern front‑end applications demand higher functionality and complex business logic, making engineering practices essential for scalability and maintainability.

10. contenteditable

Adding the contenteditable="true" attribute makes an element editable, but only the input event is emitted, not change, and length limits like maxlength are not enforced.

<div contenteditable="true"></div>

11. CSS calc()

The calc() function allows arithmetic expressions in CSS, useful for mixing units.

div {
  width: calc(25% - 20px);
}

12. Proxy vs Object.defineProperty

Proxy can intercept get, set, delete, and method calls, while Object.defineProperty only observes property reads/writes.

new Proxy(target, {
  get(target, property) { /* ... */ },
  set(target, property) { /* ... */ },
  deleteProperty(target, property) { /* ... */ }
});

Example of using Proxy to monitor array changes:

const list = [1, 2, 3];
const listProxy = new Proxy(list, {
  set(target, property, value) {
    target[property] = value;
    return true; // indicate success
  }
});
list.push(4);

13. Reflect

Reflect is a static utility object introduced in ES2015 that provides methods mirroring the default behavior of Proxy handlers.

const proxy = new Proxy(obj, {
  get(target, property) {
    return Reflect.get(target, property);
  }
});

Reflect offers a unified API for object operations such as Reflect.has, Reflect.deleteProperty, and Reflect.ownKeys, and is recommended for future‑proof code.

14. Parsing GET parameters

Use String.replace with a regular expression to extract query parameters into an object.

const q = {};
location.search.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => q[k] = v);
console.log(q);

15. Parsing a URL via an a element

Create an a tag, set its href, and read properties like protocol, pathname, origin, etc.

// Create a tag
const aEle = document.createElement('a');
// Assign href
aEle.href = '/test.html';
// Access properties
aEle.protocol;   // protocol
aEle.pathname;   // path
aEle.origin;
aEle.host;
aEle.search;