January, 2025 | Webmasters Gallery

What’s Next for Web Development? Top Trends You Need to Know in 2025

January 29th, 2025 No comments

As we step into 2025, the world of web development seems to be ready for many exciting advances, each driven by a combination of innovative technology and changing user preferences. Right from the expanding role of AI in web development and shifts in preferred programming languages to the emergence of decentralized technologies, keeping up with the latest web development trends is important for web developers as the speed of innovation increases. In this blog post, we will see a list of key trends that will shape the world of web development in 2025. So, let’s set off:

10 Best Web Development Trends Your Business Must Adopt

AI Integration into Web Development

Needless to say, Artificial Intelligence is set to remain a revolutionary technology in web development throughout 2025. Developing on unprecedented advancements in 2024, AI continues to transform web development by improving workflows, enhancing user experiences, and redefining how websites are created, maintained, and scaled. While the influence of AI in web development has spread in every stage, its impact is set to upsurge down the line. Tools such as Tabnine and GitHub Copilot are already extensively used to automate repeated coding tasks, offering real-time suggestions so that professional developers can focus on more complicated challenges.

Programming Languages Evolution

In 2025, the coding ecosystem will undergo a significant transformation, with top web development technologies, such as Kotlin, Rust, and Go gaining ground alongside popular players, like Python and JavaScript. This evolution shows the growing need for languages that resolve specific issues and discover new opportunities in web development. For instance, Python continues to lead in Artificial Intelligence, Machine Learning, and Data Science, flourishing in data-intensive environments that demand fast prototyping. Its versatility and powerful library make it paramount for applications ranging from predictive analytics to automation.

Headless CMS Adoption

Building on the evolution of coding languages, the growth of API-first approaches, including headless CMS architecture, is reshaping the web dev trends, providing new methods for developers to leverage flexibility and scalability. The headless technique separates the frontend and backend, allowing developers to utilize the latest programming languages, tools, and frameworks to create customized solutions that excel across various platforms and devices. In a headless system, content is handled in a backend CMS and delivered to the front end through Application Programming Interfaces. This enables developers to create unique user interfaces without being restricted by traditional CMS templates.

Heightened Regulatory Scrutiny

As data privacy emerges as a global priority, regulatory scrutiny is poised to strengthen in 2025, impacting more industries than ever before. High-profile regulations like the EU’s General Data Protection Regulation have already changed how companies manage user data. Expansions of current laws and the inclusion of new regional standards, like the Digital Markets Act (DMA) in the European Union or stringent privacy protocols in the US will require organizations to implement more holistic compliance strategies. For developers, this means data privacy and protection must be incorporated into every phase of the software development lifecycle. Developers will have to ensure websites are designed with current trends in web development like opt-in/opt-out mechanisms, cookie consent management, and strong data encryption to fulfill regulatory requirements.

DevSecOps Integration into Cybersecurity

DevSecOps stands for Development, Security, and Operations, which is a framework that incorporates security into software building processes. As 2025 approaches, you will see this framework strengthen its role in modern web development, integrating best security practices into the development lifecycle. As cyber threats have become more frequent and sophisticated, treating traditional approaches to security as an afterthought checklist is no longer adequate. Developers need to leverage DevSecOps to embed security in every phase of development, ensuring web applications featuring modern web development trends remain resilient from the start.

Just to let you know, DevSecOps integrates security into CI/CD pipelines, allowing teams to recognize and resolve vulnerabilities early. Automated tools for static code analysis, vulnerability scanning, and dependency management are important components of this approach, offering real-time feedback to developers without interrupting workflows. Solutions such as Checkmarx and Synk scan open-source libraries and app code for possible risks, minimizing the chance of breaches caused by unfixed vulnerabilities. Besides this, if you are experiencing repeated cyber attacks on your existing website or web application, you can hire a web development company to fix this issue effectively.

Decentralized Web Technologies

In 2025, you will witness web3 trends like decentralized web technologies shifting from niche adoption to widespread implementation, completely transforming how digital systems operate. Tools comprising blockchain and peer-to-peer networks guarantee to sort out major problems in data privacy, security, and control. Decentralized identity systems, such as W3C’s Decentralized Identifiers (DIDs) and Microsoft’s Azure AD Verifiable Credentials, enable users to securely authenticate without third-party agents. They lower the scope of data breaches while ensuring granular control over sensitive information. These shifts provide golden opportunities for WordPress users to incorporate decentralized technologies into their websites and digital experiences.

In case you don’t know what granular control is, we must let you know that it is an approach to handle access to data, features, or permissions in a detailed manner. It is a more specific method than broad control, which provides high-level access.

7. Progressive Web Apps (PWAs)

Web development trends like Progressive Web Apps have been gaining popularity over the past few years and the global PWA market size is set to grow from USD 5.23 billion in 2025 to USD 21.44 billion in 2033 according to GlobeNewswire. PWAs bring together the best of both worlds, like top features of web and mobile apps, offering an app-like experience with quicker loading speeds, offline functionality, and smooth performance across different devices. Embracing Progressive Web Apps means achieving higher user engagement, enhanced SEO, and reduced bounce rates for your company. Given the increase in mobile internet consumption, if you decide not to invest in PWAs, you will be left behind your competitors very soon.

However, if you have made up your mind to build a Progressive Web App, you must learn these tips to choose web development company to attain the best return on investment:

Clearly define your needs and goals
Review the portfolio and past projects of the company
Check their client testimonials and reviews
Evaluate their technical expertise
Understand their pricing structure, and
Assess their post-launch support and maintenance abilities

8. Single Page Applications (SPAs)

Web dev trends like Single Page Applications continue to grow, and it will be a top priority for many organizations in 2025. SPAs enable users to navigate through a website without reloading the whole page, which lowers load times and improves the user experience. If you put your money into SPAs, it can provide a smoother, quicker, and more interactive experience, enhancing user satisfaction and engagement at the same time. SPAs are extremely beneficial for you if your establishment prioritizes delivering dynamic content, like eCommerce websites or social networks.

9. API-First Development

The demand for streamlined cross-platform communication has placed API-first development at the forefront of web development industry trends. When working on such web development trends, developers focus on creating powerful APIs prior to building the frontend. This ensures seamless integration between various platforms and devices. Companies that will embrace API-first development will experience swifter development cycles and better scalability. This trend is specifically important if you are planning to develop multi-platform web apps, as APIs facilitate interaction and data sharing between multiple systems.

10. Motion UI

As users look for more interactive experiences, Motion UI will play a significant role in web design and web development trends in 2025. This trend allows developers to design seamless transitions, animations, and engaging interactions on websites. These dynamic elements help hold users’ attention and enhance overall engagement. By incorporating Motion UI, you can offer pleasing and enjoyable experiences to users that suit your brand identity and boost customer retention.

The Rundown

Through this blog, you must have learned that 2025 is going to be a year of evolution, as developers sail through an ecosystem fraught with innovation and complexity. From AI-driven advancements to the rise of decentralized technologies, these web dev trends project a future where adaptability and creativity will drive success in web development. If you also want to make your digital presence ready for a stellar 2025, do not forget to get into a conversation with a leading web development company to turn your vision into reality.

Featured image by Jakub ?erdzicki on Unsplash

The post What’s Next for Web Development? Top Trends You Need to Know in 2025 appeared first on noupe.

Categories: Others Tags:

Wholesaler vs. Investor: What Real Estate Suppliers Need to Know

January 29th, 2025 No comments

Real estate investments allow you to choose from different paths to start your career in the property sector.

The most popular option is to be a landlord, which entails buying residential or commercial property to lease out.

Real estate investment trusts (REITs) are also options you can consider if you’re uninterested in managing commercial or residential spaces. By working with a REIT company, you can own or finance income-generating properties that let you buy shares and earn dividends.

If you want shorter commitments, you can look into wholesaling, which involves finding great deals on properties and assigning them to buyers for a fee.

Becoming a real estate supplier is another route you can consider. A supplier connects buyers with people selling properties, giving wholesalers and investors more options and opportunities to earn more profits from their investments.

These approaches offer different benefits that make real estate an advantageous choice that can help you achieve your career and financial goals.

Wholesale vs. Traditional Real Estate Investing

Wholesale real estate investing involves looking for properties priced lower than the current market value, getting them under contract, and assigning them to other investors.

Wholesalers act as middlemen since they earn a fee for connecting sellers with buyers.

The wholesale real estate investment process starts with identifying motivated sellers and entering into an agreement with them. Once the property is under contract, the wholesaler markets it to investors interested in buying it.

The wholesaler earns the difference between the agreed-upon purchase price and the amount the end buyer pays.

On the other hand, traditional real estate investing pertains to buying, owning, and managing properties to generate income or profit through monthly rent or by selling them at higher prices. REITs are included in this strategy.

To succeed in this traditional real estate business, you need significant upfront capital, sufficient market understanding, and management skills. If you’re successful, you can enjoy steady cash flow and tax benefits. You can also build your wealth over time.

Wholesale real estate and traditional real estate investing differ in various ways.

Firstly, in wholesale real estate investing, you don’t own the property, which means there’s lower financial risk and lower upfront capital. It offers quick payouts, but finding deals and buyers can be challenging. You also need to have strong market knowledge, networking, and negotiation skills.

On the other hand, the traditional approach requires significant capital, either from one’s savings or through financing. It also typically comes with market downturns, unexpected maintenance costs, and tenant-related challenges. However, it offers the potential for steady cash flow and tax benefits. You can use it as a wealth-building strategy as well.

The Role of a Supplier in Wholesale and Traditional Real Estate Investing

In both real estate investment strategies, suppliers have the important role of finding and providing the properties for transactions between sellers and buyers.

In wholesale real estate, suppliers provide wholesalers with opportunities to secure below-market properties, which allows the latter to assign them to end buyers. The supplier’s willingness to sell the property at a discount enables the wholesaler to earn higher profits.

For traditional real estate investors, suppliers provide properties they can purchase for rental income, flipping, or long-term holding. With ready homes or commercial spaces to sell, buyers can grow their portfolios with fewer challenges.

Suppliers form the foundation of real estate transactions, which makes this role indispensable for successful deals. As such, it is a career path worth exploring.

How Suppliers Can Provide Top-Notch Services for Real Estate Wholesalers and Investors

If you want to be a successful supplier and succeed in real estate, you must know how to customize your services to meet the needs of wholesalers and traditional investors.

Since wholesalers prioritize quick transactions and discounted properties, you can meet their needs by offering short-term engagements. For instance, you can streamline the process with flexible contracts to allow wholesalers to acquire a property and assign it to the buyer quickly. You can also encourage wholesalers to make faster decisions by providing accurate and truthful information about the property, such as its repair needs and market potential.

For traditional investors, offer bulk discounts on multiple properties to help them build their portfolios. You can also collaborate with them on property developments or renovations for shared profits and form project partnerships.

Investors value suppliers who deliver high-quality properties, so gain their trust by being consistent and dependable.

Whether you work with a wholesaler or investor, be flexible, understanding, and practice transparency to sell your services faster and ensure a mutually beneficial outcome and long-term success for all parties.

What Citizenship by Investment Programs Offer to Suppliers

Citizenship by investment programs (CIPs) offer a unique opportunity for suppliers who want to expand their resources. These pathways allow wholesale and traditional real estate investors to own a property in another country and legally gain a second passport.

These pathways are offered by some of the most sought-after destinations, including five countries in the West Indies that offer Caribbean citizenship by investment programs, which are:

Antigua and Barbuda
Dominica
Grenada
St. Lucia
St. Kitts and Nevis

Through the CIP, property buyers can own commercial or residential property in one of the participating countries and become citizens without renouncing their nationality. They can legally hold two passports and choose the best one to use when traveling.

These passports are some of the most powerful in the world and allow visa-free entry to different countries across the globe.

In addition to the expanded portfolio and second passport, investors in these programs can enjoy several tax benefits, including not paying wealth, inheritance, and capital gain taxes.

As a supplier, you can look for properties eligible for this program and sell them to buyers who want to establish themselves internationally. In addition to owning property in another country, investors can look for more lucrative opportunities in a new market and expand their portfolios.

Moreover, anyone who opts for a citizenship-by-investment program can live in a beautiful country where they can relax and have peace of mind.

As a supplier, you can leverage the benefits offered by citizenship by investment programs to expand your offerings to wholesalers and traditional real estate investors.

Featured image by Veronika Koroleva on Unsplash

The post Wholesaler vs. Investor: What Real Estate Suppliers Need to Know appeared first on noupe.

Categories: Others Tags:

Are Logos Becoming Irrelevant in Modern Branding?

January 29th, 2025 admin No comments

Logos are no longer the sole defining element of a brand, as dynamic branding, AI personalization, and social media dominance challenge their relevance. While still valuable as anchors of identity, logos must evolve into adaptable, integrated tools to thrive in today’s fluid and experience-driven branding landscape.

Categories: Designing, Others Tags:

Transitioning Top-Layer Entries And The Display Property In CSS

January 29th, 2025 No comments

Animating from and to display: none; was something we could only achieve with JavaScript to change classes or create other hacks. The reason why we couldn’t do this in CSS is explained in the new CSS Transitions Level 2 specification:

“In Level 1 of this specification, transitions can only start during a style change event for elements that have a defined before-change style established by the previous style change event. That means a transition could not be started on an element that was not being rendered for the previous style change event.”

In simple terms, this means that we couldn’t start a transition on an element that is hidden or that has just been created.

What Does `transition-behavior: allow-discrete` Do?

allow-discrete is a bit of a strange name for a CSS property value, right? We are going on about transitioning display: none, so why isn’t this named transition-behavior: allow-display instead? The reason is that this does a bit more than handling the CSS display property, as there are other “discrete” properties in CSS. A simple rule of thumb is that discrete properties do not transition but usually flip right away between two states. Other examples of discrete properties are visibility and mix-blend-mode. I’ll include an example of these at the end of this article.

To summarise, setting the transition-behavior property to allow-discrete allows us to tell the browser it can swap the values of a discrete property (e.g., display, visibility, and mix-blend-mode) at the 50% mark instead of the 0% mark of a transition.

What Does `@starting-style` Do?

The @starting-style rule defines the styles of an element right before it is rendered to the page. This is highly needed in combination with transition-behavior and this is why:

When an item is added to the DOM or is initially set to display: none, it needs some sort of “starting style” from which it needs to transition. To take the example further, popovers and dialog elements are added to a top layer which is a layer that is outside of your document flow, you can kind of look at it as a sibling of the element in your page’s structure. Now, when opening this dialog or popover, they get created inside that top layer, so they don’t have any styles to start transitioning from, which is why we set @starting-style. Don’t worry if all of this sounds a bit confusing. The demos might make it more clearly. The important thing to know is that we can give the browser something to start the animation with since it otherwise has nothing to animate from.

A Note On Browser Support

At the moment of writing, the transition-behavior is available in Chrome, Edge, Safari, and Firefox. It’s the same for @starting-style, but Firefox currently does not support animating from display: none. But remember that everything in this article can be perfectly used as a progressive enhancement.

Now that we have the theory of all this behind us, let’s get practical. I’ll be covering three use cases in this article:

Animating from and to display: none in the DOM.
Animating dialogs and popovers entering and exiting the top layer.
More “discrete properties” we can handle.

Animating From And To display: none In The DOM

For the first example, let’s take a look at @starting-style alone. I created this demo purely to explain the magic. Imagine you want two buttons on a page to add or remove list items inside of an unordered list.

This could be your starting HTML:

<button type="button" class="btn-add">
  Add item
</button>
<button type="button" class="btn-remove">
  Remove item
</button>
<ul role="list"></ul>

Next, we add actions that add or remove those list items. This can be any method of your choosing, but for demo purposes, I quickly wrote a bit of JavaScript for it:

document.addEventListener("DOMContentLoaded", () => {
  const addButton = document.querySelector(".btn-add");
  const removeButton = document.querySelector(".btn-remove");
  const list = document.querySelector('ul[role="list"]');

  addButton.addEventListener("click", () => {
    const newItem = document.createElement("li");
    list.appendChild(newItem);
  });

  removeButton.addEventListener("click", () => {
    if (list.lastElementChild) {
      list.lastElementChild.classList.add("removing");
      setTimeout(() => {
        list.removeChild(list.lastElementChild);
      }, 200);
    }
  });
});

When clicking the addButton, an empty list item gets created inside of the unordered list. When clicking the removeButton, the last item gets a new .removing class and finally gets taken out of the DOM after 200ms.

With this in place, we can write some CSS for our items to animate the removing part:

ul {
    li {
      transition: opacity 0.2s, transform 0.2s;

      &.removing {
        opacity: 0;
        transform: translate(0, 50%);
      }
    }
  }

This is great! Our .removing animation is already looking perfect, but what we were looking for here was a way to animate the entry of items coming inside of our DOM. For this, we will need to define those starting styles, as well as the final state of our list items.

First, let’s update the CSS to have the final state inside of that list item:

ul {
    li {
      opacity: 1;
      transform: translate(0, 0);
      transition: opacity 0.2s, transform 0.2s;

      &.removing {
        opacity: 0;
        transform: translate(0, 50%);
      }
    }
  }

Not much has changed, but now it’s up to us to let the browser know what the starting styles should be. We could set this the same way we did the .removing styles like so:

ul {
    li {
      opacity: 1;
      transform: translate(0, 0);
      transition: opacity 0.2s, transform 0.2s;

      @starting-style {
        opacity: 0;
        transform: translate(0, 50%);
      }

      &.removing {
        opacity: 0;
        transform: translate(0, 50%);
      }
    }
  }

Now we’ve let the browser know that the @starting-style should include zero opacity and be slightly nudged to the bottom using a transform. The final result is something like this:

But we don’t need to stop there! We could use different animations for entering and exiting. We could, for example, update our starting style to the following:

@starting-style {
  opacity: 0;
  transform: translate(0, -50%);
}

Doing this, the items will enter from the top and exit to the bottom. See the full example in this CodePen:

See the Pen @starting-style demo – up-in, down-out [forked] by utilitybend.

When To Use `transition-behavior: allow-discrete`

In the previous example, we added and removed items from our DOM. In the next demo, we will show and hide items using the CSS display property. The basic setup is pretty much the same, except we will add eight list items to our DOM with the .hidden class attached to it:

  <button type="button" class="btn-add">
    Show item
  </button>
  <button type="button" class="btn-remove">
    Hide item
  </button>

<ul role="list">
  <li class="hidden"></li>
  <li class="hidden"></li>
  <li class="hidden"></li>
  <li class="hidden"></li>
  <li class="hidden"></li>
  <li class="hidden"></li>
  <li class="hidden"></li>
  <li class="hidden"></li>
</ul>

Once again, for demo purposes, I added a bit of JavaScript that, this time, removes the .hidden class of the next item when clicking the addButton and adds the hidden class back when clicking the removeButton:

document.addEventListener("DOMContentLoaded", () => {
  const addButton = document.querySelector(".btn-add");
  const removeButton = document.querySelector(".btn-remove");
  const listItems = document.querySelectorAll('ul[role="list"] li');

  let activeCount = 0;

  addButton.addEventListener("click", () => {
    if (activeCount < listItems.length) {
      listItems[activeCount].classList.remove("hidden");
      activeCount++;
    }
  });

  removeButton.addEventListener("click", () => {
    if (activeCount > 0) {
      activeCount--;
      listItems[activeCount].classList.add("hidden");
    }
  });
});

Let’s put together everything we learned so far, add a @starting-style to our items, and do the basic setup in CSS:

ul {
    li {
      display: block;
      opacity: 1;
      transform: translate(0, 0);
      transition: opacity 0.2s, transform 0.2s;

      @starting-style {
        opacity: 0;
        transform: translate(0, -50%);
      }

      &.hidden {
        display: none;
        opacity: 0;
        transform: translate(0, 50%);
      }
    }
  }

This time, we have added the .hidden class, set it to display: none, and added the same opacity and transform declarations as we previously did with the .removing class in the last example. As you might expect, we get a nice fade-in for our items, but removing them is still very abrupt as we set our items directly to display: none.

This is where the transition-behavior property comes into play. To break it down a bit more, let’s remove the transition property shorthand of our previous CSS and open it up a bit:

ul {
    li {
      display: block;
      opacity: 1;
      transform: translate(0, 0);
      transition-property: opacity, transform;
      transition-duration: 0.2s;
    }
  }

All that is left to do is transition the display property and set the transition-behavior property to allow-discrete:

ul {
    li {
      display: block;
      opacity: 1;
      transform: translate(0, 0);
      transition-property: opacity, transform, display;
      transition-duration: 0.2s;
      transition-behavior: allow-discrete;
      /* etc. */
    }
  }

We are now animating the element from display: none, and the result is exactly as we wanted it:

We can use the transition shorthand property to make our code a little less verbose:

transition: opacity 0.2s, transform 0.2s, display 0.2s allow-discrete;

You can add allow-discrete in there. But if you do, take note that if you declare a shorthand transition after transition-behavior, it will be overruled. So, instead of this:

transition-behavior: allow-discrete;
transition: opacity 0.2s, transform 0.2s, display 0.2s;

…we want to declare transition-behavior after the transition shorthand:

transition: opacity 0.2s, transform 0.2s, display 0.2s;
transition-behavior: allow-discrete;

Otherwise, the transition shorthand property overrides transition-behavior.

See the Pen @starting-style and transition-behavior: allow-discrete [forked] by utilitybend.

Animating Dialogs And Popovers Entering And Exiting The Top Layer

Let’s add a few use cases with dialogs and popovers. Dialogs and popovers are good examples because they get added to the top layer when opening them.

What Is That Top Layer?

We’ve already likened the “top layer” to a sibling of the element, but you might also think of it as a special layer that sits above everything else on a web page. It’s like a transparent sheet that you can place over a drawing. Anything you draw on that sheet will be visible on top of the original drawing.

The original drawing, in this example, is the DOM. This means that the top layer is out of the document flow, which provides us with a few benefits. For example, as I stated before, dialogs and popovers are added to this top layer, and that makes perfect sense because they should always be on top of everything else. No more z-index: 9999!

But it’s more than that:

z-index is irrelevant: Elements on the top layer are always on top, regardless of their z-index value.
DOM hierarchy doesn’t matter: An element’s position in the DOM doesn’t affect its stacking order on the top layer.
Backdrops: We get access to a new ::backdrop pseudo-element that lets us style the area between the top layer and the DOM beneath it.

Hopefully, you are starting to understand the importance of the top layer and how we can transition elements in and out of it as we would with popovers and dialogues.

Transitioning The Dialog Element In The Top Layer

The following HTML contains a button that opens a element, and that element contains another button that closes the . So, we have one button that opens the and one that closes it.

<button class="open-dialog" data-target="my-modal">Show dialog</button>

<dialog id="my-modal">
  <p>Hi, there!</p>
  <button class="outline close-dialog" data-target="my-modal">
    close
  </button>
</dialog>

A lot is happening in HTML with invoker commands that will make the following step a bit easier, but for now, let’s add a bit of JavaScript to make this modal actually work:

// Get all open dialog buttons.
const openButtons = document.querySelectorAll(".open-dialog");
// Get all close dialog buttons.
const closeButtons = document.querySelectorAll(".close-dialog");

// Add click event listeners to open buttons.
openButtons.forEach((button) =< {
  button.addEventListener("click", () =< {
    const targetId = button.getAttribute("data-target");
    const dialog = document.getElementById(targetId);
    if (dialog) {
      dialog.showModal();
    }
  });
});

// Add click event listeners to close buttons.
closeButtons.forEach((button) =< {
  button.addEventListener("click", () =< {
    const targetId = button.getAttribute("data-target");
    const dialog = document.getElementById(targetId);
    if (dialog) {
      dialog.close();
    }
  });
});

I’m using the following styles as a starting point. Notice how I’m styling the ::backdrop as an added bonus!

dialog {
  padding: 30px;
  width: 100%;
  max-width: 600px;
  background: #fff;
  border-radius: 8px;
  border: 0;
  box-shadow: 
    rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;

  &::backdrop {
    background-image: linear-gradient(
      45deg in oklab,
      oklch(80% 0.4 222) 0%,
      oklch(35% 0.5 313) 100%
    );
  }
}

This results in a pretty hard transition for the entry, meaning it’s not very smooth:

Let’s add transitions to this dialog element and the backdrop. I’m going a bit faster this time because by now, you likely see the pattern and know what’s happening:

dialog {
  opacity: 0;
  translate: 0 30%;
  transition-property: opacity, translate, display;
  transition-duration: 0.8s;

  transition-behavior: allow-discrete;

  &[open] {
    opacity: 1;
    translate: 0 0;

    @starting-style {
      opacity: 0;
      translate: 0 -30%;
    }
  }
}

When a dialog is open, the browser slaps an open attribute on it:

<dialog open> ... </dialog>

And that’s something else we can target with CSS, like dialog[open]. So, in this case, we need to set a @starting-style for when the dialog is in an open state.

Let’s add a transition for our backdrop while we’re at it:

dialog {
  /* etc. */
  &::backdrop {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 1s;
  }

  &[open] {
    /* etc. */
    &::backdrop {
      opacity: 0.8;

      @starting-style {
        opacity: 0;
      }
    }
  }
}

Now you’re probably thinking: A-ha! But you should have added the display property and the transition-behavior: allow-discrete on the backdrop!

But no, that is not the case. Even if I would change my backdrop pseudo-element to the following CSS, the result would stay the same:

 &::backdrop {
    opacity: 0;
    transition-property: opacity, display;
    transition-duration: 1s;
    transition-behavior: allow-discrete;
  }

It turns out that we are working with a ::backdrop and when working with a ::backdrop, we’re implicitly also working with the CSS overlay property, which specifies whether an element appearing in the top layer is currently rendered in the top layer.

And overlay just so happens to be another discrete property that we need to include in the transition-property declaration:

dialog {
  /* etc. */

&::backdrop {
  transition-property: opacity, display, overlay;
  /* etc. */
}

Unfortunately, this is currently only supported in Chromium browsers, but it can be perfectly used as a progressive enhancement.

And, yes, we need to add it to the dialog styles as well:

dialog {
  transition-property: opacity, translate, display, overlay;
  /* etc. */

&::backdrop {
  transition-property: opacity, display, overlay;
  /* etc. */
}

See the Pen Dialog: starting-style, transition-behavior, overlay [forked] by utilitybend.

It’s pretty much the same thing for a popover instead of a dialog. I’m using the same technique, only working with popovers this time:

See the Pen Popover transition with @starting-style [forked] by utilitybend.

Other Discrete Properties

There are a few other discrete properties besides the ones we covered here. If you remember the second demo, where we transitioned some items from and to display: none, the same can be achieved with the visibility property instead. This can be handy for those cases where you want items to preserve space for the element’s box, even though it is invisible.

So, here’s the same example, only using visibility instead of display.

See the Pen Transitioning the visibility property [forked] by utilitybend.

The CSS mix-blend-mode property is another one that is considered discrete. To be completely honest, I can’t find a good use case for a demo. But I went ahead and created a somewhat trite example where two mix-blend-modes switch right in the middle of the transition instead of right away.

See the Pen Transitioning mix-blend-mode [forked] by utilitybend.

Wrapping Up

That’s an overview of how we can transition elements in and out of the top layer! In an ideal world, we could get away without needing a completely new property like transition-behavior just to transition otherwise “un-transitionable” properties, but here we are, and I’m glad we have it.

But we also got to learn about @starting-style and how it provides browsers with a set of styles that we can apply to the start of a transition for an element that’s in the top layer. Otherwise, the element has nothing to transition from at first render, and we’d have no way to transition them smoothly in and out of the top layer.

Categories: Others Tags:

Svelte 5 And The Future Of Frameworks: A Chat With Rich Harris

January 28th, 2025 No comments

Svelte occupies a curious space within the web development world. It’s been around in one form or another for eight years now, and despite being used by the likes of Apple, Spotify, IKEA, and the New York Times, it still feels like something of an upstart, maybe even a black sheep. As creator Rich Harris recently put it,

“If React is Taylor Swift, we’re more of a Phoebe Bridges. She’s critically acclaimed, and you’ve heard of her, but you probably can’t name that many of her songs.”

— Rich Harris

This may be why the release of Svelte 5 in October this year felt like such a big deal. It tries to square the circle of convention and innovation. Can it remain one of the best-loved frameworks on the web while shaking off suspicions that it can’t quite rub shoulders with React, Vue, and others when it comes to scalability? Whisper it, but they might just have pulled it off. The post-launch reaction has been largely glowing, with weekly npm downloads doubling compared to six months ago.

Still, I’m not in the predictions game. The coming months and years will be the ultimate measure of Svelte 5. And why speculate on the most pressing questions when I can just ask Rich Harris myself? He kindly took some time to chat with me about Svelte and the future of web development.

Not Magic, But Magical

Svelte 5 is a ground-up rewrite. I don’t want to get into the weeds here — key changes are covered nicely in the migration guide — but suffice it to say the big one where day-to-day users are concerned is runes. At times, magic feeling $ has given way to the more explicit $state, $derived, and $effect.

A lot of the talk around Svelte 5 included the sentiment that it marks the ‘maturation’ of the framework. To Harris and the Svelte team, it feels like a culmination, with lessons learned combined with aspirations to form something fresh yet familiar.

“This does sort of feel like a new chapter. I’m trying to build something that you don’t feel like you need to get a degree in it before you can be productive in it. And that seems to have been carried through with Svelte 5.”

— Rich Harris

Although raw usage numbers aren’t everything, seeing the uptick in installations has been a welcome signal for Harris and the Svelte team.

“For us, success is definitely not based around adoption, though seeing the number go up and to the right gives us reassurance that we’re doing the right thing and we’re on the right track. Even if it’s not the goal, it is a useful indication. But success is really people building their apps with this framework and building higher quality, more resilient, more accessible apps.”

— Rich Harris

The tenets of a Svelte philosophy outlined by Harris earlier this year reinforce the point:

The web matters.
Optimise for vibes.
Don’t optimise for adoption.
HTML, The Mother Language.
Embrace progress.
Numbers lie.
Magical, not magic.
Dream big.
No one cares.
Design by consensus.

Click the link above to hear these expounded upon, but you get the crux. Svelte is very much a qualitative project. Although Svelte performs well in a fair few performance metrics itself, Harris has long been a critic of metrics like Lighthouse being treated as ends in themselves. Fastest doesn’t necessarily mean best. At the end of the day, we are all in the business of making quality websites.

Frameworks are a means to that end, and Harris sees plenty of work to be done there.

Software Is Broken

Every milestone is a cause for celebration. It’s also a natural pause in which to ask, “Now what?” For the Svelte team, the sights seem firmly set on shoring up the quality of the web.

“A conclusion that we reached over the course of a recent discussion is that most software in the world is kind of terrible. Things are not good. Half the stuff on my phone just doesn’t work. It fails at basic tasks. And the same is true for a lot of websites. The number of times I’ve had to open DevTools to remove the disabled attribute from a button so that I can submit a form, or been unclear on whether a payment went through or not.”

— Rich Harris

This certainly meshes with my experience and, doubtless, countless others. Between enshittification, manipulative algorithms, and the seemingly endless influx of AI-generated slop, it’s hard to shake the feeling that the web is becoming increasingly decadent and depraved.

“So many pieces of software that we use are just terrible. They’re just bad software. And it’s not because software engineers are idiots. Our main priority as toolmakers should be to enable people to build software that isn’t broken. As a baseline, people should be able to build software that works.”

— Rich Harris

This sense of responsibility for the creation and maintenance of good software speaks to the Svelte team’s holistic outlook and also looks to influence priorities going forward.

Brave New World

Part of Svelte 5 feels like a new chapter in the sense of fresh foundations. Anyone who’s worked in software development or web design will tell you how much of a headache ground-up rewrites are. Rebuilding the foundations is something to celebrate when you pull it off, but it also begs the question: What are the foundations for?

Harris has his eyes on the wider ecosystem around frameworks.

“I don’t think there’s a lot more to do to solve the problem of taking some changing application state and turning it into DOM, but I think there’s a huge amount to be done around the ancillary problems. How do we load the data that we put in those components? Where does that data live? How do we deploy our applications?”

— Rich Harris

In the short to medium term, this will likely translate into some love for SvelteKit, the web application framework built around Svelte. The framework might start having opinions about authentication and databases, an official component library perhaps, and dev tools in the spirit of the Astro dev toolbar. And all these could be precursors to even bigger explorations.

“I want there to be a Rails or a Laravel for JavaScript. In fact, I want there to be multiple such things. And I think that at least part of Svelte’s long-term goal is to be part of that. There are too many things that you need to learn in order to build a full stack application today using JavaScript.”

— Rich Harris

Why Don’t We Have A Laravel For JavaScript? by Theo Browne
“Why We Don’t Have a Laravel For JavaScript… Yet” by Vince Canger

Onward

Although Svelte has been ticking along happily for years, the release of version 5 has felt like a new lease of life for the ecosystem around it. Every day brings new and exciting projects to the front page of the /r/sveltejs subreddit, while this year’s Advent of Svelte has kept up a sense of momentum following the stable release.

Below are just a handful of the Svelte-based projects that have caught my eye:

Despite the turbulence and inescapable sense of existential dread surrounding much tech, this feels like an exciting time for web development. The conditions are ripe for lovely new things to emerge.

And as for Svelte 5 itself, what does Rich Harris say to those who might be on the fence?

“I would say you have nothing to lose but an afternoon if you try it. We have a tutorial that will take you from knowing nothing about Svelte or even existing frameworks. You can go from that to being able to build applications using Svelte in three or four hours. If you just want to learn Svelte basics, then that’s an hour. Try it.”

— Rich Harris

Top Five Survey Software in 2025

January 28th, 2025 No comments

Whether you are doing large-scale market research or just a simple registration form, you will need surveys to gather all-important information and feedback. These days, there are plenty of tools available that can help you efficiently collect all this data, making the process much easier. How to choose the right one is the question that we will answer today.

A great survey tool should be easy to use, mobile-friendly, secure, and offer real-time analytics, and integration with other tools. Let’s see how many of the most popular survey tools match these expectations:

Jotform

Considered the leading no-code form builder in the market, Jotform is a comprehensive and user-friendly survey software that has been empowering individuals and organizations for almost two decades. Jotform makes creating forms and surveys simple, no matter your level of expertise. With its drag-and-drop interface, you can build custom surveys in minutes – no coding required. And if you’re in need of inspiration, Jotform offers over 10,000 customizable templates for various industries, from customer service, healthcare, and education to small businesses.

What sets Jotform apart; however, is its adaptability and focus on innovation. The AI survey generator helps you create tailored surveys with just a few clicks, saving time and effort. And if you’re working on the go, the Jotform mobile app lets you collect data offline, making it perfect for fieldwork or remote environments. Plus, with top-tier security features like PCI DSS, GDPR, and HIPAA compliance, you can trust that your data – and your users’ – is in safe hands. In fact, Jotform is certified at Provider Level I, indicating they have achieved the highest security standards under PCI regulations. It is safe to say that Jotform is built to simplify your workflow and help you achieve more.

Pros:

Feature-rich drag-and-drop builder with a rich template library and widget options.
High level security and compliance for sensitive data.
Offline data collection using mobile-friendly forms with kiosk mode.
Seamless integrations with tools like Slack, Google Drive, and CRMs like Salesforce and Hubspot, and multiple payment gateways including PayPal, Stripe, and Square.

Process payments automatically

Details

Google Drive lets you store important files and access them anywhere — whether at home or on the go! Use this free integration to automatically send form responses and file uploads directly to your Google Drive folder, with no manual data entry necessary.

Learn More
Integrate with Google Drive

Logic-based workflows for smooth data collection, approval processes, and team collaboration.
Advanced data management with Jotform Tables, real-time analytics and export options for Excel or CSV.
Surveys in multiple languages and multilingual support.
Supports features like e-signatures, payments, and conditional logic.

Cons:

Free plan includes branding, which may not suit all users.
Advanced features like HIPAA compliance are only available on higher-tier plans.

FormAssembly

FormAssembly is another data collection platform, recognized for its Salesforce integration and security features. It mainly serves industries like higher education, healthcare, and finance. The platform offers dynamic forms with conditional logic, making it easy for users to create intuitive forms. It also has advanced workflows that automate data processing, which helps reduce manual work and improve efficiency. FormAssembly complies with standards like GDPR, HIPAA, and PCI DSS. On top of that, it provides built-in analytics and reporting tools, so users can track how their forms are performing and adjust their strategies for better results.

Pros

Focus on security and compliance.
Integration with Salesforce enhances operational efficiency.
Dynamic forms and conditional logic improve user experience and data quality.
Comprehensive analytics help optimize data collection and boost conversions.

Cons

Pricing may be prohibitive for small businesses or organizations with simpler needs.
Slightly steeper learning curve for people who are new to form-building.
Limited features for those seeking simple form-building or survey-making capabilities.

Typeform

Typeform is a survey and form-building platform known for its one-question-at-a-time format. It offers customizable templates with an emphasis on aesthetics. The platform focuses on simplicity and user-friendliness, providing a straightforward experience for both creators and respondents. Typeform is ideal for businesses, marketers, and educators looking to capture information in a more human-centric way. Their advanced logic branching feature allows users to create personalized question paths based on respondents’ previous answers. This tool also integrates with platforms like Slack, Hubspot, and Mailchimp. On top of that, Typeform includes AI-powered survey creation, so users are able to generate forms quickly.

Pros:

User-friendly design boosts response rates.
Customization options for branding and media-rich surveys.
AI-powered tools save time during survey creation.
Integrates with popular apps for workflow automation.
Ideal for design-focused businesses seeking polished forms.

Cons:

Limited advanced features for managing complex survey workflows.
Pricing scales quickly with increased response limits.
Free plan offers limited responses and features.

AskNicely

AskNicely is a customer experience management platform helping businesses collect and act on real-time feedback. It is built around the Net Promoter Score (NPS) framework and specializes in using simple, automated surveys to evaluate customer loyalty and satisfaction. The platform helps businesses spot trends, address issues, and enhance the overall customer experience. It does this by collecting feedback right after customer interactions, whether through email, SMS, or the web. AskNicely integrates with tools like Mailchimp, Microsoft Teams, and HubSpot. This connectivity ensures that feedback data is centralized and actionable. Additionally, teams resolve issues efficiently with the automated follow-up workflow feature of AskNicely.

Pros

Measuring and improving customer loyalty through NPS.
Automates feedback collection and follow-up actions, saving time and effort.
Integrates with popular CRM and workflow tools.
Simple, user-friendly interface with actionable insights.

Cons

Primarily focused on NPS.
Integration processes may require additional effort.
Lack of control over individual responses

Formstack

Another platform we’d like to mention is Formstack. With this tool, users can create custom forms and automate workflows. This tool also has a drag-and-drop interface similar to the rest of the tools on this list, and it helps users to quickly build forms, surveys, and workflows. With over 350 templates available on its website and integrations with popular tools such as Salesforce, HubSpot, and Google Workspace, Formstack simplifies data collection and task automation. Its workflow automation further helps users save time by streamlining tasks like approvals, document creation, and email notifications.

Pros

Workflow automation simplifies complex processes.
Integrations with popular CRM and productivity tools.
A template library tailored to various business needs.
User-friendly interface with customization options.

Cons

Pricing may be prohibitive for small businesses or individual users.
Some integrations or workflows may require additional setup effort.

Conclusion

Well, there you have it! These five survey tools each bring something unique to the table. The right choice ultimately depends on your specific needs, like budget, features, and the kind of data you want to collect. So, take a closer look at what matters most to you and pick the tool that fits your workflow best.

The post Top Five Survey Software in 2025 appeared first on noupe.

Categories: Others Tags:

What Are The Marketing Strategies To Generate Leads

January 28th, 2025 No comments

Every business wants to convert a curious browsing audience into loyal customers. This is why 6 out of 10 marketers adopt lead generation as their prime method, according to Hubspot.

In this article, we’ll walk through practical marketing strategies—both digital and offline—designed to connect you with your audience and drive growth.

From tried-and-true methods like email marketing to creative ideas like hosting webinars, this guide is packed with actionable insights to boost your lead generation efforts.

we will touch upon how these strategies play a pivotal role in B2B marketing, ensuring businesses can capture and nurture high-quality leads effectively.

What is Lead Generation

Lead generation is the process of identifying and attracting people who are likely to be interested in your product or service. These potential customers, known as leads, provide their contact information in exchange for valuable content or services, such as a free guide, consultation, or demo.

The goal is to nurture these leads until they are ready to make a purchase.

Why does lead generation strategy matter

Without a clear strategy, businesses risk wasting time and resources on ineffective tactics. A well-defined lead generation plan helps you focus on the right audience, choose effective channels, and measure results. It ensures you have a steady flow of potential customers, which is essential for growth and revenue.

Marketing Strategies To Generate Leads

There are countless ways to generate leads, but they generally fall into two categories: online and offline strategies. Each approach has its own benefits, depending on your target audience and business goals. Below, we’ll cover the most effective digital and offline methods.

5 Digital Marketing Strategies That Work

With the rise of the internet, digital marketing has become the backbone of lead generation. Some of its options include SEO, PPC advertising, content marketing, social media marketing, and email marketing.

Digital marketing offers you many opportunities to connect with your target audience. Let’s dive in deep.

1. Search engine optimization (SEO)

SEO is a long-term strategy that helps your website rank higher on search engines like Google. By optimizing your website with relevant keywords, quality content, and proper technical setup, you can attract organic traffic. The more visible your site is, the more leads you can generate.

2. Pay-per-click (PPC) advertising

PPC advertising involves placing ads on search engines or social media platforms and paying for each click. This method allows you to target specific demographics and keywords, ensuring your ads reach the right audience. Google Ads and Facebook Ads are popular platforms for PPC campaigns. In B2B marketing, LinkedIn Ads offer tailored solutions for reaching professionals and decision-makers.

3. Content Marketing

Content marketing focuses on creating valuable and informative content to attract and engage your target audience. Blog posts, videos, infographics, and eBooks are examples of content that can drive traffic and encourage lead conversions. Sharing helpful content builds trust and positions your business as an authority in your industry.

4. Social Media Marketing

Social media platforms like LinkedIn, Facebook, Instagram, and Twitter offer excellent opportunities to connect with potential leads. By sharing engaging posts, running targeted ads, and participating in conversations, you can attract and nurture leads.

5. Email Marketing

Email marketing remains one of the most effective ways to generate leads. Sending personalized emails with valuable content, special offers, or updates helps you stay connected with your audience. Building a strong email list is key to the success of this strategy.

4 Offline Strategies For You

1. Direct Mail Marketing

Sending postcards, flyers, or catalogs directly to potential customers is a tried-and-true method. While often overlooked in today’s digital age, direct mail can be highly effective when targeting a specific audience.

2. Referral Programs and Loyalty Awards

Encouraging your current customers to refer others is a cost-effective way to generate leads. Offering incentives like discounts or rewards motivates customers to spread the word about your business.

3. Partnerships and Collaborations

Partnering with complementary businesses can expand your reach and attract new leads. For example, a gym might collaborate with a nutritionist to offer joint promotions.

4. Webinars and Workshops

Hosting events like webinars or in-person workshops allows you to share your expertise and connect with potential leads. These events also provide an opportunity to collect contact information for future follow-ups. Webinars, in particular, are a popular choice in B2B marketing to demonstrate thought leadership and engage with professionals.

4L Marketing Strategy

1. Lead Captures

Lead captures involve collecting contact information from potential customers through forms, pop-ups, or signup pages. Offering something valuable, like a free resource, encourages people to provide their details.

2. Lead Magnets

A lead magnet is a free offer designed to attract leads. Examples include eBooks, checklists, free trials, or exclusive discounts. Make sure your lead magnet solves a specific problem or provides value.

3. Landing Pages

A landing page is a standalone web page designed to capture leads. It should have a clear call-to-action (CTA), an engaging headline, and a form for visitors to fill out. Simplifying the process makes it easier for people to sign up.

4. Lead Scoring

Lead scoring helps prioritize your leads by assigning a value based on their level of interest and engagement. This allows your sales team to focus on the most promising leads first.

Bonus: Lead Generation Ideas Checklist for Marketing Strategies

Sometimes you can feel overwhelmed when making funnels. You lose and forget some of the steps making your lead generation ineffective. That’s why we brought you a checklist as a bonus!

Offer gated content like eBooks or whitepapers in exchange for contact information.
Host webinars or virtual events to engage your audience and capture leads.
Build targeted email campaigns to nurture prospects with relevant content.
Use social media ads on platforms like LinkedIn and Facebook to collect leads.
Create interactive quizzes or surveys to engage users and qualify leads.
Develop a referral program to encourage word-of-mouth recommendations.
Optimize your website with lead forms, strong CTAs, and exit-intent pop-ups.
Invest in SEO and content marketing to attract organic traffic.
Provide free trials or demos to showcase your product or service.
Run contests or giveaways to capture contact information from participants.
Partner with influencers or industry leaders for guest blogging or podcasts.
Use LinkedIn for direct outreach to decision-makers and prospects.
Run Google Ads targeting high-intent keywords to generate leads.
Implement retargeting ads to engage visitors who didn’t convert initially.
Collaborate with influencers to promote your offerings.

For businesses looking to simplify their approach, partnering with professional lead generation services B2B can streamline these processes and improve results.

Conclusion

From search engine optimization to in-person workshops, the path to effective lead generation is rich with opportunities. Each strategy highlighted here offers a unique way to connect with potential customers. Whether you focus on digital channels like PPC ads or offline efforts such as direct mail, the key is to remain consistent and adaptable. By blending creativity with data-driven decision-making, you can create a lead generation plan that keeps your sales pipeline full and your business thriving.

Featured image by Mark Fletcher-Brown on Unsplash

The post What Are The Marketing Strategies To Generate Leads appeared first on noupe.

Categories: Others Tags:

Revisiting CSS Multi-Column Layout

January 27th, 2025 admin No comments

Honestly, it’s difficult for me to come to terms with, but almost 20 years have passed since I wrote my first book, Transcending CSS. In it, I explained how and why to use what was the then-emerging Multi-Column Layout module.

Hint: I published an updated version, Transcending CSS Revisited, which is free to read online.

Perhaps because, before the web, I’d worked in print, I was over-excited at the prospect of dividing content into columns without needing extra markup purely there for presentation. I’ve used Multi-Column Layout regularly ever since. Yet, CSS Columns remains one of the most underused CSS layout tools. I wonder why that is?

Holes in the specification

For a long time, there were, and still are, plenty of holes in Multi-Column Layout. As Rachel Andrew — now a specification editor — noted in her article five years ago:

“The column boxes created when you use one of the column properties can’t be targeted. You can’t address them with JavaScript, nor can you style an individual box to give it a background colour or adjust the padding and margins. All of the column boxes will be the same size. The only thing you can do is add a rule between columns.”

She’s right. And that’s still true. You can’t style columns, for example, by alternating background colours using some sort of :nth-column() pseudo-class selector. You can add a column-rule between columns using border-style values like dashed, dotted, and solid, and who can forget those evergreen groove and ridge styles? But you can’t apply border-image values to a column-rule, which seems odd as they were introduced at roughly the same time. The Multi-Column Layout is imperfect, and there’s plenty I wish it could do in the future, but that doesn’t explain why most people ignore what it can do today.

Patchy browser implementation for a long time

Legacy browsers simply ignored the column properties they couldn’t process. But, when Multi-Column Layout was first launched, most designers and developers had yet to accept that websites needn’t look the same in every browser.

Early on, support for Multi-Column Layout was patchy. However, browsers caught up over time, and although there are still discrepancies — especially in controlling content breaks — Multi-Column Layout has now been implemented widely. Yet, for some reason, many designers and developers I speak to feel that CSS Columns remain broken. Yes, there’s plenty that browser makers should do to improve their implementations, but that shouldn’t prevent people from using the solid parts today.

Readability and usability with scrolling

Maybe the main reason designers and developers haven’t embraced Multi-Column Layout as they have CSS Grid and Flexbox isn’t in the specification or its implementation but in its usability. Rachel pointed this out in her article:

“One reason we don’t see multicol used much on the web is that it would be very easy to end up with a reading experience which made the reader scroll in the block dimension. That would mean scrolling up and down vertically for those of us using English or another vertical writing mode. This is not a good reading experience!”

That’s true. No one would enjoy repeatedly scrolling up and down to read a long passage of content set in columns. She went on:

“Neither of these things is ideal, and using multicol on the web is something we need to think about very carefully in terms of the amount of content we might be aiming to flow into our columns.”

But, let’s face it, thinking very carefully is what designers and developers should always be doing.

Sure, if you’re dumb enough to dump a large amount of content into columns without thinking about its design, you’ll end up serving readers a poor experience. But why would you do that when headlines, images, and quotes can span columns and reset the column flow, instantly improving readability? Add to that container queries and newer unit values for text sizing, and there really isn’t a reason to avoid using Multi-Column Layout any longer.

A brief refresher on properties and values

Let’s run through a refresher. There are two ways to flow content into multiple columns; first, by defining the number of columns you need using the column-count property:

CodePen Embed Fallback

Second, and often best, is specifying the column width, leaving a browser to decide how many columns will fit along the inline axis. For example, I’m using column-width to specify that my columns are over 18rem. A browser creates as many 18rem columns as possible to fit and then shares any remaining space between them.

CodePen Embed Fallback

Then, there is the gutter (or column-gap) between columns, which you can specify using any length unit. I prefer using rem units to maintain the gutters’ relationship to the text size, but if your gutters need to be 1em, you can leave this out, as that’s a browser’s default gap.

CodePen Embed Fallback

The final column property is that divider (or column-rule) to the gutters, which adds visual separation between columns. Again, you can set a thickness and use border-style values like dashed, dotted, and solid.

CodePen Embed Fallback

These examples will be seen whenever you encounter a Multi-Column Layout tutorial, including CSS-Tricks’ own Almanac. The Multi-Column Layout syntax is one of the simplest in the suite of CSS layout tools, which is another reason why there are few reasons not to use it.

Multi-Column Layout is even more relevant today

When I wrote Transcending CSS and first explained the emerging Multi-Column Layout, there were no rem or viewport units, no :has() or other advanced selectors, no container queries, and no routine use of media queries because responsive design hadn’t been invented.

We didn’t have calc() or clamp() for adjusting text sizes, and there was no CSS Grid or Flexible Box Layout for precise control over a layout. Now we do, and all these properties help to make Multi-Column Layout even more relevant today.

Now, you can use rem or viewport units combined with calc() and clamp() to adapt the text size inside CSS Columns. You can use :has() to specify when columns are created, depending on the type of content they contain. Or you might use container queries to implement several columns only when a container is large enough to display them. Of course, you can also combine a Multi-Column Layout with CSS Grid or Flexible Box Layout for even more imaginative layout designs.

Using Multi-Column Layout today

Patty Meltt is an up-and-coming country music sensation. She’s not real, but the challenges of designing and developing websites like hers are.

My challenge was to implement a flexible article layout without media queries which adapts not only to screen size but also whether or not a

A two-column layout of text topped with a large heading that spans both columns. — Article with no
element. What would potentially be too-long lines of text are set in columns to improve readability by narrowing the measure.

To column layout with text on the left and a large image on the right. — Article with no
element. What would potentially be too-long lines of text are set in columns to improve readability by narrowing the measure.

Categories: Designing, Others Tags:

The Browser Back Button: Hero, Villain, or Outdated Relic?

January 27th, 2025 admin No comments

The browser back button, once a vital tool for navigating the internet, is now a source of love-hate relationships among users, developers, and designers. While it provides a safety net for users, its unpredictability often disrupts modern web experiences.

Categories: Designing, Others Tags:

Positioning Text Around Elements With CSS Offset

January 24th, 2025 admin No comments

When it comes to positioning elements on a page, including text, there are many ways to go about it in CSS — the literal position property with corresponding inset-* properties, translate, margin, anchor() (limited browser support at the moment), and so forth. The offset property is another one that belongs in that list.

The offset property is typically used for animating an element along a predetermined path. For instance, the square in the following example traverses a circular path:

<div class="circle">
  <div class="square"></div>
</div>

@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.square {
  offset: top 50% right 50% circle(50%) var(--p);
  transition: --p 1s linear;

  /* Equivalent to:
    offset-position: top 50% right 50%;
    offset-path: circle(50%);
    offset-distance: var(--p); */

  /* etc. */
}

.circle:hover .square{ --p: 100%; }

CodePen Embed Fallback

A registered CSS custom property (--p) is used to set and animate the offset distance of the square element. The animation is possible because an element can be positioned at any point in a given path using offset. and maybe you didn’t know this, but offset is a shorthand property comprised of the following constituent properties:

offset-position: The path’s starting point
offset-path: The shape along which the element can be moved
offset-distance: A distance along the path on which the element is moved
offset-rotate: The rotation angle of an element relative to its anchor point and offset path
offset-anchor: A position within the element that’s aligned to the path

The offset-path property is the one that’s important to what we’re trying to achieve. It accepts a shape value — including SVG shapes or CSS shape functions — as well as reference boxes of the containing element to create the path.

Reference boxes? Those are an element’s dimensions according to the CSS Box Model, including content-box, padding-box, border-box, as well as SVG contexts, such as the view-box, fill-box, and stroke-box. These simplify how we position elements along the edges of their containing elements. Here’s an example: all the small squares below are placed in the default top-left corner of their containing elements’ content-box. In contrast, the small circles are positioned along the top-right corner (25% into their containing elements’ square perimeter) of the content-box, border-box, and padding-box, respectively.

<div class="big">
  <div class="small circle"></div>
  <div class="small square"></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div class="big">
  <div class="small circle"></div>
  <div class="small square"></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div class="big">
  <div class="small circle"></div>
  <div class="small square"></div>
  <p>She sells sea shells by the seashore</p>
</div>

.small {
  /* etc. */
  position: absolute;

  &.square {
    offset: content-box;
    border-radius: 4px;
  }

  &.circle { border-radius: 50%; }
}

.big {
  /* etc. */
  contain: layout; /* (or position: relative) */

  &:nth-of-type(1) {
    .circle { offset: content-box 25%; }
  }

  &:nth-of-type(2) {
    border: 20px solid rgb(170 232 251);
    .circle { offset: border-box 25%; }
  }

  &:nth-of-type(3) {
    padding: 20px;
    .circle { offset: padding-box 25%; }
  }
}

CodePen Embed Fallback

Note: You can separate the element’s offset-positioned layout context if you don’t want to allocated space for it inside its containing parent element. That’s how I’ve approached it in the example above so that the paragraph text inside can sit flush against the edges. As a result, the offset positioned elements (small squares and circles) are given their own contexts using position: absolute, which removes them from the normal document flow.

This method, positioning relative to reference boxes, makes it easy to place elements like notification dots and ornamental ribbon tips along the periphery of some UI module. It further simplifies the placement of texts along a containing block’s edges, as offset can also rotate elements along the path, thanks to offset-rotate. A simple example shows the date of an article placed at a block’s right edge:

<article>
  <h1>The Irreplaceable Value of Human Decision-Making in the Age of AI</h1>
  <!-- paragraphs -->
  <div class="date">Published on 11<sup>th</sup> Dec</div>
  <cite>An excerpt from the HBR article</cite>
</article>

article {
  container-type: inline-size;
  /* etc. */
}

.date {
  offset: padding-box 100cqw 90deg / left 0 bottom -10px;
  
  /*
    Equivalent to:
    offset-path: padding-box;
    offset-distance: 100cqw; (100% of the container element's width)
    offset-rotate: 90deg;
    offset-anchor: left 0 bottom -10px;
  */
}

CodePen Embed Fallback

As we just saw, using the offset property with a reference box path and container units is even more efficient — you can easily set the offset distance based on the containing element’s width or height. I’ll include a reference for learning more about container queries and container query units in the “Further Reading” section at the end of this article.

There’s also the offset-anchor property that’s used in that last example. It provides the anchor for the element’s displacement and rotation — for instance, the 90 degree rotation in the example happens from the element’s bottom-left corner. The offset-anchor property can also be used to move the element either inward or outward from the reference box by adjusting inset-* values — for instance, the bottom -10px arguments pull the element’s bottom edge outwards from its containing element’s padding-box. This enhances the precision of placements, also demonstrated below.

<figure>
  <div class="big">4</div>
  <div class="small">number four</div>
</figure>

.small {
  width: max-content;
  offset: content-box 90% -54deg / center -3rem;

  /*
    Equivalent to:
    offset-path: content-box;
    offset-distance: 90%;
    offset-rotate: -54deg;
    offset-anchor: center -3rem;
  */

  font-size: 1.5rem;
  color: navy;
}

CodePen Embed Fallback

As shown at the beginning of the article, offset positioning is animateable, which allows for dynamic design effects, like this:

<article>
  <figure>
    <div class="small one">17<sup>th</sup> Jan. 2025</div>
    <span class="big">Seminar<br>on<br>Literature</span>
    <div class="small two">Tickets Available</div>
  </figure>
</article>

@property --d {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.small {
  /* other style rules */
  offset: content-box var(--d) 0deg / left center;

  /*
    Equivalent to:
    offset-path: content-box;
    offset-distance: var(--d);
    offset-rotate: 0deg;
    offset-anchor: left center;
  */

  transition: --d .2s linear;

  &.one { --d: 2%; }
  &.two { --d: 70%; }
}

article:hover figure {
  .one { --d: 15%;  }
  .two { --d: 80%;  }
}

CodePen Embed Fallback

Wrapping up

Whether for graphic designs like text along borders, textual annotations, or even dynamic texts like error messaging, CSS offset is an easy-to-use option to achieve all of that. We can position the elements along the reference boxes of their containing parent elements, rotate them, and even add animation if needed.

Archive

10 Best Web Development Trends Your Business Must Adopt

AI Integration into Web Development

Programming Languages Evolution

Headless CMS Adoption

Heightened Regulatory Scrutiny

DevSecOps Integration into Cybersecurity

Decentralized Web Technologies

7. Progressive Web Apps (PWAs)

8. Single Page Applications (SPAs)

9. API-First Development

10. Motion UI

The Rundown

Wholesale vs. Traditional Real Estate Investing

The Role of a Supplier in Wholesale and Traditional Real Estate Investing

How Suppliers Can Provide Top-Notch Services for Real Estate Wholesalers and Investors

What Citizenship by Investment Programs Offer to Suppliers

What Does transition-behavior: allow-discrete Do?

What Does @starting-style Do?

A Note On Browser Support

When To Use transition-behavior: allow-discrete

What Is That Top Layer?

Transitioning The Dialog Element In The Top Layer

Further Reading On SmashingMag

Jotform

FormAssembly

Typeform

AskNicely

Formstack

What is Lead Generation

Why does lead generation strategy matter

Marketing Strategies To Generate Leads

5 Digital Marketing Strategies That Work

1. Search engine optimization (SEO)

2. Pay-per-click (PPC) advertising

3. Content Marketing

4. Social Media Marketing

5. Email Marketing

4 Offline Strategies For You

1. Direct Mail Marketing

2. Referral Programs and Loyalty Awards

3. Partnerships and Collaborations

4. Webinars and Workshops

4L Marketing Strategy

1. Lead Captures

2. Lead Magnets

3. Landing Pages

4. Lead Scoring

Bonus: Lead Generation Ideas Checklist for Marketing Strategies

Conclusion

Holes in the specification

Patchy browser implementation for a long time

Readability and usability with scrolling

A brief refresher on properties and values

Multi-Column Layout is even more relevant today

Using Multi-Column Layout today

Modern CSS is solving many prior problems

You should take a fresh look at Multi-Column Layout

Wrapping up

Further reading

Categories

Blogroll

Archives

Meta

What Does `transition-behavior: allow-discrete` Do?

What Does `@starting-style` Do?

When To Use `transition-behavior: allow-discrete`