Webmasters Gallery

AI, the latest technology powerhouse, is rapidly changing almost every technology we are using. Keeping up with this quick transformation is daunting yet mandatory to stay on track.

In this blog, we will showcase seven popular podcasts of experts and critics to give you a platform for a well-rounded understanding.

But first – how can AI-focused podcasts benefit you?

Benefits of Listening to AI Podcasts

AI has infiltrated almost every phase of our lives, be it education or e-commerce, business or product development. The core benefits of listening to an AI podcast can be summarized in these points:

Gain from Expert Insights

AI experts hosting such podcasts deliver fresh insights on new developments in neural networks, machine learning (ML), and other facets of AI.

Educational Potential

AI podcasts serve as one of the best educational tools with a lot of learning potential – and you can listen to them on the go or while working on repetitive chores.

Implementing Ideas

The best AI podcasts can change the way you look at AI and its applications. In fact, new methods of developing AI-driven services can help you transform your way of executing professional responsibilities.

Screen Time Reduction

Listen to AI podcasts to reduce screen time and go for a digital detoxification. You can also connect with communities with the same mindset and indulge in meaningful discussions.

These benefits hold value when you choose the best AI podcast channels to listen to. And how can you choose the best AI podcasts? Let’s find out.

Criteria for Choosing the Best AI Podcasts

These criteria will assist in sorting the right AI podcast channels and platforms.

Host Credibility

The podcast host’s background matters a lot. We looked for hosts who have real experience working with AI, either as researchers, developers, or industry professionals. Hosts who understand AI concepts can ask better questions and explain complex ideas in ways that make sense to listeners.

Guest Quality

The value of a podcast also depends on the expert being interviewed. The best AI podcasts feature respected industry experts, innovative thinkers and people actively working on modern AI concepts.

Content Depth

Good AI podcasts go beyond surface-level discussions for beginners and experts. They should explain not just what is happening in AI but why it matters and how it works. The best podcasts will balance technical aspects, problems or pain points, and practical applications. These podcasts will help you visualize a bigger picture.

Release Frequency

As mentioned, AI is evolving at an exponential rate. Podcasts with consistent releases will only keep up with that pace. They don’t let listeners wait by publishing episodes regularly. A steady release also reflects on creators’ commitment to the listeners.

Production Quality

Clear audio, good editing, and a well-organized conversation format make learning easier. Good podcasts preserve these traits and make the podcasts engaging.

Keep these criteria in mind and read this precise list of AI podcasts to start your journey of learning.

7 Best AI Podcasts

AI Agents Podcast

Podcast Hosts:

• Aytekin Tank (Founder & CEO, Jotform)
• Demetri Panici (Founder, Rise Productive)

Best For: Practical AI applications, business automation, and AI agent technology

Overview: Jotform’s AI podcast scouts AI agent technology, implementation strategies, and real-world applications across various industries.

Key Features:

• Regular episodes featuring industry experts and innovative AI use cases
• Practical demonstrations of the latest AI tools and technologies
• Focus on business applications and productivity enhancements by comparing AI tools

Accessibility: Spotify, Apple Podcasts, YouTube, Amazon Music

Why It’s a Top Pick for 2025

AI Agents discusses AI implementation in different industrial and professional spheres. It provides actionable insights for businesses looking to implement AI agents for productivity, customer service, and automation.

AI in Business

Podcast Host: 

• Daniel Faggella (Founder of Emerj)

Best For: Business leaders, executives, and decision-makers seeking practical AI implementation strategies

Overview: A weekly podcast cutting through AI hype to deliver factual trends and insights specifically tailored for business and government leaders.

Key Features:

• Interviews with AI executives, investors, and researchers
• Focus on ROI-driven AI applications with real business value
• Strategic AI considerations for organizational planning

Accessibility: Apple iTunes, SoundCloud, Google Play, and Stitcher

Why It’s a Top Pick for 2025

AI in Business has a straight approach to AI adoption focusing exclusively on practical applications with demonstrable ROI and actionable intelligence.

The TWIML AI Podcast

Podcast Host:

• Sam Charrington (Founder & Principal Analyst, CloudPulse Strategies)

Best For: Technical professionals, researchers, and AI practitioners seeking in-depth technical discussions

Overview: A leading technical AI podcast covering cutting-edge research, emerging trends, and practical applications across the machine learning landscape.

Key Features:

• Explaining complex AI topics like LLMs, reinforcement learning, and multimodal systems
• Specialized series focusing on specific AI domains and applications
• Consistent release schedule with a catalog of over 700 episodes

Accessibility: Apple Podcasts, Spotify, YouTube, Overcast

Why It’s a Top Pick for 2025: The TWIML AI Podcast covers the technical depths of emerging technologies like AI agents, reasoning models, and edge AI.

AI Today

Hosts:

• Kathleen Walch (Founder, Cognilytica)
• Ronald Schmelzer (Founder, Cognilytica)

Best For: Business leaders, industry professionals, and technology enthusiasts seeking practical AI applications

Overview: A no-hype podcast delivering real-world insights on industrial AI implementation.

Key Features:

• Industry-specific AI use cases  in marketing, telecommunications, real estate, etc
• Interviews with enterprise leaders and AI practitioners
• More focus on practical AI applications than theoretical discussions

Accessibility: Apple Podcasts, Spotify, Google Podcasts

Why It’s a Top Pick for 2025

AI Today breaks down complex technologies into understandable and actionable insights with industry-specific focus.

Practical AI

Hosts:

• Chris Benson (AI / Autonomy Research Engineer, Lockheed Martin)
• Daniel Whitenack (Founder, Prediction Guard)

Best For: Developers, technology professionals, and AI enthusiasts looking for AI solutions

Overview: A podcast focused on making artificial intelligence accessible and practical, covering real-world implementations rather than theoretical concepts.

Key Features:

• Implementing AI technologies like LLMs, MLOps, and edge AI
• Interviews with industry practitioners and experts
• Focus on hands-on AI experience

Accessibility: Apple Podcasts, Spotify, Overcast

Why It’s a Top Pick for 2025

Practical AI focuses on real-world AI applications rather than theoretical discussions. The podcasts emphasize efficiency, like IBM’s Granite approach to edge AI.

Last Week in AI

Host: Multiple hosts

Best For: AI researchers, developers, and industry watchers

Overview: A news-focused podcast covering the most significant weekly developments in artificial intelligence.

Key Features:

• Regular episodes highlighting major AI announcements and research papers
• Detailed analysis of new AI models from major companies (OpenAI, Anthropic, Google)
• Coverage of industry trends, funding news, and technical breakthroughs

Accessibility: Substack and RSS Feed

Why It’s a Top Pick for 2025

The podcast focuses on breaking down technical advancements (like DeepSeek’s reasoning models or Anthropic’s extended thinking capabilities) and business moves in the AI world.

Data Skeptic

Host: 

• Kyle Polich (Founder, Data Skeptic, and data science solution expert)

Best For: AI professionals, researchers, and critical thinkers

Overview: A scientifically rigorous podcast that examines AI topics with a skeptical lens to challenge industry hype.

Key Features:

• Interviews with leading researchers
• Season-based formats exploring single topics related to NLP, interpretability, and machine intelligence)
• Combines storytelling techniques with academic rigor to make complex concepts accessible
• Critical examination of ethical, philosophical, and societal implications of AI

Accessibility: Available on Apple Podcasts, Spotify, Google Podcasts, and other major platforms

Why It’s a Top Pick for 2025

Data Skeptic is known for its scientific approach and willingness to challenge prevailing narratives in AI with evidence-based discussions and critical thinking.

Turn Your Downtime into AI Learning Time with AI Podcasts

The AI world is moving at a breakneck speed. If you blink, you will miss significant developments in this sphere. So, hold this best AI podcast list close or make a custom one as per your preferences. 

Introducing these remarkable audio resources in your daily routine will change your perspective of AI. The conversations of industry pioneers, researchers, and tech experts will help demystify complex AI topics. 

Use this valuable learning opportunity to implement use-case-driven examples and strategic insights to transform your professional sphere.

Featured Image by C D-X on Unsplash

The post 7 Best AI Podcasts to Stay Ahead in Artificial Intelligence in 2025 appeared first on noupe.

In my last article on “Revisiting CSS Multi-Column Layout”, I mentioned that almost twenty years have flown by since I wrote my first book, Transcending CSS. In it, I explained how and why to use what were, at the time, an emerging CSS property.

Ten years later, I wrote the Hardboiled Web Design Fifth Anniversary Edition, covering similar ground and introducing the new CSS border-image property.

Hint: I published an updated version, Transcending CSS Revisited which is free to read online. Hardboiled Web Design is available from my bookshop.

I was very excited about the possibilities this new property would offer. After all, we could now add images to the borders of any element, even table cells and rows (unless their borders had been set to collapse).

Since then, I’ve used border-image regularly. Yet, it remains one of the most underused CSS tools, and I can’t, for the life of me, figure out why. Is it possible that people steer clear of border-image because its syntax is awkward and unintuitive? Perhaps it’s because most explanations don’t solve the type of creative implementation problems that most people need to solve. Most likely, it’s both.

I’ve recently been working on a new website for Emmy-award-winning game composer Mike Worth. He hired me to create a highly graphical design that showcases his work, and I used border-image throughout.

A brief overview of properties and values

First, here’s a short refresher. Most border-image explanations begin with this highly illuminating code snippet:

border-image: [source] [slice]/[width]/[outset] [repeat]

This is shorthand for a set of border-image properties, but it’s best to deal with properties individually to grasp the concept more easily.

A border-image’s source

I’ll start with the source of the bitmap or vector format image or CSS gradient to be inserted into the border space:

border-image-source: url('/img/scroll.png');

When I insert SVG images into a border, I have several choices as to how. I could use an external SVG file:

border-image-source: url('/img/scroll.svg');

Or I might convert my SVG to data URI using a tool like Base64.Guru although, as both SVG and HTML are XML-based, this isn’t recommended:

border-image-source: url('data:image/svg+xml;base64,…');

Instead, I can add the SVG code directly into the source URL value and save one unnecessary HTTP request:

border-image-source: url('data:image/svg+xml;utf8,…');

Finally, I could insert an entirely CSS-generated conical, linear, or radial gradient into my border:

border-image-source: conical-gradient(…);

Tip: It’s useful to remember that a browser renders a border-image above an element’s background and box-shadow but below its content. More on that a little later.

Slicing up a border-image

Now that I’ve specified the source of a border image, I can apply it to a border by slicing it up and using the parts in different positions around an element. This can be the most baffling aspect for people new to border-image.

Most border-image explanations show an example where the pieces will simply be equally-sized, like this:

However, a border-image can be developed from any shape, no matter how complex or irregular.

Instead of simply inserting an image into a border and watching it repeat around an element, invisible cut-lines slice up a border-image into nine parts. These lines are similar to the slice guides found in graphics applications. The pieces are, in turn, inserted into the nine regions of an element’s border.

The border-image-slice property defines the size of each slice by specifying the distance from each edge of the image. I could use the same distance from every edge:

border-image-slice: 65

I can combine top/bottom and left/right values:

border-image-slice: 115 65;

Or, I can specify distance values for all four cut-lines, running clockwise: top, right, bottom, left:

border-image-slice: 65 65 115 125;

The top-left of an image will be used on the top-left corner of an element’s border. The bottom-right will be used on the bottom-right, and so on.

I don’t need to add units to border-image-slice values when using a bitmap image as the browser correctly assumes bitmaps use pixels. The SVG viewBox makes using them a little different, so I also prefer to specify their height and width:

<svg height="600px" width="600px">…</svg>

Don’t forget to set the widths of these borders, as without them, there will be nowhere for a border’s image to display:

border-image-width: 65px 65px 115px 125px;

Filling in the center

So far, I’ve used all four corners and sides of my image, but what about the center? By default, the browser will ignore the center of an image after it’s been sliced. But I can put it to use by adding the fill keyword to my border-image-slice value:

border-image-slice: 65px 65px 115px 125px fill;

Setting up repeats

With the corners of my border images in place, I can turn my attention to the edges between them. As you might imagine, the slice at the top of an image will be placed on the top edge. The same is true of the right, bottom, and left edges. In a flexible design, we never know how wide or tall these edges will be, so I can fine-tune how images will repeat or stretch when they fill an edge.

Stretch: When a sliced image is flat or smooth, it can stretch to fill any height or width. Even a tiny 65px slice can stretch to hundreds or thousands of pixels without degrading.

border-image-repeat: stretch;

Repeat: If an image has texture, stretching it isn’t an option, so it can repeat to fill any height or width.

border-image-repeat: repeat;

Round: If an image has a pattern or shape that can’t be stretched and I need to match the edges of the repeat, I can specify that the repeat be round. A browser will resize the image so that only whole pieces display inside an edge.

border-image-repeat: round;

Space: Similar to round, when using the space property, only whole pieces will display inside an edge. But instead of resizing the image, a browser will add spaces into the repeat.

border-image-repeat: space;

When I need to specify a separate stretch, repeat, round, or space value for each edge, I can use multiple keywords:

border-image-repeat: stretch round;

Outsetting a border-image

There can be times when I need an image to extend beyond an element’s border-box. Using the border-image-outset property, I can do just that. The simplest syntax extends the border image evenly on all sides by 10px:

border-image-outset: 10px;

Of course, there being four borders on every element, I could also specify each outset individually:

border-image-outset: 20px 10px; 
/* or */
border-image-outset: 20px 10px 0;

border-image in action

Mike Worth is a video game composer who’s won an Emmy for his work. He loves ’90s animation — especially Disney’s Duck Tales — and he asked me to create custom artwork and develop a bold, retro-style design.

My challenge when developing for Mike was implementing my highly graphical design without compromising performance, especially on mobile devices. While it’s normal in CSS to accomplish the same goal in several ways, here, border-image often proved to be the most efficient.

Decorative buttons

The easiest and most obvious place to start was creating buttons reminiscent of stone tablets with chipped and uneven edges.

I created an SVG of the tablet shape and added it to my buttons using border-image:

button {
  border-image-repeat: stretch;
  border-image-slice: 10 10 10 10 fill;
  border-image-source: url('data:image/svg+xml;utf8,…');
  border-image-width: 20px;
}

I set the border-image-repeat on all edges to stretch and the center slice to fill so these stone tablet-style buttons expand along with their content to any height or width.

Article scroll

I want every aspect of Mike’s website design to express his brand. That means continuing the ’90s cartoon theme in his long-form content by turning it into a paper scroll.

The markup is straightforward with just a single article element:

<article>
  <!-- ... -->
</article>

But, I struggled to decide how to implement the paper effect. My first thought was to divide my scroll into three separate SVG files (top, middle, and bottom) and use pseudo-elements to add the rolled up top and bottom parts of the scroll. I started by applying a vertically repeating graphic to the middle of my article:

article {
  padding: 10rem 8rem;
  box-sizing: border-box;
  /* Scroll middle */
  background-image: url('data:image/svg+xml;utf8,…');
  background-position: center;
  background-repeat: repeat-y;
  background-size: contain;
}

Then, I added two pseudo-elements, each containing its own SVG content:

article:before {
  display: block;
  position: relative;
  top: -30px;
  /* Scroll top */
  content: url('data:image/svg+xml;utf8,…');
}

article:after {
  display: block;
  position: relative;
  top: 50px;
  /* Scroll bottom */
  content: url('data:image/svg+xml;utf8,…');
}

While this implementation worked as expected, using two pseudo-elements and three separate SVG files felt clumsy. However, using border-image, one SVG, and no pseudo-elements feels more elegant and significantly reduces the amount of code needed to implement the effect.

I started by creating an SVG of the complete tablet shape:

And I worked out the position of the four cut-lines:

Then, I inserted this single SVG into my article’s border by first selecting the source, slicing the image, and setting the top and bottom edges to stretch and the left and right edges to round:

article {
  border-image-slice: 150 95 150 95 fill;
  border-image-width: 150px 95px 150px 95px;
  border-image-repeat: stretch round;
  border-image-source: url('data:image/svg+xml;utf8,…');
}

The result is a flexible paper scroll effect which adapts to both the viewport width and any amount or type of content.

Home page overlay

My final challenge was implementing the action-packed graphic I’d designed for Mike Worth’s home page. This contains a foreground SVG featuring Mike’s orangutan mascot and a zooming background graphic:

<section>
  <!-- content -->
  <div>...</div>

  <!-- ape -->
  <div>
    <svg>…</svg>
  </div>
</section>

I defined the section as a positioning context for its children:

section {
  position: relative;
}

Then, I absolutely positioned a pseudo-element and added the zooming graphic to its background:

section:before {
  content: "";
  position: absolute;
  z-index: -1;
  background-image: url('data:image/svg+xml;utf8,…');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}

I wanted this graphic to spin and add subtle movement to the panel, so I applied a simple CSS animation to the pseudo-element:

@keyframes spin-bg {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

section:before {
  animation: spin-bg 240s linear infinite;
}

Next, I added a CSS mask to fade the edges of the zooming graphic into the background. The CSS mask-image property specifies a mask layer image, which can be a PNG image, an SVG image or mask, or a CSS gradient:

section:before {
  mask-image: radial-gradient(circle, rgb(0 0 0) 0%, rgb(0 0 0 / 0) 60%);
  mask-repeat: no-repeat;
}

At this point, you might wonder where a border image could be used in this design. To add more interactivity to the graphic, I wanted to reduce its opacity and change its color — by adding a colored gradient overlay — when someone interacts with it. One of the simplest, but rarely-used, methods for applying an overlay to an element is using border-image. First, I added a default opacity and added a brief transition:

section:before {
  opacity: 1;
  transition: opacity .25s ease-in-out;
}

Then, on hover, I reduced the opacity to .5 and added a border-image:

section:hover::before {
  opacity: .5;
  border-image: fill 0 linear-gradient(rgba(0,0,255,.25),rgba(255,0,0,1));
}

You may ponder why I’ve not used the other border-image values I explained earlier, so I’ll dissect that declaration. First is the border-image-slice value, where zero pixels ensures that the eight corners and edges stay empty. The fill keyword ensures the middle section is filled with the linear gradient. Second, the border-image-source is a CSS linear gradient that blends blue into red. A browser renders this border-image above the background but behind the content.

Conclusion: You should take a fresh look at border-image

The border-image property is a powerful, yet often overlooked, CSS tool that offers incredible flexibility. By slicing, repeating, and outsetting images, you can create intricate borders, decorative elements, and even dynamic overlays with minimal code.

In my work for Mike Worth’s website, border-image proved invaluable, improving performance while maintaining a highly graphical aesthetic. Whether used for buttons, interactive overlays, or larger graphic elements, border-image can create visually striking designs without relying on extra markup or multiple assets.

If you’ve yet to experiment with border-image, now’s the time to revisit its potential and add it to your design toolkit.

Hint: Mike Worth’s website will launch in April 2025, but you can see examples from this article on CodePen.

About Andy Clarke

Often referred to as one of the pioneers of web design, Andy Clarke has been instrumental in pushing the boundaries of web design and is known for his creative and visually stunning designs. His work has inspired countless designers to explore the full potential of product and website design.

Andy’s written several industry-leading books, including Transcending CSS, Hardboiled Web Design, and Art Direction for the Web. He’s also worked with businesses of all sizes and industries to achieve their goals through design.

Visit Andy’s studio, Stuff & Nonsense, and check out his Contract Killer, the popular web design contract template trusted by thousands of web designers and developers.

Revisiting CSS border-image originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

In *”Our Interfaces Have Lost Their Senses,”* Amelia Wattenberger critiques how modern digital interfaces have become sterile and lack sensory engagement. She calls for a return to more immersive, sensory-rich designs that connect us to technology in meaningful, tactile ways.

So, you just deployed a change to your website. Congrats! Everything went according to plan, but now that you look at your work in production, you start questioning your change. Perhaps that change was as simple as a new heading and doesn’t seem to fit the space. Maybe you added an image, but it just doesn’t feel right in that specific context.

What do you do? Do you start deploying more changes? It’s not like you need to crack open Illustrator or Figma to mock up a small change like that, but previewing your changes before deploying them would still be helpful.

Enter document.designMode. It’s not new. In fact, I just recently came across it for the first time and had one of those “Wait, this exists?” moments because it’s a tool we’ve had forever, even in Internet Explorer 6. But for some reason, I’m only now hearing about it, and it turns out that many of my colleagues are also hearing about it for the first time.

What exactly is document.designMode? Perhaps a little video demonstration can help demonstrate how it allows you to make direct edits to a page.

At its simplest, document.designMode makes webpages editable, similar to a text editor. I’d say it’s like having an edit mode for the web — one can click anywhere on a webpage to modify existing text, move stuff around, and even delete elements. It’s like having Apple’s “Distraction Control” feature at your beck and call.

I think this is a useful tool for developers, designers, clients, and regular users alike.

You might be wondering if this is just like contentEditable because, at a glance, they both look similar. But no, the two serve different purposes. contentEditable is more focused on making a specific element editable, while document.designMode makes the whole page editable.

How To Enable document.designMode In DevTools

Enabling document.designMode can be done in the browser’s developer tools:

1. Right-click anywhere on a webpage and click Inspect.
2. Click the Console tab.
3. Type document.designMode = "on" and press Enter.

To turn it off, refresh the page. That’s it.

Another method is to create a bookmark that activates the mode when clicked:

1. Create a new bookmark in your browser.
2. You can name it whatever, e.g., “EDIT_MODE”.
3. Input this code in the URL field:

javascript:(function(){document.designMode = document.designMode === 'on' ? 'off' : 'on';})();

And now you have a switch that toggles document.designMode on and off.

Use Cases

There are many interesting, creative, and useful ways to use this tool.

Basic Content Editing

I dare say this is the core purpose of document.designMode, which is essentially editing any text element of a webpage for whatever reason. It could be the headings, paragraphs, or even bullet points. Whatever the case, your browser effectively becomes a “What You See Is What You Get” (WYSIWYG) editor, where you can make and preview changes on the spot.

Landing Page A/B Testing

Let’s say we have a product website with an existing copy, but then you check out your competitors, and their copy looks more appealing. Naturally, you’d want to test it out. Instead of editing on the back end or taking notes for later, you can use document.designMode to immediately see how that copy variation would fit into the landing page layout and then easily compare and contrast the two versions.

This could also be useful for copywriters or solo developers.

SEO Title And Meta Description

Everyone wants their website to rank at the top of search results because that means more traffic. However, as broad as SEO is as a practice, the