🔥 Discover the most efficient, dependency-free method to copy text to memory

In partnership with

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

Hey developers! This issue is packed with CSS gems, Git hacks, and tools to elevate your projects. Let’s dive in:

• CSS Tricks: Halftone effects, parent selectors with :has(), and mastering overflow: clip.

• Git Essentials: 20 command-line tricks and tips to streamline Git workflows.

• GitHub Actions: Make workflows modular and efficient with a deep dive into setup best practices.

• Tutorial of the Day: Learn how to copy text to the clipboard in Vanilla JavaScript.

• Node Toolbox Picks: 5 top tools to enhance your projects:

  • sortable: Lightweight JavaScript table sorter.

  • sentry: Error tracking and performance monitoring.

  • vue-data-ui: Data visualization components for Vue.

  • posthog: Self-hosted web and product analytics.

  • dub: Open-source link management for marketing teams.

• Pure CSS Halftone Effect in 3 Declarations.

• CSS :has() - The Parent Selector We've Always Wanted.

• Learn how overflow: clip works in CSS.

• 20 Git Command-Line Tricks Every Developer Should Know

• Making GitHub Actions Workflows More Modular and Efficient: A Deep Dive into My Setup

More news here →

_{From our sponsor}

Save 1 hour every day with Fyxer AI

Fyxer AI automates daily email and meeting tasks through:

• Email Organization: Fyxer puts your email into folders so you read the important ones first.

• Automated Email Drafting: Drafts replies as if they were written by you; convincing, concise and with perfect spelling in every language.

• Meeting Notes: Stay focused in meetings while Fyxer takes notes, writes summaries and drafts follow-up emails.

Fyxer AI is even adaptable to teams!

Setting up Fyxer AI takes just 30 seconds with Gmail or Outlook.

Free 7 Day Trial

Copy to Clipboard in Vanilla JavaScript

This tutorial demonstrates how to use the Clipboard API to copy text to the clipboard. It’s a simple one-liner that enhances user interactions, such as enabling "copy" buttons in your applications.

1. Define the Function

I’ll use the Clipboard API’s writeText method, which asynchronously copies text to the clipboard

const copyToClipboard = text => navigator.clipboard.writeText(text);

How it works:

• navigator.clipboard.writeText: Copies the specified string to the clipboard.

• Asynchronous API: Returns a Promise, allowing you to handle success or errors.

2. Use the Function

You can call the function with any text you want to copy.

// Copies 'Hello World!' to the clipboard
copyToClipboard('Hello World!'); 

3. Adding a Copy Button

Here’s how you can use this function in a web application:

<button onclick="copyToClipboard('Text to copy')">Copy Text</button>
<script>
  const copyToClipboard = text => navigator.clipboard.writeText(text);
</script>

When the button is clicked, the text "Text to copy" will be copied to the clipboard.

4. Handling Promises

You can add success or error handling using .then() and .catch()

copyToClipboard('Hello World!')
  .then(() => console.log('Copied successfully!'))
  .catch(err => console.error('Failed to copy:', err));

Use Cases

• Copy Buttons: Create buttons to let users quickly copy data.

• Sharing: Facilitate copying of URLs, code snippets, or other text for sharing.

• Enhanced UX: Improve interactions in text-based applications.

More code snippets here →

• sortable - a tiny, vanilla/plain JavaScript table sorter.

• sentry - a developer-first error tracking and performance monitoring platform.

• vue-data-ui - a user-empowering data visualization Vue components library for eloquent data storytelling.

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

• dub - the open-source link management infrastructure for modern marketing teams.

More code libs here →

_{From our sponsor}

Instantly add file uploads to your app with Pinata’s API

Pinata’s File API lets developers integrate file uploads and retrieval in just minutes. No complex setup, no configuration headaches—just fast and scalable file management.

Start building!

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