Techreport blog

Engineering Insights & Guides

The best problem-solving writing in software engineering — databases, performance, security, frontend and distributed systems, in one feed.

11,842 articles
Frontend — Creating The “Moving Highlight” Navigation Bar With JavaScript And CSS — Smashing Magazine

Creating The “Moving Highlight” Navigation Bar With JavaScript And CSS — Smashing Magazine

In this tutorial, Blake Lundquist walks us through two methods of creating the “moving-highlight” navigation pattern using only plain JavaScript and CSS. The first technique uses the `getBoundingClientRect` method to explicitly animate the border between navigation bar items when they are clicked. The second approach achieves the same functionality using the new View Transition API.

BLBlake LundquistBlake Lundquist·June 11, 2025Frontend
Frontend — Partial Keyframes

Partial Keyframes

CSS Keyframe animations are so much more powerful than most developers realize. In this tutorial, I’ll show you something that completely blew my mind, a technique that makes our keyframe animations so much more reusable and dynamic! 🤯

JWJosh W. Comeau·June 10, 2025Frontend
Frontend — Creating an Auto-Closing Notification With an HTML Popover

Creating an Auto-Closing Notification With an HTML Popover

The HTML popover attribute transforms elements into top-layer elements that can be opened and closed with a button or JavaScript. Popovers can be dismissed a number of ways, but there is no option to auto-close them. Preethi has a technique you can use.

PPreethiPreethi·June 9, 2025Frontend
Frontend — Decoding The SVG path Element: Line Commands — Smashing Magazine

Decoding The SVG path Element: Line Commands — Smashing Magazine

SVG is easy — until you meet `path`. However, it’s not as confusing as it initially looks. In this first installment of a pair of articles, Myriam Frisano aims to teach you the basics of `` and its sometimes mystifying commands. With simple examples and visualizations, she’ll help you understand the easy syntax and underlying rules of SVG’s most powerful element so that by the end, you’re fully ab

MFMyriam FrisanoMyriam Frisano·June 9, 2025Frontend
Frontend — Exploring the CSS contrast-color() Function… a Second Time

Exploring the CSS contrast-color() Function… a Second Time

The contrast-color() function doesn’t check color contrast, but rather it outright resolves to either black or white (whichever one contrasts the most with your chosen color). Safari Technology Preview recently implemented it and we explore its possible uses in this article.

DSDaniel SchwarzDaniel Schwarz·June 5, 2025Frontend
Frontend — The State of CSS 2025 Survey is out!

The State of CSS 2025 Survey is out!

The State of CSS 2025 Survey dropped a few days ago, and besides anticipating the results, it's exciting to see a lot of the new things shipped to CSS reflected in the questions.

JDJuan Diego RodríguezJuan Diego Rodríguez·June 5, 2025Frontend
Performance — Introducing facet: Reflection for Rust

Introducing facet: Reflection for Rust

I have long been at war against Rust compile times. Part of the solution for me was to buy my way into Apple Silicon dreamland, where builds are, like… faster. I remember every time I SSH into an x86_64 server, even the nice 64-core ones. And another part was, of course, to get dirty with Rust itself. I wrote Why is my Rust build so slow? , which goes in-depth into rust build performance, down to

AWAmos WengerAmos Wenger·June 5, 2025Performance
Design & UX — Collaboration: The Most Underrated UX Skill No One Talks About — Smashing Magazine

Collaboration: The Most Underrated UX Skill No One Talks About — Smashing Magazine

We often spotlight wireframes, research, or tools like Figma, but none of that moves the needle if we can’t collaborate well. Great UX doesn’t happen in isolation. It takes conversations with engineers, alignment with product, sales, and other stakeholders, and the ability to listen, adapt, and co-create. That’s where design becomes a team sport, and when your ability to capture the outcomes multi

CWCarrie WebsterCarrie Webster·June 5, 2025Design & UX