Nik Lopin's Avatar

Nik Lopin

@nlopin

Design system maker in Stripe Love good coffee, high cuisine and cooking πŸ“ Barcelona, Catalunya

27
Followers
130
Following
29
Posts
23.11.2024
Joined
Posts Following

Latest posts by Nik Lopin @nlopin

Video thumbnail

`tabular-nums` should be the default for any number that updates ( timers, counters, prices, percentages, scores, live data etc ).

you can enable this tnum OpenType feature using the CSS property `font-variant-numeric`.

.tabular-nums {
font-variant-numeric: tabular-nums;
}

02.03.2026 17:19 πŸ‘ 12 πŸ” 4 πŸ’¬ 0 πŸ“Œ 1

Donde se vende?

20.02.2026 12:04 πŸ‘ 1 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
A screenshot of browser developer tools showing a CSS variable called "--space" being inspected. A tooltip displays the step-by-step calculation breakdown of a complex calc() function.

A screenshot of browser developer tools showing a CSS variable called "--space" being inspected. A tooltip displays the step-by-step calculation breakdown of a complex calc() function.

This feature in @developer.chrome.com's DevTools is so helpful. Every time I get stuck on a calc() or other CSS functions, I solve the bug much quicker with it.

Thanks to everyone who worked on this! πŸ‘Œ

09.01.2026 09:21 πŸ‘ 48 πŸ” 7 πŸ’¬ 3 πŸ“Œ 0

Personal Data Server

04.01.2026 22:01 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

Why you did this to me πŸ€ͺ i can't stop playing

01.01.2026 07:10 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Preview
Logging Sucks - Your Logs Are Lying To You Why traditional logging fails and how wide events can fix your observability

Great article on logs from @boristane.bsky.social

loggingsucks.com

26.12.2025 20:16 πŸ‘ 3 πŸ” 1 πŸ’¬ 0 πŸ“Œ 0

Mr Doom in TypeScript Types, Dimitri of Michigan TypeScript just released TypeSlayer - a tool for digging into the performance of tsc on your codebase.

> It's got MCP support, Perfetto, Speedscope, Treemap, duplicate package detection, and more.

It's a single npx command to try: 'npx typeslayer'

11.12.2025 08:03 πŸ‘ 9 πŸ” 1 πŸ’¬ 1 πŸ“Œ 0

It's funny that in Spanish language Mexico is both the country and the city (Ciudad de Mexico), but in Russian we changed letters to differentiate them β€” МСксика (esp. Mexica) and ΠœΠ΅Ρ…ΠΈΠΊΠΎ (esp. Mejico) πŸ˜‚

09.12.2025 20:00 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Preview
Reatom: State Management That Grows With You The Fragmentation Problem Modern frontend development has a familiar pattern: Start with...

I'm extremely happy to announce the beginning of a new era in state management!
The new Reatom has way more than we're used to:

- The simplest "signal"-like API
- The most advanced concurrent effect management
- The most extensible plugin system (after jQuery, lol)

dev.to/artalar/reat...

09.12.2025 13:09 πŸ‘ 2 πŸ” 3 πŸ’¬ 1 πŸ“Œ 0

An interesting thing: When choosing a software, I prefer things written by small teams. For Mac applications, I have several written by a single person! (not only by @sindresorhus.com I swear πŸ˜‚)

The size of the team in my head correlates with the amount of bullshit and marketing I'll see

08.12.2025 11:05 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

forgotten source of music β€” soundtrack to old NHL games

05.12.2025 17:00 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Post image Post image Post image Post image

Barcelona Airport has a cute little airplane museum that’s free and open for just a couple of hours on weekends.

There’s even a replica of the Soviet I-15, which the Republic received from the USSR during the Civil War to fight the fascists.

www.fpac.org/fpac/es/expo...

22.11.2025 14:55 πŸ‘ 2 πŸ” 1 πŸ’¬ 0 πŸ“Œ 0

Let's hug 😒

19.11.2025 10:37 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Preview
Google Antigravity Google Antigravity - Build the new way

I have surprisingly good experience with antigravity.google

The Agent Manager view is an interesting way to deal with the agent. Visually, there is a lot of noise in the chat UI and I struggle to understand the line of thought.

Side-by-side code comparison is also lacking as everywhere.

19.11.2025 07:41 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

I don't understand why most of the tools prefer to use Unified diff view. In the world where vertical space is precious, side-by-side diff helps to see a big change in one glance.

I find side-by-side code comparison way simpler to grasp than vertical. Am I the only one?

19.11.2025 07:35 πŸ‘ 1 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
How Complex Systems Fail

The best thing you can read today

how.complexsystems.fail

14.11.2025 13:25 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

No more infinite lines of shadow

20.10.2025 14:47 πŸ‘ 2 πŸ” 2 πŸ’¬ 0 πŸ“Œ 0

Check this out if you missed our meetup

19.10.2025 15:23 πŸ‘ 3 πŸ” 1 πŸ’¬ 0 πŸ“Œ 0

where is it? I'm curious!

20.10.2025 07:25 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

One thing I wish I'd started doing earlier is writing unit tests. They are pure gold. They are simple. They make me sure about the chunk of code. They don't require AI or complex setup.

They do require splitting things. That's also a feature.

20.10.2025 07:17 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Post image Post image

I helped my friend to move and got this artifact from 2000s. The basics hasn't changed

16.10.2025 18:53 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Screenshot of all the components with various color themes: indigo, blue, green, pink, red, and orange.

Screenshot of all the components with various color themes: indigo, blue, green, pink, red, and orange.

All of the colors are calculated based on a single CSS variable using relative oklch, so you can change the theme with just one line.

--tint: green;

Modern CSS is amazing! 😲

14.10.2025 22:49 πŸ‘ 131 πŸ” 17 πŸ’¬ 2 πŸ“Œ 1
Preview
fetchLater() API - Web-APIs | MDN Die fetchLater() API bietet eine Schnittstelle, um eine verzΓΆgerte Abfrage anzufordern, die nach einem bestimmten Zeitraum oder wenn die Seite geschlossen oder navigiert wird, gesendet werden kann.

To add to it, there is also the fetchLater API on Chromium browsers which fixes a few (edge) cases where the Beacon API didn't cut it: developer.mozilla.org/de/docs/Web/...

14.10.2025 12:31 πŸ‘ 1 πŸ” 1 πŸ’¬ 0 πŸ“Œ 0

they behave the same way. `keepalive` is a recommended alternative if beacon restrictions don't work for you (it sends only POST message)

It is a simple, configuration-free API. That's the advantage

14.10.2025 15:40 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Preview
Navigator: sendBeacon() method - Web APIs | MDN The navigator.sendBeacon() method asynchronously sends an HTTP POST request containing a small amount of data to a web server.

If you need to send a POST request and you're not interested in the response, consider using Beacon API

It guarantees the request will be sent even if user is closing the page. Useful for analytics, user feedback and other non-critical interactions

developer.mozilla.org/en-US/docs/W...

14.10.2025 11:09 πŸ‘ 3 πŸ” 2 πŸ’¬ 2 πŸ“Œ 0

All the seats are gone in an instant 😳

03.10.2025 09:26 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Preview
Typography and layout interactive handbook Practical guide to typography and layout with an emphasis on design for the screen.

Almost everything Bureau does is remarkably comprehensive and well done

I'm not a designer and this book is insane source of knowledge about layouts and typography

On the technical side, it is a book where interactivity plays the leading role in explaining the context

bureau.rocks/projects/boo...

28.07.2025 08:38 πŸ‘ 1 πŸ” 2 πŸ’¬ 0 πŸ“Œ 0

After last update my @webstorm.jetbrains.com freezes after Mac sleep. I have to kill the app and restart. Am I the only one experiencing it?

I suspect plugins, but not sure how to debug it.
#webstorm

02.05.2025 11:54 πŸ‘ 2 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

In case you missed it, I published an article about the new attr() in CSS.

ishadeed.com/article/mode...

09.04.2025 14:08 πŸ‘ 34 πŸ” 5 πŸ’¬ 3 πŸ“Œ 1

It is also quite uncomfortable to see those interaction every time I open a story. I suspect I miss a configuration πŸ€”

02.04.2025 14:07 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0