🔥 How to Become a Very Expensive Programmer

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

Hello Developers!

Discover how to use CSS size units for smarter web design and learn what it takes to become a very expensive programmer. Get your Node.js app production-ready with our tutorial, automate your browser with 20 JavaScript scripts, and master WebSockets in Node.js.

Quick Wins:

• Build a Blockchain App: Create a transactions app with React.

• Vue 3 Back-to-Top Button: A 1-minute guide to add this handy feature.

Tools to Explore:

• draggable-slider: Make carousels draggable on desktop while preserving native gestures.

• Kinesis.js: Create animations driven by user interactions.

• Diff Text: Quickly compare differences between two text blocks.

• cherry-studio: A desktop client supporting multiple LLM providers.

Dive in and keep coding!

• How to Use CSS Size Units for Better Web Design

• How to Become a Very Expensive Programmer

• A Tutorial to Make your Node.js App Production-Ready

• 20 JavaScript Scripts To Automate Your Browser Tasks

• Mastering WebSockets in Node.js

• Build a Blockchain Transactions App With React

More news here →

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

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.

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' });
};

... //see full article for complete details
</script>

How It Works

1. Scroll Detection: A scroll event listener checks if the user has scrolled more than 200 pixels. If true, isVisible becomes true, displaying the button.

2. Smooth Scroll: Clicking the button triggers the scrollToTop function, which uses window.scrollTo with a behavior of smooth.

3. Lifecycle Hooks: onMounted and onBeforeUnmount ensure that event listeners are properly managed to prevent memory leaks.

More code snippets here →

• draggable-slider - a small lib that makes carousels draggable on desktop while keeping native wheel / scroll gestures

• Kinesis.js - A library that offers a suite of components to create engaging animations and transformations based on user interactions like mouse movements, scroll events, and even audio input.

• Diff Text - A simple diff checker tool to quickly find the difference between two blocks of text.

• cherry-studio - a desktop client that supports for multiple LLM providers

More code libs 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_ 😀