A CSS Wishlist for 2025

December 23rd, 2024 No comments
Flex Wrap leaving empty space or filling it completely

I wish for a more native way of balancing wrapping elements:

Flex wrap balancing elements

It’s definitely annoying.

10. An easier way to read/research CSSWG discussions

I am a big fan of the CSSWG and everything they do, so I spent a lot of time reading their working drafts, GitHub issues, or notes about their meetings. However, as much as I love jumping from link to link in their GitHub, it can be hard to find all the related issues to a specific discussion.

I think this raises the barrier of entry to giving your opinion on some topics. If you want to participate in an issue, you should have the big picture of all the discussion (what has been said, why some things don’t work, others to consider, etc) but it’s usually scattered across several issues or meetings. While issues can be lengthy, that isn’t the problem (I love reading them), but rather not knowing part of a discussion existed somewhere in the first place.

So, while it isn’t directly a CSS wish, I wish there was an easier way to get the full picture of the discussion before jumping in.

What’s on your wishlist?

We asked! You answered! Here are a few choice selections from the crowd:

  • Rotate direct background-images, like background-rotate: 180deg
  • CSS random(), with params for range, spread, and type
  • A CSS anchor position mode that allows targeting the mouse cursor, pointer, or touch point positions
  • A string selector to query a certain word in a block of text and apply styling every time that word occurs
  • A native .visually-hidden class.
  • position: sticky with a :stuck pseudo

Wishing you a great 2025…

CSS-Tricks trajectory hasn’t been the most smooth these last years, so our biggest wish for 2025 is to keep writing and sparking discussions about the web. Happy 2025!


2024 has been one of the greatest years for CSS: cross-document view transitions, scroll-driven animations, anchor positioning, animate to height: auto, and many others. It seems out of touch to ask, but what else do we want from CSS? Well, many things!

We put our heads together and came up with a few ideas… including several of yours.

Geoff’s wishlist

I’m of the mind that we already have a BUNCH of wonderful CSS goodies these days. We have so many wonderful — and new! — things that I’m still wrapping my head around many of them.

But! There’s always room for one more good thing, right? Or maybe room for four new things. If I could ask for any new CSS features, these are the ones I’d go for.

1. A conditional if() statement

It’s coming! Or it’s already here if you consider that the CSS Working Group (CSSWG) resolved to add an if() conditional to the CSS Values Module Level 5 specification. That’s a big step forward, even if it takes a year or two (or more?!) to get a formal definition and make its way into browsers.

My understanding about if() is that it’s a key component for achieving Container Style Queries, which is what I ultimately want from this. Being able to apply styles conditionally based on the styles of another element is the white whale of CSS, so to speak. We can already style an element based on what other elements it :has() so this would expand that magic to include conditional styles as well.

2. CSS mixins

This is more of a “nice-to-have” feature because I feel its squarely in CSS Preprocessor Territory and believe it’s nice to have some tooling for light abstractions, such as writing functions or mixins in CSS. But I certainly wouldn’t say “no” to having mixins baked right into CSS if someone was offering it to me. That might be the straw that breaks the CSS preprocessor back and allows me to write plain CSS 100% of the time because right now I tend to reach for Sass when I need a mixin or function.

I wrote up a bunch of notes about the mixins proposal and its initial draft in the specifications to give you an idea of why I’d want this feature.

3. // inline comments

Yes, please! It’s a minor developer convenience that brings CSS up to par with writing comments in other languages. I’m pretty sure that writing JavaScript comments in my CSS should be in my list of dumbest CSS mistakes (even if I didn’t put it in there).

4. font-size: fit

I just hate doing math, alright?! Sometimes I just want a word or short heading sized to the container it’s in. We can use things like clamp() for fluid typesetting, but again, that’s math I can’t be bothered with. You might think there’s a possible solution with Container Queries and using container query units for the font-size but that doesn’t work any better than viewport units.

Ryan’s wishlist

I’m just a simple, small-town CSS developer, and I’m quite satisfied with all the new features coming to browsers over the past few years, what more could I ask for?

5. Anchor positioning in more browsers!

I don’t need anymore convincing on CSS anchor positioning, I’m sold! After spending much of the month of November learning how it works, I went into December knowing I won’t really get to use it for a while.

As we close out 2024, only Chromium-based browsers have support, and fallbacks and progressive enhancements are not easy, unfortunately. There is a polyfill available (which is awesome), however, that does mean adding another chunk of JavaScript, contrasting what anchor positioning solves.

I’m patient though, I waited a long time for :has to come to browsers, which has been “newly available” in Baseline for a year now (can you believe it?).

6. Promoting elements to the #top-layer without popover?

I like anchor positioning, I like popovers, and they go really well together!

The neat thing with popovers is how they appear in the #top-layer, so you get to avoid stacking issues related to z-index. This is probably all most would need with it, but having some other way to move an element there would be interesting. Also, now that I know that the #top-layer exists, I want to do more with it — I want to know what’s up there. What’s really going on?

Well, I probably should have started at the spec. As it turns out, the CSS Position Layout Module Level 4 draft talks about the #top-layer, what it’s useful for, and ways to approach styling elements contained within it. Interestingly, the #top-layer is controlled by the user agent and seems to be a byproduct of the Fullscreen API.

Dialogs and popovers are the way to go for now but, optimistically speaking, these features existing might mean it’s possible to promote elements to the #top-layer in future ways. This very well may be a coyote/roadrunner-type situation, as I’m not quite sure what I’d do with it once I get it.

7. Adding a layer attribute to tags

Personally speaking, Cascade Layers have changed how I write CSS. One thing I think would be ace is if we could include a layer attribute on a tag. Imagine being able to include a CSS reset in your project like:

<link rel="stylesheet" href="https://cdn.com/some/reset.css" layer="reset">

Or, depending on the page visited, dynamically add parts of CSS, blended into your cascade layers:

<!-- 
Global styles with layers defined, such as:
 @layer reset, typography, components, utilities;
-->
<link rel="stylesheet" href="/styles/main.css"> 

<!-- Add only to pages using card components  -->
<link rel="stylesheet" href="/components/card.css" layer="components">

This feature was proposed over on the CSSWG’s repo, and like most things in life: it’s complicated.

Browsers are especially finicky with attributes they don’t know, plus definite concerns around handling fallbacks. The topic was also brought over to the W3C Technical Architecture Group (TAG) for discussion as well, so there’s still hope!

Juandi’s Wishlist

I must admit this, I wasn’t around when the web was wild and people had hit counters. In fact, I think I am pretty young compared to your average web connoisseur. While I do know how to make a layout using float (the first web course I picked up was pretty outdated), I didn’t have to suffer long before using things like Flexbox or CSS Grid and never grinded my teeth against IE and browser support.

So, the following wishes may seem like petty requests compared to the really necessary features the web needed in the past — or even some in the present. Regardless, here are my three petty requests I would wish to see in 2025:

8. Get the children count and index as an integer

This is one of those things that you swear it should already be possible with just CSS. The situation is the following: I find myself wanting to know the index of an element between its siblings or the total number of children. I can’t use the counter() function since sometimes I need an integer instead of a string. The current approach is either hardcoding an index on the HTML:

<ul>
  <li style="--index: 0">Milk</li>
  <li style="--index: 1">Eggs</li>
  <li style="--index: 2">Cheese</li>
</ul>

Or alternatively, write each index in CSS:

li:nth-child(1) { --index: 0; }
li:nth-child(2) { --index: 1; }
li:nth-child(3) { --index: 2; }

Either way, I always leave with the feeling that it should be easier to reference this number; the browser already has this info, it’s just a matter of exposing it to authors. It would make prettier and cleaner code for staggering animations, or simply changing the styles based on the total count.

Luckily, there is a already proposal in Working Draft for sibling-count() and sibling-index() functions. While the syntax may change, I do hope to hear more about them in 2025.

ul > li {
  background-color: hsl(sibling-count() 50% 50%);
}

ul > li {
  transition-delay: calc(sibling-index() * 500ms);
}

9. A way to balance flex-wrap

I’m stealing this one from Adam Argyle, but I do wish for a better way to balance flex-wrap layouts. When elements wrap one by one as their container shrinks, they either are left alone with empty space (which I don’t dislike) or grow to fill it (which hurts my soul):

I wish for a more native way of balancing wrapping elements:

Flex wrap balancing elements

It’s definitely annoying.

10. An easier way to read/research CSSWG discussions

I am a big fan of the CSSWG and everything they do, so I spent a lot of time reading their working drafts, GitHub issues, or notes about their meetings. However, as much as I love jumping from link to link in their GitHub, it can be hard to find all the related issues to a specific discussion.

I think this raises the barrier of entry to giving your opinion on some topics. If you want to participate in an issue, you should have the big picture of all the discussion (what has been said, why some things don’t work, others to consider, etc) but it’s usually scattered across several issues or meetings. While issues can be lengthy, that isn’t the problem (I love reading them), but rather not knowing part of a discussion existed somewhere in the first place.

So, while it isn’t directly a CSS wish, I wish there was an easier way to get the full picture of the discussion before jumping in.

What’s on your wishlist?

We asked! You answered! Here are a few choice selections from the crowd:

  • Rotate direct background-images, like background-rotate: 180deg
  • CSS random(), with params for range, spread, and type
  • A CSS anchor position mode that allows targeting the mouse cursor, pointer, or touch point positions
  • A string selector to query a certain word in a block of text and apply styling every time that word occurs
  • A native .visually-hidden class.
  • position: sticky with a :stuck pseudo

Wishing you a great 2025…

CSS-Tricks trajectory hasn’t been the most smooth these last years, so our biggest wish for 2025 is to keep writing and sparking discussions about the web. Happy 2025!


A CSS Wishlist for 2025 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

How Airlines Leverage UX (and Dark Patterns) to Monetize Seat Selection

December 23rd, 2024 No comments

Airlines use advanced UX strategies and dark patterns, such as urgency cues, visual hierarchy, and hidden free options, to nudge travelers toward paying for seat selection, turning it into a $12.4 billion revenue stream.

Categories: Designing, Others Tags:

Why Term Insurance Policies Are the Best Choice for People in Debt

December 23rd, 2024 No comments

When facing financial challenges, especially debt, securing your family’s future and ensuring that financial obligations are met can feel like an overwhelming task. One of the smartest financial decisions that can offer peace of mind is opting for a term insurance policy. Unlike other life insurance policy, term insurance is often seen as the best option for people in debt, offering significant benefits at an affordable cost. In this blog, we will explore why term insurance policies are the best choice for those burdened with debt and how they can provide crucial financial protection for loved ones.

Understanding Term Insurance Policies

Before diving into why term insurance is particularly beneficial for people in debt, let’s first understand what it is. A term insurance policy is a type of life insurance that provides coverage for a specific period or “term,” typically ranging from 10 to 30 years. If the insured person passes away during the term, their beneficiaries receive the sum assured (death benefit). Term insurance is the most straightforward type of life insurance, with affordable premiums, and it provides high coverage at low cost, making it an ideal choice for many.

There are several types of life insurance policies available, including endowment plans, unit-linked insurance plans (ULIPs), and whole life insurance. However, when it comes to debt management and financial security, term insurance stands out because of its affordability, simplicity, and straightforward benefits.

How Term Insurance Helps People in Debt

  1. Financial Protection for Family and Dependents

When you are in debt, your primary concern is often the financial well-being of your loved ones. A term insurance policy ensures that your family doesn’t bear the financial burden of your outstanding debts in the event of your untimely death. Whether it’s a mortgage, personal loans, or any other liabilities, term insurance provides a safety net by paying off these debts, preventing your family from inheriting them.

The life insurance plans with term coverage are designed to replace lost income, cover existing debts, and give your loved ones a stable financial future, without the worry of creditors coming after them.

  1. Affordable Premiums for Maximum Coverage

One of the primary reasons people in debt should consider term insurance is its affordability. Since term insurance only provides death benefits and doesn’t include investment components like other types of life insurance (such as whole life or ULIPs), the premiums are generally much lower. This makes it a highly cost-effective way to secure your family’s future while balancing existing debt.

If you’re struggling with paying high premiums for other types of life insurance plans, switching to a term insurance policy can free up resources to pay down your debt while still ensuring that your family has adequate protection.

  1. Simple and Easy to Understand

When it comes to managing debt, simplicity is key. Term insurance policies are easy to understand compared to other life insurance options that often have complicated clauses and investment elements. With term insurance, you pay a fixed premium over the policy term, and if you pass away during this time, your beneficiaries receive the sum assured. There are no surprises, no hidden fees, and no complex terms to navigate. For someone already struggling with debt, the simplicity of a term insurance policy is a big relief.

  1. Customizable Coverage for Your Debt Needs

People in debt often have different financial obligations, which can vary widely. Whether it’s a home loan, car loan, or personal loan, term insurance can be tailored to cover the exact amount of your debt. You can choose a life insurance plan with a sum assured that matches your debt obligations, ensuring that your loved ones will have enough financial support to clear the loans after your death.

Some term insurance policies also allow policyholders to increase coverage during the policy term, providing additional protection in case your debts grow over time. This level of customization makes term insurance a flexible option for debt management.

  1. Guaranteed Financial Security

In a world full of uncertainties, term insurance provides guaranteed financial security for your family. Unlike other types of life insurance, where the returns or benefits may fluctuate based on market conditions or other factors, term insurance offers a fixed sum assured in case of death. This ensures that your family will receive the promised amount, regardless of economic changes or investment performance. For someone in debt, having a guaranteed payout can make all the difference in protecting their family’s financial future.

  1. Tax Benefits for Policyholders

In addition to the basic benefits of a term insurance policy, policyholders can also enjoy tax deductions. Under Section 80C of the Income Tax Act, the premiums paid for life insurance plans are eligible for tax deductions up to ?1.5 lakh annually. This tax-saving benefit can be especially helpful for individuals trying to balance their debt and manage their finances. Additionally, the death benefit received by the beneficiary is tax-free under Section 10(10D), providing further financial relief.

Why Choose Term Insurance Over Other Life Insurance Plans?

When it comes to people in debt, term insurance plans are the most suitable option due to their affordability, simplicity, and tailored coverage. Other types of life insurance, such as whole life or endowment policies, often come with higher premiums and involve long-term commitments, which may not be ideal for someone facing financial stress. Additionally, these policies typically combine life coverage with an investment component, which may not align with the immediate need for debt protection.

Term insurance, on the other hand, focuses purely on providing a death benefit, which is ideal for people looking for a cost-effective way to secure their financial future while paying off existing liabilities.

Conclusion

For people in debt, a term insurance policy offers the right balance of affordability, coverage, and peace of mind. It ensures that your family doesn’t bear the burden of your outstanding debts and offers financial stability during difficult times. By choosing the right life insurance plans and calculating the appropriate sum assured, you can safeguard your loved ones’ future without overburdening your finances today. Always consider your specific debt obligations, financial goals, and risk appetite before making a decision, and use a life insurance calculator to determine the most suitable coverage for your needs.

By opting for a term insurance policy, you take a proactive step in securing your family’s financial security while keeping your debt situation in check.

Featured image by Jakub ?erdzicki on Unsplash

The post Why Term Insurance Policies Are the Best Choice for People in Debt appeared first on noupe.

Categories: Others Tags:

The Design Leader Dilemma

December 23rd, 2024 No comments

Many design leaders find themselves in an impossible situation. On one side, senior management have read articles trumpeting the incredible ROI of user experience design. McKinsey tells us that design-led companies achieve 56% higher returns to shareholders. Forrester reports that every dollar invested in UX brings 100 dollars in return.

Yet the reality I encounter when talking to design leaders is very different. Most are desperately under-resourced, with tiny teams expected to support hundreds of projects across their organizations. The result? We’re spread so thin that we can barely scratch the surface of what needs doing.

The problem isn’t just about resources. It’s about expectations and how we define our role. Too often, we position ourselves (or are positioned by others) as implementors — the people who do the user research, create the prototypes, and run the usability tests. But with the scale of digital touching every corner of our organizations, that’s simply not sustainable.

Time For A New Approach

We need to stop trying to do everything ourselves and instead focus on empowering others across the organization to improve the user experience. In other words, we need to become true leaders rather than just practitioners.

This isn’t about giving up control or lowering standards. It’s about maximizing our impact by working through others. Think about it: would you rather be directly involved in 10% of projects or have some influence over 90% of them?

What Does This Look Like In Practice?

First, we need to shift our mindset from doing to enabling. This means:

  • Offering targeted services rather than trying to be involved in everything;
  • Providing coaching and mentoring to help others understand UX principles;
  • Creating resources that empower others to make better UX decisions;
  • Setting standards and guidelines that can scale across the organization.

Let’s break down each of these areas.

Targeted Services

Instead of trying to be involved in every project, focus on providing specific, high-value services that can make the biggest impact. This might include:

  • Running discovery phases for major initiatives
    By strategically initiating discovery phases for critical projects, you ensure that they start with a strong, user-focused foundation. This can involve tools like the Strategic User-Driven Project Assessment (SUPA), which helps validate ideas by assessing audience value, user needs, feasibility, and risks before committing to major investments. SUPA ensures projects are not just built right but are the right ones to build.
  • Project-Specific UX Guidance
    Regular feedback on design assets throughout a project keeps UX principles front and center. This can be achieved by offering UX audits, periodic check-ins to assess progress, or design reviews at key milestones.
  • Facilitating workshops and problem-solving sessions
    Leading targeted workshops or brainstorming sessions empowers teams to overcome design challenges on their own with your guidance. These tailored sessions help teams understand how to make better user-centered decisions and solve issues themselves, spreading UX capabilities beyond your team.

The key is to be strategic about where you spend your time, focusing on activities that will have the greatest ripple effect across the organization.

Coaching And Mentoring

One of the most effective ways to scale your impact is through coaching. This could include:

  • UX Office Hours
    Designate times where anyone in the organization can drop in to get quick UX advice. This informal setting can solve small issues before they snowball and helps stakeholders learn as they go.
  • One-on-One or Group Coaching
    Scheduled check-ins with individuals or teams are great opportunities to address challenges directly, mentor those who need extra support, and ensure alignment with best practices. Regular 1:1 or group coaching keeps UX priorities on track and provides valuable guidance when and where it’s needed most.
  • Tailored Problem-Solving Sessions
    Providing bespoke guidance for specific challenges that teams encounter empowers them to tackle design obstacles while internalizing the principles of good UX. These problem-solving sessions can be invaluable in ensuring teams can autonomously address future problems.

The goal isn’t to turn everyone into UX experts but to help them understand enough to make better decisions in their daily work.

It’s also important to recognize that others might not initially deliver work at the same level of quality that you would. This is okay. The primary goal is to get people engaged and excited about UX. If we criticize them every time they fall short of perfection, we risk undermining their enthusiasm. Instead, we need to foster a supportive environment where improvement happens over time.

Creating Resources

Develop tools and resources that help others apply UX principles independently. For example:

  • Design Systems
    Create and maintain a comprehensive design system that integrates UX best practices into the UI across the organization. A well-crafted design system ensures that everyone, from developers to designers, aligns on consistent best practices, making it easier for teams to work independently while still maintaining high standards. This includes reusable code components, clear documentation, and alignment between design and development.
  • UX Tool Suite
    Providing teams with pre-selected tools for user research, prototyping, and user testing helps maintain quality and saves time. With tools for everything from user research to usability testing, you provide the resources teams need to conduct UX activities on their own without extensive onboarding.
  • Research Repository
    Maintain a centralized repository of user research findings that can be accessed by anyone across the organization. A well-organized research repository can reduce duplication of effort, provide insights across different initiatives, and allow teams to learn from each other’s findings. This promotes consistent application of user insights across projects.
  • Supplier Lists
    Providing a vetted list of suppliers and external agencies helps ensure consistency when work is outsourced. It provides quick access to high-quality resources, mitigates risk, and builds trust with suppliers who understand your standards.
  • Self-Service Training Resources
    Create a library of on-demand training materials that teams can access when needed. This should include video tutorials, interactive exercises, case studies, and step-by-step guides for common UX tasks like conducting user interviews, creating personas, or running usability tests. Unlike scheduled workshops, self-paced learning allows people to access knowledge exactly when they need it, leading to better retention and practical application.

These resources should be practical and accessible, making it easy for teams to do the right thing.

Setting Standards

Create a framework that guides UX decisions across the organization:

  • Design Principles
    Establish core design principles that align with your organization’s values and user-centered goals. These principles help ensure consistency and clarity in decision-making. For example, define around six to ten principles that stakeholders across the organization have voted on and agreed upon, ensuring broader buy-in and consistent decision-making.
  • Policies for UX
    Develop clear policies that standardize processes like work requests, user research and testing, and stakeholder involvement. These policies help set expectations, keep efforts aligned with organizational goals, and make it easier for non-UX professionals to understand and comply with best practices.
  • Project Prioritization Policies
    Having clear guidelines on how projects are prioritized ensures that UX gets the attention it needs in the planning stages, preventing it from being overlooked or marginalized. Establish policies that align project value to user needs and organizational priorities.

The key is to make these standards helpful rather than bureaucratic — they should enable better work, not create unnecessary obstacles.

Bringing It All Together

All of these elements should come together in what I call a UX Playbook — a single source of truth that contains everything teams need to deliver better user experiences. This isn’t just another document to gather dust; it’s a living resource that demonstrates your value as a leader and helps others get started on their UX journey.

The shift from practitioner to leader isn’t easy. It requires letting go of some control and trusting others to carry forward UX principles. But it’s the only way to create lasting change at scale.

If you’re struggling with this transition, I am running a workshop on design leadership in February. I would love to discuss your situation there.

Categories: Others Tags:

Matt Mullenweg, WordPress, and the Battle for Control of the Internet

December 21st, 2024 No comments

Matt Mullenweg’s clash with WP Engine highlights the tension between open-source ideals and centralized control within WordPress, which powers 40% of the internet. The controversy raises critical questions about who holds the reins in shaping the web’s future.

Categories: Designing, Others Tags:

The Little Triangle in the Tooltip

December 20th, 2024 No comments

Tooltips are like homemade food: everyone uses them and everyone has their own recipe to make them. If you don’t remember a particular recipe, you will search for one, follow it, and go on with your day. This “many ways to do the same thing” concept is general to web development and programming (and life!), but it’s something that especially rings true with tooltips. There isn’t a specialized way to make them — and at this point, it isn’t needed — so people come up with different ways to fill those gaps.

Today, I want to focus on just one step of the recipe, which due to lack of a better name, I’ll just call the little triangle in the tooltip. It’s one of those things that receives minimal attention (admittedly, I didn’t know much before writing this) but it amazes you how many ways there are to make them. Let’s start with the simplest and make our way up to the not-so-simple.

Ideally, the tooltip is just one element. We want to avoid polluting our markup just for that little triangle:

<span class="tooltip">I am a tooltip</span>

Clever border

Before running, we have to learn to walk. And before connecting that little triangle we have to learn to make a triangle. Maybe the most widespread recipe for a triangle is the border trick, one that can be found in Stack Overflow issues from 2010 or even here by Chris in 2016.

In a nutshell, borders meet each other at 45° angles, so if an element has a border but no width and height, the borders will make four perfect triangles. What’s left is to set three border colors to transparent and only one triangle will show! You can find an animated version on this CodePen by Chris Coyier

CodePen Embed Fallback

Usually, our little triangle will be a pseudo-element of the tooltip, so we need to set its dimensions to 0px (which is something ::before and ::after already do) and only set one of the borders to a solid color. We can control the size of the triangle base by making the other borders wider, and the height by making the visible border larger.

.tooltip {
  &::before {
    content: "";

    border-width: var(--triangle-base);
    border-style: solid;
    border-color: transparent;

    border-top: var(--triangle-height) solid red;
  }
}

Attaching the triangle to its tooltip is an art in itself, so I am going with the basics and setting the little triangle’s position to absolute and the .tooltip to relative, then playing with its inset properties to place it where we want. The only thing to notice is that we will have to translate the little triangle to account for its width, -50% if we are setting its position with the left property, and 50% if we are using right.

.tooltip {
  position: relative;

  &::before {
    /* ... */
    position: absolute;
    top: var(--triangle-top);
    left: var(--triangle-left);

    transform: translateX(-50%);
  }
}

However, we could even use the new Anchor Positioning properties for the task. Whichever method you choose, we should now have that little triangle attached to the tooltip:

CodePen Embed Fallback

Rotated square

One drawback from that last example is that we are blocking the border property so that if we need it for something else, we are out of luck. However, there is another old-school method to make that little triangle: we rotate a square by 45° degrees and hide half of it behind the tooltip’s body. This way, only the corner shows in the shape of a triangle. We can make the square out of a pseudo-element:

.tooltip {
  &::before {
    content: "";

    display: block;
    height: var(--triangle-size);
    width: var(--triangle-size);

    background-color: red;
  }
}

Then, position it behind the tooltip’s body. In this case, such that only one-half shows. Since the square is rotated, the transformation will be on both axes.

.tooltip {
  position: relative;

  &::before {
    /* ... */
    position: absolute;
    top: 75%;
    left: 50%;
    z-index: -1; /* So it's behind the tooltip's body */

    transform: translateX(-50%);
    transform: rotate(45deg) translateY(25%) translateX(-50%);
  }
}
CodePen Embed Fallback

I also found that this method works better with Anchor Positioning since we don’t have to change the little triangle’s styles whenever we move it around. Unlike the border method, in which the visible border changes depending on the direction.

CodePen Embed Fallback

Trimming the square with clip-path

Although I didn’t mention it before, you may have noticed some problems with that last approach. First off, it isn’t exactly a triangle, so it isn’t the most bulletproof take; if the tooltip is too short, the square could sneak out on the top, and moving the false triangle to the sides reveals its true square nature. We can solve both issues using the clip-path property.

The clip-path property allows us to select a region of an element to display while clipping the rest. It works by providing the path we want to trim through, and since we want a triangle out of a square, we can use the polygon() function. It takes points in the element and trims through them in straight lines. The points can be written as percentages from the origin (i.e., top-left corner), and in this case, we want to trim through three points 0% 0% (top-left corner), 100% 0% (top-right corner) and 50% 100% (bottom-center point).

So, the clip-path value would be the polygon() function with those three points in a comma-separated list:

.tooltip {
  &::before {
    content: "";

    width: var(--triangle-base);
    height: var(--triangle-height);

    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    transform: translate(-50%);

    background-color: red;
  }
}

This time, we will set the top and left properties using CSS variables, which will come in handy later.

.tooltip {
  position: relative;

  &::before {
    /* ... */
    position: absolute;
    top: var(--triangle-top); /* 100% */
    left: var(--triangle-left); /* 50% */

    transform: translate(-50%);
  }
}

And now we should have a true little triangle attached to the tooltip:

CodePen Embed Fallback

However, if we take the little triangle to the far end of any side, we can still see how it slips out of the tooltip’s body. Luckily, the clip-path property gives us better control of the triangle’s shape. In this case, we can change the points the trim goes through depending on the horizontal position of the little triangle. For the top-left corner, we want its horizontal value to approach 50% when the tooltip’s position approaches 0%, while the top-right corner should approach 50% when the tooltip position approaches 100%.

Path to trim right triangles

The following min() + max() combo does exactly that:

.tooltip {
  clip-path: polygon(
    max(50% - var(--triangle-left), 0%) 0,
    min(150% - var(--triangle-left), 100%) 0%,
    50% 100%
  );
}

The calc() function isn’t necessary inside math functions like min() and max().

Try to move the tooltip around and see how its shape changes depending on where it is on the horizontal axis:

CodePen Embed Fallback

Using the border-image property

It may look like our last little triangle is the ultimate triangle. However, imagine a situation where you have already used both pseudo-elements and can’t spare one for the little triangle, or simply put, you want a more elegant way of doing it without any pseudo-elements. The task may seem impossible, but we can use two properties for the job: the already-seen clip-path and the border-image property.

Using the clip-path property, we could trim the shape of a tooltip — with the little triangle included! — directly out of the element. The problem is that the element’s background isn’t big enough to account for the little triangle. However, we can use the border-image property to make an overgrown background. The syntax is a bit complex, so I recommend reading this full dive into border-image by Temani Afif. In short, it allows us to use an image or CSS gradient as the border of an element. In this case, we are making a border as wide as the triangle height and with a solid color.

.tooltip {
  border-image: fill 0 // var(--triangle-height) conic-gradient(red 0 0);;
}

The trim this time will be a little more complex, since we will also trim the little triangle, so more points are needed. Exactly, the following seven points:

The clip-path trim the shape of a tooltip body and little triangle

This translates to the following clip-path value:

.tooltip {
  /* ... */
  clip-path: polygon(
    0% 100%,
    0% 0%,
    100% 0%,
    100% 100%,
    calc(50% + var(--triangle-base) / 2) 100%,
    50% calc(100% + var(--triangle-height)),
    calc(50% - var(--triangle-base) / 2) 100%
  );
}

We can turn it smart by also capping the little triangle bottom point whenever it gets past any side of the tooltip:

.tooltip {
  /* ... */
  clip-path: polygon(
    0% 100%,
    0% 0%,
    100% 0%,
    100% 100%,
    min(var(--triangle-left) + var(--triangle-base) / 2, 100%) 100%,
    var(--triangle-left) calc(100% + var(--triangle-height)),
    max(var(--triangle-left) - var(--triangle-base) / 2, 0%) 100%
  ;
}

And now we have our final little triangle of the tooltip, one that is part of the main body and only uses one element!

CodePen Embed Fallback

More information

Related tricks!


The Little Triangle in the Tooltip originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

Google’s Project Mariner: UX and User Testing in the Age of AI-Driven Web Navigation

December 20th, 2024 No comments

Google’s Project Mariner introduces autonomous AI agents that navigate the web and perform tasks, reshaping UX design and testing to accommodate both human users and AI agents.

Categories: Designing, Others Tags:

How Video Messaging Enhances Communication in Remote Teams

December 20th, 2024 No comments

Introduction

Remote Work has revolutionized how we interact with each other in the workplace; increased workforce globalization. Nonetheless, the most emergent issue needs to be addressed in this setup is probably the communication issue. Students might feel isolated and lonely due to no live contact, communication can become confusing and lack of team cohesiveness. Allow me to introduce video messaging as the means to close the gap and instill virtually enhanced relationships within geographically distanced employees.

In this blog, I will focus on how video message can help to improve the communication among employees who work altogether in distance, as well as, I will present some tips on how to adopt this technology for achieving the productivity boost. 

The Challenges of Remote Team Communication

Remote work brings with it unique communication hurdles, such as:

1. Lack of Nonverbal Cues – In normal organizational environment, physical gestures, eye contact, gestures and even intonation contribute to the communication process. Such nuances are missing in the written communication which include emails and messages through online chatting.

2. Overreliance on Written Communication – Remote teams heavily rely on writing to communicate with each other and it can be problematic. Contradictory meanings, delays in reaction, and the lack of understanding of the affective intents lead to intragroup conflict.

3. Scheduling Challenges – Due to the distribution of team members across different geographical regions, often the functionality of scheduling a meeting at particular time of the day poses a challenge. Inaccurate timings cause disconnections and inability to communicate at precise times and dates.

How Video Messaging Solves These Challenges

Video messaging addresses many of these issues by offering a more dynamic and human-centric way to communicate. Here’s how:

1. Bringing Back Nonverbal Communication – With video messaging, people can finally bring back their body language again. Nonverbal cues along with verbal are likely to understand messages and avoid confusion resulting from similar words and phrases.

2. Asynchronous Communication Made Personal- Unlike live video calls, video messages are recorded and passed around thus making asynchronous communication personal. This helps reduce scheduling constraints and most of the interchange will be very much simplified across working hours let alone time zones.

3. Enhanced Engagement and Connection – Seeing a colleague or a fellow employee during a meeting and hearing from them certainly creates a level of interaction, which an email or a message cannot create. Such an emotional interest will further enhance team spirit and shed positive feeling towards the people involved.

4. Clearer Explanations for Complex Topics- While sometimes words or pictures can be used to teach people what we want them to know, there are times which these are inadequate. Video messaging has an added advantage of being able to record the screen, draw on visuals, or verbally elaborate on complex data.

Practical Benefits of Video Messaging for Remote Teams

1. Increased efficiency – Video messaging helps do away with a long thread associated with emails or chats. This goes a long way in getting the message across without the need for many emails or lengthy explanation as the video gets the work done.

2. Better Onboarding and Training- Success in any new job is achieved majorly through receiving constructive instructions from supervisors or managers, but this is difficult for new employees in remote teams. Video messages are extremely useful for onboarding, providing easy and detailed instructions on how to do something, welcome message and training.

3. Increased Transparency – It is hard to argue with a video, especially if it contains important information the rest of the team only gets secondhand or thirdhand. This approach reduces the possibility of coming up with the wrong understanding and distorting the original goal.

4. Strengthened Team Culture- It is easy to send daily check-ins, fun greetings, videos, or hellos to the entire crew to strengthen the remote working bonds and work on forming a stronger and cheerful organizational culture.

Strategies for Effective Video Messaging

To make the most of video messaging, consider the following best practices:

1. Keep It Short and Focused- Lengthy videos can lose the viewer’s attention. Aim for concise messages that address a specific topic or question.

2. Use Visual Aids- While producing your video make sure to add relevant pictures and graphs to support your content and also to make your video more attractive.

3. Be Authentic – Don’t aim for perfection focus on being authentic and relatable. A natural tone helps build trust and connection.

4. Encourage Feedback- Invite recipients to respond with their own video messages or comments. This two-way interaction keeps the communication dynamic and engaging.

5. Choose the Right Tools- Select a video messaging platform that aligns with your team’s needs. Look for features like high-quality video, ease of use, and integrations with existing workflows.

Popular Use Cases for Video Messaging

Video messaging can be leveraged in various scenarios to enhance team collaboration:

1. Project Updates- Implement a video project status to quickly share updates to the team without scheduling a meeting.

2. Performance Reviews- Use video messaging to deliver personalized feedback, especially for remote employees who may feel disconnected from management.

3. Team Announcements – Celebrate milestones, share important news, or communicate policy changes using engaging video messages.

4. Conflict Resolution- Address misunderstandings or conflicts with video messages to provide clarity and a personal touch that text cannot offer.

5. Team Building- Play interactive short videos or post amusing clip page and messages to enhance the cohesiveness of the team.

Conclusion

The utilization of video messaging is gradually becoming the most powerful tool especially when dealing with remote teams as the means of communication is much more dynamic and elastic than in Instant Messaging. When adopted as part of one’s regular practice, this tool will help to address many of the barriers to effective communication we have seen hitherto, enhance work output and create a more cohesive working environment. 

For today’s workspace that has gradually moved to remote work, it is critical to have a solid video messaging platform that fostered team cohesiveness and great performance. Engage yourself with this technology and let your offsite employees maximize their productivity.

Featured image by William Fortunato

The post How Video Messaging Enhances Communication in Remote Teams appeared first on noupe.

Categories: Others Tags:

Git Wrapped: The GitHub Year in Review You Didn’t Know You Needed

December 19th, 2024 No comments

Git Wrapped is a free tool that transforms your GitHub activity into an engaging, shareable year-in-review summary, highlighting your top projects, language usage, and commit trends.

Categories: Designing, Others Tags:

The 30 Best Fonts of 2024

December 19th, 2024 No comments

2024 has been a great year for type design. Over the past few years geometric sans have been less apparent, with cursive and serifs having something of a renaissance; that trend continued this year. There’s been a very clear fashion for French design. Experimental fonts are more usable than ever. Here — in no particular […]

Categories: Designing, Others Tags: