DEV Community: Tamer

Web UI: Innovating Without Losing the User

Tamer — Mon, 09 Jun 2025 15:27:05 +0000

The evolution of web interfaces is a story of continuous changes, both technical and psychological. From the early ’90s interfaces, the drive has always been toward richer experiences. Today, in the CSS “golden era” we have incredibly powerful tools to create seamless experiences. Yet, this very drive for innovation often clashes with an unexpected obstacle: user resistance to change. This essay explores that paradox.

It was the ’90s, and we all remember those interfaces: many ideas, few conventions, and screens resembling TV sets. CSS was the great protagonist of the graphical revolution—a tool as verbose as it was powerful, but still obscure to many. Then smartphones arrived, and performance became the watchword for developers—or at least for those who understood its importance.

CSS libraries followed, and it quickly became clear: aesthetics and design systems play a crucial role in making a product feel “professional” and authoritative.

Despite this significant evolution, JavaScript remains the primary means for many to manage interactions in search of the wow effect—often disregarding the main goal: performance.

Since 2023, I’ve been following an extraordinary trio in the Chrome DevTools world:

The Ambassador – Una Kravets
The Genius – Bramus
The Rockstar – Adam Argyle

Thanks to them, I dove even deeper into the sea of creative possibilities achievable with just a few lines of CSS.

In 2024, an important era for web UI began—what Una calls the “golden era”—and indeed it is just that: New in Web UI – I/O 2024. I studied, experimented, shipped—and it was professionally very rewarding!

Yet, this enthusiasm for interfaces consistently hits a wall: the rubber wall of the average user. Every innovation, no matter how elegant or performant, must overcome the hurdle of habit.
For every UX or UI novelty, I’ve often had to handle the usual “yeah, but…”:

Dark mode – “Is it really necessary?”
CSS Grid – “Those gaps look kind of ugly”
Scroll Snap – “Wouldn’t it be better to scroll with buttons?”
Position Sticky – “It gives me a headache”
Scroll-driven animation – “It’s beautiful, but it doesn’t work on my iPhone”

These observations, though sometimes demoralizing, are a treasure. They teach us that innovation is not a developer’s monologue but a dialogue with the user.
Our job isn’t just to implement a new feature but to guide the user, introducing novelties gradually and functionally.

True avant-garde isn’t about using a technology just because it exists, but making it so intuitive that it feels like the most natural thing in the world.

Only when innovation becomes invisible can we say we have truly designed well.

Online Advertising: Are We Paying Too High a Price?

Tamer — Fri, 06 Jun 2025 10:27:05 +0000

As an experienced web user, I've always had a relationship of tolerance with online advertising. I've never installed ad-blocking plugins, always trusting in the good sense of those who host them on their sites and those who develop them.

I work for an Italian publishing group, where I'm responsible for developing and innovating graphic interfaces for journalistic content. Recently, however, the need arose to develop our own advertising products, and consequently, my focus on this topic has intensified.

I believe a good chef must love food. In the same way, to develop an effective advertising product, it's essential to understand it deeply, putting yourself in the shoes of those who 'consume' it.

However, as I mentioned, my relationship with ads has always been one of minimal, tolerant perception. I saw these box-like elements relegated to a small 300x300px space or a page header. But things changed when these advertising elements started to become invasive, more interactive, and much larger.

I prefer ads that sit alongside the content rather than overwhelming it, and I believe this idea is shared by many users, perhaps even you who are reading this.

I find it truly frustrating to close ads that interrupt my browsing, and even worse when I navigate from one page to another and a similar intrusive ad appears again.

Surely, the reason these commercial elements are introduced is economic: the more an ad is seen and forces user interaction—even if it's just to close it or an accidental click—the higher its economic value.

However, while there's an economic reward on one side, there could be user alienation on the other.

Why should a user repeatedly endure an annoying experience?

Only one subtle answer comes to mind: for the exclusivity of the content.

As a user, I am so interested in reading that content, watching that video, or intrigued by those images that I am even willing to endure an advertisement for several seconds.

It makes you wonder if this strategy, as ubiquitous as it is, is truly forward-thinking, or if it's slowly eroding the trust of the most precious resource of all: the end user.

Pure CSS Accrodion

Tamer — Thu, 09 Sep 2021 14:47:15 +0000

Here is another component, usually made with JS, developed in pure CSS.
Also on this occasion I exploited the potential of the input, which guarantee a homogeneous robustness in every browser and operating system.

In this case the checkbox allows you to have more tabs open in an accordion , unlike the radio.

Pure css ADV

Tamer — Sat, 17 Jul 2021 11:35:11 +0000

The last task assigned to me is to convert a js based adv component to pure css.

As always, the analysis was focused on what I could have lost by not using the js or on what the css would have "tied my hands".
I managed to keep every feature.

The strategy to achieve the desired result involves the arrangement of the elements on different z-index and the use of CSS Combinators (+ and ~).

I definitely excluded the links:target because, unlike the inputs, they do not allow the maintenance of the assigned stage if not their focus.
Furthermore, among the checkbox and the radio, the latter were the most appropriate solution to define a boolean stage.

Snap carousel

Tamer — Sat, 26 Jun 2021 07:07:17 +0000

In the last few days I have been asked to find a pure css solution to build an images carousel, I immediately thought about the current solution, however I also focused on what js gives the added value and therefore what I would have to give up with the my css solution.

I analyzed the previous js carousel and noticed:

display of upcoming images
interaction buttons
snap effect

Here I found an equivalent solution:

Arrangement of the different images with 100% height and automatic width in a div with horizontal overflow
touch interaction
css scroll snap

What have I given up? Nothing!
What have I gained? A simpler structure and a lot of #performance!

How to improve your code: tips and reflections

Tamer — Fri, 09 Apr 2021 09:40:07 +0000

In my experience I have learned, with difficulty and by imposing humility on my pride, that often one's code can be improved.

There are several ways to achieve the same result, some are much better, others are more context-appropriate.

Some advices:

Analyze the context and purpose
Take your time for analysis
It can help you write down on paper or represent the situation schematically
You have to be far-sighted in the solution, it will have to work even in 10 years with new technologies
Dividi et impera: granulate your code, simplify it into sub-tasks
Take breaks where you think about other things and then look at what you have written critically: "How or where can I improve?"
Compare yourself to other devs! When I am stuck, by exposing the problem I find the solution or I am provided with points of reflection.
Details matters: it is precisely the details that give that sense of quality; without these the evaluation could be good or very good, while paying attention to the details the evaluation will be excellent.

Roles, coordinations and convetions in web development

Tamer — Mon, 05 Apr 2021 12:18:38 +0000

Backend, UI/UX Design and Frontend, the three protagonists of web development.
If in the first two it is planned, in the third, in some aspects, it is implemented. Coordination is necessary.

UI/UX Design must be conceived knowing the logic of the Backend and the tools of the Frontend; the Backend must pay attention to the best way to provide data, preferring performance. The Frontend must interact with both of its partners!

You need rules, conventions to be respected among those repaired within them, for example by writing, or testing, the code with the same style.
Organize work, schedule times, optimize communication flows and then talk; they are all valid instruments guaranteeing the expected results.
Personally, I solved problems in 5 minutes by speaking with voice rather than 30 frustrating minutes of chat.

In my frontend experience, sometimes it was necessary to change and then think about new UI or UX solutions, because the main players in the design didn't coordinate, they didn't talk to each other. This has repercussions on time and labor costs.

We should learn to communicate in person, before developing in the communicative field.

From Scroll to Grid in a snap!

Tamer — Sat, 03 Apr 2021 08:01:57 +0000

The goal of the last year was not to use javascript, as if I had been blindfolded and I had to use only my hearing to orient myself, at first it seemed like a handicap but over time I realized that I had refined this last sense.

Among the different tasks I was asked to study and use the scroll snap in a mobile structure that must transform into a grid in the desktop version.

Here is a simplified demo of the structure.

Do you like this colour palette?

Custom Properties, never again without you

Tamer — Sat, 27 Mar 2021 08:24:14 +0000

Custom properties are one of the most important frontend development innovations in last years, definitely.

Custom properties are CSS Variables that are assigned to the properties and that can dynamically change the value!
The benefits are tangible during development, let's analyze simple examples to highlight the benefits.

CSS, Traditional way

In this portion of the code, with the traditional CSS we must explicitly declare the initial value of the property and that of the status changes.

.block {
  background-color: red;
}

.block:hover {
  background-color: blue;
}

SCSS Variables

With the pre-processors, in the example that follows SCSS, it is possible to be more ordered: by storing the value of a property in a variable this can be recalled from multiple blocks, however the value of the variable cannot be changed.

$background: red;
$background-modifier: yellow;
$background-hover: blue;

.block {
  background-color: $background;

  &:hover {
    background-color: $background-hover;
  }

  &--modifier {
    background-color: $background-modifier;
  }
}

SCSS, CSS Var

Everything changes with CSS variables, as w3c explains:

CSS variables have access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries.

:root {
  --background: red;
}

.block {
  background-color: var(--background);

  &:hover {
    --background: blue;
  }

  &--modifier {
    --background: yellow;

    &:hover {
      --background: purple;
    } 
  }
}

The previous example highlights all the potential and order that the CSS vars guarantee.
Let's assume we have to adapt the whole website for dark mode too ... nothing simpler:

:root {
  --background: red;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: grey;
  }
}

.block {
  background-color: var(--background);

  &:hover {
    --background: blue;
  }

  &--modifier {
    --background: yellow;

    &:hover {
      --background: purple;
    } 
  }
}

Tips:

Consider local or global vars scope, think about what it is better to declare global and therefore have it available throughout the project and what to declare within a block as local, making "economy".

Did you ever used "will-change" property? Show me some example

Tamer — Fri, 26 Mar 2021 19:04:45 +0000

MDN

The CSS will-change property tells browsers which properties of an element are expected to change enabling browsers to set up optimizations before the element is actually changed, improving performance by doing potentially expensive work before it is required.

I am trying to understand the correct use, but i find too many constraints and conditions ... help me to understand how you have used this 'property' in your experience.

What crossbrowser tips do you seggest me?

Tamer — Wed, 24 Mar 2021 19:35:07 +0000

This morning I read about how much Google is working on crossbrowsing.

Google is partnering with other browser vendors and industry partners to fix the top five browser compatibility pain points for web developers

https://web.dev/compat2021/

I was pleasantly surprised by this, because for me the verification of multiple devices always turns out to be boring.

What strategies do you implement for an excellent crossbrowser development?

Solutions and components, usually managed with javascript, built in pure css

Tamer — Sat, 20 Mar 2021 10:31:56 +0000

Coding interfaces in which I defined structures, components, css I'm also used to think about animations, micro interactions and functional ones. This phase calls some aspects into question.

In the early years of my career, I didn't pay much attention to performance, on the contrary the designers always pushed me to a massive use of javascript for every type of animation.
Today performance is key as most of the traffic is by far mobile, it would be really silly to use js for some simple animations while in others, sadly, a state class still needs to be added.

I want to share with you some workarounds that I learned from the web, designed and used in some projects.

Back to top

One of the most useless animations via js, used only to exploit the fluid effect of the scroll. It is a simple trivial link!

So if you usually write:

$("#toTop").click(function () {
   $("html, body").animate({scrollTop: 0}, 1000);
})

You can then write:

<style>
html {
  scroll-behavior: smooth;
}
</style>

<a href="#top">To top</a>

Dropdown

Usually this component works by clicking its label for open and close its panel in which to select the contents.
To get this construction without js we need to structure the component in such a way that the panel appears on the mobile focus or desktop hover of the component. So the panel must be nested inside the component with the visibility: hidden property.

Scrollsnap

Recently css3 introduced this new specification supported in cross browser mode. https://caniuse.com?search=Scroll%20snap
A nice computational savings for our mobile device!
Defining a few properties the .child flow inside the .parent container in a fluid way, hooking themselves to the beginning of this.

.parent {
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(300px);
  scroll-snap-type: y mandatory;
}

.child {
  scroll-snap-align: start;
}

Modal

Yes... it is possible, just without js.
I took a clear example from https://codepen.io/felipefialho which highlights how simple it can be to develop this component.
If with js we would have had to click on the button to add a class of the modal, with only the css we use the button as a link that refer to the modal as target:

.modal:target:before {
  display: block;
}
.modal:target .modal-dialog {
  ...
}