- 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
Daily Issue #83 | Subscribe to DS | Daily Sandbox Pro
🛩️ 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
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
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.
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.
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.
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? |
🧰 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)
What did you think of today's issue? |
🛠️ SUGGEST A TOOL
If you have built anything that you’d like to share with the community, get with me on X @dailysandbox_ 😀
Reply