🔥 Add a Voice Search to your Nuxt3 App in 6 Easy Steps

In partnership with

Daily Issue #91 | Subscribe to DS | Daily Sandbox Pro

Hey developers! This issue is full of practical tips and tools to help you solve real problems, whether it’s debugging, animations, or building better forms. Here’s what’s inside:

• CSS Animations: Four great tutorials to bring some life to your designs.

• package.json Exports: A clear guide to understanding how the exports field works.

• Clipboard API: Learn how to handle copy-paste operations easily with JavaScript.

• JavaScript Dates: From Moment.js to Temporal, make working with dates way simpler.

• Debugging Tips: Get more out of console.log() with these practical tricks.

• decipher: Automatically add AI-generated subtitles to your videos.

• openv0: A framework for generating UI components quickly and easily.

• formio.js: Build powerful forms with a simple JSON-powered library.

• wekan: An open-source Kanban board to keep your tasks organized.

• blessed-contrib: Build terminal dashboards with JavaScript and ASCII art.

Dive in and keep coding!

• 4 Stunning CSS Animation Tutorials

• Guide to the package.json exports field

• Exploring JavaScript's Async Clipboard API: navigator.clipboard

• Master JavaScript date and time: From Moment.js to Temporal

• Front End Debugging Part 2: Console.log() to the Max

More news here →

_{From our sponsor}

BofA says +80% of young, wealthy investors want this asset—now it can be yours.

A 2024 Bank of America survey revealed something incredible: 83% of HNW respondents 43 and younger say they currently own art, or would like to.

Why? After weathering multiple recessions, newer generations say they want to diversify beyond just stocks and bonds. Luckily, Masterworks’ art investing platform is already catering to 60,000+ investors of every generation, making it easy to diversify with an asset that’s overall outpaced the S&P 500 in price appreciation (1995-2023), even despite a recent dip.

To date, each of Masterworks’ 23 sales has individually returned a profit to investors, and with 3 illustrative sales, Masterworks investors have realized net annualized returns of +17.6%, +17.8%, and +21.5%

Shares can sell quickly, but our readers can SKIP THE WAITLIST BY CLICKING HERE.

Past performance not indicative of future returns. Investing Involves Risk. See Important Disclosures at masterworks.com/cd.

Add a Voice Search to your Nuxt3 App in 6 Easy Steps

In today’s tech-savvy world, voice search is no longer just a futuristic feature — it’s a necessity. Whether you're building a content-heavy app or simply want to add a dash of innovation, incorporating voice search using Nuxt 3 and the Web Speech API can elevate your app's user experience.

Step 1: Setting Up Your Nuxt 3 Project

… For the sake of conciseness, I am not going to go into details on how to setup your project, I am assuming most of us are very familiar with that. (find step-by-step details in the full article)

Step 2: Creating the Voice Search Component

Let’s create a new component to manage speech recognition.

// ... some code + definitions (details in full article)

onMounted(() => {
  const SpeechRecognition =
    window.SpeechRecognition || window.webkitSpeechRecognition;

  if (!SpeechRecognition) {
    console.warn('SpeechRecognition is not supported in this browser.');
    isSupported.value = false;
    return;
  }

  isSupported.value = true;
  recognition = new SpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = false;
  recognition.lang = 'en-US';

  recognition.onresult = (event) => {
    const result = event.results[event.results.length - 1][0].transcript;
    transcript.value = result;
  };

  recognition.onerror = (event) => {
    console.error('Error occurred in recognition:', event.error);
  };
});

onUnmounted(() => {
  if (recognition) {
    recognition.abort();
  }
});

// ... some more code (details in full article)

Step 4: Integrating Voice Search into Your Nuxt 3 App

<script setup />

<template>
  <div class="app">
    <h1>Nuxt 3 Voice Search</h1>
    <VoiceSearch />
  </div>
</template>

<style scoped>
.app {
  display: grid;
  place-items: center;
  height: 100vh;
  text-align: center;
}
</style>

Open http://localhost:3000 in your browser, and you’ll see the voice search buttons.

⭐️ For the full details, check out the full article here

More tutorials here →

• decipher - add AI-generated transcription subtitles to your videos

• openv0 - a generative UI component framework

• formio.js - JavaScript powered Forms with JSON Form Builder

• wekan - the Open Source kanban (built with Meteor).

• blessed-contrib - build terminal dashboards using ascii/ansi art and javascript.

More code libs here →

_{From our sponsor}

Hire Ava, the Industry-Leading AI BDR

Ava automates your entire outbound demand generation so you can get leads delivered to your inbox on autopilot. She operates within the Artisan platform, which consolidates every tool you need for outbound:

• 300M+ High-Quality B2B Prospects

• Automated Lead Enrichment With 10+ Data Sources Included

• Full Email Deliverability Management

• Personalization Waterfall using LinkedIn, Twitter, Web Scraping & More

Book a demo to see what Ava can do.

Midjourney

More AI prompts here →

📣 HELP SPREAD THE WORD

🚀 Spread the Code! Love what you read? Share the newsletter with your fellow devs - every recommendation helps power up the community.

💻 Sponsor the Dev Journey! Keep the bytes flowing and the newsletter growing by becoming a sponsor. Your support helps maintain this valuable resource.

💬 Tweet the Deets! Share the latest with your code crew - let’s make this viral, not just a bug!

If you have built anything that you’d like to share with the community, get with me on X @dailysandbox_ 😀