Generative artificial intelligence is changing the way we design, build and market digital experiences. In 2025 every major creative platform has rolled out AI‑powered features that promise to speed up production and make it easier to keep projects on brand. This article looks at the latest releases from Figma, Canva and Adobe to help designers and marketers decide which tools are worth exploring.

Figma’s new AI‑enabled suite

Figma used its 2025 Config conference to announce a set of products that extend the design tool into a complete creation platform:

1. Draw – A native vector tool with brushes, a shape builder and the ability to place text on a path. It makes sketching high‑fidelity illustrations directly in Figma feel as natural as drawing on paper.
2. Sites – A publishing tool that turns Figma frames into fully responsive websites. Sites offers pre‑built blocks, an auto‑provisioned SSL certificate and a live HTML/CSS view so that designers can see how layouts will render on the web without leaving the editor.
3. Buzz – A content factory for bulk asset creation. Set up channel presets, schedule exports and keep colours and typefaces in sync across all outputs.
4. Make – An AI assistant that turns plain‑language prompts into interactive prototypes. Make wires up interactions automatically and even generates readable React and Tailwind code to jump‑start development.

These tools go beyond interface design. They close the gap between early sketches and production‑ready sites, allowing teams to prototype, publish and iterate from one place.

Canva Create 2025 highlights

Canva is also positioning itself as a one‑stop shop for design and content. The company’s 2025 release introduced:

• Visual Suite 2.0 – Slides, documents, whiteboards and videos can be combined in a single design. Each page has its own layout, making it easy to produce rich multimedia presentations or reports.
• Data tools – Spreadsheets and charts can be transformed into on‑brand visuals, helping teams repurpose data across social posts, blog graphics and reports.
• Upgraded AI – Canva’s new assistant drafts presentations, documents and images from a single prompt. It can even generate visuals inspired by a reference image, saving time when working with clients.
• Canva Code – A no‑code tool that lets users build simple apps, games and interactive websites just by describing them. This opens up web creation to anyone, even if they have no programming experience.
• Bonus features – Improved diagramming tools, a better stock photo library, adjustable audio tracks and bulk image resizing.

By combining design, documents and now low‑code development, Canva is evolving into a full marketing suite where teams can plan, create and publish from one place.

Adobe’s generative marketing innovations

Adobe’s announcements at the 2025 Cannes Lions festival focused on bringing AI deeper into marketing workflows:

• Customer Experience Orchestration (CXO) – A new platform that combines creativity and marketing data so brands can personalise experiences across channels. It’s designed to break down silos between design teams and marketing teams.
• GenStudio for Performance Marketing – A generative‑AI‑first app that uses Adobe Firefly to produce on‑brand campaign content and short‑form video ads. Marketers can generate, edit and reuse assets without calling in a designer.
• Firefly Services – A set of APIs for tasks like resizing assets, generating 3D imagery and creating digital avatars. This makes it easier to automate repetitive tasks and maintain consistency across campaigns.
• Firefly Creative Production – A no‑code interface that handles colour grading and resizing at scale, freeing up editors for more creative tasks.
• Adobe LLM Optimizer – A tool that analyses generative search traffic and suggests content adjustments to improve a brand’s visibility in AI‑powered browsers.

These products show Adobe’s ambition to bring AI into every stage of the creative process, from concept to distribution.

Key takeaways

• Generative tools are moving beyond hype and into practical workflows. Figma’s Sites and Make bridge the gap between design and code, while Canva and Adobe offer complete content pipelines.
• Investing time to learn these platforms will pay dividends. They can reduce production cycles, ensure brand consistency and help small teams compete with larger agencies.
• Start with one or two features that solve a real problem — such as Figma Sites for rapid web publishing or Canva’s data tools for social media graphics — and expand from there.

By staying on top of these changes and experimenting with the tools that fit your projects, you can keep your creative work fresh and efficient.

So, ACF, one of the best developer plugins of the last century, is now part of the Delicious Brains family. What does this mean for ACF, ACF Pro and the vast ACF client base?

What are ACF and ACF Pro?

Elliot Condon, the sole developer behind ACF to date, has made one of the most goto developer-focused plugins of the last 10 years. It’s so good for WordPress that I don’t think I’m alone in saying that he has single-handedly had a major impact on the success of the WordPress platform!

ACF (Advanced Custom Fields) is a well-thought-out, feature-rich plugin that allows developers to easily manage the editing experience and data collection for custom solutions. It’s primarily used to manage custom meta fields in the postmeta table, but does a lot more. We’ve used the Pro version on many, many client websites to solve a myriad of challenges, from making it easier for clients to manage their content to extending product data on e-commerce shops. It’s incredibly stable and has evolved wonderfully over the years. I don’t think I would use WordPress anywhere near as much without it!

Who are Delicious Brains?

If you’re a WordPress developer, then it’s very likely you’ve needed to migrate or copy a WordPress database. There are a few ways to do this and in my very early days of working with WordPress, I found it so ugly migrating the database that it actually made me almost lose interest in the platform. Eventually, I found ways to work with it, such as Duplicator Pro (another great plugin), but the process became a dream (and somewhat exciting) when I started using WP Migrate DB Pro. The guys from DB had not only solved one of the shittiest chores in WordPress, they’d made it a pleasant experience – come on, those green progress bars are somehow very mesmerising!

Why is ACF being acquired by Delicious Brains?

Listening to their podcast regarding the announcement, the acquisition seems to be a perfect fit for both parties – Elliot gets to enjoy life outside his laptop (his words) and Delicious Brains get to take on one of the most goto plugins for WordPress.

What’s very clear from the podcast is that this seems like an excellent fit, as ACF has been carefully crafted and evolved over the last 10 years, but at the hands of a single, passionate developer. Whereas, with DB, which makes awesome WP plugins, it will get the expertise from the whole, growing team, whilst keeping the same attention to detail that we’ve come to take for granted from Elliot’s work.

Will the pricing change?

Who knows? At this stage Brad at DB has stated that there will be no change to the pricing structure that’s already in place, even lifetime will be honoured, and looking at how DB’s offerings are priced versus how ACF Pro is, I think they’re pretty aligned already, so would not expect any scare surprises – we’ll see.

This post describes how to create a horizontal grid with 2 rows and infinite columns using CSS grid. This technique uses display: grid, which finally has decent browser coverage.

Like CSS flex(box), CSS grid is incredibly flexible for creating relatively complex layouts and making seemingly simple ones, well simple (which wasn’t always the case, like centring content both vertically and horizontally).

Making a grid that scrolls horizontally using CSS grid & grid-auto-flow

Scrolling up and down is the default way to consume web page content. In order to scroll vertically to consume the content, we can need to tell the browser it’s okay to overflow on the x-axis and we need to tell the content it doesn’t need to wrap to the viewport.

There are a few ways to do this, but this post will demonstrate the grid way:

.grid.scroll-x {
    display: grid;
    grid-auto-flow: column;
    /* should, in theory, work without overflow-x */
    overflow-x: scroll;
}

As can be seen in the code above, the grid-auto-flow property is the key here. Used in conjunction with display: flexand set to column will tell the browser to render the element’s children as columns, which is what we want!

In order to reach the solution, this post set out to achieve all that’s needed now is to spread this grid element’s children over 2 rows. Fortunately, using grid this is really easy.

Making a horizontal grid with 2 rows

The code above will render the horizontal elements, as required. If we introduce another property to this code snippet, grid-template-rows, as per the following code, the element’s children will now be not only horizontally scrollable but they will also be rendered over 2 rows:

.grid.scroll-x--rows-2 {
    display: grid;
    /* auto auto is telling the browser to render two rows, if needed */
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    overflow-x: scroll;
}

This is perfect, just what was needed, and it was achieved with just 3 lines of CSS grid properties (plus overflow-x: scroll you feel the need to include it). However, there’s one small caveat;  the layout’s rendered in a reversed ‘N’ order, with each column output, then the rows for that column. This outputs the first 2 elements in rows, then adds subsequent elements as columns to the right (as modelled below). This means that if the layout was designed for 2 columns there would need to be at least 3 items to render a second column, but this can be handled with the logic to make sure there are at least 3 items before applying the grid-template-rows property.

Conclusion

The display: grid CSS property is incredibly flexible and I think this scenario demonstrates a great use-case. Yes, this could have been done in other ways, for example, I used negative margins to create this horizontal masonry layout of cards, but the CSS grid approach feels cleaner and more robust.

If you’d like to implement something like this in your project, please get in touch as we’re passionate about making the web look great.

I’m a sucker for performance gains to the point that I’m convinced I’m actually losing time overthinking it –

A good example is CSS delivery and it’s always interesting to get others’ opinions on how important they consider styling performance to be and how they measure it.

Inlining – good/bad/ugly?

Good

I see genuine reasons to inline certain styling rules, for use cases such as;

• a one-off element style
• a style that requires browser/JS intervention
• overriding nasty !important rules

Good use case: inline background-image

<div class="card" style="background-image: url({{ $just_in_time_image_url }})">[...]</div>

Aside: This isn’t the best example, as background images should really be responsive;

<style>
  .card {
    background-image: url({{ $just_in_time_image_url }});
  }
  @media (min-width: {{ $breakpoint_width }}) {
    .card {
      background-image: url({{ $just_in_time_image_url }});
    }
  }
</style>

Beyond these, I’m all for steering away from it.

Bad

IMO, whenever the above doesn’t apply the rule should be contained in a stylesheet. I see the following used inline, which I would absolutely put in a stylesheet;

• repeated inline styling spitting out the same rules – “Always try to be DRY“
• brand-specific rules – argh!

Bad use case: inline brand colours

<div class="card" style="color: #2457ba; background-color: #a0d8c6">[...]</div>

Better still, use a preprocessor, such as SASS, to reduce maintenance overheads.

Ugly

WP plugins. I am amazed at the number of plugins that make excessive use of inlining. My best guesses as to why they do this are;

• inline rules, well…rule – their cascading rank is high (and used in conjunction with !important they are simply brute force bullies)
• the plugin’s styling will not be in the cascading rules of non-plugin elements
• to annoy me

Ugly use case: inline rule with !important

<div class="card" style="opacity: 0.5 !important">[...]</div>

Closing words

I love building websites and get a lot of satisfaction out of my clients’ sites working hard for them – both in terms of optimising for search engines and for great user experiences.

A note on SEO: I’m not a fan of “SEO Experts”, as they are more-often-than-not focusing on one very specific area of SEO; content. Don’t get me wrong, “Content is king!”, but it’s only part of the puzzle. A good website should;

• load fast, with optimised assets
• look great on mobiles, tablets and desktops, alike
• be easy to use and navigate*

*in hipster terms; provide a good UX design – aka User Experience

When a site is fast, easy to use and has great content (the things actual users are interested in) SEO rankings will naturally improve, as these are the core metric that search engines are concerned with.

Note on low-budget websites: I’m not a fan of the crap out there that’s lowering the standards and the vast number of budget websites that smaller client’s get lumbered with. This is a false economy, as a good website will work hard and, assuming it’s built to perform, it will more than pay for itself.

If you’re looking for a better website, feel free to call for a free consultation with one of the team.

Free Consultation

Have you ever needed to convert the string immediately before br tags and wrap it in span tags instead? Me too.

There is very likely a regex solution but here’s a very simple way to achieve it using string and array functions.

/**
 * Replace linebreaks with span tags
 *
 * Wraps each string immediately before a linebreak in span tags and removes the linebreak.
 *
 * @param string $string        Original string that may have linebreaks (\r\n\
\
)
 * @param string $span_class    Styling class for span tags
 * @return string               HTML string with linebreaks replaced with span tags
 */
function nl2span($string = '', $span_class = 'span') : string {
    // standardise line breaks
    $nl = "\n";
    $string = str_replace(["\r\n", "\r", "
", "
"], $nl, $string );

    // just return the original string if there aren't any linebreaks
    if (!str_contains($string, $nl)) return $string;

    // remove contiguous linebreaks
    $string = preg_replace( "/$nl+/", $nl, $string );

    // convert string to array of parts
    $string_to_array = explode($nl, $string);

    // pop the last part as it will not be wrapped in a span
    $after_nl = array_pop($string_to_array);

    // declare var for spanned elements
    $array_to_string = '';

    // build spanned elements
    foreach ($string_to_array as $index => $part) {
        // create a unique span class for each part
        $unique_span = (int) $index + 1;
        $array_to_string .= sprintf(
            '<span class="%1$s %1$s-%2$s">%3$s</span>',
            $span_class,
            $unique_span,
            $part);
    }

    // cleanup (if you feel the need)
    unset($nl, $string, $string_to_array);

    // append the last part and return
    return $array_to_string . $after_nl;
}

Side note:

str_contains is an Illuminate helper function (and PHP8). If you don’t use this Illuminate or PHP8, then replace it in the code above with the following:

// just return the original string if there aren't any linebreaks
$has_breaks = false;
foreach ((array) $string as $needle) {
    if ($needle !== '' && mb_strpos($string, $needle) !== false) {
        $has_breaks = true;
    }
}
if (!$has_breaks) return $string; 

Conclusion

So there it is. If you ever come across the odd occasion where you need to wrap the string immediately before a break tag with span tag, then just drop this into your project’s PHP code and you’re good to go! Or get in touch and we’ll gladly assist.

We use VirtualBox for the local development of websites, this article walks through the process of updating it to at least 5.2.22.

Why update VirtualBox?

Simple: Older versions of VirtualBox will not be compatible with macOS Mojave.

The simple fix

Grab the latest version of VirtualBox, install it and you’re!

Conclusion

As we use VirutalBox via the command line and this tripped us up for some minutes because we didn’t see the . Hopefully, if you come across this article in under a few minutes, you’ll spend less time fixing it than we did. Subscribe to our newsletter to receive more useful nuggets like this.

Our research revealed that this seemingly obvious requirement wasn’t elegantly solved. As most of you will know, there are solutions for trimming by characters or trimming by words, but neither of these fulfilled our requirements of trimming by characters, but keeping output to full words.

Introducing trim_respect_words

function trim_respect_words(string $string, int $char_length = 50) :string {
    // trim edges
    $string = trim($string);

    // store string length
    $str_len = strlen($string);

    // leave if the string is within the limit
    if ($char_length >= $str_len) return $string;

    // split the words into an array
    $words = explode(' ', $string);

    // record the current position in the words array
    $word_count = 0;

    // prepare the string
    $string = '';

    // build the string back up, until the character limit is reached
    while ($char_length > $str_len) {
        $string .= "{$words[$word_count]} ";
        $word_count++;
    }

    // remove the last character (space)
    $string = substr($string, 0, -1);

    // if the string now exceeds limit, remove the last word
    if ($char_length <= $str_len) {

        // position (from right) of the first space
        $last_word = strrpos($string, " ");

        // remove last word
        $string = substr($string, 0, $last_word);
    }

    // return trimmed string with any special characters removed from the end and replaced with ellipsis
    return preg_replace('/[^a-z0-9]+\Z/i', '', $string). '…';
}

Notes about this code

• I’ve deliberately avoided using substr to get the sub string of the original string, as using elements of an array is more robust.
• The last space added in the while loop needs to be remove before checking if the last word added has pushed the string over the limit
• The last word added will almost definitely push the string over the character limit, but just removing it is more efficient than adding complexity to the while loop’s body – the overheads would include an if statement, a string length calculation on the current word and a comparison of the word’s impact on the string’s length – all for each iteration

Uses for trim_respect_words

This code could be used as a simple function, or as part of a class, or, if you’re using WordPress, a hook that conditionally hangs itself off the get_title() function’s filter. Ping us a line if you’d like to know how to do this as, amongst other talents, we’re seasoned WordPress developers.

To help demonstrate its purpose, and why it’s used, rather than PHP’s array_column() function, let’s look at the following scenario.

Scenario – exclude post IDs from a WP Query

Objective: Show the trending posts and the latest posts, on the homepage, excluding trending posts from latest posts.

In this scenario the objective is to record the post IDs from an array of trending post objects, so they can be excluded from the array of latest post objects, resulting in two unique lists of posts.

Why use wp_list_pluck instead of array_column?

As stated by WordPress, these list helpers do almost the same thing; that is, they grab a field from each item in a list, in our case the ID for each post in the query. The reason we’re using wp_list_pluck() is simply because it works on objects, too, which is perfect, as our query will return an array of post objects, containing (among others) the post IDs.

Query for Trending Posts

/**
 * Filter posts 'WHERE' comments are greater than 0
 * 
 * appends an additional clause to the SQL query to return only posts with comments.
 *
 * @return $where string
 */
function itd_has_comments_filter($where) {
    $where .= ' AND comment_count > 0 ';
    return $where;
}

// Hang the comments filter onto the 'posts_where' hook
add_filter('posts_where', 'itd_has_comments_filter');

/**
 * Get a list of trending posts
 * 
 * This is based on the number of comments the post has received over the last month (if any).
 */
// Set up the args to order by comments, then modified date and limit to 6 posts that have been modified in the last month.
$args = [
    'post_type' => 'post',
    'posts_per_page' => 6,
    'date_query' => [
        'column' => 'modified',
        'after'  => '1 month ago',
    ],
    'orderby' => [
        'comment_count' => 'DESC',
        'post_modified' => 'DESC'
    ],
];

// store the query results
$trending_posts = new WP_Query($args);

// restore the posts query
remove_filter('posts_where', 'itd_has_comments_filter');
wp_reset_postdata();

// get the array of post IDs 
$trending_post_ids = wp_list_pluck($trending_posts->posts, 'ID');

Query for Latest Posts

/**
 * Get a list of latest posts, excluding trending posts
 */
// Set up the args to order by latest posts (default) and limit to 6 posts, excluding the $trending_post_ids.
$args = [
    'post_type' => 'post',
    'posts_per_page' => 6,
    'post__not_in' => $trending_post_ids,
];

// store the query results
$latest_posts = new WP_Query($args);

// restore the posts query
wp_reset_postdata();

Conclusion

So there you have it, wp_list_pluck is a simple helper that circumnavigates the need to write a loop to get the column data from an array/object. Also in the above examples you’ll see the use of the posts_where filter, that’s modifying the posts query to include an additional WHERE parameter to the SQL database query, and semi-complex query arguments, for querying by date parameters and multi-field ordering – feel free to get in touch if you want to know about how to use these, or if you would like a helping hand with any development challenges.

I love clean, easy-to-read code, which is why I am not a fan of if statements with complex expressions. For example, consider the following snippet, which is checking a variable against several values:

if ($test_variable === 'value1' || $test_variable === 'value2' || $test_variable === 'value3' || $test_variable === 'value4') {
    // do something if $test_variable is equal to one of the strings
}

This is not nice and certainly doesn’t feel very DRY.

Using in_array() as the Conditional

Now consider the following code fragment, this time using the in_array function as the if statement’s conditional expression:

if (in_array($test_variable, ['value1', 'value2', 'value3', 'value4']) {
    // do something if $test_variable is equal to one of the strings in the array
}

In my opinion this is a much cleaner solution that’s easier to read, especially if the code is maintained by a team of developers, where it’s possible the programmer that wrote the code will not be the one maintaining it.

It could be taken a step further by first storing the array in a variable, then using it as the argument, as follows:

$test_array = [
    'value1',
    'value2',
    'value3',
    'value4'
];
if (in_array($test_variable, $test_array) {
    // do something if $test_variable is equal to one of the strings in $test_array
}

This approach is very clean and extremely easy to read, especially if the array’s items become more complex in themselves.

Other Approaches

Using in_array is just one way to improve the readability of code, another is the switch() statement, which would handle the if statement’s complexities. Here’s one way to write the code fragment using a switch:

switch ($test_variable) {
    case 'value1':
    case 'value2':
    case 'value3':
    case 'value4':
        $value_exists = true;
        break;
    default: 
        $value_exists = false;
}

if ($value_exists) {
    // do something if $value_exists is true
}

But, my personal preference is to use in_array, as it feels cleaner.

Wrapping up

If you think you’re codebase is in need of refactoring, for improved readability (and performance), please get in touch and we’ll gladly help. We have many years of programming experience, in a wide range of languages, including PHP, Java, JavaScript, and (S)CSS. We also specialise in WordPress development, developing custom themes and plugins, and helping clients with all manner of performance, including search engine optimisations.

Note: This article is for Mac(Unix)/Linux users, please refer the official docs for Windows.

What is Composer?

Composer is the dependency manager for PHP packets. In my opinion it should be in every web developer’s tootlkit, as it is somewhat likely that PHP will be used at some point and extremely likely that dependencies will be required within the projects.

Full documentation can be found on the official composer website, which is where the following steps have been taken from, for manually installing composer. Please refer to their documentation for programatic installation of composer.

Setting up Composer at project level

1. Download Composer

   $ php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

2. Verify the Download

   $ php -r "if (hash_file('SHA384', 'composer-setup.php') === '544e09ee996cdf60ece3804abc52599c22b1f40f4323403c44d44fdfdd586475ca9813a858088ffbc1f233e9b180f061') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

3. Install Composer

   $ php composer-setup.php

4. Delete the download file

   $ php -r "unlink('composer-setup.php');"

Making Composer globally accessible

To use composer in a global scope, simply move it to the usr/local/bin directory.

Note: If the following command fails, try it again with super user access; sudo before mv

1. Move the Composer PHAR

   $ mv composer.phar /usr/local/bin/composer

2. Verify installation & version (optional)

   $ composer --version
   // will display your composer version

You are now set to use composer. Simply type composer [commands + tags] in the terminal and enjoy.

Updating Composer

To update composer at any time, simply enter the following command:

$ composer self-update

To update composer dependencies, simply enter the following command (from the directory that contains the composer.json file):

$ composer update