Forem: Art

🚀 Build a Custom Scheduling Page in Minutes with Cogency.io (No Code Needed)

Art — Fri, 06 Jun 2025 21:44:12 +0000

If you’ve been hunting for a clean, customizable way to let clients book time with you — without duct-taping tools together — Cogency.io might be your new favorite sidekick.

In this quick-start guide, you’ll learn how to:

✅ Set your availability
✅ Build a 3-step booking flow (calendar → user info → confirmation)
✅ Customize layouts with drag-and-drop (Pro & Teams)
✅ Embed your page as a button, sticky bubble, or iframe
✅ Tweak settings like meeting mode, duration, buffer, and even email branding
✅ Add extra forms, generate QR codes, and more

🧑‍💻 No code required. Just clean UI and a powerful editor.

Whether you're a freelancer, coach, or startup founder, Cogency.io gives you pro-level scheduling without the dev time.

👉 Check out the full tutorial here

-- Cogency Team

Mind-Blowing CSS Trick: Coding Effect Without JS!

Art — Wed, 12 Feb 2025 03:06:16 +0000

Yesterday, I stumbled upon an incredible code snippet that I couldn't keep to myself! It creates the illusion of typing code using nothing but pure CSS and HTML—no JavaScript required. Normally, I'd reach for JavaScript to achieve this effect, but this snippet proves that CSS alone can do the job brilliantly!

See the full code snippet here

Why Context Matters When Using AI for Programming

Art — Wed, 05 Feb 2025 03:30:04 +0000

AI is an incredible tool for generating and fixing code, but it’s only as good as the context it’s given. When asking an AI to generate a function or fix one, the surrounding components of the system—such as data structures, APIs, dependencies, and external functions—are crucial to producing a correct solution.

Without this context, AI has to make assumptions, leading to code that might look correct but fails when integrated. For example, if a function processes user input but the structure of that input isn’t provided, the AI might generate logic that doesn’t align with the actual data. Similarly, if a function depends on global state or API calls that aren’t included in the request, the AI won’t be able to account for them properly.

Always provide relevant surrounding code and details. The more context AI has, the more accurate and useful its response will be—turning it from a guesswork generator into a true coding assistant.

Migrating from Bootstrap to Tailwind CSS

Art — Tue, 04 Feb 2025 03:57:17 +0000

Apologies for the misleading title—while I set out to document my migration from Bootstrap 5 to Tailwind CSS, this post ultimately highlights another case where ChatGPT falls short.

I started by asking ChatGPT for a step-by-step guide to migrate my project. As expected, it provided a seemingly straightforward plan:

# install tailwind
npm install -D tailwindcss postcss autoprefixer

# initialize tailwind
npx tailwindcss init -p

# configure the two files that were created
tailwind.config.js and postcss.config.js

# more steps to finilize the migration
(...)

However, I immediately hit a roadblock on step two — npx tailwindcss init -p threw an error:

npm ERR! could not determine executable to run.

Hoping for a quick fix, I pasted the error into ChatGPT, expecting a widely known solution. Instead, it repeatedly suggested checking if Tailwind was installed with yarn list --pattern tailwindcss (it was) and reinstalling it. No matter how I reworded my query, it kept giving me variations of the same unhelpful answer.

So, I took a different approach — I checked what npx tailwindcss init -p was supposed to generate and manually created the config files. That worked, and I was able to continue the migration.

ChatGPT is incredibly useful but still requires human intervention. It should have suggested alternative solutions, including manually creating the files. AI is powerful, but it’s not a replacement for problem-solving instincts.

Using Web Sockets to overcome Chrome Tab Freezing

Art — Tue, 21 Jan 2025 04:15:40 +0000

With Chrome 133, Google is taking a step forward in energy efficiency by freezing inactive, CPU-intensive tabs when Energy Saver mode is active. While this is great for battery-conscious users, it can disrupt background processes like notifications, file uploads, or real-time updates. So, how do you adapt to these changes and ensure your app stays functional? One effective solution is to implement web sockets.

Why Web Sockets?

Web sockets provide a persistent, full-duplex communication channel between the client and server. Unlike traditional polling, which repeatedly sends HTTP requests to check for updates, web sockets maintain an open connection, enabling real-time communication with minimal overhead. This efficiency makes web sockets ideal for avoiding CPU-intensive tasks that could trigger Chrome's freezing mechanism.

In other words, we would need to focus on how to handle Freezing with the Page Lifecycle API (Use the freeze and resume events to pause non-essential processes and ensure the web socket remains functional), and Optimize Resource Usage by minimizing the data sent over the socket to avoid being flagged as CPU-intensive. Compress messages if possible, and ensure the server handles idle connections efficiently. Some of the benefits of using web sockets include:

Real-Time Updates : Maintain instant communication with users even when tabs are inactive.
Lower Overhead : Reduce CPU usage compared to polling, making your app less likely to be frozen.
Scalability : Easily manage multiple connections for chat apps, notifications, or live feeds.

For even greater efficiency, consider migrating background tasks to service workers. Service workers operate independently of the page and won’t be affected by freezing. Pairing web sockets with service workers ensures robust background functionality.

Simple 1-Minute Guide to add a Back-to-Top Button with Vue 3

Art — Wed, 18 Dec 2024 02:39:44 +0000

Adding a "Back-to-Top" button to your Vue 3 app can significantly improve user experience, especially on long pages. This button remains hidden until the user scrolls down a specified distance, then smoothly scrolls them back to the top when clicked.

What Makes It Great?

Scroll Detection : Monitors window.scrollY to determine when the button should appear.
Smooth Scrolling : Enhances navigation by animating the scroll action.
Modern UI : Sleek and minimalistic design that integrates seamlessly into any application.

Here’s how to build it.

The Code

Script Setup

The script uses Vue's Composition API to manage the button's visibility and handle the scroll behavior.

<script setup>
const isVisible = ref(false); // Tracks the button's visibility

// Function to check scroll position and toggle visibility
const handleScroll = () => {
    isVisible.value = window.scrollY > 200; // Show when scrolled > 200px
};

// Smoothly scroll to the top of the page
const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
};

// Add and remove scroll event listeners
onMounted(() => {
    window.addEventListener('scroll', handleScroll);
});

onBeforeUnmount(() => {
    window.removeEventListener('scroll', handleScroll);
});
</script>

Template

The button is conditionally displayed using v-show and styled with an SVG icon to represent the back-to-top functionality.

<template>
    <a v-show="isVisible" href="#" class="back-to-top-control" @click.prevent="scrollToTop">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-4.98 3.66l-.163 .01l-.086 .016l-.142 .045l-.113 .054l-.07 .043l-.095 .071l-.058 .054l-4 4l-.083 .094a1 1 0 0 0 1.497 1.32l2.293 -2.293v5.586l.007 .117a1 1 0 0 0 1.993 -.117v-5.585l2.293 2.292l.094 .083a1 1 0 0 0 1.32 -1.497l-4 -4l-.082 -.073l-.089 -.064l-.113 -.062l-.081 -.034l-.113 -.034l-.112 -.02l-.098 -.006z" stroke-width="0" fill="currentColor" />
        </svg>
    </a>
</template>

v-show : Ensures the button is rendered but hidden when not needed.
SVG Icon : Enhances the button’s visual appeal.

2228+ FREE RESOURCES FOR DEVELOPERS!! ❤️ 😍🥳 (updated daily)

1400+ Free HTML Templates

359+ Free News Articles

69+ Free AI Prompts

323+ Free Code Libraries

52+ Free Code Snippets & Boilerplates for Node, Nuxt, Vue, and more!

25+ Free Open Source Icon Libraries

Visit dailysandbox.pro for free access to a treasure trove of resources!

Styles

The button’s fixed position ensures it remains in view as the user scrolls. Hover effects provide a polished touch.

<style lang="less" scoped>
.back-to-top-control {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    width: 60px;
    height: 60px;
    color: black;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0.5;
    transition: opacity 0.3s ease;

    &:hover {
        opacity: 1;
    }

    > svg {
        width: 24px;
        height: 24px;
    }
}
</style>

How It Works

Scroll Detection : A scroll event listener checks if the user has scrolled more than 200 pixels. If true, isVisible becomes true, displaying the button.
Smooth Scroll : Clicking the button triggers the scrollToTop function, which uses window.scrollTo with a behavior of smooth.
Lifecycle Hooks : onMounted and onBeforeUnmount ensure that event listeners are properly managed to prevent memory leaks.

For more tips on web development, check out DailySandbox and sign up for our free newsletter to stay ahead of the curve!

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

Art — Mon, 09 Dec 2024 02:40:36 +0000

In a world dominated by "Hey Siri" and "Okay Google," integrating voice search into your web application isn’t just an option—it’s a necessity. Imagine enabling your users to interact with your Nuxt 3 app hands-free, providing a seamless and futuristic experience. By leveraging the Web Speech API, we’ll transform your app into a voice-powered assistant that listens, understands, and reacts.

Setup

First, let’s prepare your Nuxt 3 project. If you don’t already have one, it’s time to get started. Fire up your terminal and create a fresh Nuxt 3 app:

npx nuxi init voice-search-app
cd voice-search-app
npm install
npm run dev

This will spin up the Nuxt development server. Open http://localhost:3000 in your browser, and you should see the Nuxt welcome page. With our environment ready, we’re set to introduce some voice-powered magic.

Building the Voice Search Component

To begin, let’s create a dedicated component to handle voice recognition. Inside the components directory, create a file called VoiceSearch.vue:

touch components/VoiceSearch.vue

This component will manage everything: starting and stopping the microphone, processing voice input, and displaying the transcript. Inside the file, define a reactive setup using Vue’s Composition API:

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const transcript = ref('');
const isListening = ref(false);
const isSupported = ref(false);

let recognition;

const startListening = () => {
  if (!recognition) {
    console.error('SpeechRecognition instance is unavailable.');
    return;
  }
  isListening.value = true;
  recognition.start();
};

const stopListening = () => {
  if (!recognition) {
    console.error('SpeechRecognition instance is unavailable.');
    return;
  }
  isListening.value = false;
  recognition.stop();
};

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('Recognition error:', event.error);
  };
});

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

This setup initializes a SpeechRecognition instance, listens for results, and handles errors gracefully. The reactive variables transcript and isListening keep track of the user’s input and the system’s state.

2228+ FREE RESOURCES FOR DEVELOPERS!! ❤️ 😍🥳 (updated daily)

1400+ Free HTML Templates

359+ Free News Articles

69+ Free AI Prompts

323+ Free Code Libraries

52+ Free Code Snippets & Boilerplates for Node, Nuxt, Vue, and more!

25+ Free Open Source Icon Libraries

Visit dailysandbox.pro for free access to a treasure trove of resources!

Designing the User Interface

With the logic in place, it’s time to craft the interface. The component template includes buttons to start and stop listening, as well as a transcript display:

<template>
  <div class="voice-search">
    <button
      @click="startListening"
      :disabled="isListening"
      class="start-button">
      🎙️ Start Voice Search
    </button>
    <button
      @click="stopListening"
      :disabled="!isListening"
      class="stop-button">
      🛑 Stop
    </button>
    <p v-if="isSupported">
      <strong>Transcript:</strong> {{ transcript || 'Say something...' }}
    </p>
    <p v-else>Your browser does not support voice search.</p>
  </div>
</template>

Add some simple styles to ensure a clean and user-friendly layout:

<style scoped>
.voice-search {
  text-align: center;
  padding: 20px;
  font-family: Arial, sans-serif;
}

button {
  padding: 10px 20px;
  margin: 5px;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.start-button {
  background-color: #4caf50;
}

.start-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.stop-button {
  background-color: #f44336;
}

.stop-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

p {
  margin-top: 20px;
  font-size: 18px;
  color: #333;
}
</style>

Bringing It All Together in Nuxt

To use the voice search component, import it into your app’s main page. Open pages/index.vue and replace its contents with:

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

<script setup>
import VoiceSearch from '~/components/VoiceSearch.vue';
</script>

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

Start your app with npm run dev, and visit http://localhost:3000 to see the magic unfold. Click "Start Voice Search," speak into your microphone, and watch as your words appear on the screen in real time.

Enhancing the Experience

Voice search is already impressive, but you can make it even better:

Handle Fallbacks for Unsupported Browsers : Ensure users can still interact with the app even if their browser doesn’t support the Web Speech API:

<p v-else>Your browser does not support voice search. Please type your query manually.</p>

Link the Transcript to a Search : Add a button to perform a search based on the transcript:

<button @click="handleSearch" class="search-button">🔍 Search</button>

In the script setup, define the search function:

const handleSearch = () => {
  console.log('Searching for:', transcript.value);
};

With just a few lines of code, you’ve transformed your Nuxt 3 app into a cutting-edge tool that listens to users’ voices. Voice search isn’t just a trendy feature—it’s a testament to the power of modern web APIs and their ability to make technology more accessible and interactive.

By embracing tools like the Web Speech API, you’re not just building apps; you’re shaping the future of user interactions. So go ahead, deploy your app, and let your users experience the magic of voice search.

For more tips on web development, check out DailySandbox and sign up for our free newsletter to stay ahead of the curve!

How to Copy Text to Clipboard

Art — Fri, 29 Nov 2024 01:37:50 +0000

Copying text to the clipboard is a common requirement in modern web applications. While many vanilla JavaScript solutions exist, today we’ll use Clipboard.js , a lightweight library, and Hint.css , a simple tooltip library, to create an elegant copy-to-clipboard feature.

Step 1: HTML Structure

The HTML remains the same. It includes a link styled with Hint.css to show a tooltip when hovering over the copy icon.

<a href="#" class="app-clipboard-link hint hint-bottom" data-hint="Copy link to clipboard">
    <i class="ti ti-copy"></i>
</a>

class="hint hint-bottom" : Adds a bottom-aligned tooltip using Hint.css.
data-hint="Copy link to clipboard" : The tooltip text.

Step 2: JavaScript

Here’s the updated code in plain JavaScript:

// Select the clipboard control
const control = document.querySelector('.app-clipboard-link');

// Set the clipboard text
control.setAttribute('data-clipboard-text', 'https://google.com');

// Initialize Clipboard.js
const clipboard = new ClipboardJS(control, {
    text: (trigger) => trigger.getAttribute('data-clipboard-text'),
});

// Handle the success event
clipboard.on('success', (event) => {
    // Update the tooltip to show "Copied"
    control.setAttribute('data-hint', 'Copied');

    // Reset the tooltip after 3 seconds
    setTimeout(() => {
        control.setAttribute('data-hint', 'Copy link to clipboard');
    }, 3000);
});

2254+ FREE RESOURCES FOR DEVELOPERS!! ❤️ 😍🥳 (updated daily)

1400+ Free HTML Templates

372+ Free News Articles

72+ Free AI Prompts

333+ Free Code Libraries

52+ Free Code Snippets & Boilerplates for Node, Nuxt, Vue, and more!

25+ Free Open Source Icon Libraries

Visit dailysandbox.pro for free access to a treasure trove of resources!

Explanation of the Code

This sets the data-clipboard-text attribute dynamically to the desired URL.
text: Defines a callback function that returns the value of the data-clipboard-text attribute for the clicked element.
Updates the tooltip to "Copied" when the clipboard action is successful.
Resets the tooltip text back to "Copy link to clipboard" after 3 seconds.

Handling the Success Event :

clipboard.on('success', (event) => {
    control.setAttribute('data-hint', 'Copied');
    setTimeout(() => {
        control.setAttribute('data-hint', 'Copy link to clipboard');
    }, 3000);
});

Initializing Clipboard.js :

const clipboard = new ClipboardJS(control, {
    text: (trigger) => trigger.getAttribute('data-clipboard-text'),
});

Setting the Clipboard Text :

control.setAttribute('data-clipboard-text', 'https://google.com');

Advantages of This Approach

No jQuery Dependency : By using plain JavaScript, the solution is lightweight and compatible with modern web standards.
Hint.css Integration : Provides a clean, visually appealing tooltip without additional JavaScript.
Clipboard.js Simplicity : Handles clipboard interactions efficiently without requiring custom logic.

Conclusion

With just a few lines of plain JavaScript and the power of Clipboard.js and Hint.css, you’ve implemented a clean, user-friendly copy-to-clipboard feature. This approach avoids unnecessary dependencies while maintaining functionality and elegance.

Now, go ahead and try it out! Your users will appreciate the simplicity and responsiveness of this feature. 🚀

For more tips on web development, check out DailySandbox and sign up for our free newsletter to stay ahead of the curve!

Building a 6-Digit Passcode Input in Plain JavaScript

Art — Thu, 28 Nov 2024 04:42:46 +0000

In this tutorial, we’ll create a seamless passcode input system for a 6-digit activation code. This setup ensures user-friendliness, supports direct typing or pasting of the code, and triggers a verification function when all digits are entered.

Part 1: HTML Structure

Start with a form that includes:

A placeholder for the passcode input fields.
A link for resending the code.

Here’s the updated HTML:

<form class="app-signup-wrapper">
    <div class="app-plan-wrapper"></div>
    <label class="form-label app-activation-label">
        <p>We have sent a 6-number code to</p>
        <p><strong>user@example.com</strong></p>
        <p>The code expires in 1 hour, so please hurry.</p>
    </label>
    <div class="app-code-activation-wrapper"></div>
    <a href="#" class="app-code-activation-resend" data-sent="false">Did not receive it? Re-Send Now</a>
</form>

Part 2: JavaScript for Passcode Inputs

We’ll create six input fields dynamically, handle user interactions, and trigger the verification logic upon completion.

Step 1: Dynamically Add Input Fields

const codeActivationWrapper = document.querySelector('.app-code-activation-wrapper');
const numOfFields = 6;

// Create and append six input fields
for (let i = 0; i < numOfFields; i++) {
    const input = document.createElement('input');
    input.type = 'text';
    input.className = 'form-control app-activation-code-input';
    input.maxLength = 1;
    codeActivationWrapper.appendChild(input);
}

This script adds six input fields to the .app-code-activation-wrapper div, each restricted to one character using maxLength.

Step 2: Handling Paste Events

Allow users to paste the full code. If the pasted text is valid, split it across the input fields.

const fields = document.querySelectorAll('.app-activation-code-input');

fields.forEach((field, index) => {
    field.addEventListener('paste', (event) => {
        event.preventDefault();
        const pasteData = (event.clipboardData || window.clipboardData).getData('text').trim();

        if (/^\d{6}$/.test(pasteData)) {
            // Distribute pasted digits into input fields
            [...pasteData].forEach((char, idx) => {
                if (fields[idx]) fields[idx].value = char;
            });
            fields[5].focus(); // Focus the last field
            verifyActivationCode(); // Call verification
        }
    });
});

2228+ FREE RESOURCES FOR DEVELOPERS!! ❤️ 😍🥳 (updated daily)

1400+ Free HTML Templates

359+ Free News Articles

69+ Free AI Prompts

323+ Free Code Libraries

52+ Free Code Snippets & Boilerplates for Node, Nuxt, Vue, and more!

25+ Free Open Source Icon Libraries

Visit dailysandbox.pro for free access to a treasure trove of resources!

Step 3: Handling Input and Navigation

Automatically move to the next field on input and handle backspace for navigation.

fields.forEach((field, index) => {
    field.addEventListener('input', () => {
        if (field.value && index < fields.length - 1) {
            fields[index + 1].focus();
        }
        checkCompletion(); // Check if all fields are filled
    });

    field.addEventListener('keydown', (event) => {
        if (event.key === 'Backspace' && !field.value && index > 0) {
            fields[index - 1].focus();
        }
    });
});

Step 4: Check for Completion

When all six fields are filled, concatenate their values and trigger the verifyActivationCode function.

const checkCompletion = () => {
    const activationCode = Array.from(fields).map((field) => field.value).join('');
    if (activationCode.length === 6) {
        verifyActivationCode(activationCode);
    }
};

Step 5: Verification Logic

Simulate the verification process with a function that sends the code to a backend server.

const verifyActivationCode = (activationCode) => {
    console.log('Verifying code:', activationCode);

    const spinner = document.createElement('div');
    spinner.className = 'spinner';
    document.body.appendChild(spinner);

    // Simulate an AJAX request
    setTimeout(() => {
        spinner.remove();
        if (activationCode === '123456') {
            alert('Code verified successfully!');
        } else {
            alert('Invalid code. Try again.');
            fields.forEach((field) => (field.value = ''));
            fields[0].focus();
        }
    }, 2000);
};

Part 3: Handling the Resend Link

Add functionality to resend the activation code.

const resendLink = document.querySelector('.app-code-activation-resend');

resendLink.addEventListener('click', (event) => {
    event.preventDefault();

    // Simulate a resend action
    resendLink.setAttribute('data-sent', 'true');
    setTimeout(() => {
        resendLink.setAttribute('data-sent', 'false');
        alert('Activation code resent!');
    }, 5000);
});

Complete JavaScript Code

Here’s the complete script:

const codeActivationWrapper = document.querySelector('.app-code-activation-wrapper');
const resendLink = document.querySelector('.app-code-activation-resend');
const numOfFields = 6;

// Create input fields dynamically
for (let i = 0; i < numOfFields; i++) {
    const input = document.createElement('input');
    input.type = 'text';
    input.className = 'form-control app-activation-code-input';
    input.maxLength = 1;
    codeActivationWrapper.appendChild(input);
}

const fields = document.querySelectorAll('.app-activation-code-input');

// Handle paste events
fields.forEach((field, index) => {
    field.addEventListener('paste', (event) => {
        event.preventDefault();
        const pasteData = (event.clipboardData || window.clipboardData).getData('text').trim();

        if (/^\d{6}$/.test(pasteData)) {
            [...pasteData].forEach((char, idx) => {
                if (fields[idx]) fields[idx].value = char;
            });
            fields[5].focus();
            verifyActivationCode(Array.from(fields).map((field) => field.value).join(''));
        }
    });
});

// Handle input and navigation
fields.forEach((field, index) => {
    field.addEventListener('input', () => {
        if (field.value && index < fields.length - 1) {
            fields[index + 1].focus();
        }
        checkCompletion();
    });

    field.addEventListener('keydown', (event) => {
        if (event.key === 'Backspace' && !field.value && index > 0) {
            fields[index - 1].focus();
        }
    });
});

// Check for completion
const checkCompletion = () => {
    const activationCode = Array.from(fields).map((field) => field.value).join('');
    if (activationCode.length === 6) {
        verifyActivationCode(activationCode);
    }
};

// Simulate code verification
const verifyActivationCode = (activationCode) => {
    console.log('Verifying code:', activationCode);

    const spinner = document.createElement('div');
    spinner.className = 'spinner';
    document.body.appendChild(spinner);

    setTimeout(() => {
        spinner.remove();
        if (activationCode === '123456') {
            alert('Code verified successfully!');
        } else {
            alert('Invalid code. Try again.');
            fields.forEach((field) => (field.value = ''));
            fields[0].focus();
        }
    }, 2000);
};

// Handle resend link
resendLink.addEventListener('click', (event) => {
    event.preventDefault();

    resendLink.setAttribute('data-sent', 'true');
    setTimeout(() => {
        resendLink.setAttribute('data-sent', 'false');
        alert('Activation code resent!');
    }, 5000);
});

Conclusion

This solution creates a user-friendly, fully functional 6-digit passcode system using plain JavaScript. It supports pasting, input validation, seamless navigation, and code verification, ensuring a smooth experience. Enhance it further by connecting the verification logic to your backend or adding animations for better visual feedback.

For more tips on web development, check out DailySandbox and sign up for our free newsletter to stay ahead of the curve!

Adding a "Shaking" Effect to Login Popovers for a Visual Error Cue

Art — Wed, 27 Nov 2024 01:51:13 +0000

Sometimes, subtle design elements can make a huge difference in user experience. Instead of displaying traditional error messages, a "shaking" effect on a login popover provides a clear and immediate indication that something went wrong. This tutorial will guide you through implementing this functionality using vanilla JavaScript , CSS animations , and the open-source library Tippy.js.

Our objective is to:

Create a login popover with Tippy.js.
Add the "shaking" effect when errors occur.
Automatically reset the animation once the shake ends.

Let’s dive in!

Part 1: Setting Up the Shaking Animation with CSS

We’ll start by defining a reusable CSS animation for the shake effect. The @keyframes rule below mimics a side-to-side shake:

@keyframes shaking {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}
.shake {
    animation: shaking 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

Keyframe Details : The translate3d property moves the popover slightly to the left and right to create the shaking effect.
Reusable Class : Applying the shake class to any element triggers the animation.

Part 2: Creating the Login Popover with Tippy.js

We’ll use Tippy.js to create a clickable login popover. The popover will include:

An email input field.
A "Sign In" button.
Event listeners to handle sign-in logic and the shake effect.

Here’s the core JavaScript for setting up the popover:

Step 1: The Sign-In Class

APP.Signin = class {
    constructor($target) {
        this.values = {}; // Store any required state
        if ($target) this.$target = $target; // The DOM element triggering the popover
        this.init(); // Initialize the popover
        return this;
    }

    // Trigger the shake animation
    shake() {
        this.$tippy.classList.add('shake');
        return this;
    }

    // Handle Sign-In button clicks
    onSigninClicked(event) {
        event.preventDefault();

        // Retrieve the entered email
        let email = document.querySelector('.app-signin-email').value;

        // Error and success handlers
        let _onError = () => this.shake();
        let _onSuccess = (response) => {
            if (response.errors.length) {
                this.shake(); // Shake on error
            } else {
                // Handle successful login
                console.log('Login successful!');
            }
        };

        // Simulate a backend login request
        let form_data = new FormData();
        form_data.append('method', 'quickSignIn');
        form_data.append('email', email);

        axios({
            method: 'POST',
            url: 'path/to/server',
            data: form_data,
            headers: { 'content-type': 'application/x-www-form-urlencoded;charset=UTF-8' },
        })
            .then((response) => (typeof response.data === 'string' ? JSON.parse(response.data) : response.data))
            .then(_onSuccess)
            .catch(_onError);
    }

    // Define the HTML content of the popover
    getContent() {
        return `
            <div class="app-signin">
                <label class="form-label app-signin-form-elm app-signin-label">Account Email</label>
                <input type="text" class="app-signin-form-elm app-signin-input app-signin-email" value="" placeholder="e.g., jdoe@email.com">
                <a href="#" class="app-signin-form-elm app-signin-btn">Sign In</a>                                      
            </div>
        `;
    }

    // Initialize the popover
    init() {
        let $content = this.getContent();

        if (this.$target) {
            tippy(this.$target, {
                content: $content,
                allowHTML: true,
                trigger: 'click',
                hideOnClick: true,
                interactive: true,
                arrow: true,
                animation: 'scale',
                placement: 'bottom',
                theme: 'white',
                offset: [0, 15],
                onMount: () => {
                    this.$tippy = document.querySelector('.tippy-box'); // The popover box
                    this.$content = document.querySelector('.app-signin');
                    this.$signin_btn = document.querySelector('.app-signin-btn');
                    this.$email = document.querySelector('.app-signin-email');

                    // Add event listeners
                    this.$signin_btn.addEventListener('click', this.onSigninClicked.bind(this));
                    this.$email.addEventListener('keypress', (event) => {
                        if (event.key === 'Enter') {
                            event.preventDefault();
                            this.$signin_btn.click();
                        }
                    });

                    // Remove the shake class after animation ends
                    this.$tippy.addEventListener('animationend', () => {
                        this.$tippy.classList.remove('shake');
                    });

                    this.$email.focus(); // Auto-focus on the email input
                },
            });
        }
    }
};

// Initialize the Sign-In popover on page load
document.addEventListener('DOMContentLoaded', () => {
    new APP.Signin(document.querySelector('.app-header-control-signin'));
});

2228+ FREE RESOURCES FOR DEVELOPERS!! ❤️ 😍🥳 (updated daily)

1400+ Free HTML Templates

359+ Free News Articles

69+ Free AI Prompts

323+ Free Code Libraries

52+ Free Code Snippets & Boilerplates for Node, Nuxt, Vue, and more!

25+ Free Open Source Icon Libraries

Visit dailysandbox.pro for free access to a treasure trove of resources!

Part 3: Wiring It All Together

Simulated Backend : If you don’t have a real server, mock responses with a promise:

const mockServer = (email) =>
    new Promise((resolve, reject) => {
        setTimeout(() => {
            if (email === 'test@email.com') resolve({ errors: [] });
            else reject({ errors: ['Invalid email'] });
        }, 500);
    });

CSS for the Popover : Ensure the popover matches your design. Here’s a simple setup:

.app-signin {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.app-signin-email {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.app-signin-btn {
    background-color: #007bff;
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
}

.app-signin-btn:hover {
    background-color: #0056b3;
}

HTML Trigger Element : Add a trigger element to your HTML:

<button class="app-header-control-signin">Sign In</button>

Part 4: Test the Shaking Effect

Click the Sign In button to open the popover.
Enter an invalid email and submit. Watch the popover shake, indicating an error.
Enter a valid email and see no shaking—success!

Conclusion: A User-Friendly Error Cue

The shaking effect enhances user experience by offering a clear, intuitive error indicator without cluttering the UI with extra messages. Combined with Tippy.js for a sleek popover and vanilla JS for interactivity, this setup is clean, functional, and visually appealing.

Keep experimenting and tweaking—because great UX is all about the details!

For more tips on web development, check out DailySandbox and sign up for our free newsletter to stay ahead of the curve!

Part 2 - Enhancing Repository Descriptions with OpenAI for Maximum Impact

Art — Tue, 26 Nov 2024 03:07:57 +0000

Part 1: Enhancing the Crawler

Update your crawler.js to include OpenAI.

Step 1: Import OpenAI and Configure the API

At the top of your file, add the necessary imports and set up OpenAI:

require('dotenv').config(); // Load environment variables
const { Configuration, OpenAIApi } = require('openai');
const axios = require('axios');
const cheerio = require('cheerio');

// Configure OpenAI
const configuration = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

Step 2: Add a Function to Rewrite Descriptions

Create a function that uses OpenAI to rewrite descriptions:

const rewriteDescription = async (description) => {
    try {
        const response = await openai.createCompletion({
            model: 'text-davinci-003',
            prompt: `Rewrite the following repository description to make it more sensational and engaging:\n"${description}"`,
            max_tokens: 100,
            temperature: 0.7,
        });

        return response.data.choices[0].text.trim();
    } catch (error) {
        console.error('Error rewriting description:', error.message);
        return description; // Return the original description on error
    }
};

This function:

Sends the original description to OpenAI with a prompt to rewrite it.
Returns the enhanced version or the original if an error occurs.

Step 3: Integrate the Rewriter into the Crawler

Update your fetchRepositories function to enhance descriptions:

const fetchRepositories = async () => {
    try {
        const { data } = await axios.get(SEARCH_URL);
        const $ = cheerio.load(data);

        const repositories = [];
        for (const element of $('.repo-list-item').toArray()) {
            const repoName = $(element).find('a').text().trim();
            const repoUrl = `https://github.com${$(element).find('a').attr('href')}`;
            const repoDescription = $(element).find('.mb-1').text().trim();

            const enhancedDescription = await rewriteDescription(repoDescription);

            repositories.push({
                name: repoName,
                url: repoUrl,
                description: enhancedDescription,
            });
        }

        return repositories;
    } catch (error) {
        console.error('Error fetching repositories:', error.message);
        return [];
    }
};

Here’s the key change:

For each repository, we call rewriteDescription to enhance its description before adding it to the results.

2228+ FREE RESOURCES FOR DEVELOPERS!! ❤️ 😍🥳 (updated daily)

1400+ Free HTML Templates

359+ Free News Articles

69+ Free AI Prompts

323+ Free Code Libraries

52+ Free Code Snippets & Boilerplates for Node, Nuxt, Vue, and more!

25+ Free Open Source Icon Libraries

Visit dailysandbox.pro for free access to a treasure trove of resources!

Part 2: Displaying the Results

Finally, log the enhanced repositories:

(async () => {
    const repositories = await fetchRepositories();
    console.log('Enhanced AI-Powered JavaScript Repositories:', repositories);
})();

Part 3: Running the Script

Run your updated crawler script:

node crawler.js

You’ll see a list of AI-related JavaScript repositories with their descriptions transformed into sensational, engaging text.

Example Output

Before:

{
    "name": "ai-library",
    "url": "https://github.com/user/ai-library",
    "description": "A library for AI models in JavaScript."
}

After:

{
    "name": "ai-library",
    "url": "https://github.com/user/ai-library",
    "description": "Unlock the full potential of JavaScript with this cutting-edge AI library—designed to empower developers with next-gen models!"
}

Part 4: Enhancing and Scaling

Batch Processing : If GitHub returns a large number of repositories, implement batching to avoid exceeding OpenAI’s API limits.
Customization : Adjust the prompt or OpenAI parameters (temperature, max_tokens) to suit your desired tone and creativity level.

Save Results : Save the enhanced repositories to a JSON file for easy reference:

const fs = require('fs');

const saveToFile = (data) => {
    fs.writeFileSync('enhanced_repositories.json', JSON.stringify(data, null, 2));
    console.log('Enhanced data saved to enhanced_repositories.json');
};

// Save data after fetching
(async () => {
    const repositories = await fetchRepositories();
    saveToFile(repositories);
})();

For more tips on web development, check out DailySandbox and sign up for our free newsletter to stay ahead of the curve!

Building a Web Crawler in Node.js to Discover AI-Powered JavaScript Repos on GitHub

Art — Mon, 25 Nov 2024 03:33:16 +0000

GitHub is a treasure trove of innovative projects, especially in the ever-evolving world of artificial intelligence. But sifting through the countless repositories to find those that combine AI and JavaScript? That’s like finding gems in a vast sea of code. Enter our Node.js web crawler—a script that automates the search, extracting repository details like name, URL, and description.

In this tutorial, we’ll build a crawler that taps into GitHub, hunting down repositories that work with AI and JavaScript. Let’s dive into the code and start mining those gems.

Part 1: Setting Up the Project

Initialize the Node.js Project

Begin by creating a new directory for your project and initializing it with npm:

mkdir github-ai-crawler
cd github-ai-crawler
npm init -y

Next, install the necessary dependencies:

npm install axios cheerio

axios : For making HTTP requests to GitHub.
cheerio : For parsing and manipulating HTML, similar to jQuery.

Part 2: Understanding GitHub’s Search

GitHub provides a powerful search feature accessible via URL queries. For example, you can search for JavaScript repositories related to AI with this query:

https://github.com/search?q=ai+language:javascript&type=repositories

Our crawler will mimic this search, parse the results, and extract relevant details.

Part 3: Writing the Crawler Script

Create a file named crawler.js in your project directory and start coding.

Step 1: Import Dependencies

const axios = require('axios');
const cheerio = require('cheerio');

We’re using axios to fetch GitHub’s search results and cheerio to parse the HTML.

Step 2: Define the Search URL

const SEARCH_URL = 'https://github.com/search?q=ai+language:javascript&type=repositories';

This URL targets repositories related to AI and written in JavaScript.

2220+ FREE RESOURCES FOR DEVELOPERS!! ❤️ 😍🥳 (updated daily)

1400+ Free HTML Templates

351+ Free News Articles

67+ Free AI Prompts

315+ Free Code Libraries

52+ Free Code Snippets & Boilerplates for Node, Nuxt, Vue, and more!

25+ Free Open Source Icon Libraries

Visit dailysandbox.pro for free access to a treasure trove of resources!

Step 3: Fetch and Parse the HTML

const fetchRepositories = async () => {
    try {
        // Fetch the search results page
        const { data } = await axios.get(SEARCH_URL);
        const $ = cheerio.load(data); // Load the HTML into cheerio

        // Extract repository details
        const repositories = [];
        $('.repo-list-item').each((_, element) => {
            const repoName = $(element).find('a').text().trim();
            const repoUrl = `https://github.com${$(element).find('a').attr('href')}`;
            const repoDescription = $(element).find('.mb-1').text().trim();

            repositories.push({
                name: repoName,
                url: repoUrl,
                description: repoDescription,
            });
        });

        return repositories;
    } catch (error) {
        console.error('Error fetching repositories:', error.message);
        return [];
    }
};

Here’s what’s happening:

Fetching HTML : The axios.get method retrieves the search results page.
Parsing with Cheerio : We use Cheerio to navigate the DOM, targeting elements with classes like .repo-list-item.
Extracting Details : For each repository, we extract the name, URL, and description.

Step 4: Display the Results

Finally, call the function and log the results:

(async () => {
    const repositories = await fetchRepositories();
    console.log('AI-Powered JavaScript Repositories Found:', repositories);
})();

Part 4: Running the Crawler

Save your script and run it with Node.js:

node crawler.js

You’ll see a list of AI-related JavaScript repositories, each with its name, URL, and description, neatly displayed in your terminal.

Part 5: Enhancing the Crawler

Want to take it further? Here are some ideas:

Pagination : Add support for fetching multiple pages of search results by modifying the URL with &p=2, &p=3, etc.
Filtering : Filter repositories by stars or forks to prioritize popular projects.
Saving Data : Save the results to a file or database for further analysis.

Example for saving to a JSON file:

const fs = require('fs');
const saveToFile = (data) => {
    fs.writeFileSync('repositories.json', JSON.stringify(data, null, 2));
    console.log('Data saved to repositories.json');
};

// Call saveToFile after fetching repositories
(async () => {
    const repositories = await fetchRepositories();
    saveToFile(repositories);
})();

The Beauty of Automation

With this crawler, you’ve automated the tedious task of finding relevant repositories on GitHub. No more manual browsing or endless clicking—your script does the hard work, presenting the results in seconds.

Here is Part 2 of the setup!

For more tips on web development, check out DailySandbox and sign up for our free newsletter to stay ahead of the curve!