DeveloperBreeze

Cdn Development Tutorials, Guides & Insights

Unlock 2+ expert-curated cdn tutorials, real-world code snippets, and modern dev strategies. From fundamentals to advanced topics, boost your cdn skills on DeveloperBreeze.

Optimizing HTML Delivery in Flask with Minification and Compression

Tutorial August 20, 2024
python

Consideration:

This is a more advanced optimization and may require restructuring your application. Flask itself does not directly support asynchronous processing, so you might need to integrate with a background task manager like Celery, or use asynchronous frameworks like Quart.

Read More

Automatically add Tailwind CSS and jQuery classes to any table

Note August 03, 2024
javascript css html

To automatically add Tailwind CSS and jQuery classes to any table on a page, use the following approach.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Styling with Tailwind CSS</title>
    <!-- Include Tailwind CSS -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<!-- Example table -->
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
        <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
    </tbody>
</table>

<!-- jQuery script to apply classes -->
<script>
    $(document).ready(function() {
        $('table').each(function() {
            $(this).addClass('min-w-full bg-white border border-gray-200');
            $(this).find('thead').addClass('bg-gray-50');
            $(this).find('th').addClass('px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200');
            $(this).find('tbody').addClass('bg-white divide-y divide-gray-200');
            $(this).find('tr').addClass('hover:bg-gray-100');
            $(this).find('td').addClass('px-6 py-4 whitespace-nowrap text-sm text-gray-900');
        });
    });
</script>

</body>
</html>

Read More