🔥 Daily Digest: Unlock Next.js Superpowers, JavaScript Array Secrets, and Vue Button Magic

In partnership with

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

Hey folks! This issue is packed with tools, effects, and advanced JavaScript techniques to sharpen your skills. Let’s get started:

• Pika 1.5: Simplify video creation with this groundbreaking tool by Stanford Ph.D. students.

• Next.js Superpowers: Explore Payload for full-stack backend magic.

• Enterprise UI: Check out Choerodon-UI for scalable React-based design.

• PostHog Analytics: Self-hosted product analytics with A/B testing and session recording.

• Shaking Error Effect: Add stylish error animations to your login popovers.

• JS Promises: Master mapping over promises for cleaner async workflows.

• Vue Buttons: Create 7 stunning button components with Vue, VueUse, and TailwindCSS.

• Array Algorithms: Understand the hidden logic behind JavaScript array methods.

• Nuxt Toasters: Build custom toast notifications with Vue Toastification.

• Mapping Over Promises in JavaScript

• 7 Beautiful Next-Level Button Components with Vue, VueUse, and TailwindCSS

• Algorithms Behind JavaScript Array Methods

• Custom Toasters in Nuxt with Vue Toastification

More news here →

_{From our sponsors}

The future of presentations, powered by AI

Gamma is a modern alternative to slides, powered by AI. Create beautiful and engaging presentations in minutes. Try it free today.

How to Add a "Shaking" Error Effect to Login Popovers with Style

Imagine a login popover that shakes slightly when the user makes a mistake, delivering a clear and stylish cue without cluttering the interface. Adding this simple yet effective feedback mechanism can make your application both intuitive and visually engaging.

This tutorial will guide you through adding a "shaking" effect to a login popover using vanilla JavaScript, CSS animations, and Tippy.js for an elegant popover experience.

1. Define the Shake Animation with CSS

We’ll create a reusable @keyframes rule to achieve a shaking effect.

@keyframes shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
.shake {
    animation: shake 0.5s ease-in-out;
}

This animation moves the popover slightly left and right, providing a clear visual cue when errors occur.

2. Create the Login Popover with Tippy.js

Use Tippy.js to build an interactive popover and trigger the shake animation on error.

document.addEventListener('DOMContentLoaded', () => {
    const signInButton = document.querySelector('.signin-trigger');

    tippy(signInButton, {
        content: `
            <div class="login-popover">
                <input type="text" class="email-input" placeholder="Enter your email" />
                <button class="submit-btn">Sign In</button>
            </div>
        `,
        allowHTML: true,
        interactive: true,
        placement: 'bottom',
        onMount(instance) {
            const popover = instance.popper.querySelector('.tippy-box');
            const emailInput = popover.querySelector('.email-input');
            const submitBtn = popover.querySelector('.submit-btn');

            submitBtn.addEventListener('click', () => {
                if (emailInput.value.trim() === '') {
                    popover.classList.add('shake');
                    popover.addEventListener('animationend', () => {
                        popover.classList.remove('shake');
                    }, { once: true });
                } else {
                    console.log('Successful login!');
                }
            });
        },
    });
});

• Popover Content: The email input and "Sign In" button are embedded directly in the popover.

• Shake Trigger: The shake class is added when the user submits an empty input and removed after the animation ends.

3. Style the Popover

Add some CSS to make the popover visually appealing:

.login-popover {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.email-input {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    width: 100%;
}

.submit-btn {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    font-size: 1rem;
}
.submit-btn:hover {
    background-color: #0056b3;
}

• Input Styling: Clean and minimal for the email input.

• Button Styling: A responsive and user-friendly design for the "Sign In" button.

The shaking effect leverages intuitive visual feedback, making it immediately clear that an error occurred. Coupled with Tippy.js’s smooth popover functionality, the result is a polished and delightful user experience.

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

More tutorials here →

• Pika 1.5 - founded by two Stanford Ph.D students who felt making videos was too damn hard. So, they decided to make it easier for anyone to create video on command

• payload - fullstack Next.js framework, giving you instant backend superpowers

• choerodon-ui - An enterprise UI framework and react-based implementation

• posthog - product analytics, session recording, feature flagging and A/B testing that you can self-host

More code libs here →

_{From our sponsors}

Why struggle with file uploads? Pinata’s File API is your fix

Simplify your development workflow with Pinata’s File API. Add file uploads and retrieval to your app in minutes, without the need for complicated configurations. Pinata provides simple file management so you can focus on creating great features.

Build now!

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_ 😀