Posted on

Going Headless: Use Cases And What It’s Good For

Looking back at the years of developing for the web, I’ve used dozens of different CMS tools both off the shelf and homebrewed. I’ve been deploying and building plenty of WordPress sites and plugins, as well as extensions for full-service CMS sites in .NET. But for me, everything changed when I first heard of headless, and now, years later, I couldn’t be feeling more comfortable in the headless ecosystem.

This enthusiasm doesn’t come out of nowhere. While it might seem daunting to make sense of all the headless options, I’ve been refining my own strategy for different headless options in different environments, and made myself closely familiar with usual suspects in the headless space. Moving to headless helped me avoid running into roadblocks caused by limitations of larger all-in-one systems.

Compartmentalizing functionality so you can meet complex goals today and prepare your app to easily evolve in the future brings me peace of mind. It has been a pleasure contributing to successful deployments and iterations on web services built on headless solutions for private companies and the California state government.

In this article, I’d love to share some of the useful pointers and guidelines that I’ve learned throughout these years, with the hope that they will help you make sense of the headless world, and find the right candidates for your projects. But before we dive in, we need to go back in time a little bit to understand what headless brings to the table.

Before Headless

Just a few years ago, our workflows seemed to be focusing on a range of tools, stacks and technologies. For CMS, we were mostly using all-in-one-tools. They included both the content authoring and content viewing functions.

Users of these tools were stuck with the front end that came with the backend. Your ability to customize things was limited. You could install plugins but they all had to be built for your tool. You could write custom code — but only in the language that your tool is built on and within its constraints.

It all changed over the last few years with headless CMS gaining traction all over the industry.

A Renaissance Of Specialized Tools

Today, we have a flowering of tools that specialize in either authoring or content presentation views. A headless CMS focuses on the content authoring piece and provides a way to connect a separate content presentation tool. The lack of a user-facing frontend is what makes it headless and gives it the flexibility to work with any tool via its API.

Being able to engineer your own frontend from scratch is freeing for many development teams. You may have a crack team of engineers fluent in delivering slick single-page apps in Vue.js or fast rendering, bulletproof static generated sites with 11ty. All of the latest web development frameworks are designed to work easily with structured data that can be provided from any headless CMS.

A headless CMS is a focused tool. It has less responsibility than an all-in-one solution. The API endpoints provided by a headless CMS provide a clean separation between systems so you can swap out front or backend architectures independently as things evolve. Your product grows, the ecosystem of tools expands, new approaches become available. Your backend and frontend requirements are going to change. If you have a headless setup you will be able to adapt more easily because your front and backend are already cleanly separated by an API and you can upgrade them independently.

Is Headless Right For Me?

Most notably, headless gives you the flexibility you may need to meet challenging requirements. It might be difficult to meet your goals if you have to heavily modify an all-in-one product. Combining a headless tool with a smaller, different or homebrewed frontend might be the easiest way to deliver your desired designs and user flows.

  • If you want to fine-tune every step of the product checkout flow, you can use a headless commerce option to achieve that,
  • If you want to heavily optimizex for Time to First Byte, you might want to use a static site generator that rebuilds content on change based on a headless CMS API,
  • If you host your own tools and are cautious about security, you may want to lock down your authoring environment behind the firewall and consume it headlessly from a simpler Jamstack-based frontend,
  • If you are serving the same content to a variety of clients, such as web, native apps or third-party widgets, you can build them in a way that they all would communicate through the same CMS headlessly.

If you can meet your project’s requirements flawlessly with an all-in-one tool, then headless options are probably a bit of an overkill for you. In the same way, if your team is perfectly happy and well-versed with your current all-in-one-solution, you don’t really need to worry about splitting front and backend tooling. However, if instead, you are running into the limitations of your tools, then going headless will allow you to address your pain points directly.

Example: Headless eCommerce

Let’s look at a specific headless choice: You can integrate an existing eCommerce platform, such as Shopify, as a complete flow that takes over the entire checkout process, or you could use a headless option that Shopify provides as well.

  • In the former case, your design will heavily rely on Shopify’s templates and out-of-the-box functionality, so adjusting the checkout flow will be possible, but quite limited.
  • In the latter case, you can design your checkout flow in any way you like, and you are going to rely on Shopify to merely perform the financial transaction.

The significant difference is that the headless option is going to require you to build every single view your user sees. Yet again, if that sounds like a hassle with no upside, then you probably don’t need a headless solution.

A team in need of the headless version will welcome the freedom this provides. Your design will have no constraints, and you will be able to control every pixel of every view. You will be in total control of all the code executing on your user’s devices, so you can track, optimize and speed up literally every single interaction.

At the same time, you are still leaving the processing of transactions up to your headless eCommerce solution, so you’re getting the benefits of their backend system.

The bottom line is: if you are struggling with the bottlenecks within your current eCommerce solution — be it heavy front-end, complex UI or just inaccessible design — then a headless option will make it easier for your team to resolve these issues. Similarly, if it sounds like it will make it easier for your team to increase your conversion funnel by making the deployment of new features faster and smoother, then it’s a good idea to consider the headless option as well.

Avoding Lock-In With A Single Platform

Looking at the state of front-end today, decoupling your authoring and content delivery vehicles is the safest way to architect things in a world where options for front and backend tools are constantly expanding. It’s not uncommon that the authoring and reading environments have different sets of requirements, so being able to choose tools that address these separately gives you better options for both sides.

Jamstack-based setups are enabled by APIs so they are often tied to a headless CMS. Making a headless choice doesn’t require a Jamstack front-end though. Of course, you could still run some server-side code if you wanted.

For example, I’ve helped build a few sites running Node.js and Express consuming back-end APIs like Wordnik.com and this popular pattern works smoothly. Having access to your data via APIs makes it possible to ditch your server-side code in production, so you can easily embrace client-side approaches like Jamstack if that makes sense in your project.

The issue with “all-in-one”-solutions is that each of them has a lot of commitments baked into it. For example, you have to be committed to supporting a database and programming environment or choosing from SaaS vendors that do; also, your design changes will have to occur within the available themes and plugins.

With headless, we break out from being locked into a single platform. So if you need to use a new front-end framework for your website, or you want to remove expensive production infrastructure and use static site generators, or perhaps want to switch your CMS without rebuilding all your front-end from scratch — compared to alternatives, you can achieve all of it with far less friction when you are using a headless option.

Let’s take a look at a simple example. Imagine that your organization comes up with a new initiative and new design, and flows are created from scratch to serve new user needs. Suddenly a new technology stack needs to be assembled to fulfill these requirements.

Choosing a headless option will give your products a better shot at longevity, and make it much easier to let your content move into multiple delivery channels smoothly.

In such cases, you’ll need to search for a perfect off-the-shelf solution that perfectly matches your needs, or compromise some of the design and user flow requirements so that it works well enough. But if your design or performance requirements are strict, it may be easier to meet these goals by going headless.

The bottom line is that there are plenty of use cases when choosing a headless option that will give your products a better shot at longevity, as well as make it much easier to let your content move into multiple delivery channels smoothly. Being able to consume your content as structured data lets it thrive on your own website, in your native apps, and be syndicated to external sources.

Not Everything Has To Be Headless

It might sound that headless is always a better option, but it isn’t. If in your current project you aren’t too concerned with the design and technical options described above, or you just need an operational website that does the job today, then you probably won’t need headless that much.

Of course, speed from concept to delivery is important, so as you are a few clicks away from a decently looking website without proper engineering support on your side, you may want to defer headless options for a later time. You can focus on site optimization and longevity once you feel like your idea might be working.

How Headless Choices Help You Recover From Missteps

Upgrading The Backend

Perils Of Per User Pricing

A while back, I helped set up a blogging system that would be used by dozens of authors. We were very impressed with the feature set of one of the headless CMS vendors, chose it for the headless CMS and enjoyed building a frontend on top of it that melded smoothly into our product suite. Eventually, the company decided that the number of authors should be expanded to a few thousand.

Most hosted CMS solutions don’t publish the pricing structure for user numbers this big. When we inquired about the cost of continuing to run this on the same platform, we didn’t quite like the answer. In order for this system to continue to make business sense, we had to swap out our CMS. We were able to make the swap without scrapping the frontend too because of the headless architecture.

API Throttling

So many startups focusing purely on the authoring environment are able to build beautiful products with developer-friendly APIs. Airtable is an example of spreadsheet innovation through user-friendly UI combined with clean developer experience via a well-documented API.

I built some useful prototypes where I fed scraped data into Airtable where it was edited by human experts, then used their APIs to power content views running on the main site and in embeds running on third party sites. When setting up the read system I pulled the Airtable data into a production-ready system that could handle large traffic loads and this worked well for a while.

I started to run into problems with writing data though. Calls were failing due to the hard limit of 5 requests per second. Hitting this limit gives a 30 second complete API request lockout. I was attempting to send in data from a distributed system so I added throttles and split things up into separate bases.

As the system expanded and the amount of data grew we were outgrowing this tool. I was able to address this by building rudimentary data editing features into a system based on the AWS DynamoDB instance that had been reading from airtable. We were able to quickly trade the slick Airtable authoring UI features for a bigger scale and lower monthly SaaS bills.

This is another example of how a clean separation between the frontend and backend provided by the APIs of headless authoring tools lets you target pain points precisely.

Upgrading The Frontend

Shiny New Frameworks

Organizations that have been around for a while often have the problem of needing to support production systems built on a variety of tech stacks. There is constant pressure to homogenize tooling but also to innovate. I was part of a team tasked with building views and widgets that would integrate into existing products based on a headless CMS. We had a lot of fun quickly building prototypes with different lightweight frontend tools.

We ran an internal contest to see which engineer on the frontend team could whip up the best frontend based on the content delivered from the headless CMS API endpoints. One presentation had the best feature set and the smallest code footprint so the deveopers got the project and delivered the product by building it with Riot.js.

Riot.js is a cool little library that packs a ton of features into a small size. It helps you write data-driven single file components like Vue.js. When the developer of this frontend left the company shortly after shipping version 1.0 the team lost the only person with enthusiasm for that library.

Sometimes the fall from exciting, new, speedy development pattern to tech debt happens rapidly.

Luckily, the decoupled nature of headless CMS architecture provides the flexibility to change your frontend without touching the backend. We were able to rewrite the front-end code and swap in updated front-end components based on different libraries that were more commonly used on other projects.

Raw Speed

I love the Ghost project. I was an early subscriber because it was cool to see a WordPress-like solution built on Node.js. I respect this organization for offering a service built on open source tools they are constantly refining. I was really happy with this tool when I used it for my personal blog.

There was one facet of the solution that wasn’t perfect though. The Time to First Byte on my Ghost-hosted blog was too slow. Since I could retrieve all the post content via an API I was able to set up my own statically generated frontend on S3 + Cloudfront that used all the post content I had written in Ghost but had a faster time to first byte.

Headless CMS As A Service

There are many Software As A Service businesses that have gone all-in on headless. Signing up with one of these vendors can immediately give you a friendly content editing environment and clean API endpoints to work with. Here is a quick comparison of a few of them all of whom have very low-cost entry-level plans and a laser focus on the headless CMS experience.

All of these services have a solid base set of features. They all include static asset hosting, saved revision history, and well-documented localization support. They differ in their content creation user interface and API features.

Vendor Content Editing API
ButterCMS Forms with a Word-style WYSIWIG-editor, with a toggle to HTML code. You can configure a one click full preview by linking your frontend template URLs. REST API preview showing full JSON available in overlay on the same screen as content editor.
Comfortable Forms-based editor; did not see how to set up a 1-click-in-context-preview. REST API endpoint link available in the editor mode, GraphQL available soon.
Cosmic Forms with a Word-style WYSIWIG-editor, with a toggle to HTML code. You can configure your own preview URLs to pull the draft JSON. REST API. Can view a full JSON in 2 clicks from the Object editor.
DatoCMS Forms-based editor, can set up a plugin to enable a full page preview. GraphQL API with an API explorer.
Storyblok Forms-based editor, visual edit mode, with a full page preview. REST API, one click to full JSON from the editor mode.
TakeShape Forms-based editor, with a live preview configurable by uploading templates. GraphQL API with an API explorer.

Exciting Headless Patterns

Using A CMS Based On GitHub

Being able to take advantage of the user management, version control and approval workflows in GitHub are big advantages. It is helpful not to have to set up new accounts on new systems. Being able to see the history of reviews alongside the content updates is nice.

There are different flavors of GitHub-based CMS tools. This one has been a quick way to spin up documentation sites: Spacebook you can integrate it with Netlify to get a cleaner markdown editing UI or use it directly on GitHub.

The preview features that are now built into GitHub web editor make some of these tools more accessible to people who aren’t familiar with HTML. I love the view-rich diff option where GitHub shows markdown changes in full preview mode.

This is an excellent list of 85 CMS tools that allows you to sort on whether they are GitHub-based or not.

APIs For Familiar Tools

Your WordPress installation comes with API endpoints, so you can continue using authoring tools your team has experience in a headless fashion. WordPress has nice documentation for their REST API. This is enabled on new WordPress installs, so when you spin up a new WordPress authoring environment you can start reading JSON from https://example.com/wp-json/wp/v2/posts.

The WordPress settings page contains an update service field where you can enter URLs for services you want it to ping when content changes. This is perfect for triggering a serverless tool to grab the latest updates. WordPress v5 has this field in the Writing section of settings

Combining Data Sources

Using headless tools for the state of California helped us craft emergency response sites that raised the bar for performance. We had full control of the frontend architecture and were still able to let writers use familiar authoring tools.

We use WordPress headlessly, writing to GitHub via FAAS. We are also writing other data sources into the repository and triggering static site generator builds on every change. Examples of data that get written to git in addition to the original editorial content are data that only changes once a day like the topline stats and our human-translated versions of each page.

Using GitHub actions as build triggers allowed us to integrate several different data sources into the site so we get fast publishing and a small production infrastructure footprint. Less production infrastructure lets us breathe easily when we hit big traffic spikes related to government pandemic announcements.

The WordPress -> FAAS -> GitHub repo part of the architecture was created by Carter Medlin. He wired this pipeline together from scratch in a couple of days while we designed and built the site frontend. This is running on a serverless MS Azure function so there are low infrastructure costs and maintenance. It gets pings from the WordPress update service described earlier, pulls json from the WordPress API and writes new content into GitHub. The code for this serverless endpoint is viewable on GitHub.

Out bots are hard at work publishing all content updates as they receive pings from WordPress. This activity creates an easily reviewable log of each update and the ability to revert changes with usual GitHub processes.

Building the frontend of this site using the 11ty static site generator was fast, fun and worked perfectly. We get big traffic spikes on pandemic-related news and knowing we have a static frontend reduces risk when the concurrent user counts start ramping up and we are publishing a lot of content updates.

I like how the 11ty community focuses on performance and accessibility with its community leaderboards and lightweight architecture. Making sure that tools built by the state work for all Californians is important. We want things to work on any device under low bandwidth conditions and support all assistive tech. It is pretty cool that we can use tools like 11ty which make delivering fast, accessible sites easier. We use web components on the frontend to provide additional features while keeping the code weight small.

Considerations When Making Headless Choices

Excited about the capabilities headless tools give your team? The number of options available can be overwhelming. This is a list of features that may help you whittle down the options:

Authoring Environment Features

  • Ease of authoring documents
  • Ease of adding structured data
  • Layout options
  • Preview features
  • Content approval workflows

Content API Features

  • What queries are available
  • How granular is the content structure
  • Are there any limitations on data access (Airtable REST API hard limits)
  • Scalability: do you need to put a CDN in front of your content API
  • Ease of adding localization
  • Getting your content out, what if you change your plans, how hard is extracting all your data going to be?

Cost

  • Are you paying per user for hosted solutions?
  • Are you managing open source software you install in your own environment?
  • Are user accounts easy to administer?
  • Can you integrate with your existing single sign-on solutions?
  • Has the product passed security audits, does it include two-factor authentication?

Source Control/Approval Flows

  • Is content versioned, so that you can roll back to prior versions and keep track of what was published and what edits were made when?
  • Can you share new versions of content before publishing them? Can you restrict access to these previews?

Static File Management

  • How easy is it for your authors to add new images, pdfs, etc.?
  • Ease of hooking author uploaded files into image optimization flows?

Where Headless Is Heading

When you look closely into the headless landscape, you’ll find out that headless tools intentionally limit their functional scope and provide ways to integrate into larger systems. Unbundling specific features is beneficial when systems get more complex. It’s just easier to make specific choices that limit the cost, security, maintenance, hosting requirements of larger code footprints when you work with smaller, focused tools.

It’s worth noting that headless options usually require writing some code yourself. However, as frontends are increasingly a set of pre-built components and often an entire off-the-shelf design filled in with your own data, it shouldn’t be too presumptuous to expect more ways to mix and match specialized tools and seamlessly integrate headless options without writing code yourself.

The perfect backend for a project could be just a SAAS subscription or an open-source project install away. This may integrate codelessly with an off-the-shelf frontend that meets all your needs. I see that Stackbit is already melding headless CMS with their no code frontend. I can set up a new site using Stackbit’s WYSIWYG no code page creation tool and then I can pick from a set of headless CMS options from different vendors to manage the full site data.

In this article, we’ve gone over some use cases where going headless helped companies I’ve worked for cope with change. Headless choices are enticing whether you are interested in them for application architecture flexibility, user experience control or thinking carefully about the longevity of your service.

I am excited to see how this space continues to grow and will be continuing to look for ways to use these options to deliver better products and make my job as a developer easier.

Further Resources

This article has been kindly supported by our dear friends at Storyblok, a friendly headless CMS with a visual editor, nested components and customizable content blocks for websites and apps. Thank you!

Posted on

Image Fragmentation Effect With CSS Masks and Custom Properties

Geoff shared this idea of a checkerboard where the tiles disappear one-by-one to reveal an image. In it, an element has a background image, then a CSS Grid layout holds the “tiles” that go from a filled background color to transparent, revealing the image. A light touch of SCSS staggers the animation.

I have a similar idea, but with a different approach. Instead of revealing the image, let’s start with it fully revealed, then let it disappear one tile at a time, as if it’s floating away in tiny fragments.

Here’s a working demo of the result. No JavaScript handling, no SVG trickery. Only a single <img> and some SCSS magic.

Cool, right? Sure, but here’s the rub. You’re going to have to view this in Chrome, Edge or Opera because those are the only browsers with support for @property at the moment and that’s a key component to this idea. We won’t let that stop us because this is a great opportunity to get our hands wet with cool CSS features, like masks and animating linear gradients with the help of @property.

Masking things

Masking is sometimes hard to conceptualize and often gets confused with clipping. The bottom line: masks are images. When an image is applied as mask to an element, any transparent parts of the image allow us see right through the element. Any opaque parts will make the element fully visible.

Masks work the same way as opacity, but on different portions of the same element. That’s different from clipping, which is a path where everything outside the path is simply hidden. The advantages of masking is that we can have as many mask layers as we want on the same element — similar to how we can chain multiple images on background-image.

And since masks are images, we get to use CSS gradients to make them. Let’s take an easy example to better understand the trick.

img {
  mask:
    linear-gradient(rgba(0,0,0,0.8) 0 0) left,  /* 1 */
    linear-gradient(rgba(0,0,0,0.5) 0 0) right; /* 2 */
  mask-size: 50% 100%;
  mask-repeat: no-repeat;
}

Here, we’re defining two mask layers on an image. They are both a solid color but the alpha transparency values are different. The above syntax may look strange but it’s a simplified way of writing linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)).

It’s worth noting that the color we use is irrelevant since the default mask-mode is alpha. The alpha value is the only relevant thing. Our gradient can be linear-gradient(rgba(X,Y,Z,0.8) 0 0) where X, Y and Z are random values.

Each mask layer is equal to 50% 100% (or half width and full height of the image). One mask covers the left and the other covers the right. At the end, we have two non-overlapping masks covering the whole area of the image and, as we discussed earlier, each one has a differently defined alpha transparency value.

We’re looking at two mask layers created with two linear gradients. The first gradient, left, has an alpha value of 0.8. The second gradient, right, has an alpha value of 0.5. The first gradient is more opaque meaning more of the image shows through. The second gradient is more transparent meaning more of the of background shows through.

Animating linear gradients

What we want to do is apply an animation to the linear gradient alpha values of our mask to create a transparency animation. Later on, we’ll make these into asynchronous animations that will create the fragmentation effect.

Animating gradients is something we’ve been unable to do in CSS. That is, until we got limited support for @property. Jhey Tompkins did a deep dive into the awesome animating powers of @property, demonstrating how it can be used to transition gradients. Again, you’ll want to view this in Chrome or another Blink-powered browser:

In short, @property lets us create custom CSS properties where we’re able to define the syntax by specifying a type. Let’s create two properties, --c-0 and--c-1 , that take a number with an initial value of 1.

@property --c-0 {
   syntax: "<number>";
   initial-value: 1;
   inherits: false;
}
@property --c-1 {
   syntax: "<number>";
   initial-value: 1;
   inherits: false;
}

Those properties are going to represent the alpha values in our CSS mask. And since they both default to fully opaque (i.e. 1 ), the entire image shows through the mask. Here’s how we can rewrite the mask using the custom properties:

/* Omitting the @property blocks above for brevity */

img {
  mask:
    linear-gradient(rgba(0,0,0,var(--c-0)) 0 0) left,  /* 1 */
    linear-gradient(rgba(0,0,0,var(--c-1)) 0 0) right; /* 2 */
  mask-size: 50% 100%;
  mask-repeat: no-repeat;
  transition: --c-0 0.5s, --c-1 0.3s 0.4s;
}

img:hover {
  --c-0:0;
  --c-1:0;
}

All we’re doing here is applying a different transition duration and delay for each custom variable. Go ahead and hover the image. The first gradient of the mask will fade out to an alpha value of 0 to make the image totally see through, followed but the second gradient.

More masking!

So far, we’ve only been working with two linear gradients on our mask and two custom properties. To create a tiling or fragmentation effect, we’ll need lots more tiles, and that means lots more gradients and a lot of custom properties!

SCSS makes this a fairly trivial task, so that’s what we’re turning to for writing styles from here on out. As we saw in the first example, we have a kind of matrix of tiles. We can think of those as rows and columns, so let’s define two SCSS variables, $x and $y to represent them.

Custom properties

We’re going to need @property definitions for each one. No one wants to write all those out by hand, though, so let’s allow SCSS do the heavy lifting for us by running our properties through a loop:

@for $i from 0 through ($x - 1) {
  @for $j from 0 through ($y - 1) {
    @property --c-#{$i}-#{$j} {
      syntax: "<number>";
      initial-value: 1;
      inherits: false;
    }
  }
}

Then we make all of them go to 0 on hover:

img:hover {
  @for $i from 0 through ($x - 1) {
    @for $j from 0 through ($y - 1) {
      --c-#{$i}-#{$j}: 0;
    }
  }
}

Gradients

We’re going to write a @mixin that generates them for us:

@mixin image() {
  $all_t: (); // Transition
  $all_m: (); // Mask
  @for $i from 0 through ($x - 1) {
    @for $j from 0 through ($y - 1) {
      $all_t: append($all_t, --c-#{$i}-#{$j} transition($i,$j), comma);
      $all_m: append($all_m, linear-gradient(rgba(0,0,0,var(--c-#{$i}-#{$j})) 0 0) calc(#{$i}*100%/(#{$x} - 1)) calc(#{$j}*100%/(#{$y} - 1)), comma);
    }
  }
  transition: $all_t;
  mask: $all_m;
}

All our mask layers equally-sized, so we only need one property for this, relying on the $x and $y variables and calc():

mask-size: calc(100%/#{$x}) calc(100%/#{$y})

You may have noticed this line as well:

$all_t: append($all_t, --c-#{$i}-#{$j} transition($i,$j), comma);

Within the same mixing, we’re also generating the transition property that contains all the previously defined custom properties.

Finally, we generate a different duration/delay for each property, thanks to the random() function in SCSS.

@function transition($i,$j) {
  @return $s*random()+s $s*random()+s;
}

Now all we have to do is to adjust the $x and $y variables to control the granularity of our fragmentation.

Playing with the animations

We can also change the random configuration to consider different kind of animations.

In the code above, I defined the transition() function like below:

// Uncomment one to use it
@function transition($i,$j) {
  // @return (($s*($i+$j))/($x+$y))+s (($s*($i+$j))/($x+$y))+s; /* diagonal */
  // @return (($s*$i)/$x)+s (($s*$j)/$y)+s; /* left to right */
  // @return (($s*$j)/$y)+s (($s*$i)/$x)+s; /* top to bottom */
  // @return  ($s*random())+s (($s*$j)/$y)+s; /* top to bottom random */
  @return  ($s*random())+s (($s*$i)/$y)+s; /* left to right random */
  // @return  ($s*random())+s (($s*($i+$j))/($x+$y))+s; /* diagonal random */
  // @return ($s*random())+s ($s*random())+s; /* full random*/
}

By adjusting the formula, we can get different kinds of animation. Simply uncomment the one you want to use. This list is non-exhaustive — we can have any combination by considering more forumlas. (I’ll let you imagine what’s possible if we add advanced math functions, like sin(), sqrt(), etc.)

Playing with the gradients

We can still play around with our code by adjusting the gradient so that, instead of animating the alpha value, we animate the color stops. Our gradient will look like this:

linear-gradient(white var(--c-#{$i}-#{$j}),transparent 0)

Then we animate the variable from 100% to 0%. And, hey, we don’t have to stick with linear gradients. Why not radial?

Like the transition, we can define any kind of gradient we want — the combinations are infinite!

Playing with the overlap

Let’s introduce another variable to control the overlap between our gradient masks. This variable will set the mask-size like this:

calc(#{$o}*100%/#{$x}) calc(#{$o}*100%/#{$y})

There is no overlap if it’s equal to 1. If it’s bigger, then we do get an overlap. This allows us to make even more kinds of animations:

That’s it!

All we have to do is to find the perfect combination between variables and formulas to create astonishing and crazy image fragmentation effects.

The post Image Fragmentation Effect With CSS Masks and Custom Properties appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Posted on

15 Tools and Resources for Designers and Agencies To Use in 2021

You take pride in delivering a project on time, but when unanticipated issues arise, meeting a deadline can suddenly become a challenge. Quite often the cause of the problem is that one of your tools simply isn’t up to the task at hand.

It doesn’t matter if it’s one of your favorites, you simply have to find one that will get the job done.

Fortunately, there’s an abundance of web design tools out there. They range from possibly OK to excellent. 

You’ll find 15 tools and resources for designers and agencies that fit nicely into the latter category here. Tools that will help you and your team be more productive and put big smiles on your viewers and clients faces.

That said, let’s get started.

1. Be Theme

This premium multipurpose theme is hard to beat in terms of its huge array of features, tools, design options, flexibility, and ease of use. Add the fact that BeTheme’s sales have topped the 200,000 mark and there should be no doubt that you’ll be getting the maximum value for your investment.

  • Be’s 40+ core design features provide all the flexibility you’re ever likely to need
  • With Be’s powerful Muffin Builder page builder, Admin Panel, and Shortcode Generator combo you can design whatever you want without having to write a line of code
  • Choose from more than 600 responsive and customizable pre-built websites that cover 30 industry sectors and all the common website types and styles to get any project or any page design off to a quick start.
  • Be’s Layout Generator will come in handy should you ever decide to start a page from scratch, plus you’ll find all the grid, header, and color options and special effects you’re likely to need.

Click on the banner and discover what BeTheme can do for you.

2. Timezy Booking Software

Timezy is a brand-new booking application with a cool modern design. It features a game-changing approach to a business’s booking operations by speeding up the process by 75% and simplifying it from beginning to end.

Since Timezy is currently in an early phase, you can get a chance to take advantage of this software for as low as $5 by joining the Early Bird plan, additionally you can shape it by providing feedback at its early stage. 

Timezy features include:

  • Accepting and managing appointment bookings and scheduling and managing events
  • Sending automatic email and SMS notifications
  • Google Calendar, Outlook Calendar, and Zoom integration are on the way
  • Booking Form customization to conform to needs and brand
  • Managing employee work and appointment schedules
  • Managing both flat and variable pricing and online payments

The majority of the above features are currently in place. Others are on the way.

Click the banner to learn more and/or take part.

3. wpDataTables

While there are plenty of good table and chart-building apps and plugins on the market, your options quickly become limited if you are looking for one or more of the following features:

  • Tables or charts can be interactive and responsive
  • Tables or charts can be editable and easily maintainable
  • Massive amounts of data can be processed to create a table or chart in seconds or minutes as opposed to hours or days
  • Data including real-time data from various sources and in various formats can be processed

wpDataTables does all the above and more. wpDataTable’s conditional formatting feature allows key table and chart information to be highlighted or color-coded. Other features include front-end editing, powerful filters, and a useful collection of add-ons. Documentation is detailed and informative.

Click on the banner to learn more about this powerful tool.

4. Amelia Booking Plugin

This premier WordPress booking plugin manages appointments, events, and employee schedules with one tool.

  • The number of appointments is unlimited, and customers or clients can book appointments 24/7
  • The number of employees and clients is unlimited
  • Amelia can service multiple business locations
  • Amelia can be integrated with Google or Outlook Calendar, Elementor, and Zoom

Employees and clients have their own dashboards and clients can access Amelia without having to log into WordPress.

5. Uncode – Creative Multiuse & WooCommerce WordPress Theme

Uncode is a pixel-perfect multipurpose theme that has proven to be one of ThemeForest’s all-time bestsellers with more than 80.000 sales. Uncode is especially suitable for use by creative types, freelancers, agencies, bloggers, and businesses.

Features include:

  • An enhanced Frontend Editor;
  • 400+ Wireframe templates and 70+ demo concepts;
  • A unique WooCommerce Custom Builder featuring the Single Product Builder, the custom Cart, Checkout, and more…

Visit the site. Uncode’s library of user-created websites is a must-see.

6. LayerSlider

In this day and age it’s crucial to have a website with a lasting impression. LayerSlider is one of the essential tools to impress your visitors with rich content and eye-catching animations.

  • LayerSlider is perfect for giving new life to old websites
  • Animation capabilities open up new ways to impress and interact with site visitors
  • Professionally-crafted templates give users ideal project starting points

LayerSlider is drag and drop, SEO and mobile device friendly, and requires no coding.

7. Total WordPress Theme

Although Total was designed with perfection in mind, its developers made certain that this WordPress theme would be fast, friendly, and super-flexible.

  • Features you are not working with will not slow you down
  • The Dynamic Template Function and Theme Customizer are two of the reasons behind Total’s extreme flexibility
  • Total is WooCommerce and WordPress plugin friendly

Simply click on the banner to learn more about this popular theme.

8. Dr. Link Check

Broken website links can frustrate owners and visitors alike and can hurt a site’s search engine rankings. Dr. Link Check saves you the time and trouble of having to periodically check all the links in your site manually by performing:

  • Broken link checks including for proper URL formatting
  • Blacklist checks for potential malicious content hosts
  • Parked domains for detecting placeholder sites devoid of meaningful content

9. Mobirise Website Builder

If, when it comes to creating a website, you prefer a fast and easy approach, keep the Mobirise Website Builder in mind.

  • Since Mobirise is offline you have full control over your project
  • Everything is drag and drop; there is no need for coding
  • Bootstrap 4 and Google AMP frameworks ensure outstanding performance
  • 4,000+ cool website templates are included

Mobirise can be downloaded to Windows or Mac at no cost.

10. 8b Website Builder

8b is brand-new, it’s super easy to use, and you can download a full site copy of it for free and host it anywhere you like.

  • 8b can be used on any device at home or on the go
  • Google AMP ensures your site will be crazy-fast and 100% mobile-friendly
  • There are no page number or bandwidth limitations
  • You can link your own domain or use 8b’s

11. Heroic Inbox

Heroic Inbox lets customer support, sales, and other business organizations manage their email inboxes right inside WordPress.

Heroic Inbox, with its exceptionally friendly UI:

  • helps staffs collaborate on email assignments and responses
  • enables staffs to achieve the coveted Inbox Zero status – in no time
  • tracks key metrics to help better understand team performance

12. WHATFONTIS

WhatFontIs quickly identifies fonts from images you upload. This tool’s amazing search capabilities are based on AI font-finding algorithms and its 700K font database (commercial and free).

  • 60+ fonts can be shown for every uploaded image
  • WhatFontIs success rate exceeds 90% (close enough matches approach 100%)
  • Cursive fonts can be uploaded as long as the letters are separated

No more need for exhaustive searching to identify a font you simply must have.

13. Litho – The Multipurpose HTML5 Template

This Bootstrap 4 responsive multipurpose HTML5 template with its ready-made template blocks and premium in-built inner pages provides a perfect website-building starting point for startups, design and art agencies, travel agencies, and other businesses. 

Litho’s many features include:

  • 36+ home pages and 230+ ready templates
  • Page styles for portfolio, blog, shop, and galleries
  • Hero sliders, interactive banners, contact forms, and other creative elements.

Litho provides detailed documentation and you can expect 5-star professional support.

14. XStore – The Most Customizable WooCommerce Theme Ever

If building an eCommerce website is on your to-do list, doing so couldn’t be any easier than making XStore your tool of choice.

For an investment of only $39 you’ll have at your fingertips –

  • 100+ good-to-go shops to customize to meet your requirements
  • $510 worth of premium plugins
  • A single-product page builder together with a powerful header builder
  • Built-in Woocommerce Email Builder
  • Full AJAX Theme & Multi-Vendor Marketplace

Creating an eCommerce website needn’t be difficult.

15. Goodiewebsite

GOODIE is dedicated to help web designers, agencies, and business owners to connect with web developers to get their site reliably coded and quickly up and running.

GOODIE is ideal for –

  • Small businesses looking to establish and amplify an online presence
  • Web designers seeking assistance from a reliable web development partner
  • Startups looking for ways to test their business ideas

GOODIE specialties include WordPress websites, 1-10 page websites, eCommerce websites, and responsive email templates.

Like most other designers, you probably have a toolbox filled with industry tools, tips, and tricks. And like the others, you no doubt have a few favorites you would be reluctant to set aside.

Still, you have to stay up-to-date, something that is not always easy to do. Trying to keep tabs on all the latest and greatest web design tools and resources can be time consuming and more than a little frustrating.

That is why we are happy to share these top 15 tools and resources for designers and agencies with you. Choosing one or more should help you stay on top of your design game.

Icon in featured image made by Freepik from www.flaticon.com.

The post 15 Tools and Resources for Designers and Agencies To Use in 2021 appeared first on Codrops.

Posted on

How to Disable Image Attachment Pages in WordPress

Do you want to disable image attachment pages in WordPress?

Image attachment pages can look like incomplete pages on your site. If a visitor views these, then it can leave a poor impression.

In this article, we’ll show you how to disable image attachment pages in WordPress and redirect it to the parent post.

How to disable image attachment pages in WordPress

Why Should You Disable Image Attachment Pages in WordPress?

By default, WordPress creates a single page for every media attachment you have on your site.

This includes images, audio/video files, pdfs, and more. Some users might find this functionality useful, however, most WordPress websites don’t need it.

For example, a photography theme could use the attachment page to display EXIF data. This could show the camera model used, the camera settings, and even the image’s location data.

Often we get complaints from users who accidentally linked their images to the attachment pages, and they don’t like the way it looks.

This is a big issue because many themes don’t have special templates for the image attachment pages.

Sometimes an image on your website can become popular, and people might start landing on the attachment page directly from Google.

Ideally, you want visitors to land on your post and see the image in the context you have used it.

This is why we always recommend users to disable image attachment pages on their WordPress blog.

How to Disable Image Attachment Pages in WordPress (2 Methods)

There are two ways to disable image attachment pages in WordPress.

The first approach uses WordPress plugins, while the second involves adding custom code to WordPress.

You’ll want to choose the method that’s best suited for your skills.

Method 1: Disable Image Attachment Pages in WordPress (with a Plugin)

The easiest way to disable image attachment pages is to use a WordPress plugin. This method is beginner friendly and requires no coding.

We recommend using All in One SEO. It’s the best SEO plugin for WordPress used by over 2 million sites.

The first thing you’ll need to do is install and activate the plugin. To do this, see our guide on how to install a WordPress plugin.

Once the plugin is installed and activated, you’ll have a new menu item called ‘All in One SEO’.

Navigate to All in One SEO » Search Appearance. Next, click the ‘Media’ navigation tab.

All in One SEO search appearance media setting

The first setting is ‘Redirect Attachment URLs’. You can disable the setting entirely, redirect to the attachment page, or the attachment parent page.

We recommend redirecting to the ‘Attachment Parent’ page. That way, when a user lands on the image attachment page, they’ll be redirected to your article instead.

All in One SEO select attachment parent

Once you select your preferred setting, make sure to click ‘Save Changes’ before exiting the screen.

If you aren’t using the All in One SEO plugin, you can still disable image attachment pages and redirect users to a parent post using a plugin called Attachment Pages Redirect.

All you have to do is install and activate the plugin. It’ll automatically start redirecting users that land on attachment pages to the parent post.

If no parent post is found, then users will be redirected to your homepage.

This plugin works out of the box and has no settings page. Simple and easy.

Method 2: Disable Image Attachment Pages in WordPress (with Code Snippet)

Another option is to add a code snippet to WordPress that accomplishes the same goal as the plugin above.

If you don’t want to use a plugin or feel that you’re already using too many WordPress plugins, then you can use this method.

First, you’ll need to create a new file in your WordPress theme folder and name it image.php. If your theme already has an image.php file, then you’ll need to edit that file instead.

After that, all you have to do is add the following code as the first line in your image.php file:

<?php wp_redirect(get_permalink($post->post_parent)); ?>

Next, you need to save the image.php file and upload it to your theme directory using FTP or your WordPress hosting control panel.

Now, when a user lands on your image attachment page, they’ll be redirected to the parent post.

We hope this article helped you disable image attachment pages in WordPress. You may also want to see our beginner’s guide to image SEO and our guide on how to fix common image issues in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Disable Image Attachment Pages in WordPress appeared first on WPBeginner.

Posted on

Squarespace Tutorial: How to Build a Squarespace Website

Compared to its competitors, Squarespace offers some of the most stylish website designs in the industry, along with a site builder made for business owners of all experience levels. The platform expands its functionality on a regular basis with user-friendly tools for social media marketing, online selling, and email marketing. In this Squarespace tutorial, we’ll walk you through how to build a website on Squarespace, from start to finish.
Posted on

What Are The VirilBlue Safe And Effective Formula?

Up until now, we haven't seen any notices of VirilBlue Side Effects. Which is important for the explanation endless men are needing to attempt this enhancement. Be that as it may, it's essential to remain mindful of your body while utilizing any new item just in the event that it doesn't work well. However, you can take a stab at addressing your primary care physician before utilizing the enhancement on the off chance that you have any inquiries or concerns. Something else, click any picture or catch on this page to see with your own eyes how it can function for you. In the event that you click in time, you may simply get fortunate in a bigger number of ways than one. Visit on the official website: https://hyalurolift.fr/virilblue-avis/

Posted on

Is There Any Side Effect Of Using Sage Elixir CBD Oil?

As to reactions, we acknowledge you're incredibly acceptable here, as well. Once more, if you're purchasing a disagreeable CBD equation, you can anticipate awful outcomes. In addition, you can essentially anticipate reactions. Fortunately, this is truly not a repulsive condition. Also, we don't expect you'll have any Dr Sage Elixir CBD Oil Side Effects, all things considered. In like manner, CBD is really seen as truly protected to use for an impressive number people. Hence, in the event that you need a brand name strategy to deal with your body, you've discovered it. By and by, you basically need to offer it a possibility for yourself. In the occasion that you're doing battling with torment, pressure, or different issues, you see how perilous fixes can be. Regardless, they can cost a fortune. Second, they can cause reliance gives that could wreck as far back as you can remember. Fortunately, CBD is unassuming, and it doesn't cause enslavement. Could your official website: https://ipsnews.net/business/2021/03/20/sage-elixir-cbd-oil-reviews-pros-cons-price-for-sale-cbd-isolate/

Posted on

cheap paddle board

We provide cheap paddle boards . On some paddle boards have discount offer. These paddle board are light in weight . Quality of these paddle boards are good. Here you will find all sizes of paddle boards. For more information you can visit on our website click this