Archive

Archive for September, 2023

How Smashing Magazine Uses TinaCMS To Manage An Editorial Workflow

September 18th, 2023 No comments

Smashing Magazine is drastically different today than it was just a few years ago, and you may not have even noticed. That’s how it often is with back-end development — the complete architecture changes, yet the front end you see is still very much the same.

You may recall this site was powered by WordPress up until 2019 when the team migrated our large archive of articles, guides, and tutorials to a Jamstack setup. The change was less of a mission than it was an experiment that stuck around. Sure, WordPress is still an incredibly viable CMS, especially for a site like Smashing Magazine that focuses on long-form content. But after seeing a blazing 6× improvement in page speed performance, Jamstack was something we couldn’t dismiss because the faster experience was a clear win for readers like you.

What we may not have expected was how the migration from WordPress to Jamstack would improve our developer experience in the process. We knew for sure that users benefitted from the change, but it wound up making our lives easier as well, as it opened up even more possibilities for what we can accomplish on the site — a real win-win outcome!

It took work to get to where we are today. We went from authoring in WordPress to authoring in Markdown files, so it’s not like we started reaping benefits right away. It is only now that we have integrated TinaCMS to our stack that our entire team is reaping the full benefits of our Jamstack architecture.

That’s really what I want to share in this article: a peek behind Smashing Magazine’s curtains at how we manage content. TinaCMS is not WordPress, so it has influenced the way we work. We think it’s pretty cool because TinaCMS is all about the developer experience in a CMS context, so, of course, the inner developers in us have nerded out over the sorts of things that we are now able to do.

Tina Who?

TinaCMS is not a household name in the CMS space. I’d say that’s likely by design, as its niche is clearly in the developer community rather than a “low-code” offering like WordPress or a completely “no-code” solution like Squarespace. TinaCMS has a clear audience, and the team here at Smashing Magazine just so happens to fit that profile in spades. Not everyone on the team is a developer, but most, if not all, of us are comfortable working in Git and the command line.

TinaCMS can be broadly characterized in two ways: an open-source Git-based CMS that supports Markdown files. In fact, TinaCMS saves content to Markdown, MDX, YML, and JSON, allowing a team like us to query data on top of our static assets. It also creates a GraphQL API for that content, allowing a team like us to query data from our files. And since it’s all connected to a GitHub repo, we own and control everything. That’s an enticing value proposition for a company whose business is content. A self-hosted WordPress instance is similar in that regard, but having all of our content in a centralized repo that contains hard files makes “owning” our content more tangible than it is to store it in an SQL database on some server.

That’s a bit about TinaCMS. It’s designed for Jamstack the same way that you might think of Sanity, Storyblok, or Netlify CMS, but it goes further than what we’ve seen, offering everything from a content API (in GraphQL) and visual editing to an integrated local development workflow that serves us quite well here at Smashing Magazine.

The Current Writing Process

Before we look at TinaCMS’s UI and specific features, I think it’s worth sharing how content is written before it’s published on the site. It’s far from perfect and still a work in progress, but it will give you an idea of how we work and why TinaCMS fits our needs.

There are two paths we follow for writing articles: write in a Markdown file connected to a GitHub repo, or write in a collaborative space, like Dropbox Paper or Google Docs. The path we take is whichever one a contributing author is most comfortable using because both have pros and cons.

To be honest, the process is pretty much the same, no matter which path we use. The author writes something, and an editor on the team reads and edits it. Dropbox Paper exports to Markdown, so it’s really a matter of whether the author prefers a GUI or a code editor for writing. Dropbox Paper might be a little more work because it requires the extra step of exporting content and then cleaning up the file (because export is never perfect).

Once an article reaches its final draft, it is given additional formatting for things like pull quotes and related articles before it is committed to a pull request that, when merged, triggers the site to rebuild itself and deploy the changes.

The New Writing Process

Our new writing process abstracts the old process of having to work in either Markdown or a third-party service. Instead, we get to write directly in the TinaCMS editor, preview our work, hit Publish, and voilà, an article is born.

Tina’s light touch is a big reason why it works for our team. Not everyone is forced to use TinaCMS. For example, Vitaly prefers to write Markdown in his code editor on a local Git branch. No problem. That article can be viewed in TinaCMS once he pushes it to GitHub.

You’re unimpressed, right? If so, that’s good because it’s the ease of this new process that we love so much. There’s nothing inherently impressive about our new process because it sports features we were already using in WordPress before the transition took place. What’s impressive is not the features but that the features are available in our Jamstack architecture.

That’s the third “win” for our team in all of this:

  1. The site’s faster performance is a win for you,
  2. Owning hard files of our content is a win for us, and
  3. The fact that we get to write, edit, and collaborate in a CMS that supports the new architecture is a win for us and authors alike.

It’s truly unique that TinaCMS offers the sorts of features we love about WordPress and has ported them into a Jamstack experience. Other CMSs designed for the Jamstack might offer one or two of the features we wanted, but TinaCMS covers them all. I’ll give you a look at those specific features.

The Editing UI

First off, I think it’s pretty cool that we are essentially creating Markdown files in a CMS editor.

It looks like (classic) WordPress, smells like (classic) WordPress, but produces hard files that get committed directly to our repo.

Like many full-fledged CMSs, Tina supports custom fields. That way, we have an easy way to ensure we’re inputting all the correct content in the correct places. Those fields are mapped in the content API, allowing us to query them to populate the front end. It’s true visual editing in the Jamstack.

Branch Switching & Live Previews

This is a killer feature because it doesn’t require us to deploy anything to generate a preview of an article that we can share with authors for a final editing pass before publishing the article.

How does that work? It’s clever, really. Notice the button in the screenshot indicates we’re on the master branch of our repo. That’s right: we’re fully integrated with GitHub to the extent that we can switch branches. Tina’s preview button integrates with branch deployments offered by services like Netlify, Vercel, and others. For us, that means we can work on a branch and click preview to visit the Netlify preview for that branch. That’s how we’re able to work on an article without it winding up in front of hundreds of thousands of readers.

Working Locally

Another neat thing? We can actually log into the Smashing Magazine admin and choose whether we want to work locally or directly in production.

As long as we have a local version of the site running, we can work in a sandboxed environment that prevents us from publishing accidental changes. Plus, it’s a nice — and safe — way to collaborate with others on the team to get an article prepped in advance of a live preview.

From there, we create a new branch and write to it before putting the content through the editing process, getting a live preview ready, and then merging the branch. That triggers a fresh site build, and everything gets deployed for your reading pleasure.

It’s also worth mentioning that TinaCMS automatically protects the repo’s main branch to prevent us (or, most likely, yours truly) from accidentally writing to it.

The Media Manager

What’s a CMS without a media manager?!

It’s funny, but having a flexible option in a Jamstack-based CMS is harder to find than you might think.

Tina can commit media assets to your repository, but for a site of our scale, that would make our repository unmanageable. Instead, we use Tina’s DigitalOcean Spaces integration. Again, we like the idea of owning all of our content, and integrating it with our media storage solution is important.

Uploading a file, like an image, places it on our DigitalOcean Spaces account. Once the site re-builds itself, the images are optimized and sent off to Cloudinary, which converts the image into several different formats and sizes, serving the most optimal version for the reader based on their device, location, network connection, or whatever.

The Editorial Workflow

All of the features I’ve been writing about are part of the TinaCMS “Editor Workflow” that is new as of July 10 — a mere couple of weeks before I started drafting this article. That’s how fresh all of this is for us, and TinaCMS, for that matter. You might expect a brand-new set of robust features to be a little bumpy at first, but it’s incredibly smooth.

I think a video from the TinaCMS site does a better job illustrating the flow from writing to review, from review to approval, and subsequent post-publish updates.

The Editor Workflow is available but currently implemented as a plugin for Business plans and up rather than having it baked right into TinaCMS. Coming from the WordPress world, I love the concept of keeping the CMS light and extending it with specific functionalities, if needed.

Hope You Enjoyed The Tour

Well, that’s a look at how the sausage is made here at Smashing Magazine. I personally enjoy seeing how things work at different organizations because no two projects are ever identical. What ends up in a stack and how work happens is largely based on specific needs that are unique to a certain team.

What works for us might seem crazy to you — or awesome. I don’t know. But we’re excited about it because it accommodates how we work and has already delivered a number of big wins for everyone.

TinaCMS is in active development, too, so it is very possible we may see new features and functionality that we decide to adopt. For example, there’s now a self-hosted version of the CMS. And looking at the roadmap, we also have more things to look forward to in the next three months.

Further Reading On SmashingMag

Categories: Others Tags:

15 Best New Fonts, September 2023

September 18th, 2023 No comments

Nothing upgrades your designs like selecting the right font. It’s all too easy to fall into the trap of using the same typeface over and over, so every month, we publish this roundup to freshen up your font menu.

Categories: Designing, Others Tags:

Weekly Design News #1

September 16th, 2023 No comments
Categories: Designing, Others Tags:

Weekly Design News #1

September 16th, 2023 No comments
Categories: Designing, Others Tags:

The 20 Most Controversial Logos of All Time (Ranked)

September 15th, 2023 No comments

When you hire graphic designers to create your company’s logo, what do you expect? Professional designs, culturally sensitive icons, creativity, and originality don’t sound like too big an ask. Unfortunately, these brands got more than they bargained for.

Categories: Designing, Others Tags:

Why Editing Video is Crucial to Get Better SEO Results

September 15th, 2023 No comments

Video has become a crucial component of many brand marketing strategies. In fact, according to Wyzowl’s report, 91% of businesses now use video as a marketing tool.

Image via Wyzowl

One effective strategy to drive organic traffic and boost visibility for your content and brand is Search Engine Optimization (SEO). 

In this guide, I’ll cover everything you need to know about video editing for SEO. With this knowledge, you can create video content that reaches more people organically and provides added value.

But first, let’s define the term “Video SEO.”

What is Video SEO?

The term video SEO or video Search Engine Optimization, is widely used in the context of modern digital marketing. It involves optimizing video content for improved visibility on search engine results pages (SERPs).

Search engines like Google continually update their algorithms for relevance, making video SEO crucial. It ensures your videos are shown on SERP when people search for related topics.

Search engines prominently feature videos in both organic and dedicated video searches, offering multiple opportunities for discovery and engagement.

For example, when searching for “how to repair a broken vent pipe,” top search results often include videos, underscoring video SEO’s significance.

Image via Google

Video editing for SEO is not only about reaching a broader audience, but it also presents several other benefits that can complement your marketing efforts. Let’s explore these advantages.

Benefits of Video Editing for SEO

Video editing isn’t just about making your videos look polished. It’s a pivotal step in achieving better SEO results, allowing you to reach more global audiences with your videos

Let’s break down some of the key benefits of video editing for SEO.

1. Improved Viewer Engagement

Well-edited videos are more likely to captivate your audience. They keep viewers watching longer, sending positive signals to search engines about your content’s quality and relevance.

2. Enhanced User Experience

A well-edited video provides a smoother and more enjoyable viewing experience, reducing bounce rates and encouraging visitors to explore your website further. 

Additionally, if you conduct regular website optimization experiments, featuring well-edited videos can streamline your UX research by increasing visitor engagement and providing more opportunities to track their activities.

3. Better Click-Through Rates (CTR)

A compelling video thumbnail, coupled with well-edited content, can significantly enhance CTR when your video is displayed in search results. This improved CTR ultimately translates to a significant increase in organic traffic to your videos.

4. Reduced Bounce Rates

Engaging videos help reduce bounce rates, improving site SEO by signaling valuable content. 

For example, Backlinko often embeds videos within blog posts to enhance engagement and reduce bounce rates.

Image via Backlinko

Having discovered some of its advantages, let’s now delve into the specifics of video editing for SEO.

Actionable Video Editing Strategies for SEO Success

When it comes to video optimization for SEO, it’s all about strategic editing. In this section, I’ll list some actionable video editing strategies that can enhance your SEO performance. 

Let’s get started.

1. Choose the Right Video Length and Format

When editing, keep your videos concise and purposeful. Start with a compelling hook to grab viewers’ attention and ensure that the content directly addresses the viewer’s query or problem.

Longer videos should provide in-depth insights or step-by-step guides. Also, use clear and concise language throughout, avoiding unnecessary fillers.

2. Ensure High Quality and Resolution

Invest in high-quality recording and editing equipment to ensure excellent visuals and audio quality. If you’re on a low budget, take advantage of a free (but effective) editing tool like Movavi Video Editor and Animoto.

When editing videos online, pay attention to lighting, sound, and camera stability. Edit out any distracting background noise or visuals, and enhance color and contrast to make your videos visually appealing.

3. Optimize Thumbnails

Create custom thumbnails that capture your audience’s attention and provide context about your videos’ content. 

You can use vibrant images or screenshots from the video and include text that hints at the topic without revealing everything. A well-optimized thumbnail can significantly enhance click-through rates.

Need inspiration? Pilfer thumbnail ideas from Ahrefs’ YouTube channel.

Image via YouTube

By implementing these video editing strategies, you can enhance the quality and relevance of your videos for both viewers and search engines, ultimately improving their SEO performance.

Strategies for Supercharging Your Video SEO Strategy

To supercharge your videos’ SEO performance, you need more than just editing skills. You need strategic techniques that maximize your video’s visibility in search results. 

Here are the key strategies you can implement.

1. Focus on Keyword Research and Optimization

Identify relevant keywords and seamlessly integrate them into your video’s title, description, and tags. This helps search engines understand your video’s content and context.

To execute this strategy, start by investing in a keyword research tool, such as Semrush or Ahrefs SEO tool. Here’s a snapshot of Semrush’s keyword research dashboard:

Image via Semrush

Once you’ve conducted keyword research, integrate the keywords into your video’s title, description, and tags naturally.

2. Create Compelling Descriptions and Tags

Craft compelling descriptions that encourage viewers to click on your videos. Also, use relevant tags for better discoverability.

Find inspiration from Backlinko’s YouTube page. The image below shows their detailed description and keyword-rich tags—an effective strategy you can adopt.

Image via YouTube

3. Harness the Power of Social Media

Boost your video’s reach by sharing it on multiple social media platforms. This can significantly increase your blog traffic and engagement, positively impacting your video SEO.

Ahrefs, for instance, regularly shares video walkthroughs on social media, garnering thousands of views.

Image via Twitter

Beyond sharing your videos, aim to foster engagement for a wider reach. One effective approach is to prompt viewers to add comments with thought-provoking questions. 

Additionally, you can create a quiz and share it alongside your videos to boost engagement.

4. Leverage Video Sitemaps

Sitemaps provide valuable information about your videos to search engines, helping them index your content and rank it for relevant queries. 

For better reach, create and submit video sitemaps to multiple search engines, not just to Google.

However, note that you should submit XML sitemaps, not HTML sitemaps. Here’s the difference between the two to avoid any confusion:

Image via Semrush

Conclusion

Video editing for SEO is the bridge that connects your content to a wider audience. It’s the key to climbing the search engine rankings and captivating your viewers. 

By implementing these strategies, you’ll not just improve your videos, but strengthen your online presence. 

What’s next? Go forth and create exceptional videos. Keep optimizing them regularly and watch your online influence expand.

Featured image by Mark Cruz on Unsplash

The post Why Editing Video is Crucial to Get Better SEO Results appeared first on noupe.

Categories: Others Tags:

Revealing Images With CSS Mask Animations

September 15th, 2023 No comments

In a previous article, we explored fancy hover effects for images that involve shines, rotations, and 3D perspectives. We are going to continue playing with images, but this time, we are making animations that reveal images on hover. Specifically, we will learn about CSS masks and how they can be used to cover portions of an image that are revealed when the cursor hovers over the image.

Here is the HTML we will use for our work:

<img src="" alt="">

Yes, that’s right, only one image tag. The challenge I like to take on with each new CSS project is: Let CSS do all of the work without extra markup.

As we go, you may notice minor differences between the code I share in the article and what is used inside the demos. The code throughout the article reflects the CSS specification. But since browser support is inconsistent with some of the features we’re using, I include prefixed properties for broader support.

Example 1: Circle Reveal

In this first one, an image sits in a square container that is wiped away on hover to reveal the image.

So, we have two images, each with a gradient background that is revealed with a touch of padding. We could have added a

— or perhaps even a

— to the markup to create a true container, but that goes against the challenge of letting CSS do all of the work.

While we were able to work around the need for extra markup, we now have to ask ourselves: How do we hide the image without affecting the gradient background? What we need is to hide the image but continue to show the padded area around it. Enter CSS masks.

It’s not terribly complicated to apply a mask to an element, but it’s a little trickier in this context. The “trick” is to chain two mask layers together and be more explicit about where the masks are applied:

img {
  /* etc. */
  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0) content-box;
}

Now we have two masks “sources”:

  1. content-box: one that is restricted to the image’s content,
  2. padding-box: one that covers the whole image area, including the padded area.

We need two layers because then we can combine them with the CSS mask-composite property. We have different ways to combine mask layers with mask-composite, one of which is to “exclude” the area where the two masks overlap each other.

img {
  /* etc. */
  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0) content-box;
  mask-composite: exclude;
}

This will make only the gradient visible (the padded area), as you can see below.

See the Pen Overview of the exclude composition by Temani Afif.

Notice that we can remove the padding-box from the code since, by default, a gradient covers the whole area, and this is what we need.

Are there other ways we could do this without mask-composite? There are many ways to hide the content box while showing only the padded area. Here is one approach using a conic-gradient as the mask:

mask:
  conic-gradient(from 90deg at 10px 10px, #0000 25%, #000 0)
  0 0 / calc(100% - 10px) calc(100% - 10px);
  /* 10px is the value of padding */

See the Pen Border-only using conic-gradient by Temani Afif.

There are others, of course, but I think you get the idea. The approach you choose is totally up to you. I personally think that using mask-composite is best since it doesn’t require us to know the padding value in advance or change it in more than one place. Plus, it’s a good chance to practice using mask-composite.

Now, let’s replace the second gradient (the one covering only the content area) with a radial-gradient. We want a circle swipe for the hover transition, after all.

img {
  mask:
    linear-gradient(#000 0 0),
    radial-gradient(#000 70%,#0000 71%) content-box;
  mask-composite: exclude;
}

See the Pen Adding the radial-gradient by Temani Afif.

See that? The exclude mask composite creates a hole in the image. Let’s play with the size and position of that cutout and see what is happening. Specifically, I’m going to cut the size in half and position the circle in the center of the image:

mask:
  linear-gradient(#000 0 0),
  radial-gradient(#000 70%,#0000 71%) content-box
    center / 50% 50% no-repeat;
  mask-composite: exclude;

See the Pen Updating the radial-gradient size and position by Temani Afif.

I bet you can already see where this is going. We adjust the size of the radial-gradient to either hide the image (increase) or reveal the image (decrease). To fully hide the image, we need to scale the mask up to such an extent that the circle covers up the image. That means we need something greater than 100%. I did some boring math and found that 141% is the precise amount, but you could wing it with a round number if you’d like.

That gives us our final CSS for the effect:

img {
  padding: 10px; /* control the thickness of the gradient "border" */
  background: repeating-linear-gradient(45deg, #FF6B6B 0 10px, #4ECDC4 0 20px);
  mask:
    linear-gradient(#000 0 0),
    radial-gradient(#000 70%, #0000 71%) content-box
      50% / var(--_s, 150% 150%) no-repeat;
  mask-composite: exclude;
  transition: .5s;
}
img:hover {
  --_s: 0% 0%;
}

A few minor details:

  • We start with a size equal to 150% 150% to initially hide the image. I am taking the additional step of applying the size as a CSS variable (--_s) with the full size (150% 150%) as a fallback value. This way, all we need to do is update the variable on hover.
  • Add a hover state that decreases the size to zero so that the image is fully revealed.
  • Apply a slight transition of .5s to smooth out the hover effect.

Here’s the final demo one more time:

See the Pen Hover reveal animation using mask by Temani Afif.

We just created a nice reveal animation with only a few lines of CSS — and no additional markup! We didn’t even need to resort to pseudo-elements. And this is merely one way to configure things. For example, we could play with the mask’s position to create a slick variation of the effect:

See the Pen Another variation of the circular reveal animation by Temani Afif.

I’m a big fan of putting an idea out there and pushing it forward with more experiments. Fork the demo and let me know what interesting things you can make out of it!

Example 2: Diagonal Reveal

Let’s increase the difficulty and try to create a hover effect that needs three gradients instead of two.

See the Pen Hover reveal animation using mask II by Temani Afif.

Don’t look at the code just yet. Let’s try to create it step-by-step, starting with a simpler effect that follows the same pattern we created in the first example. The difference is that we’re swapping the radial-gradient with a linear-gradient:

img {
  padding: 10px; /* control the thickness of the gradient "border" */
  background: repeating-linear-gradient(45deg, #FF6B6B 0 10px, #4ECDC4 0 20px);
  mask:
    linear-gradient(#000 0 0),
    linear-gradient(135deg, #000 50%, #0000 0) content-box 
      0% 0% / 200% 200% no-repeat;
  mask-composite: exclude;
  transition: .5s;
}
img:hover {
  mask-position: 100% 100%;
    }

You’ll notice that the other minor difference between this CSS and the first example is that the size of the mask is equal to 200% 200%. Also, this time, the mask’s position is updated on hover instead of its size, going from 0% 0% (top-left) to 100% 100% (bottom-right) to create a swiping effect.

See the Pen Diagonal reveal animation using mask by Temani Afif.

We can change the swipe direction merely by reversing the linear gradient angle from 135deg to -45deg, then updating the position to 0% 0% on hover instead of 100% 100%:

img {
  padding: 10px; /* control the thickness of the gradient "border" */
  background: repeating-linear-gradient(45deg, #FF6B6B 0 10px, #4ECDC4 0 20px);
  mask:
    linear-gradient(#000 0 0),
    linear-gradient(-45deg, #000 50%, #0000 0) content-box 
      100% 100% / 200% 200% no-repeat;
  mask-composite: exclude;
  transition: .5s;
}
img:hover {
  mask-position: 0% 0%;
}

See the Pen Diagonal reveal animation using mask by Temani Afif.

One more thing: I defined only one mask-position value on hover, but we have two gradients. If you’re wondering how that works, the mask’s position applies to the first gradient, but since a gradient occupies the full area it is applied to, it cannot be moved with percentage values. That means we can safely define only one value for both gradients, and it will affect only the second gradient. I explain this idea much more thoroughly in this Stack Overflow answer. The answer discusses background-position, but the same logic applies to mask-position.

Next, I’d like to try to combine the last two effects we created. Check the demo below to understand how I want the combination to work:

See the Pen Combination of two diagonal reveal by Temani Afif.

This time, both gradients start at the center (50% 50%). The first gradient hides the top-left part of the image, while the second gradient hides the bottom-right part of it. On hover, both gradients slide in the opposite direction to reveal the full image.

If you’re like me, you’re probably thinking: Add all the gradients together, and we’re done. Yes, that is the most intuitive solution, and it would look like this:

img {
  padding: 10px; /* control the thickness of the gradient "border" */
  background: repeating-linear-gradient(45deg, #FF6B6B 0 10px, #4ECDC4 0 20px);
  mask:
    linear-gradient(#000 0 0),
    linear-gradient(135deg, #000 50%, #0000 0) content-box 
      50% 50% / 200% 200% no-repeat,
    linear-gradient(-45deg, #000 50%, #0000 0) content-box 
      50% 50 / 200% 200% no-repeat;
  mask-composite: exclude;
  transition: .5s;
  cursor: pointer;
}
img:hover {
  mask-position: 0% 0%, 100% 100%;
}

See the Pen Combining both effects by Temani Afif.

This approach kind of works, but we have a small visual glitch. Notice how a strange diagonal line is visible due to the nature of gradients and issues with anti-aliasing. We can try to fix this by increasing the percentage slightly to 50.5% instead of 50%:

See the Pen Trying to fix the anti-aliasing issue by Temani Afif.

Yikes, that makes it even worse. You are probably wondering if I should decrease the percentage instead of increasing it. Try it, and the same thing happens.

The fix is to update the mask-composite property. If you recall, we are already using the exclude value. Instead of declaring exclude alone, we need to also apply the add value to make sure the bottom layers (the swiping gradients) aren’t excluded from each other but are instead added together:

img {
  mask:
    /* 1st layer */
    linear-gradient(#000 0 0),

    /* 2nd layer */
    linear-gradient(135deg, #000 50.5%, #0000 0) content-box 
      50% 50% / 200% 200% no-repeat,

    /* 3rd layer */
    linear-gradient(-45deg, #000 50.5%, #0000 0) content-box 
      50% 50% / 200% 200% no-repeat;

  mask-composite: exclude, add;
}

Now, the second and third layers will use the add composition to create an intermediate layer that will be excluded from the first one. In other words, we must exclude all the layers from the first one.

I know mask-composite is a convoluted concept. I highly recommend you read Ana Tudor’s crash course on mask composition for a deeper and more thorough explanation of how the mask-composite property works with multiple layers.

This fixes the line issue in our hover effect:

See the Pen Diagonal reveal animation using mask by Temani Afif.

One more small detail you may have spotted: we have defined three gradients in the code but only two mask-position values on the hover state:

img:hover {
  mask-position: 0% 0%, 100% 100%;
}

The first value (0% 0%) is applied to the first gradient layer; it won’t move as it did before. The second value (100% 100%) is applied to the second gradient layer. Meanwhile, the third gradient layer uses the first value! When fewer values are declared on mask-position than the number of mask layers, the series of comma-separated values repeats until all of the mask layers are accounted for.

In this case, the series repeats circles back to the first value (0% 0%) to ensure the third mask layer takes a value. So, really, the code above is a more succinct equivalent to writing this:

img:hover {
  mask-position: 0% 0%, 100% 100%, 0% 0%;
}

Here is the final demo again with both variations. You will see that the second example uses the same code with minor updates.

See the Pen Hover reveal animation using mask II by Temani Afif.

Example 3: Zig-Zag Reveal

I have one more example for you, this time revealing the image with zig-zag edges sliding apart, sort of like teeth chomping on the image.

See the Pen Hover reveal animation using mask III by Temani Afif.

While this may look like a more complex hover effect than the last two we covered, it still uses the same underlying CSS pattern we’ve used all along. In fact, I’m not even going to dive into the code as I want you to reverse-engineer it using what you now know about using CSS gradients as masks and combining mask layers with mask-composite.

I won’t give you the answer, but I will share an article I wrote that demonstrates how I created the zig-zag shape. And since I’m feeling generous, I’ll link up this online border generator as another resource.

Wrapping Up

I hope you enjoyed this little experiment with CSS masks and gradients! Gradients can be confusing, but mixing them with masks is nothing short of complicated. But after spending the time it takes to look at three examples in pieces, we can clearly see how gradients can be used as masks as well as how we can combine them to “draw” visible areas.

Once we have an idea of how that works, it’s amazing that all we need to do to get the effect is update either the mask’s position or size on the element’s hover state. And the fact that we can accomplish all of this with a single HTML element shows just how powerful CSS is.

We saw how the same general CSS pattern can be tweaked to generate countless variations of the same effect. I thought I’d end this article with a few more examples for you to play with.

See the Pen Hover reveal animation using mask IV by Temani Afif.

See the Pen Hover reveal animation using mask V by Temani Afif.

See the Pen Hover reveal animation using mask VI by Temani Afif.

Further Reading on Smashing Magazine

Categories: Others Tags:

Facilitating Inclusive Online Workshops (Part 1)

September 13th, 2023 No comments

Have you ever found yourself trapped in an hour-long meeting, listening to someone’s endless talk without understanding their main point? Or sat through a discussion where everyone speaks, but no actions are decided upon in the end? Or perhaps felt like the meeting you’re participating in is simply a waste of time?

If you have, you’re not alone.

According to a survey conducted by Clarizen and Harris Poll (2017), three in five employed adults reported that preparing for a meeting “takes longer than the meeting itself,” and 35% of those who attend status meetings called them a waste of time. In fact, 46% of employed Americans would rather engage in any unpleasant activity than sit in a meeting.

Meetings, when organized well, can serve as an effective way to share information and make decisions. The harsh reality, however, is that many meetings are poorly structured, ending up as a drain of resources.

One of the possible ways to replace meetings with something better and more effective is the implementation of workshops. But while workshops can be a highly effective way to foster collaboration and generate innovative solutions, they often require active participation from everyone involved. Yet, not everyone feels comfortable voicing their thoughts or taking the lead in a group setting, even though these quieter voices can be just as valuable and insightful. This is what led to the concept of an “inclusive” workshop — a workshop that ensures everyone feels heard, connected, and comfortable expressing their ideas.

What’s Inclusivity, And What’s Its Impact?

Before we dive into the concept of an inclusive workshop, let’s first talk about the foundation. At its core, inclusivity means recognizing, appreciating, and respecting the diverse tapestry of human individuality. It’s about valuing the uniqueness everyone brings to the table, from attributes like ethnicity, gender, age, and religion to less apparent characteristics such as cognitive style or socioeconomic background.

Inclusivity is deeply rooted in the social identity theory, introduced by Tajfel & Turner in 1979. This theory suggests that our identities — who we think we are — are partly defined by the social groups we feel part of. It’s human nature to seek acceptance and to want to belong to a group that appreciates us for who we are. This need for social acceptance influences how we view ourselves and how we interact with others.

An inclusive environment embraces this diversity and uses this as an advantage to create a collaborative environment. Think of an orchestra, for example. Every instrument, whether it’s a violin, a trumpet, a cello, or a drum, brings with it its unique sound. Some may play a melody, others a harmony, and some keep the rhythm. Each of these sounds is different, but when combined, they create a harmonious symphony. In an inclusive setting, each person, with their distinct qualities, comes together with others to form a symphony of collaboration and understanding.

However, people are beautifully complex, and although this complexity is what often breathes life into a workshop, it can also introduce an element of unpredictability, which, if not managed well, can potentially lead to discord among the participants.

The only thing we can do is acknowledge the fact that not everyone will be comfortable speaking up, particularly in group settings. There could be various reasons for this, including individual personality traits, cultural backgrounds, past experiences, or simply the fear of judgment. As a facilitator, it is your responsibility to ensure that every individual in the room feels comfortable expressing their opinions and ideas. In the remainder of this article, I will be introducing some practical principles and techniques that could guide you in facilitating an inclusive workshop.

Preparing For An Inclusive Workshop

If you are familiar with design thinking and design in general, you’ll find similarities between the design process and structuring an inclusive workshop. In design, we start by trying to understand our users, identifying their goals, and then crafting an effective user experience to guide them from start to finish. The same principles apply to designing an inclusive workshop:

  1. Understand the participants,
  2. Recognize their goals,
  3. Plan an engaging experience to achieve these goals.

Here are some “pre-works” you can do to better prepare for your workshop.

Step 1. Make Sure You Include The Right People

The most important thing in any meeting or workshop is including the right participants. Failing to do so could prevent you from guiding the team in order to reach the goals of the workshop.

If you are facilitating a workshop for your own team (or within your company, which you know well), ask yourself the following questions so as to decide if a person should be included:

  • Is the meeting relevant to this person’s work and core responsibilities?
  • Can this person provide critical information, aid in the decision-making, or contribute meaningfully to the conversation?
  • Is this person’s presence necessary to achieve the meeting’s goals?

On the other hand, if you’re facilitating a workshop with an external team, provide a list of criteria that outlines what the ideal participant looks like and ask your client to include all the relevant individuals.

At this stage, bear in mind that adding a new participant not only means that you are bringing in a new viewpoint but you’re also increasing the number of necessary agreements among the members of the group. This could potentially lead to more disagreements and conflicts among different parties. Have a look at the points of agreement graph (below) to better understand how this mechanism works.

Step 2. Know Your Participants Well

Once your participant wish list is set, it’s important to invite all the participants to the workshop in a manner that is welcoming and inclusive — for example, not just sending a calendar invite and expecting them to show up. If it’s feasible, try to arrange a pre-workshop call or meeting with each participant to gain a better understanding of them. Building these personal connections before the workshop is important in ensuring your workshop activities are inclusive and productive.

Here are some more detailed steps to consider.

Personalize The Invitation

Instead of a generic invite, personalize your invitations. Clearly outline the workshop’s purpose and activities and why you think they would be a valuable addition. Be open to participant’s opinions and concerns about attendance. If there’s uncertainty about their availability or relevance to the workshop, offer them an option to contribute asynchronously if they can’t participate in real-time.

An example message could be crafted along these lines:

“Hey Lewis, I am reaching out as I am planning to run a workshop with Max to brainstorm around how we can build the AI dashboard (which is the next initiative on our roadmap), and I would love to invite you to the workshop as I believe your front-end knowledge will help us a lot to understand the tech limitations. How does that sound to you? The workshop will be approximately two hours long and is scheduled for next week. Here’s the high-level agenda…”

A message like this — where you can explain what the workshop will be about, who will be involved, and how they can contribute to the workshop — will help the participant decide whether their involvement will be useful or not.

Schedule Pre-Workshop Conversations

If possible, have a brief, informal chat with the participants, especially if you’re unfamiliar with them. This could be as simple as a quick coffee chat where you just talk about your hobbies and favorite movies. Such interactions can help build rapport before the workshop and provide insights into the participant’s goals and expectations.

Identify Personality Types And Preferences

The personality traits of your workshop participants can be grouped along two main axes: their preference for group work (individualistic vs. collaborative) and their communication style (introverted vs. extroverted). By understanding and accommodating these preferences, you can create a workshop environment that truly values and harnesses the benefits of diversity.

  • Individualistic participants
    They may prefer tasks they can work on independently and discussions in smaller groups. Designing certain portions of the workshop that allow for individual thinking and ideation can help engage these participants.
  • Collaborative participants
    They enjoy large group discussions and team activities. Incorporating collaborative tasks where everyone can contribute can keep these participants involved and motivated.
  • Introverted participants
    They might feel more comfortable with structured turn-taking or with written contributions. They might not voice their thoughts as readily in a group setting, but that doesn’t make their ideas any less valuable. Establishing clear turn-taking rules or offering opportunities for written input can help ensure their voices are heard, too.
  • Extroverted participants
    They might be more engaged in free-flowing discussions or roles that involve presenting to the group. Ensuring that the workshop format has room for open discussions can cater to their preference.

Step 3. Plan The Workshop Steps

Once you have defined your participant list and understand the participants well, the next step is to plan the workshop accordingly to meet their needs.

In the next section, I will share some high-level tips relevant in particular to inclusivity.

The specifics of planning an entire workshop is another topic altogether — I recommend reading a few books on this topic, such as Gamestorming by Dave Gray, Sunni Brown, and James Macanufo and Facilitator’s Guide to Participatory Decision-Making by Sam Kaner, as well as Smashing Magazine articles that will help you dive deeper into the specifics of crafting a workshop. You might also want to look at the 4C framework developed by AJ & Smart, which can guide you in structuring your workshop logically.

Start By Defining The Break Time

No matter the nature of your workshop, it’s important to plan regular breaks which will promote an inclusive environment.

Catering to individuals’ unique needs, be they physical or cognitive, is very important. Breaks help counter the “Zoom fatigue” prevalent in virtual workshops and respect cultural sensitivities by allowing time for personal and cultural practices.

Numerous studies indicate that people can generally focus effectively for about 45 to 50 minutes at a time. Hence, consider scheduling a 5–10 minute break every hour. These intervals offer participants time to relax, regroup, and reset their mental focus, thereby maintaining engagement and productivity throughout the session.

“Excessive focus exhausts the focus circuits in your brain. It can drain your energy and make you lose self-control. This energy drain can also make you more impulsive and less helpful. As a result, decisions are poorly thought out, and you become less collaborative. So what do we do then? Focus or unfocus? In keeping with recent research, both focus and unfocus are vital. The brain operates optimally when it toggles between focus and unfocus, allowing you to develop resilience, enhance creativity, and make better decisions too.”

— Srini Pillay, “Your Brain Can Only Take So Much Focus” (Harvard Business Review)

Choose The Right Tools

The selection of tools in a remote environment can substantially influence participants’ experience. Complex or unfamiliar tools can affect the effectiveness of even the most well-planned workshop. Thus, it’s important to select tools that can help with collaboration, address diverse participants’ needs, and are accessible and straightforward to use.

Below, you’ll find a list of some popular tools for facilitating workshops, including their advantages, disadvantages, and best-suited participant types.

Whiteboard Tools

  • Miro
    Miro is a popular and user-friendly digital whiteboard tool known for its intuitive interface and collaborative features. It’s great for visual learners and those who thrive on a free-form canvas. Additionally, for facilitators, a wide range of workshop templates is provided so that you don’t need to start from scratch. However, this tool can be overwhelming for those who prefer more structured interfaces. In addition, in Miroverse, there are more than 1000+ templates for you to get inspired by and to better plan your workshop.
  • Mural
    Another alternative digital whiteboard platform, Mural, is known for its ability to onboard new users easily. People can join and edit your Mural board without the need to create an account, which reduces friction. However, for facilitators who wish to have more powerful features such as AI, tables, charts, and integrations, Mural might not completely satisfy their needs.
  • FigJam
    FigJam is a top choice for designers and those familiar with Figma. It combines the flexibility of a digital whiteboard and design-focused features. This tool suits visually oriented and design-minded participants alike but may feel less intuitive to those unfamiliar with design software in general.

Video Conferencing Tools

  • Microsoft Teams, Zoom, and Google Meet
    These are the “traditional” tools that almost everyone knows how to use. While their interfaces may lack extensive interactive features (which leads to a somewhat basic look and feel), their key strength lies in their consistent performance and accessibility. Their familiarity among users ensures a low learning curve, contributing to smooth and efficient workshop sessions.
  • Butter
    This tool is purpose-built for running interactive workshops, offering creative features specifically focused on workshops and collaborative meetings. Butter can cater to a broad range of personality types. For extroverted participants, it enables easy active engagement in discussions, while it also allows more introverted participants to express themselves using reactions, emojis, or GIFs in a less confrontational manner.

Group Discussion Tools

  • Mixerchat
    This platform facilitates interactive group discussions. Participants can freely navigate different breakout rooms, engaging in breakout sessions or world café-style activities.

Choose The Activities And Communication Methods

The next and perhaps most critical step is to carefully choose activities that cater to the diversity of your participants. Use the personality types and goals you identified in Step 2 to guide your decisions. Here are some suggestions to help you get started.

If most of your participants are Introverted & Individualistic.
These participants prefer to think through ideas independently before sharing them, and they may be more comfortable in a quieter setting. A few activities for this group of people could be:

  • Silent Brainstorming: Each participant works individually to generate ideas and write them down. After a set period, everyone shares their ideas one by one. This approach gives introverted participants time to think and formulate their ideas before sharing them.
  • Silent Dot-Voting: These tools allow participants to share their views or vote on ideas anonymously, which can be less intimidating than speaking up in a group.

If most of your participants are Introverted & Collaborative.
These participants may enjoy working in groups, but they prefer quieter, more thoughtful discussions. A few activities for this group of people could be:

  • Small Group Discussions: Divide participants into smaller groups of 3-4 people to discuss a topic or question. This setup can feel less overwhelming than large group discussions.

  • Think-Pair-Share: In this activity, participants first consider a question or problem individually, then they pair up to discuss their thoughts, and finally, they share their ideas with the larger group.
  • Fishbowl Conversation: A small group sits in a circle (the fishbowl) to discuss a topic while the rest of the participants observe. After a while, allow participants to switch places, ensuring everyone gets a chance to contribute.

If most of your participants are Extroverted & Individualistic.
These participants enjoy expressing their ideas and might prefer to work independently. A few activities for this group of people could be:

  • Lightning Talks: Each participant prepares a short presentation on a topic related to the workshop’s theme. This activity allows participants to express their ideas and share their expertise.
  • Idea Gallery/Lightning Demo: Participants work individually to create a visual or written representation of their ideas (like a poster), then everyone walks around to view the “gallery” and discuss the ideas.
    Note: The idea is not new and is also known as a “Poster Session.” The goal of a poster session is to create a set of compelling images that summarize a challenge or topic for further discussion. Creating this set might be an “opening act,” which then sets the stage for choosing an idea to pursue, or it might be a way to get indexed on a large topic. The act of creating a poster forces experts and otherwise passionate people to stop and think about the best way to communicate the core concepts of their material.

  • Jigsaw Activity: In this exercise, each participant becomes an “expert” in a specific aspect of a larger topic. They then share their knowledge with the group, allowing for individual exploration and public speaking.

If most of your participants are Extroverted & Collaborative.
These participants enjoy the energy of group discussions and collaborative work. A few activities suitable for this group of people could be:

  • Open Discussions: Provide a topic or question and allow the conversation to flow naturally. Extroverted participants typically thrive in this open format.
  • Group Projects: Split participants into teams and assign a project related to the workshop’s theme. This could be anything from creating a mock-up for a new product to brainstorming strategies for overcoming a business challenge.
  • Role-play: This group activity allows participants to act out different scenarios or perspectives related to the workshop theme, encouraging dynamic discussion and cooperative problem-solving.

Step 4. Estimate The Right Time And Allocate An Extra “Buffer”

Once you have completed planning the workshop activities, if possible, try to conduct a pilot run so that you can decide the appropriate duration for each activity.

Time management is critical for inclusivity since participants may have other engagements, and if time management is out of control, both the facilitator and the participants may feel uncomfortable as they may need to shift focus to other commitments. Therefore, it is crucial to estimate the appropriate time and allocate extra “buffer” time to avoid rushing participants during engaging discussions.

I usually like to add a 20% buffer to each activity to ensure there is always some time to spare in case some people are slower. For instance, if you have set a 10-minute brainstorming session, schedule it to be 12 minutes so that you can have some extra buffer.

Step 5. Send A Pre-note Out

Inclusion often starts before the workshop even begins. A pre-workshop note can make a significant difference in setting the stage for inclusivity. It allows all participants, regardless of their background or understanding of the key topic, to start from a common ground.

For example, if you’re conducting a workshop on project management, your pre-note could include an outline of the topics to be covered, such as agile methodology, risk management, or team leadership. You could also include a brief case study for participants to review before the workshop.

The pre-note can also include logistical details such as the workshop date, time, location (or virtual meeting link), any software they need to install (like Zoom or Microsoft Teams), and what they should bring with them (like a laptop or a notebook). By sending a pre-note, you ensure that all participants come prepared and are aligned with the workshop’s objectives right from the start.

Step 6. Bonus Tip: Personalize The Experience

Once you’ve established the framework of your workshop, it’s time to season it with some personal flair. This “secret sauce” could be a unique icebreaker or an element of surprise that sparks laughter and lightens up the atmosphere.

For instance, I’ve often incorporated the pets of my colleagues into the Miro board during my workshops. The sight of familiar furry friends not only brings a smile but also fosters a sense of community and connection within the team.

Conclusion

This was the first half of our journey exploring inclusive remote workshops where we’ve “peeled back” the layers of their essence and highlighted some critical techniques and approaches to lay out the groundwork. Remember, the key to running a successful inclusive workshop is to know your participants well and to create a space where they feel at ease. Take the time to understand them and shape the workshop activities in such a way that they match participant’s personal preferences. The most important bit, perhaps, is that every attendee should feel valued and heard.

In the second part of this two-part series, I will dive deeper into what you can do during and after the workshop in order to better tailor the experience to the workshop attendees, and I will also introduce you to the P.A.R.T.S. principle, which stands for Promote, Acknowledge, Respect, Transparency, and Share.

Categories: Others Tags:

14 Effective Ways to Generate Positive Online Reviews for Your Business

September 12th, 2023 No comments

If you’ve looked for any business or service online, chances are you’ve noticed the stars (or lack thereof) next to their name. Whether posted on Yelp, uploaded as a quick live video on Instagram, or etched on the eternal stone wall of a company’s Facebook page, reviews are proof that people are excited about your service or product and want to spread the news. But they don’t pop up all by themselves — you’ll need a strategy to generate and respond to them. Here are 14 effective ways to do just that.

1. It all starts with service

People who have a negative experience are more likely to leave a review than those who are satisfied. And that matters because 86% of people read online reviews (and need to see ten positive reviews) before they trust a local business. 

So before you do anything, make sure even your home-based business delivers impeccable service. You might be setting your own hours and calling the shots, but providing exceptional service and products is still critical.

2. Don’t be shy

Many people don’t review a business simply because they were not asked. Ask customers directly if they could take a minute to leave a review. Most people understand that they can influence a business’s success (or failure). They won’t be annoyed by your request.

3. Make it easy 

If you ask for a review and a customer enthusiastically agrees, make it easy on them. Set up profiles on multiple general review sites (i.e., Google, Yelp, and Facebook), and be sure to create a separate profile if your industry has a specialized review platform. Provide direct links to the page, with clear instructions on how to leave a review.

4. Follow up

Sometimes, customers want to leave a review but continue with their day and forget about it. Following up on a lead is key. Wait a few days, then email a reminder and all the links.

5. Automate the ask

Better yet, automate the entire process of asking for reviews. Utilize review generation sites or apps to send a series of emails, starting with one thanking the customer for their business and another a few days later, asking for a review. This removes an administrative task that you might forget to follow up on otherwise.

6. Get your timing right

The best time to ask for a review is when customer satisfaction is at its highest. This might be when the deal closes or when you solve a previously unsolvable problem.

And the worst time? After conflict or when something happens that a customer or client wasn’t expecting. If you can’t solve the issue, it’s best not to ask for a review until you can.

7. Post across social media platforms

The majority of people are on social media, and the biggest swath of potential customers these days — millennials and boomers — turn to a variety of platforms to get reviews and recommendations from friends and their “For You” pages. 

When you’re clear on your customer base, you can tailor posts encouraging them to leave reviews on the social media they use most often. If you don’t serve just one demographic, share these posts widely for more traction and exposure.

8. Incentivize ethically

The Federal Trade Commission (FTC) has stated explicitly that buying reviews violates consumer protection policies, but that doesn’t stop some unscrupulous folks from doing it anyway. Don’t be that person. Buying reviews can be punishable by fines or removal from the platform on which the fake reviews are posted. 

But that doesn’t mean you cannot incentivize people to leave a review. You might offer a discount on future services or hold a drawing for a prize. This encourages participation, is open about the incentive, and doesn’t specifically reward a good review. It’s an ethical move that can help build up goodwill.

9. Accentuate the positive

Just because you can’t pay for positive reviews doesn’t mean you shouldn’t celebrate them when they come in — show off the most glowing praise on your website or social media. 

And don’t just post the written words. Consider reading the review on a video to attract more attention (and garner more reviews).

10. Don’t ignore the negative

It happens. Everyone has an off day or comes across a client who isn’t happy with the service or product. So, what do you do when a negative review comes in?

First, what not to do: Don’t ignore it. Nearly 90% of people read how a company responds to negative reviews and makes decisions about how (or if) a company addresses any issues. Take the time to respond, but don’t argue. Offer your regret about their experience, and provide contact information to discuss the issue offline. The unhappy customer may not respond, but others can see that you reached out.

11. Make sure everyone is on board

When stress levels rise, staff may forget to ask for reviews. Train all staff to ask for reviews during their regular customer interaction. 

But it happens: people forget. If you’ve implemented automated review requests, you’re covered.  

12. Get involved

For new businesses, the main issue with reviews is that your community might not know about you yet. If your advertising budget is low (or non-existent), consider getting more involved in your local community by hosting events, sponsoring teams, and volunteering to set up a table at local fairs and events. This can spread the word about what you offer and get the ball rolling on reviews.

13. Take a survey

Another strategy for gathering reviews as a new business is designing a survey to deliver to current and potential customers. This could cover products or services you already offer, with space to include suggestions for more in the future. People appreciate the opportunity to be heard, but there’s another plus: You can use these surveys to ask for reviews from those who offer the most positive feedback. You could even ask the customer to use their survey comments on your website and social media. That is another way to build positive relationships and trust in your community.

14. Be diligent

Even if you have automated the review request process and are confident reviews are coming in, you must continue to monitor and analyze what people are saying. This feedback doesn’t just affect your bottom line — it can also be instructive about how you can better meet your community’s needs — now and into the future.

Featured Image by Afif Ramdhasuma on Unsplash

The post 14 Effective Ways to Generate Positive Online Reviews for Your Business appeared first on noupe.

Categories: Others Tags:

LimeWire AI Studio Generative Art App

September 12th, 2023 No comments

If you’re looking for the most exciting way to launch a career in AI-generated art, then you’re in the right place.

Categories: Designing, Others Tags: