🔥 There are 449 Hot Tips!!

🔥 Someone on reddit posted a demo where CSS truncates text from the middle. They didn't post the code, so here is my shot at it with Flexbox.

Super handy for GUIDs or other long strings that you want to truncate from the middle.

<p class="truncate-text"><span>2brb5e796-6c5e-4bc4-871b-f3afd469</span><span>-1c1e</span></p>
<p class="truncate-text"><span>2bb5e796-6c5e-4bc4-871b-</span><span>f3af-d469-1c1e</span></p>
<p class="truncate-text"><span>2bb5e796-6c5e-4bc4</span><span>-871b-f3af-d469-1c1e</span></p>

.truncate-text {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid #000;
  padding: 0 10px;
  border-radius: 5px;
  display: flex;
  span {
    overflow: hidden;
    flex: 0 1 auto;
  }
  span:nth-child(1) {
    flex-shrink: 1;
    background: red;
    text-overflow: ellipsis;
  }
  span:nth-child(2) {
    background: green;
    min-width: fit-content;
    flex: 1;
  }
}

There is something off about this design - it's the vertical text alignment

This new CSS feature just made aligning text 100x easier

I used text-box: trim-both cap alphabetic; to align the text to the top and bottom of the container.

These displays are so good.

Been running the 4:3 BenQ for about a year and they just sent me the 32" to replace my big bezel LG 32"

Colours are great and text is super crispy.

Hot tip for anyone doing AI dev:

Use Ollama to easily run models like Deepseek-r1 or Gemma locally on your machine. It downloads them and spins up a server with an OpenAI SDK compatible API

The smaller models are fast and good enough to work on new features or debug streaming without having to pay for API requests

Here is how to get the FPS meter and a few other handy tools running in your browsers dev tools

This is a CSS performance problem I see all too often.

The React website has some jank due to their use of transition.

Here is how to find what causes it and how to fix it

This Lando Norris website is insane

I dove into the code and broke it all down. Some really neat 3D effects along with scrolling and next level animations

Oops I made a very crappy monitor

The & in a CSS nested selector doesn't need to come at the start!

Needed to style an element based on parent AND child selectors and this was the ticket.

Good idea or nah?