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

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

PLUS: Stylish Error Effects, Self-Hosted Analytics, and Cutting-Edge Tools in Today’s Coding Toolbox

In partnership with

🛩️ QUICK SUMMARY

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.

🎆 NEWS, INNOVATIONS, TRENDS, TUTORIALS

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.

💻 TUTORIAL OF THE DAY

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.

  1. 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.

  1. 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

🤖 AI GENERATED, OR REAL?

What do you think?

Login or Subscribe to participate in polls.

🧰 CODING TOOLBOX

  • 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

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.

#️⃣ DO YOU AI PROMPT? (picture of the day)

Midjourney

Blonde girl and bustling street oil painting style

📣 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!

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

  • 1400+ HTML Templates

  • 302+ News Articles

  • 71+ AI Prompts

  • 271+ Free Code Libraries

  • 38+ Code Snippets & Boilerplates for Node, Nuxt, Vue, and more!

  • 24+ Open Source Icon Libraries

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

(use your email to login)

🛠️ SUGGEST A TOOL

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

Reply

or to participate.