Remember Tyler Hall’s personal story of a UX moment where the popup sharing context menu on iOS had no visible indication that the content inside was scrollable? The thing his mom wanted to do seemed impossible iOS isn’t alone here — Terence Eden documents essentially the same problem on Android:

I tried sharing a website using Google Chrome for Android. I hit the share button, and a panel popped-up from the bottom of the screen.

Hmmm. It didn’t have the share destination that I wanted. It was early in the morning – when I’m not at my cognitive best – and I was stumped. There is nothing on this screen – other than the icons – to tell me how I can interact with it. There’s no scrollbar, no handle, no “more” icon, nothing.

I would think even just fairly subtle “scroll shadows” would go a long way in both cases, but some serious user testing should be in order here.

The post Yet Another Mobile Context Menu With No Indication it Can Scroll appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Dr. Axel Rauschmayer looks at JSON modules, which is already live in Chrome 91 (but nothing else). It looks just like an ES Modules-style import, only you asset the type at the end.

import configData from './config-data.json' assert {type: 'json'};

How nice is that? Once this makes its way across browsers, we’ve gone on a journey from “you’ll almost definitely want to use an Ajax library” because of the cross-browser complexity and weirdness of XMLHttpRequest to the much nicer (but you still gotta write some code) fetch API, to a one-liner (if what you need is JSON data).

Snagging some JSON data seems like it should be as easy as a one-liner to me, and now it is. I like how the URL can be dynamic now too.

Direct Link to Article — Permalink

The post ECMAScript proposal: JSON modules appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Here’s a really good ol’ post from way back in 2015 all about the nine states of design and how we should think all the edge cases whenever we’re building interfaces. Vince Speelman writes:

Modern UI teams are designing components first; Interfaces are merely the thoughtful composition of components. This leaves an often glaring hole for users on “the unhappy path” — The places where users may, intentionally or not, stray from your idealized flow. As we learn to craft systems rather than pages, we must invest effort into shaping these often missed states of design and create with a component lifecycle that can support everyone. Here’s the lifecycle as I see it:

1. Nothing state
2. Loading
3. None
4. One
5. Some
6. Too many
7. Incorrect
8. Correct
9. Done

During the design process I think everyone (including me!) tends to focus on the ideal state of a component or interface, often leaving the extremely important edge cases forgotten until the last moment. I think I need to stick this list to my screen so I don’t forget it in my next project.

Direct Link to Article — Permalink

The post The Nine States of Design appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Eric doesn’t mince words, especially in the title, but also in the conclusion:

In modern web design and development, displaying an image is a highly intentional act. Alternate descriptions allow us to explain the content of the image, and in doing so, communicate why it is worth including.

Just because an image displays something fanciful doesn’t mean it isn’t worth describing. Announcing its presence ensures that anyone, regardless of ability or circumstance, can fully understand your digital experience.

I like the big where even when a CSS background-image is used, you can still use a “spacer GIF” to add alt text. And speaking of alt descriptions, did you know even Open Graph images can have them?

Direct Link to Article — Permalink

The post Your Image Is Probably Not Decorative appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

I watched Kevin Powell’s video where he was able to recreate a nice typewriter-like animation using CSS. It’s neat and you should definitely check it out because there are bonafide CSS tricks in there. I’m sure you’ve seen other CSS attempts at this, including this site’s very own snippet.

Like Kevin, I decided to recreate the animation, but open it up to JavaScript. That way, we have a few extra tools that can make the typing feel a little more natural and even more dynamic. Many of the CSS solutions rely on magic numbers based on the length of the text, but with JavaScript, we can make something that’s capable of taking any text we throw at it.

So, let’s do that. In this tutorial, I’m going to show that we can animate multiple words just by changing the actual text. No need to modify the code every time you add a new word because JavaScript will do that for you!

Starting with the text

Let’s start with text. We are using a monospace font to achieve the effect. Why? Because each character or letter occupies an equal amount of horizontal space in a monospaced font, which will come handy when we’ll use the concept of steps() while animating the text. Things are much more predictable when we already know the exact width of a character and all characters share the same width.

We have three elements placed inside a container: one element for the actual text, one for hiding the text, and one for animating the cursor.

<div class="container">
  <div class="text_hide"></div>
  <div class="text">Typing Animation</div>
  <div class="text_cursor"></div>
</div>

We could use ::before and ::after pseudo-elements here, but they aren’t great for JavaScript. Pseudo-elements are not part of the DOM, but instead are used as extra hooks for styling an element in CSS. It’d be better to work with real elements.

We’re completely hiding the text behind the .text_hide element. That’s key. It’s an empty div that stretches the width of the text and blocks it out until the animation starts—that’s when we start to see the text move out from behind the element.

In order to cover the entire text element, position the .text_hide element on top of the text element having the same height and width as that of the text element. Remember to set the background-color of the .text_hide element exactly same as that of the background surrounding the text so everything blends in together.

.container {
  position: relative;
}
.text {
  font-family: 'Roboto Mono', monospace;
  font-size: 2rem;
}
.text_hide {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
}

The cursor

Next, let’s make that little cursor thing that blinks as the text is being typed. We’ll hold off on the blinking part for just a moment and focus just on the cursor itself.

Let’s make another element with class .text_cursor. The properties are going to be similar to the .text_hide element with a minor difference: instead of setting a background-color, we will keep the background-color transparent (since its technically unnecessary, then add a border to the left edge of the new .text_cursor element.

.text_cursor{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  border-left: 3px solid black;
}

Now we get something that looks like a cursor that’s ready to move as the text moves:

JavaScript animation

Now comes the super fun part—let’s animate this stuff with JavaScript! We’ll start by wrapping everything inside a function called typing_animation().

function typing_animation(){
  // code here
}
typing_animation();

Next task is to store each and every character of text in a single array using the split() method. This divides the string into a substring that has only one character and an array containing all the substrings is returned.

function typing_animation(){
  let text_element = document.querySelector(".text");
  let text_array = text_element.innerHTML.split("");
}

For example, if we take “Typing Animation” as a string, then the output is:

We can also determine the total number of characters in the string. In order to get just the words in the string, we replace split("") with split(" "). Note that there is a difference between the two. Here, " " acts as a separator. Whenever we encounter a single space, it will terminate the substring and store it as an array element. Then the process goes on for the entire string.

function typing_animation(){
  let text_element = document.querySelector(".text");
  let text_array = text_element.innerHTML.split("");
  let all_words = text_element.innerHTML.split(" ");
}

For example, for a string ‘Typing Animation’, the output will be,

Now, let’s calculate the length of the entire string as well as the length of each and every individual word.

function typing_animation() {
  let text_element = document.querySelector(".text");
  let text_array = text_element.innerHTML.split("");
  let all_words = text_element.innerHTML.split(" ");
  let text_len = text_array.length;

  const word_len = all_words.map((word) => {
    return word.length;
  });
}

To get the length of the entire string, we have to access the length of the array containing all the characters as individual elements. If we’re talking about the length of a single word, then we can use the map() method, which accesses one word at a time from the all_words array and then stores the length of the word into a new array called word_len. Both the arrays have the same number of elements, but one contains the actual word as an element, and the other has the length of the word as an element.

Now we can animate! We’re using the Web Animation API because we’re going with pure JavaScript here—no CSS animations for us in this example.

First, let’s animate the cursor. It needs to blink on and off infinitely. We need keyframes and animation properties, both of which will be stored in their own JavaScript object. Here are the keyframes:

document.querySelector(".text_cursor").animate([
  {
    opacity: 0
  },
  {
    opacity: 0, offset: 0.7
  },
  {
    opacity: 1
  }
], cursor_timings);

We have defined three keyframes as objects which are stored in an array. The term offset: 0.7 simply means that after 70% completion of the animation, the opacity will transition from 0 to 1.

Now, we have to define the animation properties. For that, let’s create a JavaScript object that holds them together:

let cursor_timings = {
  duration: 700, // milliseconds (0.7 seconds)
  iterations: Infinity, // number of times the animation will work
  easing: 'cubic-bezier(0,.26,.44,.93)' // timing-function
}

We can give the animation a name, just like this:

let animation = document.querySelector(".text_cursor").animate([
  // keyframes
], //properties);

Here’s a demo of what we have done so far:

Great! Now, let’s animate the .text_hide element that, true to its name, hides the text. We define animation properties for this element:

let timings = {
  easing: `steps(${Number(word_len[0])}, end)`,
  delay: 2000, // milliseconds
  duration: 2000, // milliseconds
  fill: 'forwards'
}

The easing property defines how the rate of animation will change over time. Here, we have used the steps() timing function. This animates the element in discrete segments rather than a smooth continuous animation—you know, for a more natural typing movement. For example, the duration of the animation is two seconds, so the steps() function animates the element in 9 steps (one step for each character in “Animation”) for two seconds, where each step has a duration of 2/9 = 0.22 seconds.

The end argument makes the element stay in its initial state until the duration of first step is complete. This argument is optional and its default value is set to end. If you want an in-depth insight on steps(), then you can refer this awesome article by Joni Trythall.

The fill property is the same as animation-fill-mode property in CSS. By setting its value to forwards, the element will stay at the same position as defined by the last keyframe after the animation gets completed.

Next, we will define the keyframes.

let reveal_animation_1 = document.querySelector(".text_hide").animate([
  { left: '0%' },
  { left: `${(100 / text_len) * (word_len[0])}%` }
], timings);

Right now we are animating just one word. Later, we will see how to animate multiple words.

The last keyframe is crucial. Let’s say we want to animate the word “Animation.” Its length is 9 (as there are nine characters) and we know that it’s getting stored as a variable thanks to our typing_animation() function. The declaration 100/text_len results to 100/9, or 11.11%, which is the width of each and every character in the word “Animation.” That means the width of each and every character is 11.11% the width of the entire word. If we multiply this value by the length of the first word (which in our case is 9), then we get 100%. Yes, we could have directly written 100% instead of doing all this stuff. But this logic will help us when we are animating multiple words.

The result of all of this is that the .text_hide element animates from left: 0% to left: 100%. In other words, the width of this element decreases from 100% to 0% as it moves along.

We have to add the same animation to the .text_cursor element as well because we want it to transition from left to right along with the .text_hide element.

Yayy! We animated a single word. What if we want to animate multiple words? Let’s do that next.

Animating multiple words

Let’s say we have two words we want typed out, perhaps “Typing Animation.” We animate the first word by following the same procedure we did last time. This time, however, we are changing the easing function value in the animation properties.

let timings = {
  easing: `steps(${Number(word_len[0] + 1)}, end)`,
  delay: 2000,
  duration: 2000,
  fill: 'forwards'
}

We have increased the number by one step. Why? Well, what about a single space after a word? We must take that into consideration. But, what if there is only one word in a sentence? For that, we will write an if condition where, if the number of words is equal to 1, then steps(${Number(word_len[0])}, end). If the number of words is not equal to 1, then steps(${Number(word_len[0] + 1)}, end).

function typing_animation() {
  let text_element = document.querySelector(".text");
  let text_array = text_element.innerHTML.split("");
  let all_words = text_element.innerHTML.split(" ");
  let text_len = text_array.length;
  const word_len = all_words.map((word) => {
    return word.length;
  })
  let timings = {
    easing: `steps(${Number(word_len[0])}, end)`,
    delay: 2000,
    duration: 2000,
    fill: 'forwards'
  }
  let cursor_timings = {
    duration: 700,
    iterations: Infinity,
    easing: 'cubic-bezier(0,.26,.44,.93)'
  }
  document.querySelector(".text_cursor").animate([
    {
      opacity: 0
    },
    {
      opacity: 0, offset: 0.7
    },
    {
      opacity: 1
    }
  ], cursor_timings);
  if (all_words.length == 1) {
    timings.easing = `steps(${Number(word_len[0])}, end)`;
    let reveal_animation_1 = document.querySelector(".text_hide").animate([
      { left: '0%' },
      { left: `${(100 / text_len) * (word_len[0])}%` }
    ], timings);
    document.querySelector(".text_cursor").animate([
      { left: '0%' },
      { left: `${(100 / text_len) * (word_len[0])}%` }
    ], timings);
  } else {
    document.querySelector(".text_hide").animate([
      { left: '0%' },
      { left: `${(100 / text_len) * (word_len[0] + 1)}%` }
    ], timings);
    document.querySelector(".text_cursor").animate([
      { left: '0%' },
      { left: `${(100 / text_len) * (word_len[0] + 1)}%` }
  ], timings);
  }
}
typing_animation();

For more than one word, we use a for loop to iterate and animate every word that follows the first word.

for(let i = 1; i < all_words.length; i++){
  // code
}

Why did we take i = 1? Because by the time this for loop is executed, the first word has already been animated.

Next, we will access the length of the respective word:

for(let i = 1; i < all_words.length; i++){
  const single_word_len = word_len[i];
}

Let’s also define the animation properties for all words that come after the first one.

// the following code goes inside the for loop
let timings_2 = {
  easing: `steps(${Number(single_word_len + 1)}, end)`,
  delay: (2 * (i + 1) + (2 * i)) * (1000),
  duration: 2000,
  fill: 'forwards'
}

The most important thing here is the delay property. As you know, for the first word, we simply had the delay property set to two seconds; but now we have to increase the delay for the words following the first word in a dynamic way.

The first word has a delay of two seconds. The duration of its animation is also two seconds which, together, makes four total seconds. But there should be some interval between animating the first and the second word to make the animation more realistic. What we can do is add a two-second delay between each word instead of one. That makes the second word’s overall delay 2 + 2 + 2, or six seconds. Similarly, the total delay to animate the third word is 10 seconds, and so on.

The function for this pattern goes something like this:

(2 * (i + 1) + (2 * i)) * (1000)

…where we’re multiplying by 1000 to convert seconds to milliseconds.

The longer the word, the faster it is revealed. Why? Because the duration remains the same no matter how lengthy the word is. Play around with the duration and delay properties to get things just right.

Remember when we changed the steps() value by taking into consideration a single space after a word? In the same way, the last word in the sentence doesn’t have a space after it, and thus, we should take that into consideration in another if statement.

// the following code goes inside the for loop
if (i == (all_words.length - 1)) {
  timings_2.easing = `steps(${Number(single_word_len)}, end)`;
  let reveal_animation_2 = document.querySelector(".text_hide").animate([
    { left: `${left_instance}%` },
    { left: `${left_instance + ((100 / text_len) * (word_len[i]))}%` }
  ], timings_2);
  document.querySelector(".text_cursor").animate([
    { left: `${left_instance}%` },
    { left: `${left_instance + ((100 / text_len) * (word_len[i]))}%` }
  ], timings_2);
} else {
  document.querySelector(".text_hide").animate([
    { left: `${left_instance}%` },
    { left: `${left_instance + ((100 / text_len) * (word_len[i] + 1))}%` }
  ], timings_2);
  document.querySelector(".text_cursor").animate([
    { left: `${left_instance}%` },
    { left: `${left_instance + ((100 / text_len) * (word_len[i] + 1))}%` }
  ], timings_2);
}

What’s that left_instance variable? We haven’t discussed it, yet it is the most crucial part of what we’re doing. Let me explain it.

0% is the initial value of the first word’s left property. But, the second word’s initial value should equal the first word’s final left property value.

if (i == 1) {
  var left_instance = (100 / text_len) * (word_len[i - 1] + 1);
}

word_len[i - 1] + 1 refers to the length of the previous word (including a white space).

We have two words, “Typing Animation.” That makes text_len equal 16 meaning that each character is 6.25% of the full width (100/text_len = 100/16) which is multiplied by the length of the first word, 7. All that math gives us 43.75 which is, in fact, the width of the first word. In other words, the width of the first word is 43.75% the width of the entire string. This means that the second word starts animating from where the first word left off.

Last, let’s update the left_instance variable at the end of the for loop:

left_instance = left_instance + ((100 / text_len) * (word_len[i] + 1));

You can now enter as many words as you want in HTML and the animation just works!

Bonus

Have you noticed that the animation only runs once? What if we want to loop it infinitely? It’s possible:

There we go: a more robust JavaScript version of a typewriting animation. It’s super cool that CSS also has an approach (or even multiple approaches) to do the same sort of thing. CSS might even be the better approach in a given situation. But when we need enhancements that push beyond what CSS can handle, sprinkling in some JavaScript does the trick quite nicely. In this case, we added support for all words, regardless of how many characters they contain, and the ability to animate multiple words. And, with a small extra delay between words, we get a super natural-looking animation.

That’s it, hope you found this interesting! Signing off.

The post Typewriter Animation That Handles Anything You Throw at It appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

You have been looking for a theme for your website. You haven’t yet settled on all the design details or come across a specialty theme that appears to have what you might need. Then, a multipurpose theme would be a wise choice.

Multipurpose WordPress themes have become extremely popular because of the flexibility they offer. Also, because of their relative ease of use and the powerful tools, you will usually find built into them.

With a good multipurpose theme at your fingertips, you are usually in a position to build anything. You can build a simple personal blogging site or a complex multifunctional site for a client. To make life a little easier, most multipurpose WordPress themes have features to help you get started quickly and in the right direction.

Here is a superb collection of 7 of the top multipurpose WordPress themes on the market today. These themes can help you build virtually any kind of website.

1. Betheme – Website Builder for WordPress with 600+ Pre-Built Websites

BeTheme has long been one of the most popular multipurpose WordPress themes. Not content to rest on their laurels, BeTheme’s authors took suggestions from their customers and created a better builder.

The Live Builder is 60% faster. Its UI is so intuitive that you won’t waste time learning how to use it. It features exciting new and powerful capabilities and performs familiar page-building features better than ever.

With the Live Builder, you can –

• Edit live content visually without switching between backend and frontend; you can view an element and customize it simultaneously.
• Use the Revisions feature to create, save, and restore what you want; no more lost changes thanks to the Autosave, Update, Revision, and Backup options.
• Access the Pre-built Sections Library: find the section or block you need and add it to your page.
• Select from the large and diverse selection of Items; categories include typography, boxes, blocks, design elements, loops, etc., to help you create exactly what you have in mind.

Click on the banner to learn more.

2. Total WordPress Theme

The introduction emphasized the ease of use and flexibility most multipurpose themes provide. Total has both in abundance thanks to its drag and drop frontend page builder and hundreds of built-in styling options.

Highlights include –

• An advanced version of the WPBakery page builder.
• 40+ single click importable demos, 100+ page-building modules, and 500+ styling settings to help you create exactly what you want.
• Dynamic Template and Pre-styled Theme Cards to tailor dynamic templates for your posts.
• Templatera and Slider Revolution plugins plus full WooCommerce compatibility.
• A selection of developer-friendly hooks, filters, and snippets for future theme customization.

Even though Total was designed with perfection in mind, or perhaps because of it, it is the right choice if you need to get a high-quality website up and running in a short period of time. Total’s 47,000+ customers seem to agree.

Click on the banner to learn more.

3. Avada Theme

The fact that Avada is the all-time best-selling WordPress theme with more than 450,000 sales to date might be all the reason you need to choose it, but there are plenty of other good reasons for doing so as well.

For example –

• Avada’s drag and drop page builder, together with the Fusion Page and Fusion Theme options, makes building a website quick and easy.
• Single-click import demos, stylish design elements, and pre-built websites are there to help speed up your project’s workflow and impart a high level of quality to the finished product.
• Avada’s Dashboard organizes your work, and its Dynamic Content System gives you maximum flexibility and full control over your project.

Click on the banner to find out more about this fast, responsive, and WooCommerce-compatible theme.

4. Uncode – Creative Multiuse & WooCommerce WordPress Theme

Uncode will be an ideal choice for building creative, magazine, and blogging websites and for building agency sites as well. This fast, sleek, pixel-perfect multipurpose theme has sold more than 80,000 copies to date.

Uncode’s impressive features include –

• More than 450 Wireframe section templates that can easily be modified and combined.
• A Frontend Editor on steroids coupled with the WooCommerce custom builder.
• A “must-see” gallery of user-created websites.

5. TheGem – Creative Multi-Purpose High-Performance WordPress Theme

TheGem is literally a Swiss Army knife of website building tools that make it ideal for creating business, portfolio, shop, and magazine websites.

Among the many gems included in the package are these –

• The popular and industry-leading WPBakery and Elementor front-end page builders.
• 400+ beautiful pre-built websites and templates together with 300+ pre-designed section templates.
• A splendid collection of WooCommerce templates for shop-building projects.

6. Impeka – Creative Multipurpose WordPress Theme

With Impeka, flexibility is almost an understatement. This intuitive, easy-to-work-with multipurpose theme gives beginners and advanced users alike complete freedom to dream up their ideal website and then make it happen – and fast.

You can –

• Choose among the Enhanced WPBakery, Elementor, and Gutenberg page builders.
• Select from 50 handcrafted design elements and Impeka’s 10 custom blocks.

Impeka is perfect for building every website type, from blogging and online stores to commercial businesses and corporations.

7. Blocksy – Gutenberg WordPress Theme

Blocksy is a blazing fast and lightweight WordPress theme that was built with the Gutenberg editor in mind and is seamlessly integrated with WooCommerce.

• Blocksy is responsive, adaptive, translation ready, and SEO optimized.
• Blocksy plays well with all the popular WordPress page builders, including Elementor, Beaver Builder, and Brizy.

This popular multipurpose WordPress theme can be used to create any type of website in no time.

Of all the design choices a WordPress user needs to make, choosing a WordPress theme for the task at hand is perhaps the most important.

That choice, more often than not, involves a multipurpose theme. Most multipurpose WordPress themes are extremely flexible. So, you can avoid the tedious and time-consuming task of trying to find exactly the right one for your niche and for the job.

Multipurpose themes work for any website niche and offer whatever an admin might need.

Choose one from these 7 Best Multipurpose WordPress Themes, and you should be able to create your website with relative ease.

Source

The post  7 Top Multipurpose WordPress Themes You Should Check Out first appeared on Webdesigner Depot.

Craft CMS is increasing in popularity, and as it does, the previously relatively scant range of plugins is growing rapidly.

There are plugins for Craft ranging from simple field utilities to the full ecommerce solution provided by Pixel & Tonic — the makers of Craft.

An early decision that has borne fruit for Craft has been the plugin licensing model. Paid plugins for Craft charge an initial license fee and then a reduced annual renewal price for updates. This ongoing payment structure ensures plugin maintenance is economically viable for developers, and as a result, Craft plugins tend to be updated more often and are abandoned less.

The best plugins depend very much on the site you’re developing and what you’re trying to achieve. However, some are so universally useful that I install them on virtually every site I build; here’s a list.

1. Redactor

Installing Redactor is a no-brainer when it comes to picking your plugins. Maintained by Pixel & Tonic, it’s a rich text field that extends Craft‘s basic text input. It’s so useful it may as well be part of the core Craft code.

One of the best features is the ease with which Redactor can be customized. Just duplicate the settings file inside the config directory and edit its contents to alter what editing options are available; it’s simple to create anything from a field with a bold option to a full rich text editor. In addition, each Redactor field can be set to use any of the settings files.

Free

2. Retcon

When you’re outputting code from a rich text field like Redactor, you’ll get clean HTML output — which most of the time is what you want. However, if you’re using something like Tailwind, those classes are non-negotiable. I’m not a fan of Tailwind, but I am a fan of using classes in my CSS selectors instead of element names.

Retcon is an invaluable plugin that extends Twig filters to supply a host of options when you’re outputting content. It can add classes to elements, insert attributes, modify the element type, and tons more.

Free

3. Venveo Bulk Edit

During the life of a site, there’s a good chance that you’re going to have to alter fields and sections after the content is in. It’s a common problem if you’re importing data from another platform using FeedMe, or if you have an indecisive client, or even if the site is simply growing.

Venveo Bulk Edit is a plugin that integrates closely with the Craft UI and allows you to edit the contents of multiple entries at once. This plugin has saved me hundreds of hours that would otherwise have been spent painstakingly editing entries one at a time.

Free

4. Super Table

At some point, you’re going to need a configurable list of inputs. Maybe you’re creating a list of documents to download, building a directory, or even your site navigation. You could create a new channel and then add the entries as an entry field, or even set it up with a matrix field, but this is awkward to edit even with Craft 3.7’s new editing experience.

I’m a big fan of opting for the simplest solution, and in this case, the simplest option is a table field. Unfortunately, Craft’s built-in table field has limited field type support. Super Table, on the other hand, supports almost anything, giving you a powerful, orderable set of fields.

Free

5. No-Cache

Craft has a really powerful caching system. It allows you to cache whole or partial templates, and it‘s intelligent enough to know when you’ve edited content that has been cached so that it can be re-cached.

Understanding Craft’s caching is vital; as a very general guide, dynamic content benefits from caching, but static content does not.

However, you will regularly encounter situations where you want to opt out of the caching. A blog post, for example, could be cached, but the time since it was posted must not be, or every post would appear to have been published “today” until the cache is refreshed.

The No-Cache plugin adds a couple of Twig tags that allow you to temporarily opt-out of the cache. This means that you can cache larger sections of your templates, simplifying your caching decisions considerably while still being able to fine-tune what is cached.

Free

6. Retour

Sooner or later, you’re going to have users hitting 404 errors. If you’re restructuring a site and changing the architecture, it will be sooner. To avoid breaking the UX and SEO, you need to add redirects.

Retour is a helpful plugin that sits in your dashboard side menu. Anytime a user triggers a 404, Retour will flag it up, so you can decide how to redirect the URL in the future.

$59 for the first year; $29/year for updates after that

7. Sherlock

One of Craft’s big strengths is its security. A lot of attention has gone into making sure that the core installation uses best practices. However, as with any CMS, potential security vulnerabilities start to creep in as soon as you introduce 3rd-party code (WordPress’ biggest vulnerability by far is its plugins).

You only need to look at the size of the vendor directory in your installation to see how many 3rd-party dependencies your site has. Even a small site is a house of cards.

Sherlock is a security scanner that performs a number of different tasks to help you stay secure, from checking on security threats in 3rd-party scripts to checking directory permissions. The paid version will even let you limit IP addresses if your site comes under attack — although your hosting company may well do this for you.

Lite: Free
Plus: $199 for the first year; $99/year for updates after that
Pro: $299 for the first year; $149/year for updates after that

8. Imager X

Craft’s built-in image transforms are a little limited. For example, they only work with actual assets, not remote images.

Imager X is an excellent plugin that, among many benefits, allows you to transform remote images. In addition, its refined syntax is perfect for coding complex art direction.

Imager X isn’t cheap, but considering the enormous importance of image optimization, unless you have a straightforward set of images to manipulate, it’s an investment you’ll be glad you made.

Lite: $49 for the first year; $29/year for updates after that
Pro: $99 for the first year; $59/year for updates after that

9. SEOMatic

SEOMatic is the SEO solution most Craft developers default to, including Pixel & Tonic themselves.

You’ll need to define the basics in its settings, and you may find yourself creating extra fields specifically for it to pull data from, but the handy progress bars on its dashboard page will give you an overview of what’s set and what needs to be done.

SEOMatic is another premium plugin, but implementing it is far simpler and cost-effective than digging through all those meta tags and XML files yourself.

$99 for the first year; $49/year for updates after that

Must-Install Craft CMS Plugins

The Craft ecosystem is rapidly growing, and the diversity of the plugins available increases as Craft is utilized for more and more sites.

But despite the lure of shiny new plugins, there are some tools that I return to again and again either because they elegantly fill a gap in the core Craft feature set or because I’ve tried them, and I trust them to be robust.

These are the plugins that I have found most useful in the last couple of years, and installing them is the first thing I do when I set up a new Craft installation.

Source

The post 9 Must-Install Craft CMS Plugins first appeared on Webdesigner Depot.

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.

The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

40 New Startup Websites and Landing Pages for Inspiration

Is It Time for Web Designers to Retire the Slider?

Exciting New Tools for Designers, July 2021

24 Beautiful Examples of Gradient Websites

Towards Richer Colors on the Web

3 Kinds of Tech Debt

20 Free Psychedelic Fonts All Designers Must Have

10 Graphic Designers Reimagine the Iconic Instagram Logo

What is WordPress 5.8’s Query Loop Block?

Helvetica Now Variable Offers One Million Fonts in a Single File

Source

The post Popular Design News of the Week: July 12 2021 – July 18, 2021 first appeared on Webdesigner Depot.