DEV Community: lionel etaba

Building a dynamic image grid with Svelte: implementing flip card transitions

lionel etaba — Sat, 23 Nov 2024 12:39:46 +0000

Creating engaging user interfaces often requires a delicate balance between functionality and visual appeal. In this article, we'll explore how to build a dynamic image grid component using Svelte that not only manages state efficiently but also provides smooth, eye-catching transitions as images swap in and out.

The Vision

Imagine a grid of images that periodically refreshes itself, with individual cards smoothly flipping to reveal new images.

This creates an engaging display perfect for showcasing team members, product catalogs, or any collection of images that's larger than what can be shown at once.

This is what I had to build this for an image grid widget showcasing a members list. The members images come from an API and grow over time.

I decided to build this with Svelte because, why not ?!

More seriously, I wanted something that will be compiled to just the necessary amount of code required and have a really small footprint on the website.
Based on that I had two options:

Build it with vanilla javascript
Use a javascript library that is going to produce a really small bundle especially given that the project is very small too.

Furthermore, I find the svelte model to be simpler and more intuitive so given the choice, especially on a small project like this one, that's what I'll default to.

As you will see a little further, svelte makes dealing with a lot of small and intricate state changes really simple compared to other solutions (again, personal taste).
There are usually less ways to mess things up.

Core Components

Our implementation consists of two main Svelte components:

App.svelte - The main component that manages the grid and orchestrates image swapping
MemberImageCard.svelte - Individual cards that handle the flip animation and image display

State Management: The Brain Behind the Grid

The heart of our widget lies in its state management. We need to track several pieces of information:

let allImages: Image[]; // All available images
let imagesToUse: Image[] = []; // Initial grid images
let imagesInUse: Image[] = []; // Current grid state
let remainingImages: Image[] = []; // Pool of unused images
let imagesSwapMap = new Map<number, Image>(); // Tracks pending swaps

Why Track Current State Separately?

You might wonder why we maintain imagesInUse separately from imagesToUse. This separation serves several crucial purposes:

It provides a single source of truth for the current grid state
It helps prevent duplicate images from appearing in the grid
It enables efficient updates without full grid re-renders
It maintains grid integrity during swapping operations

The Swap Choreography: A Detailed Look

The image swapping process is a carefully orchestrated sequence that ensures smooth transitions while maintaining grid integrity. Let's break down the switchImages function step by step:

const switchImages = () => {
  let newImagesSwapMap = new Map<number, Image>()
  let remainingImagesToUse
  let newRemainingImages: Image[]

1. Selecting Images from the Pool

First, we need to determine which images from our remaining pool will be used for swapping:

if (remainingImages.length <= NUMBER_OF_IMAGES_TO_SWITCH) {
 // If we have fewer remaining images than needed, use all of them
 remainingImagesToUse = remainingImages.slice(0);
 newRemainingImages = [];
} else {
 // Take the last N images from the remaining pool
 remainingImagesToUse = remainingImages.slice(-NUMBER_OF_IMAGES_TO_SWITCH);
 // Keep the rest for future swaps
 newRemainingImages = remainingImages.slice(0, -NUMBER_OF_IMAGES_TO_SWITCH);
}

This code handles two scenarios:

If we're running low on remaining images, we use all of them
Otherwise, we take the last N images from our pool, where N is NUMBER_OF_IMAGES_TO_SWITCH

2. Choosing Grid Positions

Next, we randomly select positions in the grid where we'll swap images:

indexesToSwap = Array(NUMBER_OF_IMAGES_TO_SWITCH)
 .fill(null)
 .map(() => Math.floor(Math.random() * NUMBER_OF_IMAGES_TO_USE));

This creates an array of random indexes within our grid size. For example, if NUMBER_OF_IMAGES_TO_SWITCH is 1 and NUMBER_OF_IMAGES_TO_USE is 16, we might get [7], indicating we'll swap the image at position 7 in the grid.

3. Preventing Duplicates

Before performing any swap, we check if the new image is already displayed:

const imageIsInUse = (image: Image) => {
 const inUse = imagesInUse.find((img: Image) => image.picture_url === img.picture_url);
 return inUse;
};

This function prevents the same image from appearing multiple times in our grid.

4. The Swap Operation

Now comes the core swapping logic:

for (let i = 0; i < indexesToSwap.length; i++) {
 let index = indexesToSwap[i];
 let imageToSwap = imagesInUse[index]; // Current image in the grid
 let imageToSwapWith = remainingImagesToUse.pop(); // New image to display

 if (imageToSwapWith && !imageIsInUse(imageToSwapWith)) {
  // Record the swap in our map
  newImagesSwapMap.set(index, imageToSwapWith);
  // Update the swap map to trigger component updates
  imagesSwapMap = newImagesSwapMap;
  // Update the grid state
  imagesInUse[index] = imageToSwapWith;
  // Add the old image back to the pool
  newRemainingImages.unshift(imageToSwap);
 } else {
  return; // Skip if the image is already in use
 }
}

Let's break down what happens in each swap:

We get the randomly selected position (index)
We identify the current image at that position (imageToSwap)
We take a new image from our pool (imageToSwapWith)
If the new image is valid and not already displayed:
- We record the swap in imagesSwapMap
- We update the grid state in imagesInUse
- We add the old image back to the pool at the beginning

5. Finalizing the State

After performing all swaps, we update our state:

remainingImages = newRemainingImages;
imagesInUse = imagesInUse;

6. Triggering the Animation

The imagesSwapMap is the key to triggering animations. When it updates, the relevant MemberImageCard components react:

$: {
 if (imagesSwapMap.has(index)) {
  frontImageLoaded = false;
  backImageLoaded = false;
  let currentFace = faceOnDisplay;

  // Load new image on the opposite face
  backImageUrl = currentFace === 'front' && imagesSwapMap.get(index).picture_url;
  frontImageUrl = currentFace === 'back' && imagesSwapMap.get(index).picture_url;

  // Trigger the flip
  faceOnDisplay = faceOnDisplay === 'front' ? 'back' : 'front';
 }
}

This reactive statement in MemberImageCard:

Detects when its position is involved in a swap
Loads the new image on the opposite face of the card
Triggers the flip animation by changing faceOnDisplay
Resets image loading states for smooth transitions

The beauty of this system is that it maintains a smooth user experience while ensuring:

No duplicate images appear in the grid
Images cycle through efficiently
The grid always maintains its structure
Animations occur smoothly and predictably
Failed swaps (due to duplicates) are handled gracefully

The Flip Animation: Making It Smooth

Each MemberImageCard component manages its own flip animation using CSS transforms and transitions. The magic happens through a combination of state tracking and CSS:

let faceOnDisplay: 'front' | 'back' = 'front';
let backImageUrl = '';
let frontImageUrl = member.picture_url;

.card {
 transform-style: preserve-3d;
 transition: all 0.6s ease-in-out;
}

.card[data-face='back'] {
 transform: rotateY(180deg);
}

When an image needs to swap, we:

Load the new image on the reverse side
Trigger the flip animation
Clean up the old image once the flip is complete

Progressive Loading for Better UX

To enhance the user experience, we implemented a progressive loading effect:

.image {
 filter: blur(20px);
 opacity: 0;
 transition:
  filter 0.3s ease-out,
  opacity 0.3s ease-out;
}

.front-loaded,
.back-loaded {
 filter: blur(0px);
 opacity: 1;
}

Images start blurred and fade in smoothly once loaded, providing a polished look and feel.

Scheduling the Dance

The regular image swaps are scheduled using Svelte's onMount lifecycle function:

onMount(() => {
 const interval = setInterval(switchImages, 3000);
 return () => clearInterval(interval);
});

Conclusion

This implementation showcases the power of Svelte's reactive capabilities combined with modern CSS transforms to create a dynamic, engaging UI component.

Beyond Traditional File Uploads: Scaling with Presigned URLs

lionel etaba — Fri, 22 Nov 2024 22:04:38 +0000

Introduction

File uploads and downloads are fundamental features of modern web applications. Whether you're building a social media platform, document management system, or enterprise application, handling file operations efficiently and securely is crucial. However, as applications scale, traditional file handling approaches can strain server resources and impact performance.

This is where Presigned URLs come in - offering an elegant solution that combines security, scalability, and performance. This guide will walk you through everything you need to know about implementing and optimizing file operations using presigned URLs.

What are Presigned URLs?

Presigned URLs are temporary, secure URLs that provide controlled access to resources in cloud storage services like Amazon S3 or Google Cloud Storage. These URLs encapsulate authentication information and permissions within the URL itself, allowing direct access to resources without requiring separate authentication credentials.

Key Benefits

Direct client-to-storage communication
Reduced server load
Enhanced security through temporary access
Improved scalability
Better performance for large files

How They Work

The presigned URL workflow consists of three main components:

URL Generation
- Server generates a signed URL using storage service credentials
- URL includes operation permissions (upload/download)
- Expiration time is embedded in the URL
Client Usage
- Client receives the presigned URL
- Performs direct operation with storage service
- No additional authentication needed
Storage Service Validation
- Validates URL signature and expiration
- Enforces permissions and access controls
- Handles the requested operation

sequenceDiagram
    participant Client
    participant Server
    participant Storage

    Client->>Server: Request upload URL
    Server->>Storage: Generate presigned URL
    Storage-->>Server: Return signed URL
    Server-->>Client: Return URL
    Client->>Storage: Upload file directly
    Storage-->>Client: Upload confirmation

Security and Performance Benefits

Security Features

Temporary Access
- URLs expire after a specified time
- No permanent credentials exposed
- Operation-specific permissions
Access Control
- User-specific access paths
- Operation limitations (read/write)
- IP restrictions possible

Performance Advantages

Reduced Server Load
- Direct client-to-storage transfer
- No proxy handling of file data
- Parallel upload support
Scalability Benefits
- Horizontally scalable
- Cloud provider infrastructure
- Built-in redundancy

Implementation Patterns

AWS S3

URL Structure Breakdown

https://s3.amazonaws.com/bucket-name/object-path?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=...

Base Components
- Domain: s3.amazonaws.com
- Bucket: bucket-name
- Object path: object-path
Security Parameters
- Algorithm: X-Amz-Algorithm
- Credentials: X-Amz-Credential
- Date: X-Amz-Date
- Expiration: X-Amz-Expires
- Signature: X-Amz-Signature

Google Cloud Storage

URL Structure

https://storage.googleapis.com/bucket-name/object-path?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=...

Base Components
- Domain: storage.googleapis.com
- Bucket name
- Object path
Security Parameters
- Algorithm: X-Goog-Algorithm
- Credentials: X-Goog-Credential
- Date: X-Goog-Date
- Expiration: X-Goog-Expires
- Signature: X-Goog-Signature

Common Use Cases and Solutions

Large File Distribution

Challenge: Distributing large software packages

Solution: Create time-limited download URLs for authenticated users with license verification

Document Management System

Challenge: Secure document storage and retrieval

Solution: Implement role-based access control with presigned URLs for specific document operations

Marketing Asset Distribution

Challenge: Secure distribution of marketing materials

Solution: Generate temporary download URLs with tracking capabilities

Practical Implementation Guide

Here's an example server-side implementation using Python, Flask, and AWS S3:

import os
from flask import Flask, jsonify, request
import boto3
from botocore.exceptions import ClientError
from functools import wraps
import jwt
from datetime import datetime, timedelta

app = Flask(__name__)
app.config['SECRET_KEY'] = os.getenv('SECRET_KEY', 'your-secret-key')

# Configure AWS credentials
s3_client = boto3.client(
    's3',
    aws_access_key_id=os.getenv('AWS_ACCESS_KEY_ID'),
    aws_secret_access_key=os.getenv('AWS_SECRET_ACCESS_KEY'),
    region_name=os.getenv('AWS_REGION', 'us-east-1')
)

BUCKET_NAME = os.getenv('S3_BUCKET_NAME')

def require_auth(f):
    """
    Decorator to require authentication for routes
    Validates JWT token and adds user data to request
    """
    @wraps(f)
    def decorated(*args, **kwargs):
        token = request.headers.get('Authorization')
        if not token:
            return jsonify({'message': 'Token is missing'}), 401
        try:
            token = token.split(' ')[1]
            data = jwt.decode(token, app.config['SECRET_KEY'], algorithms=['HS256'])
            request.user = data
        except:
            return jsonify({'message': 'Token is invalid'}), 401
        return f(*args, **kwargs)
    return decorated

def generate_presigned_url(file_key, operation='upload'):
    """
    Generate a presigned URL for uploading or downloading a file.

    Args:
        file_key (str): The key (path) where the file will be stored in S3
        operation (str): Either 'upload' or 'download'

    Returns:
        str: Presigned URL
    """
    try:
        # Set the appropriate HTTP method
        http_method = 'PUT' if operation == 'upload' else 'GET'

        # Generate the presigned URL
        url = s3_client.generate_presigned_url(
            'put_object' if operation == 'upload' else 'get_object',
            Params={
                'Bucket': BUCKET_NAME,
                'Key': file_key,
                'ContentType': 'application/octet-stream'
            },
            ExpiresIn=3600,  # URL expires in 1 hour
            HttpMethod=http_method
        )
        return url
    except ClientError as e:
        print(f"Error generating presigned URL: {e}")
        return None

@app.route('/request-upload', methods=['POST'])
@require_auth
def request_upload():
    """
    Endpoint to request a presigned URL for file upload.

    Expected request body:
    {
        "filename": "example.pdf",
        "content_type": "application/pdf"
    }
    """
    data = request.get_json()

    if not data or 'filename' not in data:
        return jsonify({'error': 'Filename is required'}), 400

    # Generate a unique file key using timestamp and user ID
    timestamp = datetime.utcnow().strftime('%Y%m%d_%H%M%S')
    user_id = request.user.get('user_id', 'anonymous')
    file_key = f"uploads/{user_id}/{timestamp}_{data['filename']}"

    # Generate the presigned URL
    presigned_url = generate_presigned_url(file_key, 'upload')

    if presigned_url:
        return jsonify({
            'upload_url': presigned_url,
            'file_key': file_key,
            'expires_in': 3600
        })
    else:
        return jsonify({'error': 'Failed to generate upload URL'}), 500

@app.route('/request-download/<file_key>', methods=['GET'])
@require_auth
def request_download(file_key):
    """
    Endpoint to request a presigned URL for file download.
    Verifies that the user has permission to access the requested file.
    """
    # Verify user has permission to access this file
    user_id = request.user.get('user_id')
    if not file_key.startswith(f"uploads/{user_id}/"):
        return jsonify({'error': 'Access denied'}), 403

    presigned_url = generate_presigned_url(file_key, 'download')

    if presigned_url:
        return jsonify({
            'download_url': presigned_url,
            'expires_in': 3600
        })
    else:
        return jsonify({'error': 'Failed to generate download URL'}), 500

@app.route('/files', methods=['GET'])
@require_auth
def list_files():
    """
    Endpoint to list all files belonging to the authenticated user.
    """
    user_id = request.user.get('user_id')
    prefix = f"uploads/{user_id}/"

    try:
        response = s3_client.list_objects_v2(
            Bucket=BUCKET_NAME,
            Prefix=prefix
        )

        files = []
        if 'Contents' in response:
            for obj in response['Contents']:
                files.append({
                    'key': obj['Key'],
                    'size': obj['Size'],
                    'last_modified': obj['LastModified'].isoformat()
                })

        return jsonify({
            'files': files
        })
    except ClientError as e:
        return jsonify({'error': 'Failed to list files'}), 500

@app.route('/files/<file_key>', methods=['DELETE'])
@require_auth
def delete_file(file_key):
    """
    Endpoint to delete a file.
    Verifies that the user has permission to delete the requested file.
    """
    user_id = request.user.get('user_id')
    if not file_key.startswith(f"uploads/{user_id}/"):
        return jsonify({'error': 'Access denied'}), 403

    try:
        s3_client.delete_object(
            Bucket=BUCKET_NAME,
            Key=file_key
        )
        return jsonify({'message': 'File deleted successfully'})
    except ClientError as e:
        return jsonify({'error': 'Failed to delete file'}), 500

if __name__ == '__main__':
    app.run(debug=True)

Best Practices and Considerations

Exploring the efficiency and security benefits of Presigned URLs for managing file operations at scale

Security Best Practices

URL Generation
- Use short expiration times (typically 1 hour or less)
- Implement proper access control and user authentication
- Validate file types and sizes before generating URLs
- Generate unique file paths to prevent overwrites
Storage Configuration
- Configure bucket policies to restrict access
- Enable server-side encryption
- Set up access logging
- Configure CORS settings appropriately
- Implement bucket lifecycle rules
Access Control
- Implement user-specific paths
- Validate user permissions before generating URLs
- Use separate buckets for different security levels
- Implement IP-based restrictions when necessary

Error Handling

Common Errors
- Expired URLs
- Invalid signatures
- Access denied
- Rate limiting
- File size exceeded
Error Response Strategies
- Provide clear error messages
- Implement automatic retry for temporary failures
- Log errors for monitoring
- Handle cleanup for failed uploads

Performance Optimization

Client-Side Optimization

Upload Optimization
- Implement chunked uploads for large files
- Add upload progress tracking
- Validate file size and type before upload
- Implement retry mechanism with exponential backoff
- Use concurrent uploads for multiple files
- Compress files when appropriate
Download Optimization
- Implement range requests for large files
- Add download progress tracking
- Handle connection interruptions
- Cache frequently accessed files
- Implement progressive loading for media files

Server-Side Optimization

URL Generation
- Implement caching for frequently accessed files
- Use appropriate URL expiration times
- Batch URL generation for multiple files
- Implement rate limiting
- Use async operations where possible
Resource Management
- Monitor usage patterns
- Implement automatic cleanup of expired files
- Use appropriate instance types for URL generation
- Configure auto-scaling based on demand
- Optimize database queries for file metadata
Network Optimization
- Use regional endpoints
- Implement CDN for frequently accessed files
- Configure appropriate timeout values
- Monitor bandwidth usage
- Implement request queuing for high-load scenarios

Solution Comparison

Feature	Presigned URLs	Traditional Upload
Server Load	Low	High
Implementation Complexity	Medium	Low
Scalability	High	Low
Cost	Low	High
Security Control	High	High
Client Complexity	Medium	Low
Performance	High	Low
Bandwidth Usage	Optimized	High

Conclusion

Presigned URLs offer a powerful solution for handling file operations in modern web applications. They provide an excellent balance of security, performance, and scalability while reducing server load and operational costs.

Key Takeaways

Security
- Temporary access reduces security risks
- Fine-grained control over file operations
- No exposure of cloud credentials to clients
Performance
- Direct client-to-storage transfer
- Reduced server load
- Scalable architecture
Implementation
- Relatively straightforward to implement
- Flexible integration options
- Strong ecosystem support
Cost-Effectiveness
- Reduced server bandwidth usage
- Lower computational requirements
- Optimized storage costs
- Monitor for unusual patterns